primevue icon indicating copy to clipboard operation
primevue copied to clipboard

Multiple Components: Augment `vue` using `declare module 'vue'` instead of `declare module '@vue/runtime-core'` (and `declare module 'vue/types/vue'`) to avoid compilebreaks

Open sceee opened this issue 1 year ago • 1 comments

Describe the bug

primevue currently augments vue types using declare module '@vue/runtime-core' instead of the supposed declare module 'vue'.

This causes weird compilebreaks in combination with other popular packages (like vue-router - see this changelog entry and vue-i18n) that use the correct declare module 'vue' to augment vue types. The official documentation states this here how to augment vue types correctly.

This is currently an issue in these components/code locations:

  • https://github.com/primefaces/primevue/blob/6e55ee9514af77125ff50f50e59f8e766dce1367/packages/primevue/src/toastservice/ToastService.d.ts#L42-L52
  • https://github.com/primefaces/primevue/blob/6e55ee9514af77125ff50f50e59f8e766dce1367/packages/primevue/src/dialogservice/DialogService.d.ts#L29-L39
  • https://github.com/primefaces/primevue/blob/6e55ee9514af77125ff50f50e59f8e766dce1367/packages/core/src/config/PrimeVue.d.ts#L164-L178
  • https://github.com/primefaces/primevue/blob/6e55ee9514af77125ff50f50e59f8e766dce1367/packages/primevue/src/confirmationservice/ConfirmationService.d.ts#L30-L40

Above all of these locations, there is an augmentation declare module 'vue/types/vue' which should also be removed as of my understanding.

So I would suggest to remove the above code lines (declare module 'vue/types/vue') and instead change the declare module '@vue/runtime-core' locations to declare module 'vue' instead.

Reproducer

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-nhn9pu?file=src%2FApp.vue

PrimeVue version

4.0.4

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Have a typescript project that uses vue-i18n (and potentially vue-router):

  1. Add a translation to a component {{ $t('some.translation') }}
  2. Build the project using typescript
  3. See the build error

An error like error TS2339: Property '$t' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { xxxxxxxx: typeof xxxxxxxx; xxxxxxxx: typeof xxxxxx; ... 4 more ...; xxxxxx: typeof xxxxxx; }, ... 17 more ..., {}>' is logged.

Expected behavior

primevue augments vue types as described in the official docs using declare module 'vue' (instead of declare module 'vue/types/vue' or declare module '@vue/runtime-core').

sceee avatar Aug 07 '24 14:08 sceee

i think primevue 3.53.0 is affected as well. i dropped a comment on the pull-request asking for a backport to v3 (https://github.com/primefaces/primevue/pull/6207#issuecomment-2294948334). thanks!

zyro23 avatar Aug 17 '24 19:08 zyro23