Merge pull request #22814 from storybookjs/kasper/fix-vue-types-for-ts5

Vue3: Fix TS 5.0 compat with vue-component-type-helpers
storybookjs · May 26, 2023 · ead76eb · ead76eb
2 parents c9423b5 + 6bc2261
commit ead76eb
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 52 deletions.
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
@@ -54,7 +54,8 @@
     "@storybook/preview-api": "7.1.0-alpha.24",
     "@storybook/types": "7.1.0-alpha.24",
     "ts-dedent": "^2.0.0",
-    "type-fest": "2.19.0"
+    "type-fest": "2.19.0",
+    "vue-component-type-helpers": "^1.6.5"
   },
   "devDependencies": {
     "@digitak/esrun": "^3.2.2",

diff --git a/code/renderers/vue3/src/public-types.test.ts b/code/renderers/vue3/src/public-types.test.ts
@@ -3,32 +3,23 @@ import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types';
 import { expectTypeOf } from 'expect-type';
 import type { SetOptional } from 'type-fest';
 import { h } from 'vue';
-import type { ComponentOptions, FunctionalComponent, VNodeChild } from 'vue';
-import type { Decorator, Meta, StoryObj } from './public-types';
+import type { ComponentPropsAndSlots, Decorator, Meta, StoryObj } from './public-types';
 import type { VueRenderer } from './types';
 import BaseLayout from './__tests__/BaseLayout.vue';
 import Button from './__tests__/Button.vue';
 import DecoratorTsVue from './__tests__/Decorator.vue';
 import Decorator2TsVue from './__tests__/Decorator2.vue';
 
+type ButtonProps = ComponentPropsAndSlots<typeof Button>;
+
 describe('Meta', () => {
   test('Generic parameter of Meta can be a component', () => {
     const meta: Meta<typeof Button> = {
       component: Button,
       args: { label: 'good', disabled: false },
     };
 
-    expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<
-        VueRenderer,
-        {
-          readonly disabled: boolean;
-          readonly label: string;
-          onMyChangeEvent?: (id: number) => any;
-          onMyClickEvent?: (id: number) => any;
-        }
-      >
-    >();
+    expectTypeOf(meta).toEqualTypeOf<ComponentAnnotations<VueRenderer, ButtonProps>>();
   });
 
   test('Generic parameter of Meta can be the props of the component', () => {
@@ -66,13 +57,6 @@ describe('Meta', () => {
 });
 
 describe('StoryObj', () => {
-  type ButtonProps = {
-    readonly disabled: boolean;
-    readonly label: string;
-    onMyChangeEvent?: ((id: number) => any) | undefined;
-    onMyClickEvent?: ((id: number) => any) | undefined;
-  };
-
   test('✅ Required args may be provided partial in meta and the story', () => {
     const meta = satisfies<Meta<typeof Button>>()({
       component: Button,
@@ -123,15 +107,9 @@ describe('StoryObj', () => {
 
 type ThemeData = 'light' | 'dark';
 
-type ComponentProps<Component> = Component extends ComponentOptions<infer P>
-  ? P
-  : Component extends FunctionalComponent<infer P>
-  ? P
-  : never;
-
 describe('Story args can be inferred', () => {
   test('Correct args are inferred when type is widened for render function', () => {
-    type Props = ComponentProps<typeof Button> & { theme: ThemeData };
+    type Props = ButtonProps & { theme: ThemeData };
 
     const meta = satisfies<Meta<Props>>()({
       component: Button,
@@ -153,7 +131,7 @@ describe('Story args can be inferred', () => {
   ) => h(DecoratorTsVue, { decoratorArg }, h(storyFn()));
 
   test('Correct args are inferred when type is widened for decorators', () => {
-    type Props = ComponentProps<typeof Button> & { decoratorArg: string };
+    type Props = ButtonProps & { decoratorArg: string };
 
     const meta = satisfies<Meta<Props>>()({
       component: Button,
@@ -168,7 +146,10 @@ describe('Story args can be inferred', () => {
   });
 
   test('Correct args are inferred when type is widened for multiple decorators', () => {
-    type Props = ComponentProps<typeof Button> & { decoratorArg: string; decoratorArg2: string };
+    type Props = ButtonProps & {
+      decoratorArg: string;
+      decoratorArg2: string;
+    };
 
     const secondDecorator: Decorator<{ decoratorArg2: string }> = (
       storyFn,
@@ -208,12 +189,7 @@ test('Infer type of slots', () => {
     },
   };
 
-  type Props = {
-    readonly otherProp: boolean;
-    header?: ((headerProps: { title: string }) => any) | VNodeChild;
-    default?: ((defaultProps: {}) => any) | VNodeChild;
-    footer?: ((footerProps: {}) => any) | VNodeChild;
-  };
+  type Props = ComponentPropsAndSlots<typeof BaseLayout>;
 
   type Expected = StoryAnnotations<VueRenderer, Props, Props>;
   expectTypeOf(Basic).toEqualTypeOf<Expected>();

diff --git a/code/renderers/vue3/src/public-types.ts b/code/renderers/vue3/src/public-types.ts
@@ -6,13 +6,14 @@ import type {
   ComponentAnnotations,
   DecoratorFunction,
   LoaderFunction,
+  ProjectAnnotations,
   StoryAnnotations,
   StoryContext as GenericStoryContext,
   StrictArgs,
-  ProjectAnnotations,
 } from '@storybook/types';
-import type { SetOptional, Simplify, RemoveIndexSignature } from 'type-fest';
-import type { ComponentOptions, ConcreteComponent, FunctionalComponent, VNodeChild } from 'vue';
+import type { Constructor, RemoveIndexSignature, SetOptional, Simplify } from 'type-fest';
+import type { FunctionalComponent, VNodeChild } from 'vue';
+import type { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
 import type { VueRenderer } from './types';
 
 export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
@@ -49,7 +50,7 @@ export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
   args?: infer DefaultArgs;
 }
   ? Simplify<
-      ComponentProps<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>
+      ComponentPropsAndSlots<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>
     > extends infer TArgs
     ? StoryAnnotations<
         VueRenderer,
@@ -59,24 +60,18 @@ export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
     : never
   : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
 
-type ExtractSlots<C> = C extends new (...args: any[]) => { $slots: infer T }
-  ? AllowNonFunctionSlots<Partial<RemoveIndexSignature<T>>>
-  : unknown;
+type ExtractSlots<C> = AllowNonFunctionSlots<Partial<RemoveIndexSignature<ComponentSlots<C>>>>;
 
 type AllowNonFunctionSlots<Slots> = {
   [K in keyof Slots]: Slots[K] | VNodeChild;
 };
 
-export type ComponentProps<C> = C extends ComponentOptions<infer P>
-  ? P & ExtractSlots<C>
-  : C extends FunctionalComponent<infer P>
-  ? P
-  : unknown;
+export type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;
 
-type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends ConcreteComponent<any>
-  ? unknown extends ComponentProps<TCmpOrArgs>
-    ? TCmpOrArgs
-    : ComponentProps<TCmpOrArgs>
+type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any>
+  ? ComponentPropsAndSlots<TCmpOrArgs>
+  : TCmpOrArgs extends FunctionalComponent<any>
+  ? ComponentPropsAndSlots<TCmpOrArgs>
   : TCmpOrArgs;
 
 /**

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -7455,6 +7455,7 @@ __metadata:
     type-fest: 2.19.0
     typescript: ~4.9.3
     vue: ^3.2.47
+    vue-component-type-helpers: ^1.6.5
     vue-tsc: ^1.2.0
   peerDependencies:
     vue: ^3.0.0
@@ -31158,6 +31159,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-component-type-helpers@npm:^1.6.5":
+  version: 1.7.8
+  resolution: "vue-component-type-helpers@npm:1.7.8"
+  checksum: 82560704241cad12858e197593b18398bfd43c0319b93f0102723975b392a6319bcd9a5912859ebef0a26965d2301836252713af7e0cfe71a0312237ad64ca16
+  languageName: node
+  linkType: hard
+
 "vue-docgen-api@npm:^4.40.0, vue-docgen-api@npm:^4.44.23, vue-docgen-api@npm:^4.46.0":
   version: 4.64.1
   resolution: "vue-docgen-api@npm:4.64.1"