Merge branch 'next' into norbert/sb-799-create-a-storybooktypes

code/jest.config.js

@@ -49,6 +49,7 @@ module.exports = {
     '/examples/*/src/*/*/*.*',
     // TODO: Can not get svelte-jester to work, but also not necessary for this test, as it is run by tsc/svelte-check.
     '/renderers/svelte/src/public-types.test.ts',
+    '/renderers/vue/src/public-types.test.ts',
     '/renderers/vue3/src/public-types.test.ts',
   ],
   collectCoverage: false,

code/renderers/vue/package.json

@@ -46,7 +46,7 @@
     "*.d.ts"
   ],
   "scripts": {
-    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "check": "vue-tsc --noEmit",
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
@@ -59,11 +59,13 @@
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "ts-dedent": "^2.0.0"
+    "ts-dedent": "^2.0.0",
+    "type-fest": "2.19.0"
   },
   "devDependencies": {
     "typescript": "~4.6.3",
-    "vue": "^2.6.12"
+    "vue": "2.6.14",
+    "vue-tsc": "^1.0.9"
   },
   "peerDependencies": {
     "@babel/core": "*",

code/renderers/vue/src/__tests__/Button.vue

@@ -0,0 +1,28 @@
+<template>
+  <button type="button" class="classes" @click="onClick" :disabled="disabled">{{ label }}</button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import './button.css';
+
+export default Vue.extend({
+  name: 'my-button',
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onClick(): void {
+      this.$emit('onClick');
+    },
+  },
+});
+</script>

code/renderers/vue/src/decorateStory.ts

