fix(types): only augment module 'vue'

nuxt/nuxt#28542

Author: KaelWD

packages/vuetify/build/rollup.types.config.mjs

@@ -83,7 +83,7 @@ async function getShims () {
     )).join('\n')
 
   return (await fs.readFile(fileURLToPath(new URL('../src/shims.d.ts', import.meta.url)), { encoding: 'utf8' }))
-    .replaceAll(/^\s*\/\/ @skip-build\s+.*$/gm, '')
+    .replaceAll(/^\s*\/\/ @skip-build\s[\s\S]*?\s$/gm, '')
     .replace(/^\s*\/\/ @generate-components$/gm, components)
 }
 

packages/vuetify/cypress/templates/generateStories.tsx

@@ -2,7 +2,8 @@
  * Utilities for generating formatted mount functions
  * Some utility functions for mounting these generated examples inside of tests
  */
-import { FunctionalComponent, JSXComponent } from 'vue'
+import { FunctionalComponent } from 'vue'
+import { JSXComponent } from '@/composables'
 
 const _ = Cypress._
 

packages/vuetify/src/composables/icons.tsx

@@ -6,7 +6,11 @@ import { computed, inject, unref } from 'vue'
 import { consoleWarn, defineComponent, genericComponent, mergeDeep, propsFactory } from '@/util'
 
 // Types
-import type { InjectionKey, JSXComponent, PropType, Ref } from 'vue'
+import type { ComponentPublicInstance, FunctionalComponent, InjectionKey, PropType, Ref } from 'vue'
+
+export type JSXComponent<Props = any> =
+  | { new (): ComponentPublicInstance<Props> }
+  | FunctionalComponent<Props>
 
 export type IconValue =
   | string

packages/vuetify/src/composables/index.ts

@@ -16,6 +16,6 @@ export type { DefaultsInstance } from './defaults'
 export type { DisplayBreakpoint, DisplayInstance, DisplayThresholds } from './display'
 export type { SubmitEventPromise } from './form'
 export type { GoToInstance } from './goto'
-export type { IconAliases, IconProps, IconSet, IconOptions } from './icons'
+export type { IconAliases, IconProps, IconSet, IconOptions, JSXComponent } from './icons'
 export type { LocaleInstance, LocaleMessages, RtlInstance, LocaleOptions, RtlOptions } from './locale'
 export type { ThemeDefinition, ThemeInstance } from './theme'

packages/vuetify/src/globals.d.ts

@@ -1,7 +1,8 @@
 import 'vue/jsx'
 
 // Types
-import type { Events, VNode } from 'vue'
+import type { ComponentInjectOptions, ComponentOptionsMixin, EmitsOptions, SlotsType } from 'vue'
+import type { ComputedOptions, Events, MethodOptions, VNode } from 'vue'
 import type { TouchStoredHandlers } from './directives/touch'
 
 declare global {
@@ -98,7 +99,7 @@ declare global {
   }
 }
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface ComponentCustomProperties {
     _: ComponentInternalInstance
   }
@@ -112,8 +113,21 @@ declare module '@vue/runtime-core' {
     aliasName?: string
   }
 
-  // eslint-disable-next-line max-len
-  export interface ComponentOptionsBase<Props, RawBindings, D, C extends ComputedOptions, M extends MethodOptions, Mixin extends ComponentOptionsMixin, Extends extends ComponentOptionsMixin, E extends EmitsOptions, EE extends string = string, Defaults = {}> {
+  export interface ComponentOptionsBase<
+    Props,
+    RawBindings,
+    D,
+    C extends ComputedOptions,
+    M extends MethodOptions,
+    Mixin extends ComponentOptionsMixin,
+    Extends extends ComponentOptionsMixin,
+    E extends EmitsOptions,
+    EE extends string = string,
+    Defaults = {},
+    I extends ComponentInjectOptions = {},
+    II extends string = string,
+    S extends SlotsType = {}
+  > {
     aliasName?: string
   }
 
@@ -125,9 +139,7 @@ declare module '@vue/runtime-core' {
     ctx: ComponentInternalInstance | null
     ssContent: VNode | null
   }
-}
 
-declare module '@vue/runtime-dom' {
   type UnionToIntersection<U> =
     (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
 

packages/vuetify/src/shims.d.ts

@@ -1,13 +1,19 @@
 /* eslint-disable local-rules/sort-imports */
 
 import 'vue/jsx'
-import type { FunctionalComponent, UnwrapNestedRefs, VNodeChild } from 'vue'
+import type { UnwrapNestedRefs, VNodeChild } from 'vue'
 
+// These already exist in scope in the final bundle
 // @skip-build
-import type { ComponentPublicInstance } from 'vue'
-
-// @skip-build
-import type { DateInstance, DefaultsInstance, DisplayInstance, IconOptions, LocaleInstance, RtlInstance, ThemeInstance } from './framework'
+import type {
+  DateInstance,
+  DefaultsInstance,
+  DisplayInstance,
+  IconOptions,
+  LocaleInstance,
+  RtlInstance,
+  ThemeInstance,
+} from './framework'
 
 declare global {
   namespace JSX {
@@ -16,25 +22,8 @@ declare global {
     }
   }
 }
-interface _GlobalComponents {
-  // @generate-components
-}
-declare module 'vue' {
-  export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>
-  export interface GlobalComponents extends _GlobalComponents {}
-}
 
-declare module '@vue/runtime-dom' {
-  export interface HTMLAttributes {
-    $children?: VNodeChild
-  }
-  export interface SVGAttributes {
-    $children?: VNodeChild
-  }
-  export interface GlobalComponents extends _GlobalComponents {}
-}
-
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   interface Vuetify {
     defaults: DefaultsInstance
     display: UnwrapNestedRefs<DisplayInstance>
@@ -47,5 +36,13 @@ declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
     $vuetify: Vuetify
   }
-  export interface GlobalComponents extends _GlobalComponents {}
+  export interface HTMLAttributes {
+    $children?: VNodeChild
+  }
+  export interface SVGAttributes {
+    $children?: VNodeChild
+  }
+  export interface GlobalComponents {
+    // @generate-components
+  }
 }