feat: vue 3.3 support structural change (#96)

Author: productdevbook

package.json

@@ -61,15 +61,15 @@
     "vite": "^4.3.3",
     "vite-plugin-dts": "^2.3.0",
     "vitest": "^0.30.1",
-    "vue": "^3.2.47"
+    "vue": "^3.3.0-beta.5"
   },
   "packageManager": "[email protected]",
   "overrides": {
-    "vue": "^3.2.47"
+    "vue": "3.3.0-beta.5"
   },
   "pnpm": {
     "overrides": {
-      "vue": "^3.2.47",
+      "vue": "3.3.0-beta.5",
       "vite": "^4.3.1"
     }
   }

packages/components/aspect-ratio/package.json

@@ -33,7 +33,7 @@
     "lint:fix": "eslint . --fix"
   },
   "peerDependencies": {
-    "vue": "^3.2.47"
+    "vue": "^3.3.0-beta.5"
   },
   "dependencies": {
     "@oku-ui/primitive": "workspace:^",

packages/components/aspect-ratio/src/aspect-ratio.ts

@@ -1,11 +1,13 @@
 import type { ComponentPublicInstance } from 'vue'
 import { computed, defineComponent, h, ref } from 'vue'
-import type { ComponentPropsWithoutRef, ElementRef } from '@oku-ui/primitive'
+import type { ElementRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
-import type { MergeProps } from '@oku-ui/utils'
 
-type PrimitiveAspectRatioProps = ComponentPropsWithoutRef<typeof Primitive.div>
-type AspectRatioElement = ElementRef<typeof Primitive.div>
+interface AspectRatioProps extends PrimitiveProps {
+  ratio?: number
+}
+
+type AspectRatioElement = ElementRef<'div'>
 
 const NAME = 'AspectRatio'
 
@@ -19,7 +21,7 @@ const AspectRatio = defineComponent({
     },
   },
   setup(props, { attrs, slots, expose }) {
-    const { style, ...aspectRatioProps } = attrs as PrimitiveAspectRatioProps
+    const { style, ...aspectRatioProps } = attrs as AspectRatioElement
     const innerRef = ref<ComponentPublicInstance>()
 
     expose({
@@ -61,11 +63,10 @@ const AspectRatio = defineComponent({
   },
 })
 
-type AspectRatioProps = MergeProps<typeof AspectRatio, PrimitiveAspectRatioProps>
-
-const OkuAspectRatio = AspectRatio as typeof AspectRatio & (new () => { $props: AspectRatioProps })
+// TODO: https://github.com/vuejs/core/pull/7444 after delete
+type _AspectRatioProps = MergeProps<AspectRatioProps, AspectRatioElement>
 
-type OkuAspectRatioElement = Omit<InstanceType<typeof AspectRatio>, keyof ComponentPublicInstance>
+const OkuAspectRatio = AspectRatio as typeof AspectRatio & (new () => { $props: _AspectRatioProps })
 
 export { OkuAspectRatio }
-export type { AspectRatioProps, OkuAspectRatioElement }
+export type { AspectRatioProps, AspectRatioElement }

packages/components/aspect-ratio/src/index.ts

@@ -3,5 +3,5 @@ export {
 } from './aspect-ratio'
 export type {
   AspectRatioProps,
-  OkuAspectRatioElement,
+  AspectRatioElement,
 } from './aspect-ratio'

packages/components/avatar/package.json

@@ -33,7 +33,7 @@
     "lint:fix": "eslint . --fix"
   },
   "peerDependencies": {
-    "vue": "^3.2.47"
+    "vue": "^3.3.0-beta.5"
   },
   "dependencies": {
     "@oku-ui/primitive": "workspace:^",

packages/components/avatar/src/avatar.ts

@@ -1,11 +1,10 @@
 import type { ComponentPublicInstance, PropType } from 'vue'
 import { computed, defineComponent, h, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'
-import type { ComponentPropsWithoutRef } from '@oku-ui/primitive'
+import type { ElementRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
 import { createProvideScope } from '@oku-ui/provide'
 import { useCallbackRef } from '@oku-ui/use-callback-ref'
-import type { MergeProps } from '@oku-ui/utils'
 
 function useImageLoadingStatus(src?: string) {
   const loadingStatus = ref<ImageLoadingStatus>('idle')
@@ -54,9 +53,11 @@ type AvatarProvideValue = {
 
 const [AvatarProvider, useAvatarInject] = createAvatarProvide<AvatarProvideValue>(AVATAR_NAME)
 
-type AvatarElement = ComponentPropsWithoutRef<typeof Primitive.span>
-type PrimitiveSpanProps = ComponentPropsWithoutRef<typeof Primitive.span>
-type AvatarProps = MergeProps<typeof Avatar, PrimitiveSpanProps>
+type AvatarElement = ElementRef<'span'>
+
+interface AvatarProps extends PrimitiveProps {
+  scopeAvatar?: Scope
+}
 
 const Avatar = defineComponent({
   name: AVATAR_NAME,
@@ -68,7 +69,7 @@ const Avatar = defineComponent({
     },
   },
   setup(props, { attrs, slots, expose }) {
-    const { ...avatarProps } = attrs as AvatarProps
+    const { ...avatarProps } = attrs as AvatarElement
     const innerRef = ref()
     const imageLoadingStatus = ref<ImageLoadingStatus>('idle')
 
@@ -103,9 +104,12 @@ const Avatar = defineComponent({
 
 const IMAGE_NAME = 'AvatarImage'
 
-type AvatarImageElement = ComponentPropsWithoutRef<typeof Primitive.img>
-type PrimitiveImgProps = ComponentPropsWithoutRef<typeof Primitive.img>
-type AvatarImageProps = MergeProps<typeof AvatarImage, PrimitiveImgProps>
+type AvatarImageElement = ElementRef<'img'>
+
+interface AvatarImageProps extends PrimitiveProps {
+  onLoadingStatusChange?: (status: ImageLoadingStatus) => void
+  scopeAvatar?: Scope
+}
 
 const AvatarImage = defineComponent({
   name: IMAGE_NAME,
@@ -122,7 +126,7 @@ const AvatarImage = defineComponent({
     },
   },
   setup(props, { attrs, slots, expose }) {
-    const { src, ...imageProps } = attrs as AvatarImageProps
+    const { src, ...imageProps } = attrs as AvatarImageElement
     const inject = useAvatarInject(IMAGE_NAME, props.scopeAvatar)
     const innerRef = ref<ComponentPublicInstance>()
     const imageLoadingStatus = useImageLoadingStatus(src)
@@ -169,10 +173,11 @@ const AvatarImage = defineComponent({
 
 const FALLBACK_NAME = 'AvatarFallback'
 
-type PrimitiveAvatarFallbackProps = ComponentPropsWithoutRef<typeof Primitive.span>
-type PrimitiveSpanElement = ComponentPropsWithoutRef<typeof Primitive.span>
+type AvatarFallbackElement = ElementRef<'span'>
 
-type AvatarFallbackProps = MergeProps<typeof AvatarFallback, PrimitiveAvatarFallbackProps>
+interface AvatarFallbackProps extends PrimitiveProps {
+  delayMs?: number
+}
 
 const AvatarFallback = defineComponent({
   name: FALLBACK_NAME,
@@ -228,20 +233,21 @@ const AvatarFallback = defineComponent({
     }
 
     return originalReturn as unknown as {
-      innerRef: PrimitiveSpanElement
+      innerRef: AvatarFallbackElement
     }
   },
 })
 
 /* ----------------------------------------------------------------------------------------------- */
 
-const OkuAvatar = Avatar as typeof Avatar & (new () => { $props: AvatarProps })
-const OkuAvatarImage = AvatarImage as typeof AvatarImage & (new () => { $props: AvatarImageProps })
-const OkuAvatarFallback = AvatarFallback as typeof AvatarFallback & (new () => { $props: AvatarFallbackProps })
+// TODO: https://github.com/vuejs/core/pull/7444 after delete
+type _OkuAvatarProps = MergeProps<AvatarProps, AvatarElement>
+type _OkuAvatarImageProps = MergeProps<AvatarImageProps, AvatarImageElement>
+type _OkuAvatarFallbackProps = MergeProps<AvatarFallbackProps, AvatarFallbackElement>
 
-type OkuAvatarElement = Omit<InstanceType<typeof Avatar>, keyof ComponentPublicInstance>
-type OkuAvatarImageElement = Omit<InstanceType<typeof AvatarImage>, keyof ComponentPublicInstance>
-type OkuAvatarFallbackElement = Omit<InstanceType<typeof AvatarFallback>, keyof ComponentPublicInstance>
+const OkuAvatar = Avatar as typeof Avatar & (new () => { $props: _OkuAvatarProps })
+const OkuAvatarImage = AvatarImage as typeof AvatarImage & (new () => { $props: _OkuAvatarImageProps })
+const OkuAvatarFallback = AvatarFallback as typeof AvatarFallback & (new () => { $props: _OkuAvatarFallbackProps })
 
 export {
   OkuAvatar,
@@ -254,7 +260,7 @@ export type {
   AvatarProps,
   AvatarImageProps,
   AvatarFallbackProps,
-  OkuAvatarElement,
-  OkuAvatarImageElement,
-  OkuAvatarFallbackElement,
+  AvatarElement,
+  AvatarImageElement,
+  AvatarFallbackElement,
 }

packages/components/avatar/src/index.ts

@@ -8,7 +8,7 @@ export type {
   AvatarFallbackProps,
   AvatarProps,
   AvatarImageProps,
-  OkuAvatarElement,
-  OkuAvatarFallbackElement,
-  OkuAvatarImageElement,
+  AvatarElement,
+  AvatarFallbackElement,
+  AvatarImageElement,
 } from './avatar'

packages/components/checkbox/package.json

@@ -33,7 +33,7 @@
     "lint:fix": "eslint . --fix"
   },
   "peerDependencies": {
-    "vue": "^3.2.47"
+    "vue": "^3.3.0-beta.5"
   },
   "dependencies": {
     "@oku-ui/compose-refs": "workspace:^",