@@ -10,7 +10,7 @@ export const WRAPS = 'STORYBOOK_WRAPS';
 
 function prepare(
   rawStory: StoryFnVueReturnType,
-  innerStory?: VueConstructor,
+  innerStory?: StoryFnVueReturnType,
   context?: StoryContext<VueFramework>
 ): VueConstructor | null {
   let story: ComponentOptions<Vue> | VueConstructor;
@@ -63,10 +63,10 @@ function prepare(
 export function decorateStory(
   storyFn: LegacyStoryFn<VueFramework>,
   decorators: DecoratorFunction<VueFramework>[]
-): LegacyStoryFn<VueFramework> {
+) {
   return decorators.reduce(
     (decorated: LegacyStoryFn<VueFramework>, decorator) => (context: StoryContext<VueFramework>) => {
-      let story;
+      let story: VueFramework['storyResult'] | undefined;
 
       const decoratedStory = decorator((update) => {
         story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) });
@@ -81,10 +81,10 @@ export function decorateStory(
         return story;
       }
 
-      return prepare(decoratedStory, story as any);
+      return prepare(decoratedStory, story) as VueFramework['storyResult'];
     },
     (context) => {
-      return prepare(storyFn(context), null, context);
+      return prepare(storyFn(context), undefined, context) as VueFramework['storyResult'];
     }
   );
 }

code/renderers/vue/src/docs/sourceDecorator.test.ts

@@ -1,6 +1,6 @@
 /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
 
-import { ComponentOptions } from 'vue';
+import type { ComponentOptions, VueConstructor } from 'vue';
 import Vue from 'vue/dist/vue';
 import { vnodeToString } from './sourceDecorator';
 
@@ -10,12 +10,13 @@ expect.addSnapshotSerializer({
 });
 
 const getVNode = (Component: ComponentOptions<any, any, any>) => {
-  const vm = new Vue({
-    render(h: (c: any) => unknown) {
+  const vm = new (Vue as unknown as VueConstructor)({
+    render(h) {
       return h(Component);
     },
   }).$mount();
 
+  // @ts-expect-error TS says it is called $vnode
   return vm.$children[0]._vnode;
 };
 

code/renderers/vue/src/docs/sourceDecorator.ts

@@ -3,9 +3,9 @@
 
 import { addons } from '@storybook/addons';
 import { logger } from '@storybook/client-logger';
-import type Vue from 'vue';
-
 import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
+import type { ComponentOptions } from 'vue';
+import type Vue from 'vue';
 import type { StoryContext } from '../types';
 
 export const skipSourceRender = (context: StoryContext) => {
@@ -43,6 +43,7 @@ export const sourceDecorator = (storyFn: any, context: StoryContext) => {
     // lifecycle hook.
     mounted() {
       // Theoretically this does not happens but we need to check it.
+      // @ts-expect-error TS says it is called $vnode
       if (!this._vnode) {
         return;
       }
@@ -50,6 +51,7 @@ export const sourceDecorator = (storyFn: any, context: StoryContext) => {
       try {
         const storyNode = lookupStoryInstance(this, storyComponent);
 
+        // @ts-expect-error TS says it is called $vnode
         const code = vnodeToString(storyNode._vnode);
 
         channel.emit(SNIPPET_RENDERED, (context || {}).id, `<template>${code}</template>`, 'vue');
@@ -58,7 +60,7 @@ export const sourceDecorator = (storyFn: any, context: StoryContext) => {
       }
     },
     template: '<story />',
-  };
+  } as ComponentOptions<Vue> & ThisType<Vue>;
 };
 
 export function vnodeToString(vnode: Vue.VNode): string {
@@ -69,7 +71,7 @@ export function vnodeToString(vnode: Vue.VNode): string {
     ...(vnode.data?.attrs ? Object.entries(vnode.data.attrs) : []),
   ]
     .filter(([name], index, list) => list.findIndex((item) => item[0] === name) === index)
-    .map(([name, value]) => stringifyAttr(name, value))
+    .map(([name, value]) => stringifyAttr(name!, value))
     .filter(Boolean)
     .join(' ');
 

code/renderers/vue/src/public-types.test.ts

@@ -0,0 +1,178 @@
+import { satisfies } from '@storybook/core-common';
+import { ComponentAnnotations, StoryAnnotations } from '@storybook/csf';
+import { expectTypeOf } from 'expect-type';
+import { SetOptional } from 'type-fest';
+import { Component } from 'vue';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DecoratorFn, Meta, StoryObj } from './public-types';
+import Button from './__tests__/Button.vue';
+import { VueFramework } from './types';
+
+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<
+        VueFramework,
+        {
+          disabled: boolean;
+          label: string;
+        }
+      >
+    >();
+  });
+
+  test('Generic parameter of Meta can be the props of the component', () => {
+    const meta: Meta<{ disabled: boolean; label: string }> = {
+      component: Button,
+      args: { label: 'good', disabled: false },
+    };
+
+    expectTypeOf(meta).toEqualTypeOf<
+      ComponentAnnotations<VueFramework, { disabled: boolean; label: string }>
+    >();
+  });
+});
+
+describe('StoryObj', () => {
+  type ButtonProps = {
+    disabled: boolean;
+    label: string;
+  };
+
+  test('✅ Required args may be provided partial in meta and the story', () => {
+    const meta = satisfies<Meta<typeof Button>>()({
+      component: Button,
+      args: { label: 'good' },
+    });
+
+    type Actual = StoryObj<typeof meta>;
+    type Expected = StoryAnnotations<VueFramework, ButtonProps, SetOptional<ButtonProps, 'label'>>;
+    expectTypeOf<Actual>().toEqualTypeOf<Expected>();
+  });
+
+  test('❌ The combined shape of meta args and story args must match the required args.', () => {
+    {
+      const meta = satisfies<Meta<typeof Button>>()({ component: Button });
+
+      type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>;
+      expectTypeOf<StoryObj<typeof meta>>().toEqualTypeOf<Expected>();
+    }
+    {
+      const meta = satisfies<Meta<typeof Button>>()({
+        component: Button,
+        args: { label: 'good' },
+      });
+      // @ts-expect-error disabled not provided ❌
+      const Basic: StoryObj<typeof meta> = {};
+
+      type Expected = StoryAnnotations<
+        VueFramework,
+        ButtonProps,
+        SetOptional<ButtonProps, 'label'>
+      >;
+      expectTypeOf(Basic).toEqualTypeOf<Expected>();
+    }
+    {
+      const meta = satisfies<Meta<{ label: string; disabled: boolean }>>()({ component: Button });
+      const Basic: StoryObj<typeof meta> = {
+        // @ts-expect-error disabled not provided ❌
+        args: { label: 'good' },
+      };
+
+      type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>;
+      expectTypeOf(Basic).toEqualTypeOf<Expected>();
+    }
+  });
+
+  test('Component can be used as generic parameter for StoryObj', () => {
+    expectTypeOf<StoryObj<typeof Button>>().toEqualTypeOf<
+      StoryAnnotations<VueFramework, ButtonProps>
+    >();
+  });
+});
+
+type ThemeData = 'light' | 'dark';
+
+type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
+  ? P
+  : C extends Component<infer P>
+  ? P
+  : unknown;
+
+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 };
+
+    const meta = satisfies<Meta<Props>>()({
+      component: Button,
+      args: { disabled: false },
+      render: (args) =>
+        Vue.extend({
+          components: { Button },
+          template: `<div>Using the theme: ${args.theme}<Button v-bind="$props"/></div>`,
+          props: Object.keys(args),
+        }),
+    });
+
+    const Basic: StoryObj<typeof meta> = { args: { theme: 'light', label: 'good' } };
+
+    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    expectTypeOf(Basic).toEqualTypeOf<Expected>();
+  });
+
+  const withDecorator: DecoratorFn<{ decoratorArg: string }> = (
+    storyFn,
+    { args: { decoratorArg } }
+  ) =>
+    Vue.extend({
+      components: { Story: storyFn() },
+      template: `<div>Decorator: ${decoratorArg}<Story/></div>`,
+    });
+
+  test('Correct args are inferred when type is widened for decorators', () => {
+    type Props = ComponentProps<typeof Button> & { decoratorArg: string };
+
+    const meta = satisfies<Meta<Props>>()({
+      component: Button,
+      args: { disabled: false },
+      decorators: [withDecorator],
+    });
+
+    const Basic: StoryObj<typeof meta> = { args: { decoratorArg: 'title', label: 'good' } };
+
+    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    expectTypeOf(Basic).toEqualTypeOf<Expected>();
+  });
+
+  test('Correct args are inferred when type is widened for multiple decorators', () => {
+    type Props = ComponentProps<typeof Button> & { decoratorArg: string; decoratorArg2: string };
+
+    const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = (
+      storyFn,
+      { args: { decoratorArg2 } }
+    ) => {
+      return Vue.extend({
+        components: { Story: storyFn() },
+        template: `<div>Decorator: ${decoratorArg2}<Story/></div>`,
+      });
+    };
+
+    const meta = satisfies<Meta<Props>>()({
+      component: Button,
+      args: { disabled: false },
+      decorators: [withDecorator, secondDecorator],
+    });
+
+    const Basic: StoryObj<typeof meta> = {
+      args: { decoratorArg: '', decoratorArg2: '', label: 'good' },
+    };
+
+    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    expectTypeOf(Basic).toEqualTypeOf<Expected>();
+  });
+});

