fix some of type issues & streamline

examples/Button.stories.svelte

@@ -15,6 +15,9 @@
   const { Story } = defineMeta({
     component: Button,
     tags: ['autodocs'],
+    args: {
+      children: 'Click me',
+    },
     argTypes: {
       backgroundColor: { control: 'color' },
       size: {
@@ -30,7 +33,7 @@
   setTemplate(template);
 </script>
 
-{#snippet template({children, ...args}: Args<typeof Story>, context: StoryContext<typeof Story>)}
+{#snippet template({ children, ...args }: Args<typeof Story>, context: StoryContext<typeof Story>)}
   <Button {...args}>{children}</Button>
 {/snippet}
 

src/index.ts

@@ -1,9 +1,9 @@
-import type { Meta, StoryContext as BaseStoryContext, StoryObj } from '@storybook/svelte';
+import type { Meta, StoryContext as BaseStoryContext } from '@storybook/svelte';
 import type { ComponentType } from 'svelte';
 
 import Story from './runtime/Story.svelte';
+import type { StoryObj } from '#types';
 
-export type { Story };
 export { setTemplate } from './runtime/contexts/template.svelte';
 
 export function defineMeta<TOverrideArgs = unknown, const TMeta extends Meta = Meta>(meta: TMeta) {
@@ -12,14 +12,15 @@ export function defineMeta<TOverrideArgs = unknown, const TMeta extends Meta = M
     meta,
   };
 }
+
 export type Args<TStory extends ComponentType> = TStory extends typeof Story<
   infer TMeta extends Meta
 >
-  ? StoryObj<TMeta>['args']
+  ? StoryObj<TMeta>
   : never;
 
 export type StoryContext<TStory extends ComponentType> = TStory extends typeof Story<
   infer TMeta extends Meta
 >
-  ? BaseStoryContext<StoryObj<TMeta>['args']>
+  ? BaseStoryContext<StoryObj<TMeta>>
   : never;

src/runtime/StoriesExtractor.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="Component extends SvelteComponent">
+<script lang="ts" generics="Component extends SvelteComponent = SvelteComponent">
   import type { Meta } from '@storybook/svelte';
   import type { ComponentType, SvelteComponent } from 'svelte';
 
@@ -8,7 +8,7 @@
   } from '#runtime/contexts/extractor.svelte';
 
   interface Props {
-    Stories: Component extends SvelteComponent ? ComponentType<Component> : never;
+    Stories: ComponentType;
     repository: () => StoriesRepository<Meta<Component>>;
   }
 

src/runtime/Story.svelte

@@ -1,6 +1,6 @@
-<script lang="ts" generics="TMeta extends Meta, TOverrideArgs = unknown">
-  import type { Meta, StoryObj, StoryContext } from '@storybook/svelte';
-  import type { Snippet } from 'svelte';
+<script lang="ts" generics="TMeta extends Meta = Meta, TOverrideArgs = unknown">
+  import type { StoryObj, StoryContext, Meta } from '@storybook/svelte';
+  import type { ComponentProps, ComponentType, Snippet } from 'svelte';
 
   import { useStoriesExtractor } from '#runtime/contexts/extractor.svelte';
   import { useStoryRenderer } from '#runtime/contexts/renderer.svelte';
@@ -9,8 +9,8 @@
   import { storyNameToExportName } from '#utils/identifier-utils';
 
   type SnippetsToPrimitives<Args> = {
-    [ArgKey in keyof Args]: Args[ArgKey] extends Snippet
-      ? Snippet | string | number | boolean | void
+    [ArgKey in keyof Args]?: Args[ArgKey] extends Snippet
+      ? Snippet | string | number | boolean | undefined
       : Args[ArgKey];
   };
 
@@ -22,7 +22,7 @@
      * Can be omitted if a default template is set with setTemplate()
      *
      */
-    children?: Snippet<[StoryObj<TMeta>['args'], StoryContext<TMeta['args']>]>;
+    children?: Snippet<[Omit<StoryObj<TMeta>['args'], 'children'>, StoryContext<TMeta['args']>]>;
     /**
      * Name of the story. Can be omitted if `exportName` is provided.
      */
@@ -50,8 +50,12 @@
     /**
      * The args for the story
      */
-    args?: SnippetsToPrimitives<Omit<StoryObj<TMeta>['args'], keyof TOverrideArgs> & TOverrideArgs>;
-  } & Omit<StoryObj<TMeta>, 'args'>;
+    // args?: SnippetsToPrimitives<Omit<StoryObj<TMeta>['args'], keyof TOverrideArgs> & TOverrideArgs>;
+  } & Omit<StoryObj<TMeta>, 'args'> & {
+      args?: TMeta['component'] extends ComponentType<infer Component>
+        ? Partial<SnippetsToPrimitives<ComponentProps<Component>>>
+        : unknown;
+    };
 
   const { children, name, exportName: exportNameProp, play, ...restProps }: Props = $props();
   const exportName = exportNameProp ?? storyNameToExportName(name!);
@@ -92,10 +96,7 @@
   {:else if template}
     {@render template(renderer.args, renderer.storyContext)}
   {:else if renderer.storyContext.component}
-    <svelte:component
-      this={renderer.storyContext.component as unknown as ConstructorOfATypedSvelteComponent}
-      {...renderer.args}
-    />
+    <svelte:component this={renderer.storyContext.component as ComponentType} {...renderer.args} />
   {:else}
     <p>Warning: no story rendered. improve this message</p>
   {/if}

src/runtime/StoryRenderer.svelte

@@ -1,6 +1,8 @@
-<script lang="ts" generics="TMeta extends Meta">
+<script lang="ts" generics="TMeta extends Meta = Meta">
   import type { Meta, StoryContext, StoryObj } from '@storybook/svelte';
-  import type { ComponentType } from 'svelte';
+  import type { ComponentType, SvelteComponent } from 'svelte';
+
+  import type Story from './Story.svelte';
 
   import { useStoryRenderer } from '#runtime/contexts/renderer.svelte';
   import { emitCode } from '#runtime/emit-code';
@@ -12,7 +14,7 @@
     storyContext: StoryContext<TMeta['args']>;
   };
 
-  let { Stories, exportName, args, storyContext, code }: Props = $props();
+  let { Stories, exportName, args, storyContext }: Props = $props();
 
   const context = useStoryRenderer<TMeta>();
 

src/runtime/contexts/template.svelte.ts

@@ -1,14 +1,12 @@
-import type { Meta, StoryObj, StoryContext } from '@storybook/svelte';
-import { getContext, hasContext, setContext, type Snippet } from 'svelte';
+import type { Meta } from '@storybook/svelte';
+import { getContext, hasContext, setContext, type ComponentProps } from 'svelte';
 
 import type Story from '#runtime/Story.svelte';
 
 const CONTEXT_KEYS = 'storybook-stories-template-snippet-context';
 
-function buildContext<TMeta extends Meta>() {
-  let template = $state<
-    Snippet<[StoryObj<TMeta>['args'], StoryContext<TMeta['args']>]> | undefined
-  >();
+function buildContext<TMeta extends Meta = Meta>() {
+  let template = $state<ComponentProps<Story<TMeta>>['children']>();
 
   function set(snippet?: typeof template) {
     template = snippet;
@@ -22,9 +20,9 @@ function buildContext<TMeta extends Meta>() {
   };
 }
 
-type StoriesTemplateContext<TMeta extends Meta> = ReturnType<typeof buildContext<TMeta>>;
+type StoriesTemplateContext<TMeta extends Meta = Meta> = ReturnType<typeof buildContext<TMeta>>;
 
-export function useStoriesTemplate<TMeta extends Meta>() {
+export function useStoriesTemplate<TMeta extends Meta = Meta>() {
   if (!hasContext(CONTEXT_KEYS)) {
     setContext(CONTEXT_KEYS, buildContext<TMeta>());
   }

src/runtime/create-runtime-stories.ts

@@ -49,7 +49,7 @@ export const createRuntimeStories = <TMeta extends Meta>(Stories: ComponentType,
     const storyObj: StoryObj<StoryRenderer<TMeta>> = {
       ...story,
       render: (args, storyContext) => ({
-        Component: StoryRenderer<TMeta>,
+        Component: StoryRenderer,
         props: {
           exportName,
           Stories,

src/runtime/emit-code.ts

@@ -5,7 +5,7 @@ import get from 'lodash-es/get';
 
 type Params = {
   args: StoryObj['args'];
-  storyContext: StoryContext;
+  storyContext: StoryContext<Meta['args']>;
 };
 
 const channel: ReturnType<(typeof addons)['getChannel']> | undefined = addons.getChannel();

src/types.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj as BaseStoryObj } from '@storybook/svelte';
+import type { ComponentProps, ComponentType, Snippet } from 'svelte';
+
+type SnippetsToPrimitives<Args> = {
+  [ArgKey in keyof Args]?: Args[ArgKey] extends Snippet
+    ? Snippet | string | number | boolean | undefined
+    : Args[ArgKey];
+};
+
+export type StoryObj<TMeta extends Meta> = Omit<BaseStoryObj<TMeta>, 'args'> & {
+  args?: TMeta['component'] extends ComponentType<infer Component>
+    ? Partial<SnippetsToPrimitives<ComponentProps<Component>>>
+    : unknown;
+};