Merge pull request #219 from storybookjs/fix-types

fix: Resolve existing type issues
storybookjs · Nov 5, 2024 · 73be782 · 73be782
2 parents 8a7172b + 161a0fb
commit 73be782
Show file tree

Hide file tree

Showing 26 changed files with 398 additions and 362 deletions.
diff --git a/examples/Button.stories.svelte b/examples/Button.stories.svelte
@@ -19,7 +19,6 @@
     component: Button,
     tags: ['autodocs'],
     args: {
-      children: 'Click me',
       onclick: onclickFn,
     },
     argTypes: {
@@ -37,8 +36,8 @@
   setTemplate(template);
 </script>
 
-{#snippet template({ children, ...args }: Args<typeof Story>, context: StoryContext<typeof Story>)}
-  <Button {...args}>{children}</Button>
+{#snippet template(args: Args<typeof Story>, context: StoryContext<typeof Story>)}
+  <Button {...args}>{'Click me'}</Button>
 {/snippet}
 
 <!-- Only use this sparingly as the main CTA. -->

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/compiler/pre-transform/codemods/template-to-snippet.test.ts b/src/compiler/pre-transform/codemods/template-to-snippet.test.ts
@@ -20,11 +20,7 @@ describe(transformTemplateToSnippet.name, () => {
     `;
     const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
 
-    expect(
-      print(
-        transformTemplateToSnippet({ component })
-      )
-    ).toMatchInlineSnapshot(`
+    expect(print(transformTemplateToSnippet({ component }))).toMatchInlineSnapshot(`
       "{#snippet sb_default_template(args)}
       	<Button {...args} variant="primary" />
       {/snippet}"
@@ -43,11 +39,7 @@ describe(transformTemplateToSnippet.name, () => {
     `;
     const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
 
-    expect(
-      print(
-        transformTemplateToSnippet({ component })
-      )
-    ).toMatchInlineSnapshot(`
+    expect(print(transformTemplateToSnippet({ component }))).toMatchInlineSnapshot(`
 			"{#snippet coolTemplate(args)}
 				<Button {...args} variant="primary" />
 			{/snippet}"
@@ -66,11 +58,7 @@ describe(transformTemplateToSnippet.name, () => {
     `;
     const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
 
-    expect(
-      print(
-        transformTemplateToSnippet({ component })
-      )
-    ).toMatchInlineSnapshot(`
+    expect(print(transformTemplateToSnippet({ component }))).toMatchInlineSnapshot(`
       "{#snippet sb_default_template(_args, context)}
       	<p>{context.args}</p>
       {/snippet}"

diff --git a/src/index.test.ts b/src/index.test.ts
@@ -1,45 +1,28 @@
-import type { PlayFunctionContext } from '@storybook/types';
-import type { ComponentProps, Snippet } from 'svelte';
-import type { EmptyObject, Primitive } from 'type-fest';
+import type { StoryContext as StorybookStoryContext } from '@storybook/types';
+import { createRawSnippet, type ComponentProps, type Snippet } from 'svelte';
+import type { Primitive } from 'type-fest';
 import { describe, expectTypeOf, it } from 'vitest';
 
-import { defineMeta, type Args, type StoryContext } from '#index';
+import StoryComponent from './runtime/Story.svelte';
+
+import { defineMeta, type Args, type StoryContext } from './index';
 import type {
   Meta,
   StoryAnnotations,
-  StoryCmp,
   StoryContext as BaseStoryContext,
   SvelteRenderer,
-  MapSnippetsToAcceptPrimitives,
 } from '#types';
 
 import Button from '../examples/components/Button.svelte';
 
 describe(defineMeta.name, () => {
-  // it('works when no meta entry "component" is provided', () => {
-  //   const { Story, meta } = defineMeta({
-  //     args: {
-  //       sample: 0,
-  //     },
-  //     play(context) {
-  //       expectTypeOf(context).not.toBeAny();
-  //       expectTypeOf(context).toMatchTypeOf<
-  //         PlayFunctionContext<SvelteRenderer<Component<{ sample: 0 }>>>
-  //       >();
-  //       expectTypeOf(context.args).not.toBeAny();
-  //       expectTypeOf(context.args).toMatchTypeOf<MapSnippetsToAcceptPrimitives<{ sample: 0 }>>();
-  //     },
-  //   });
-
-  //   expectTypeOf(Story).toMatchTypeOf<StoryCmp<EmptyObject, { sample: 0 }, Meta<{ sample: 0 }>>>();
-  //   expectTypeOf(meta).toMatchTypeOf<Meta<Component<{ sample: 0 }>>>();
-  // });
-
   it('works with provided meta entry "component" entry', () => {
     const { Story, meta } = defineMeta({
       component: Button,
       args: {
-        children: 'Click me',
+        children: createRawSnippet(() => ({
+          render: () => 'Click me',
+        })),
         onclick: (event) => {
           expectTypeOf(event).not.toBeAny();
           expectTypeOf(event).toEqualTypeOf<
@@ -49,14 +32,11 @@ describe(defineMeta.name, () => {
       },
       play(context) {
         expectTypeOf(context).not.toBeAny();
-        expectTypeOf(context).toMatchTypeOf<PlayFunctionContext<SvelteRenderer<typeof Button>>>();
-        expectTypeOf(context.args).toMatchTypeOf<
-          MapSnippetsToAcceptPrimitives<ComponentProps<Button>>
-        >();
+        expectTypeOf(context).toMatchTypeOf<StorybookStoryContext<SvelteRenderer<typeof Button>>>();
       },
     });
 
-    expectTypeOf(Story).toMatchTypeOf<StoryCmp<EmptyObject, typeof Button, Meta<typeof Button>>>();
+    expectTypeOf(Story).toMatchTypeOf<typeof StoryComponent<typeof Button>>();
     expectTypeOf(meta).toMatchTypeOf<Meta<typeof Button>>();
   });
 });
@@ -66,7 +46,9 @@ describe("type helper for snippets 'Args'", () => {
     const { Story } = defineMeta({
       component: Button,
       args: {
-        children: 'Click me',
+        children: createRawSnippet(() => ({
+          render: () => 'Click me',
+        })),
         onclick: (event) => {
           expectTypeOf(event).not.toBeAny();
           expectTypeOf(event).toEqualTypeOf<
@@ -76,17 +58,12 @@ describe("type helper for snippets 'Args'", () => {
       },
       play(context) {
         expectTypeOf(context).not.toBeAny();
-        expectTypeOf(context).toMatchTypeOf<PlayFunctionContext<SvelteRenderer<typeof Button>>>();
-        expectTypeOf(context.args).toMatchTypeOf<
-          MapSnippetsToAcceptPrimitives<ComponentProps<Button>>
-        >();
+        expectTypeOf(context).toMatchTypeOf<StorybookStoryContext<SvelteRenderer<typeof Button>>>();
       },
     });
     expectTypeOf<Args<typeof Story>>().not.toBeNever();
     expectTypeOf<Args<typeof Story>>().not.toBeNullable();
-    expectTypeOf<Args<typeof Story>>().toMatchTypeOf<
-      StoryAnnotations<typeof Button, Meta<typeof Button>>['args']
-    >();
+    expectTypeOf<Args<typeof Story>>().toMatchTypeOf<StoryAnnotations<typeof Button>['args']>();
     expectTypeOf<Args<typeof Story>['children']>().toMatchTypeOf<Snippet | Primitive>();
     expectTypeOf<Args<typeof Story>['children']>().toBeNullable();
   });
@@ -97,7 +74,9 @@ describe("type helper for snippets 'StoryContext'", () => {
     const { Story, meta } = defineMeta({
       component: Button,
       args: {
-        children: 'Click me',
+        children: createRawSnippet(() => ({
+          render: () => 'Click me',
+        })),
         onclick: (event) => {
           expectTypeOf(event).not.toBeAny();
           expectTypeOf(event).toEqualTypeOf<
@@ -107,16 +86,12 @@ describe("type helper for snippets 'StoryContext'", () => {
       },
       play(context) {
         expectTypeOf(context).not.toBeAny();
-        expectTypeOf(context).toMatchTypeOf<PlayFunctionContext<SvelteRenderer<typeof Button>>>();
-        expectTypeOf(context.args).toMatchTypeOf<
-          MapSnippetsToAcceptPrimitives<ComponentProps<Button>>
-        >();
+        expectTypeOf(context).toMatchTypeOf<StorybookStoryContext<SvelteRenderer<typeof Button>>>();
       },
     });
 
-    expectTypeOf<StoryContext<typeof Story>>().toMatchTypeOf<
-      BaseStoryContext<typeof Button, typeof meta>
-    >();
+    expectTypeOf<StoryContext<typeof Story>>().toMatchTypeOf<BaseStoryContext<typeof Button>>();
+    expectTypeOf(meta).toMatchTypeOf<Meta<typeof Button>>();
   });
 });
 
@@ -125,13 +100,15 @@ describe("component 'Story' destructured from 'defineMeta", () => {
     const { Story } = defineMeta({
       component: Button,
       args: {
-        children: 'Click me',
+        children: createRawSnippet(() => ({
+          render: () => 'Click me',
+        })),
       },
     });
 
     type TStoryProps = ComponentProps<typeof Story>;
 
-    expectTypeOf(Story).toMatchTypeOf<StoryCmp<EmptyObject, typeof Button, Meta<typeof Button>>>();
+    expectTypeOf(Story).toMatchTypeOf<typeof StoryComponent<typeof Button>>();
     expectTypeOf<TStoryProps>().not.toBeNever();
     expectTypeOf<Meta<typeof Button>['args']>().toBeNullable();
     expectTypeOf<NonNullable<Meta<typeof Button>['args']>['children']>().toBeNullable();

diff --git a/src/index.ts b/src/index.ts
@@ -1,14 +1,3 @@
-import type { Args as BaseArgs } from '@storybook/types';
-import type { EmptyObject } from 'type-fest';
-
-import type {
-  Meta as MetaType,
-  StoryCmp,
-  StoryContext as BaseStoryContext,
-  StoryAnnotations,
-  Cmp,
-} from '#types';
-
 import StoryComponent from './runtime/Story.svelte';
 // TODO: Remove in next major release
 import LegacyMetaComponent from './runtime/LegacyMeta.svelte';
@@ -18,26 +7,29 @@ import LegacyStoryComponent from './runtime/LegacyStory.svelte';
 import LegacyTemplateComponent from './runtime/LegacyTemplate.svelte';
 
 export { setTemplate } from './runtime/contexts/template.svelte';
+import type {
+  Meta as MetaType,
+  StoryContext as BaseStoryContext,
+  StoryAnnotations,
+  Cmp,
+} from './types';
 
-export function defineMeta<
-  const TOverrideArgs extends BaseArgs = EmptyObject,
-  const TCmp extends Cmp = Cmp,
->(meta: MetaType<TCmp>) {
+export function defineMeta<const TCmp extends Cmp>(meta: MetaType<TCmp>) {
   return {
-    Story: StoryComponent as StoryCmp<EmptyObject, TCmp, typeof meta>,
+    Story: StoryComponent as typeof StoryComponent<TCmp>,
     meta,
   };
 }
 
-export type Args<TStoryCmp> =
-  TStoryCmp extends StoryCmp<infer _TOverrideArgs, infer TCmpOrArgs, infer TMeta>
-    ? NonNullable<StoryAnnotations<TCmpOrArgs, TMeta>['args']>
-    : never;
+export type Args<TStoryCmp> = TStoryCmp extends typeof StoryComponent<infer TCmp extends Cmp>
+  ? NonNullable<StoryAnnotations<TCmp>['args']>
+  : never;
 
-export type StoryContext<TStoryCmp> =
-  TStoryCmp extends StoryCmp<infer _TOverrideArgs, infer TCmpOrArgs, infer TMeta>
-    ? BaseStoryContext<TCmpOrArgs, TMeta>
-    : never;
+export type StoryContext<TStoryCmp> = TStoryCmp extends typeof StoryComponent<
+  infer TCmp extends Cmp
+>
+  ? BaseStoryContext<TCmp>
+  : never;
 
 // TODO: Remove in next major release
 export {
@@ -57,3 +49,6 @@ export {
    */
   LegacyTemplateComponent as Template,
 };
+
+// TODO: Remove in next major release
+export * from './legacy-types.d';