code/renderers/vue/src/public-types.ts

@@ -1,9 +1,15 @@
 import type {
-  Args,
-  ComponentAnnotations,
-  StoryAnnotations,
   AnnotatedStoryFn,
+  Args,
+  ArgsFromMeta,
+  ArgsStoryFn,
+  ComponentAnnotations,
+  DecoratorFunction,
+  StoryAnnotations,
 } from '@storybook/types';
+import { SetOptional, Simplify } from 'type-fest';
+import { Component } from 'vue';
+import { ExtendedVue } from 'vue/types/vue';
 import { VueFramework } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types';
@@ -13,7 +19,12 @@ export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<VueFramework, TArgs>;
+export type Meta<CmpOrArgs = Args> = CmpOrArgs extends Component<any>
+  ? ComponentAnnotations<
+      VueFramework,
+      unknown extends ComponentProps<CmpOrArgs> ? CmpOrArgs : ComponentProps<CmpOrArgs>
+    >
+  : ComponentAnnotations<VueFramework, CmpOrArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
@@ -27,11 +38,36 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<VueFramework, TArgs>;
+export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
+  render?: ArgsStoryFn<VueFramework, any>;
+  component?: infer C;
+  args?: infer DefaultArgs;
+}
+  ? MetaOrCmpOrArgs extends Component<any>
+    ? StoryAnnotations<VueFramework, ComponentProps<MetaOrCmpOrArgs>>
+    : Simplify<ComponentProps<C> & ArgsFromMeta<VueFramework, MetaOrCmpOrArgs>> extends infer TArgs
+    ? StoryAnnotations<
+        VueFramework,
+        TArgs,
+        SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
+      >
+    : never
+  : MetaOrCmpOrArgs extends Component<any>
+  ? StoryAnnotations<VueFramework, ComponentProps<MetaOrCmpOrArgs>>
+  : StoryAnnotations<VueFramework, MetaOrCmpOrArgs>;
+
+type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
+  ? P
+  : C extends Component<any, any, any, infer P>
+  ? P
+  : unknown;
 
 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type DecoratorFn<TArgs = Args> = DecoratorFunction<VueFramework, TArgs>;

