Vue type declaration not found

[divine]

Describe the bug
There is no typing for the Vue.js

To Reproduce
Steps to reproduce the behavior:

1. Insert: import IframeResizer from '@iframe-resizer/vue/sfc'
2. See error: ts: Cannot find module '@iframe-resizer/vue/sfc' or its corresponding type declarations.

Expected behavior
No errors.

[davidjbradshaw]

Yep, it’s a bit beyond my knowledge of Vue and typescript. If you would like to create a PR for them, I would be happy to include them.

Their are typings for the regular version, which I expect covers most of what is required.

https://github.com/davidjbradshaw/iframe-resizer/blob/master/packages/parent/index.d.ts

and also React

https://github.com/davidjbradshaw/iframe-resizer/blob/master/packages/react/index.d.ts

[davidjbradshaw]

@divine I have tried to fix your PR building in Rollup, but just spent half a day going around in circles and ended up where I started, but with a lot more config in the project. See (#1370).

Basically Rollup objects to TS in .vue files and it is beyond my knowledge of TS and Vue to fix. I have tried every suggestion I could find on StackOverflow, but none of the suggestions help.

[divine]

Hello,

Looks Vue team has discontinued supporting https://github.com/vuejs/rollup-plugin-vue and that's reason why it's not working. Sadly.

Honestly, I've given up on this for now...

I've tried to fix this as well so looks like you'll need to move away from your current build setup and use Vite instead?

Probably, you'll need to move your bundler to something new like https://github.com/vitejs/awesome-vite?tab=readme-ov-file#vanilla

Any plans to move to new tech?

Thanks!

[davidjbradshaw]

I looked at Vite, but it has its own limitations as well. Opinionated tooling is great up until the point were want to do something different than what was envisioned by the author.

The current set up allows me to build lots of different packages from a relatively simple script. With Vite, I would need to break everything out, have separate build scripts for each package and then add something like Lerna to manage the resulting complexity, which is rather more than I’m after. As, at least when I last looked at it, Vite only supported one output target.

I guess the other solution is to have a separate types file for the JS version. Is that something that can be done with .vue file?

[divine]

Hello,

Using a separate types file gives another error:

[!] (plugin rpt2) RollupError: packages/vue/iframe-resizer.vue?vue&type=script&setup=true&lang.ts (6:12): Expected ',', got '{' (Note that you need plugins to import files that are not JavaScript)
packages/vue/iframe-resizer.vue?vue&type=script&setup=true&lang.ts (6:12)
4: import connectResizer from '@iframe-resizer/core'
5: import { onBeforeUnmount, onMounted, ref } from 'vue'
6: import type { IFrameObject } from './types'
               ^

So the only solution is probably move to Vite? Here is an example using monorepo https://github.com/vitejs/vite-ts-monorepo-rfc

I can understand you don't want to waste time moving to a new build system but without Vue integration I wouldn't able to use this library. Using a Vue 2 component in Vue 3 is not performant and I'll probably just move to my own component.

I don't want to spend time checking the breaking changes for the library as I just want to install once and forget it about until the next upgrade of our site.

I hope this all makes sense and you'll consider somehow fixing this build issue.

Thanks!

[davidjbradshaw]

Hi,

I had a look at that link, but it is just an RFC, rather than a supported feature and actively warns against using it in production, which is a shame. It’s unfortunate that Vue has decided to tie itself to a single build tool.

When I suggested using an external types file, I was thinking they would be exported with the package, but not used internally. That way we can build it with Rollup, but still consume the published package with TypeScript. Would you be able to push your changes on your branch, as I’m interested to take a look.

Happy New Year.