create storyobjs instead of storyfns

package.json

@@ -24,9 +24,9 @@
       "types": "./dist/preset.d.ts",
       "default": "./dist/preset.js"
     },
-    "./internal/create-story-fns": {
-      "types": "./dist/runtime/create-story-fns.d.ts",
-      "default": "./dist/runtime/create-story-fns.js"
+    "./internal/create-runtime-stories": {
+      "types": "./dist/runtime/create-runtime-stories.d.ts",
+      "default": "./dist/runtime/create-runtime-stories.js"
     },
     "./package.json": "./package.json"
   },

src/compiler/transform/appendix/create-import.ts

@@ -7,17 +7,17 @@ import type { ImportDeclaration } from 'estree';
 export function createImport(): ImportDeclaration {
   const imported = {
     type: 'Identifier',
-    // WARN: Tempting to use `createStoryFns.name` here.
+    // WARN: Tempting to use `createRuntimeStories.name` here.
     // It will break, because this function imports `*.svelte` files.
-    name: 'createStoryFns',
+    name: 'createRuntimeStories',
   } as const;
 
   return {
     type: 'ImportDeclaration',
     source: {
       type: 'Literal',
       // TODO: Probably possible to achieve picking the whole path from `pkg.exports` with Object.keys or something like that
-      value: `${pkg.name}/internal/create-story-fns`,
+      value: `${pkg.name}/internal/create-runtime-stories`,
     },
     specifiers: [
       {

src/compiler/transform/appendix/create-named-export-story.ts

@@ -1,12 +1,12 @@
 import type { ExportNamedDeclaration, Identifier } from 'estree';
-import type { createVariableFromStoryFnsCall } from './create-variable-from-storyfns-call';
+import type { createVariableFromRuntimeStoriesCall } from './create-variable-from-runtime-stories-call';
 
 import { storyNameToExportName } from '../../../utils/identifiers.js';
 
 interface Params {
   name: string;
   filename: string;
-  node: ReturnType<typeof createVariableFromStoryFnsCall>;
+  node: ReturnType<typeof createVariableFromRuntimeStoriesCall>;
 }
 
 export async function createNamedExportStory(params: Params): Promise<ExportNamedDeclaration> {

src/compiler/transform/appendix/create-variable-from-storyfns-call.ts → src/compiler/transform/appendix/create-variable-from-runtime-stories-call.ts

@@ -2,16 +2,14 @@ import type { VariableDeclaration } from 'estree';
 
 import type { getMetaIdentifier } from '../../../parser/analyse/meta/identifier.js';
 
-const STORY_FNS_VARIABLE = '__storyFns';
-
 interface Params {
   componentName: string;
   metaIdentifier: ReturnType<typeof getMetaIdentifier>;
   filename: string;
 }
 
-export function createVariableFromStoryFnsCall(params: Params): VariableDeclaration {
-  const { componentName, metaIdentifier, filename } = params;
+export function createVariableFromRuntimeStoriesCall(params: Params): VariableDeclaration {
+  const { componentName, metaIdentifier } = params;
 
   return {
     type: 'VariableDeclaration',
@@ -21,15 +19,15 @@ export function createVariableFromStoryFnsCall(params: Params): VariableDeclarat
         type: 'VariableDeclarator',
         id: {
           type: 'Identifier',
-          name: STORY_FNS_VARIABLE,
+          name: '__stories',
         },
         init: {
           type: 'CallExpression',
           callee: {
             type: 'Identifier',
-            // WARN: Tempting to use `createStoryFns.name` here.
+            // WARN: Tempting to use `createRuntimeStories.name` here.
             // It will break, because this function imports `*.svelte` files.
-            name: 'createStoryFns',
+            name: 'createRuntimeStories',
           },
           arguments: [
             {

src/compiler/transform/create-appendix.ts

@@ -4,7 +4,7 @@ import { toJs } from 'estree-util-to-js';
 import { createExportDefaultMeta } from './appendix/create-export-default.js';
 import { createExportOrderVariable } from './appendix/create-export-order.js';
 import { createImport } from './appendix/create-import.js';
-import { createVariableFromStoryFnsCall } from './appendix/create-variable-from-storyfns-call.js';
+import { createVariableFromRuntimeStoriesCall } from './appendix/create-variable-from-runtime-stories-call.js';
 import { createNamedExportStory } from './appendix/create-named-export-story.js';
 
 import { getMetaIdentifier } from '../../parser/analyse/meta/identifier.js';
@@ -32,7 +32,7 @@ export async function createAppendix(params: Params) {
     node: defineMetaVariableDeclaration,
     filename,
   });
-  const variableWithStoryFnsCall = createVariableFromStoryFnsCall({
+  const variableFromRuntimeStoriesCall = createVariableFromRuntimeStoriesCall({
     componentName,
     metaIdentifier,
     filename,
@@ -42,7 +42,7 @@ export async function createAppendix(params: Params) {
       createNamedExportStory({
         name,
         filename,
-        node: variableWithStoryFnsCall,
+        node: variableFromRuntimeStoriesCall,
       })
     )
   );
@@ -52,7 +52,7 @@ export async function createAppendix(params: Params) {
     sourceType: 'module',
     body: [
       createImport(),
-      variableWithStoryFnsCall,
+      variableFromRuntimeStoriesCall,
       createExportDefaultMeta({ metaIdentifier, filename }),
       createExportOrderVariable({ names, filename }),
       ...storiesExports,

src/runtime/create-story-fns.ts → src/runtime/create-runtime-stories.ts

@@ -1,8 +1,6 @@
 /* eslint-env browser */
-import { combineTags } from '@storybook/csf';
 import { logger } from '@storybook/client-logger';
-import { combineArgs, combineParameters } from '@storybook/preview-api';
-import type { Meta, StoryFn } from '@storybook/svelte';
+import type { Meta, StoryObj } from '@storybook/svelte';
 import { mount, unmount, type ComponentType } from 'svelte';
 
 import StoriesExtractor from './StoriesExtractor.svelte';
@@ -26,7 +24,7 @@ const createFragment = document.createDocumentFragment
  * the one selected is disabled.
  */
 // TODO: I'm not sure the 'meta' is necessary here. As long as it's default exported, SB should internally combine it with the stories. Except for the play logic below, that looks funky, need to ask Pablo about that.
-export const createStoryFns = <TMeta extends Meta>(Stories: ComponentType, meta: TMeta) => {
+export const createRuntimeStories = <TMeta extends Meta>(Stories: ComponentType, meta: TMeta) => {
   const repository: StoriesRepository<TMeta> = {
     stories: new Map(),
   };
@@ -45,25 +43,22 @@ export const createStoryFns = <TMeta extends Meta>(Stories: ComponentType, meta:
     logger.error(`Error in mounting stories ${e.toString()}`, e);
   }
 
-  const stories: Record<string, StoryFn<StoryRenderer<TMeta>>> = {};
+  const stories: Record<string, StoryObj<StoryRenderer<TMeta>>> = {};
 
   for (const [name, story] of repository.stories) {
-    // NOTE: We can't use StoryObj, because `@storybook/svelte` accepts `StoryFn` for now
-    const storyFn: StoryFn<StoryRenderer<TMeta>> = (args, storyContext) => {
-      return {
+    const storyObj: StoryObj<StoryRenderer<TMeta>> = {
+      ...story,
+      render: (args, storyContext) => ({
         Component: StoryRenderer<TMeta>,
         props: {
-          storyName: story.name,
+          //TODO: align story.name type with storyName
+          storyName: story.name!,
           Stories,
           storyContext,
           args,
         },
-      };
+      }),
     };
-    storyFn.storyName = story.name;
-    storyFn.args = combineArgs(meta.args, story.args);
-    storyFn.parameters = combineParameters({}, meta.parameters, story.parameters);
-    storyFn.tags = combineTags(...(meta.tags ?? []), ...(story.tags ?? []));
 
     // TODO: Restore this feature
     // if (storyMeta.rawSource) {
@@ -101,7 +96,7 @@ export const createStoryFns = <TMeta extends Meta>(Stories: ComponentType, meta:
        * The 'play' function should be delegated to the real play Story function
        * in order to be run into the component scope.
        */
-      storyFn.play = (storyContext) => {
+      storyObj.play = (storyContext) => {
         const delegate = storyContext.playFunction?.__play;
 
         if (delegate) {
@@ -112,7 +107,7 @@ export const createStoryFns = <TMeta extends Meta>(Stories: ComponentType, meta:
       };
     }
 
-    stories[name] = storyFn;
+    stories[name] = storyObj;
   }
 
   return stories;

vite.config.ts

@@ -5,9 +5,9 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 import inspect from 'vite-plugin-inspect';
 
 export default defineConfig({
-  define: {
-    'import.meta.vitest': 'undefined',
-  },
+  // define: {
+  //   'import.meta.vitest': 'undefined',
+  // },
   plugins: [
     svelte(),
     inspect({
@@ -19,6 +19,6 @@ export default defineConfig({
     dir: './src/',
     environment: 'jsdom',
     globals: true,
-    includeSource: ['**/*.ts'],
+    // includeSource: ['**/*.ts'],
   },
 });