code/renderers/vue/src/render.ts

@@ -18,20 +18,19 @@ type Instance = CombinedVueInstance<
   },
   object,
   object,
-  Record<never, any>,
-  unknown
+  Record<never, any>
 >;
+
 const getRoot = (domElement: Element): Instance => {
-  if (map.has(domElement)) {
-    return map.get(domElement);
-  }
+  const cachedInstance = map.get(domElement);
+  if (cachedInstance != null) return cachedInstance;
 
   // Create a dummy "target" underneath #storybook-root
   // that Vue2 will replace on first render with #storybook-vue-root
   const target = document.createElement('div');
   domElement.appendChild(target);
 
-  const instance = new Vue({
+  const instance: Instance = new Vue({
     beforeDestroy() {
       map.delete(domElement);
     },
@@ -41,12 +40,12 @@ const getRoot = (domElement: Element): Instance => {
         [VALUES]: {},
       };
     },
-    // @ts-expect-error What's going on here?
+    // @ts-expect-error What's going on here? (TS says that we should not return an array here, but the `h` directly)
     render(h) {
       map.set(domElement, instance);
       return this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
     },
-  }) as Instance;
+  });
 
   return instance;
 };
@@ -100,7 +99,7 @@ export function renderToDOM(
   Vue.config.errorHandler = showException;
   const element = storyFn();
 
-  let mountTarget: Element;
+  let mountTarget: Element | null;
 
   // Vue2 mount always replaces the mount target with Vue-generated DOM.
   // https://v2.vuejs.org/v2/api/#el:~:text=replaced%20with%20Vue%2Dgenerated%20DOM
@@ -134,7 +133,7 @@ export function renderToDOM(
   root[VALUES] = { ...element.options[VALUES] };
 
   if (!map.has(domElement)) {
-    root.$mount(mountTarget);
+    root.$mount(mountTarget ?? undefined);
   }
 
   showMain();

code/renderers/vue/src/types.ts

@@ -8,8 +8,9 @@ export interface ShowErrorArgs {
   description: string;
 }
 
-// TODO: some vue expert needs to look at this
-export type StoryFnVueReturnType = string | Component;
+export type StoryFnVueReturnType =
+  | Component<any, any, any, any>
+  | AsyncComponent<any, any, any, any>;
 
 export type StoryContext = StoryContextBase<VueFramework>;
 

code/renderers/vue/tsconfig.json

@@ -1,9 +1,13 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "strict": true,
     "skipLibCheck": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "vueCompilerOptions": {
+    "target": 2
+  },
+  "include": ["src/**/*", "src/**/*.vue"],
+  "exclude": []
 }

code/yarn.lock

@@ -8000,8 +8000,10 @@ __metadata:
     react: 16.14.0
     react-dom: 16.14.0
     ts-dedent: ^2.0.0
+    type-fest: 2.19.0
     typescript: ~4.6.3
-    vue: ^2.6.12
+    vue: 2.6.14
+    vue-tsc: ^1.0.9
   peerDependencies:
     "@babel/core": "*"
     babel-loader: ^7.0.0 || ^8.0.0
@@ -35572,7 +35574,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-tsc@npm:^1.0.8":
+"vue-tsc@npm:^1.0.8, vue-tsc@npm:^1.0.9":
   version: 1.0.9
   resolution: "vue-tsc@npm:1.0.9"
   dependencies:
@@ -35586,6 +35588,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue@npm:2.6.14":
+  version: 2.6.14
+  resolution: "vue@npm:2.6.14"
+  checksum: efbe26ccc7c1bd025b88e464ebc81217b92350a77b98049122a46ac2242e249719f930d3914e2efdeaaa521a51e6e6b1cb9ffbf95b4835ed94dc92efb481040f
+  languageName: node
+  linkType: hard
+
 "vue@npm:3.0.0":
   version: 3.0.0
   resolution: "vue@npm:3.0.0"