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

…js/addon-svelte-csf into experimental-support-svelte-v5
storybookjs · Jun 6, 2024 · 99a4667 · 99a4667
2 parents 1cbf6ff + 6555f54
commit 99a4667
Show file tree

Hide file tree

Showing 17 changed files with 551 additions and 256 deletions.
diff --git a/package.json b/package.json
@@ -53,6 +53,8 @@
     "dedent": "^1.2.0",
     "estree-util-to-js": "^2.0.0",
     "magic-string": "^0.30.1",
+    "prettier": "^3.3.1",
+    "prettier-plugin-svelte": "^3.2.4",
     "zimmerframe": "^1.1.2"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/compiler/plugin.ts b/src/compiler/plugin.ts
@@ -56,7 +56,7 @@ export async function plugin(): Promise<Plugin> {
       }
 
       const svelteAST = getSvelteAST({ code: rawCode, filename: id });
-      const svelteNodes = await extractSvelteASTNodes({
+      const svelteASTNodes = await extractSvelteASTNodes({
         ast: svelteAST,
         filename: id,
       });
@@ -76,19 +76,20 @@ export async function plugin(): Promise<Plugin> {
        * 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 svelteStories = [...svelteASTNodes.storyComponents].reverse();
       const compiledStories = [...extractedCompiledStoriesNodes].reverse();
 
-      for (const [index, compiled] of Object.entries(compiledStories)) {
-        updateCompiledStoryProps({
-          code: magicCompiledCode,
-          nodes: { svelte: svelteStories[index], compiled },
-          setTemplateSnippetBlock: svelteNodes.setTemplateSnippetBlock,
-          filename: id,
-          originalCode: rawCode,
-        });
-      }
-
+      await Promise.all(
+        compiledStories.map((compiled, index) =>
+          updateCompiledStoryProps({
+            code: magicCompiledCode,
+            componentASTNodes: { svelte: svelteStories[index], compiled },
+            svelteASTNodes,
+            filename: id,
+            originalCode: rawCode,
+          })
+        )
+      );
       await destructureMetaFromDefineMeta({
         code: magicCompiledCode,
         nodes: compiledNodes,
@@ -98,7 +99,7 @@ export async function plugin(): Promise<Plugin> {
         code: magicCompiledCode,
         nodes: {
           compiled: compiledNodes,
-          svelte: svelteNodes,
+          svelte: svelteASTNodes,
         },
         filename: id,
       });
@@ -111,7 +112,7 @@ export async function plugin(): Promise<Plugin> {
         code: magicCompiledCode,
         nodes: {
           compiled: compiledNodes,
-          svelte: svelteNodes,
+          svelte: svelteASTNodes,
         },
         filename: id,
       });

diff --git a/src/compiler/transform/compiled-story-props.ts b/src/compiler/transform/compiled-story-props.ts
@@ -12,24 +12,21 @@ import { insertSourceCode } from './story-props/insert-source-code.js';
 
 import type { extractStoriesNodesFromExportDefaultFn } from '../../parser/extract/compiled/stories.js';
 import type { SvelteASTNodes } from '../../parser/extract/svelte/nodes.js';
-import type { extractFragmentNodes } from '../../parser/extract/svelte/fragment-nodes.js';
 
 interface Params {
   code: MagicString;
-  nodes: {
+  componentASTNodes: {
     svelte: SvelteASTNodes['storyComponents'][number];
     compiled: Awaited<ReturnType<typeof extractStoriesNodesFromExportDefaultFn>>[number];
   };
-  setTemplateSnippetBlock: Awaited<
-    ReturnType<typeof extractFragmentNodes>
-  >['setTemplateSnippetBlock'];
+  svelteASTNodes: SvelteASTNodes;
   filename: string;
   originalCode: string;
 }
 
-export function updateCompiledStoryProps(params: Params) {
-  const { code, setTemplateSnippetBlock, nodes, filename, originalCode } = params;
-  const { svelte, compiled } = nodes;
+export async function updateCompiledStoryProps(params: Params) {
+  const { code, svelteASTNodes, componentASTNodes, filename, originalCode } = params;
+  const { svelte, compiled } = componentASTNodes;
   const { component, comment } = svelte;
 
   const storyPropsObjectExpression = getStoryPropsObjectExpression(compiled);
@@ -77,17 +74,17 @@ export function updateCompiledStoryProps(params: Params) {
   if (comment) {
     insertDescriptionStory({ comment, currentDocsProperty });
   }
-  insertSourceCode({
+  await insertSourceCode({
     component,
-    setTemplateSnippetBlock,
+    svelteASTNodes,
     currentDocsProperty,
     filename,
     originalCode,
   });
 
   return updateCompiledNode({
     code,
-    nodes,
+    nodes: componentASTNodes,
     metaObjectExpression: storyPropsObjectExpression,
   });
 }
@@ -137,7 +134,7 @@ function updateCompiledNode({
   metaObjectExpression,
 }: {
   code: Params['code'];
-  nodes: Params['nodes'];
+  nodes: Params['componentASTNodes'];
   metaObjectExpression: ObjectExpression;
 }) {
   const { compiled } = nodes;

diff --git a/src/compiler/transform/story-props/insert-source-code.ts b/src/compiler/transform/story-props/insert-source-code.ts
@@ -2,14 +2,13 @@ import type { ObjectExpression, Property } from 'estree';
 import type { Component } from 'svelte/compiler';
 
 import { createASTObjectExpression, createASTProperty, findASTPropertyIndex } from './shared.js';
-import type { extractFragmentNodes } from '../../../parser/extract/svelte/fragment-nodes.js';
+
 import { getStoryChildrenRawSource } from '../../../parser/analyse/Story/children.js';
+import type { extractSvelteASTNodes } from '../../../parser/extract/svelte/nodes.js';
 
 interface Params {
   component: Component;
-  setTemplateSnippetBlock: Awaited<
-    ReturnType<typeof extractFragmentNodes>
-  >['setTemplateSnippetBlock'];
+  svelteASTNodes: Awaited<ReturnType<typeof extractSvelteASTNodes>>;
   currentDocsProperty: Property;
   filename?: string;
   originalCode: string;
@@ -20,9 +19,8 @@ interface Params {
  * to see if the user has explicitly set a `source.code`.
  * If he didn't, then it will insert to the existing ObjectExpression.
  */
-export function insertSourceCode(params: Params) {
-  const { component, setTemplateSnippetBlock, currentDocsProperty, filename, originalCode } =
-    params;
+export async function insertSourceCode(params: Params) {
+  const { component, svelteASTNodes, currentDocsProperty, filename, originalCode } = params;
 
   if (currentDocsProperty.value.type !== 'ObjectExpression') {
     throw new Error(
@@ -62,9 +60,9 @@ export function insertSourceCode(params: Params) {
     return;
   }
 
-  const value = getStoryChildrenRawSource({
+  const value = await getStoryChildrenRawSource({
     component,
-    setTemplateSnippetBlock,
+    svelteASTNodes,
     originalCode,
   });