Merge pull request #321 from storybookjs/jeppe/fix-raw-code-injection

Fix raw code not being injected with Svelte v5.35.1+

Author: JReinhold

package.json

@@ -49,8 +49,7 @@
     "release": "pnpm run build && auto shipit",
     "start": "pnpm run build && concurrently \"pnpm run build --watch\" \"pnpm run storybook --quiet\"",
     "storybook": "storybook dev --port 6006 --no-open",
-    "test": "vitest run",
-    "test:watch": "vitest watch"
+    "test": "vitest"
   },
   "dependencies": {
     "@storybook/csf": "^0.1.13",
@@ -66,8 +65,8 @@
     "@chromatic-com/storybook": "^4.0.0-next.6",
     "@eslint/compat": "^1.2.8",
     "@eslint/js": "^9.25.0",
-    "@storybook/addon-vitest": "^9.0.0",
     "@storybook/addon-docs": "^9.0.0",
+    "@storybook/addon-vitest": "^9.0.0",
     "@storybook/svelte-vite": "^9.0.0",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
@@ -90,7 +89,7 @@
     "rimraf": "^5.0.7",
     "rollup": "^4.25.0",
     "storybook": "^9.0.0",
-    "svelte": "^5.28.2",
+    "svelte": "5.35.1",
     "svelte-check": "^4.1.7",
     "tslib": "^2.6.3",
     "type-fest": "^4.20.1",

pnpm-lock.yaml

@@ -27,7 +27,7 @@ export function transformComponentMetaToDefineMeta(params: Params): ESTreeAST.Va
   const { component, comment } = params;
   const { attributes, start, end } = component;
 
-  let properties: ESTreeAST.ObjectExpression['properties'] = [];
+  const properties: ESTreeAST.ObjectExpression['properties'] = [];
 
   for (const attribute of attributes) {
     if (attribute.type === 'Attribute') {
@@ -150,7 +150,7 @@ function transformTags(tags: SvelteAST.Attribute): void {
 
   // tags.value is SvelteAST.ExpressionTag
   if (!Array.isArray(tags.value)) {
-    if (typeof tags.value.expression.value !== 'string') {
+    if (typeof (tags.value.expression as any).value !== 'string') {
       // NOTE: The error on invalid type (not a string) is likely visible
       // 1. via TypeScript
       // 2. and thrown by storybook internal, right?

src/compiler/pre-transform/codemods/component-meta-to-define-meta.ts

@@ -31,10 +31,7 @@ describe(transformExportMetaToDefineMeta.name, () => {
         } satisfies Meta<Button>;
       </script>
     `;
-    const node = await parseAndExtractSvelteNode<ESTreeAST.ExportNamedDeclaration>(
-      code,
-      'ExportNamedDeclaration'
-    );
+    const node = await parseAndExtractSvelteNode<any>(code, 'ExportNamedDeclaration');
 
     expect(print(transformExportMetaToDefineMeta(node))).toMatchInlineSnapshot(`
 			"const { Story } = defineMeta({
@@ -66,10 +63,7 @@ describe(transformExportMetaToDefineMeta.name, () => {
         };
       </script>
     `;
-    const node = await parseAndExtractSvelteNode<ESTreeAST.ExportNamedDeclaration>(
-      code,
-      'ExportNamedDeclaration'
-    );
+    const node = await parseAndExtractSvelteNode<any>(code, 'ExportNamedDeclaration');
 
     expect(print(transformExportMetaToDefineMeta(node))).toMatchInlineSnapshot(`
 			"/**

src/compiler/pre-transform/codemods/export-const-to-define-meta.test.ts

@@ -13,10 +13,7 @@ describe(transformImportDeclaration.name, () => {
         import { Story, Template } from "@storybook/addon-svelte-csf";
       </script>
     `;
-    const node = await parseAndExtractSvelteNode<ESTreeAST.ImportDeclaration>(
-      code,
-      'ImportDeclaration'
-    );
+    const node = await parseAndExtractSvelteNode<any>(code, 'ImportDeclaration');
 
     expect(print(transformImportDeclaration({ node }))).toMatchInlineSnapshot(
       `"import { defineMeta } from "@storybook/addon-svelte-csf";"`
@@ -29,10 +26,7 @@ describe(transformImportDeclaration.name, () => {
         import { Story, Template, defineMeta } from "@storybook/addon-svelte-csf";
       </script>
     `;
-    const node = await parseAndExtractSvelteNode<ESTreeAST.ImportDeclaration>(
-      code,
-      'ImportDeclaration'
-    );
+    const node = await parseAndExtractSvelteNode<any>(code, 'ImportDeclaration');
 
     expect(print(transformImportDeclaration({ node }))).toMatchInlineSnapshot(
       `"import { defineMeta } from "@storybook/addon-svelte-csf";"`

src/compiler/pre-transform/codemods/import-declaration.test.ts

@@ -96,7 +96,7 @@ export async function codemodLegacyNodes(params: Params): Promise<SvelteAST.Root
         return transformed;
       }
 
-      return node;
+      return node as any;
     },
 
     ExportNamedDeclaration(node, context) {
@@ -235,7 +235,7 @@ export async function codemodLegacyNodes(params: Params): Promise<SvelteAST.Root
 
       state.currentScript = scriptContext === 'module' ? 'module' : 'instance';
 
-      content = visit(content, state) as ESTreeAST.Program;
+      content = visit(content, state) as any;
 
       return { ...rest, content, context: scriptContext };
     },
@@ -265,24 +265,28 @@ export async function codemodLegacyNodes(params: Params): Promise<SvelteAST.Root
           if (declaration.type === 'VariableDeclaration') {
             const { init } = declaration.declarations[0];
 
-            if (init?.type === 'CallExpression' && init.callee.name === 'defineMeta') {
+            if (
+              init?.type === 'CallExpression' &&
+              'name' in init.callee &&
+              init.callee.name === 'defineMeta'
+            ) {
               continue;
             }
           }
 
           instanceBody.push(declaration);
         }
 
-        node.body = instanceBody;
+        node.body = instanceBody as any;
       }
 
       if (state.currentScript === 'module') {
         if (state.storiesComponentImportDeclaration) {
-          node.body.unshift(state.storiesComponentImportDeclaration);
+          node.body.unshift(state.storiesComponentImportDeclaration as any);
         }
 
         if (state.pkgImportDeclaration) {
-          node.body.unshift(state.pkgImportDeclaration);
+          node.body.unshift(state.pkgImportDeclaration as any);
         }
 
         if (state.defineMetaFromExportConstMeta) {

src/compiler/pre-transform/index.ts

@@ -140,6 +140,9 @@ export async function parseForIndexer(
         if (specifier.type !== 'ImportSpecifier') {
           throw new DefaultOrNamespaceImportUsedError(filename);
         }
+        if (!('name' in specifier.imported)) {
+          return;
+        }
 
         if (specifier.imported.name === 'defineMeta') {
           state.defineMetaImport = specifier;

src/indexer/parser.ts

@@ -23,6 +23,8 @@ export async function extractStoriesNodesFromExportDefaultFn(params: Params) {
 
       if (node.callee.type === 'Identifier' && node.callee.name === storyIdentifier.name) {
         state.push(node);
+      } else {
+        context.next();
       }
     },
   };

src/parser/extract/compiled/stories.ts

@@ -9,6 +9,7 @@ import {
   MissingModuleTagError,
   NoStoryComponentDestructuredError,
 } from '$lib/utils/error/parser/extract/svelte.js';
+import type { Identifier } from 'estree';
 
 const AST_NODES_NAMES = {
   defineMeta: 'defineMeta',
@@ -69,7 +70,7 @@ export async function extractModuleNodes(options: Params): Promise<Result> {
     },
 
     ImportSpecifier(node) {
-      if (node.imported.name === AST_NODES_NAMES.defineMeta) {
+      if ('name' in node.imported && node.imported.name === AST_NODES_NAMES.defineMeta) {
         state.defineMetaImport = node;
       }
     },

src/parser/extract/svelte/module-nodes.ts

@@ -42,7 +42,7 @@ export function findStoryAttributeTemplateSnippetBlock(options: {
   }
 
   return findSnippetBlockByName({
-    name: template.value.expression.name,
+    name: (template.value.expression as any).name,
     nodes: nodes,
   });
 }