Merge branch 'experimental-support-svelte-v5' of github.com:storybook…

…js/addon-svelte-csf into experimental-support-svelte-v5

src/compiler/plugin.ts

@@ -18,7 +18,8 @@ import { createAppendix } from './transform/create-appendix.js';
 import { removeExportDefault } from './transform/remove-export-default.js';
 import { insertDefineMetaJSDocCommentAsDescription } from './transform/define-meta/description.js';
 import { destructureMetaFromDefineMeta } from './transform/define-meta/destructure-meta.js';
-import { insertStoryHTMLCommentAsDescription } from './transform/Story/description.js';
+import { updateCompiledStoryProps } from './transform/compiled-story-props.js';
+
 import { getSvelteAST } from '../parser/ast.js';
 import { extractStoriesNodesFromExportDefaultFn } from '../parser/extract/compiled/stories.js';
 import { extractCompiledASTNodes } from '../parser/extract/compiled/nodes.js';
@@ -43,10 +44,14 @@ export async function plugin(): Promise<Plugin> {
       const compiledAST = this.parse(compiledCode);
       let magicCompiledCode = new MagicString(compiledCode);
 
-      let rawCode = fs.readFileSync(id).toString();
+      // @ts-expect-error FIXME: `this.originalCode` exists at runtime.
+      // Need to research if its documented somewhere
+      let rawCode = this.originalCode ?? fs.readFileSync(id).toString();
 
       if (svelteConfig?.preprocess) {
-        const processed = await preprocess(rawCode, svelteConfig.preprocess, { filename: id });
+        const processed = await preprocess(rawCode, svelteConfig.preprocess, {
+          filename: id,
+        });
         rawCode = processed.code;
       }
 
@@ -65,26 +70,23 @@ export async function plugin(): Promise<Plugin> {
       });
 
       /*
-       * * WARN:
-       * * IMPORTANT! The plugins starts updating the compiled output code from the bottom.
-       * * Why? Because once we start updating nodes in the stringified output from the top,
-       * * then other nodes' `start` and `end` numbers will not be correct anymore.
-       * * Hence the reason why reversing both arrays with stories _(svelte and compiled)_.
+       * WARN:
+       * IMPORTANT! The plugins starts updating the compiled output code from the bottom.
+       * Why? Because once we start updating nodes in the stringified output from the top,
+       * then other nodes' `start` and `end` numbers will not be correct anymore.
+       * Hence the reason why reversing both arrays with stories _(svelte and compiled)_.
        */
       const svelteStories = [...svelteNodes.storyComponents].reverse();
       const compiledStories = [...extractedCompiledStoriesNodes].reverse();
 
       for (const [index, compiled] of Object.entries(compiledStories)) {
-        insertStoryHTMLCommentAsDescription({
+        updateCompiledStoryProps({
           code: magicCompiledCode,
           nodes: { svelte: svelteStories[index], compiled },
+          setTemplateSnippetBlock: svelteNodes.setTemplateSnippetBlock,
           filename: id,
+          originalCode: rawCode,
         });
-        // moveSourceAttributeToParameters({
-        //   code,
-        //   nodes: { svelte: svelteStories[index], compiled },
-        //   filename,
-        // });
       }
 
       await destructureMetaFromDefineMeta({