diff --git a/package.json b/package.json index acc72587..00f7231c 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "rimraf": "^5.0.7", "rollup": "^4.18.0", "storybook": "^8.2.2", - "svelte": "5.0.0-next.155", + "svelte": "5.0.0-next.215", "svelte-check": "^3.8.4", "tslib": "^2.6.3", "type-fest": "^4.20.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index af18b2be..7d0aec83 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,19 +62,19 @@ importers: version: 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7))) '@storybook/svelte': specifier: ^8.2.2 - version: 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.155) + version: 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.215) '@storybook/svelte-vite': specifier: ^8.2.2 - version: 8.2.2(@babel/core@7.24.7)(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@5.0.0-next.155)(vite@5.3.2(@types/node@20.14.9)))(postcss@8.4.39)(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.155)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)) + version: 8.2.2(@babel/core@7.24.7)(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@5.0.0-next.215)(vite@5.3.2(@types/node@20.14.9)))(postcss@8.4.39)(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.215)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)) '@storybook/test': specifier: ^8.2.2 version: 8.2.2(@jest/globals@29.7.0)(jest@29.7.0(@types/node@20.14.9))(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vitest@1.6.0(@types/node@20.14.9)(@vitest/ui@1.6.0)(jsdom@24.1.0)) '@sveltejs/package': specifier: ^2.3.2 - version: 2.3.2(svelte@5.0.0-next.155)(typescript@5.5.2) + version: 2.3.2(svelte@5.0.0-next.215)(typescript@5.5.2) '@sveltejs/vite-plugin-svelte': specifier: 4.0.0-next.3 - version: 4.0.0-next.3(svelte@5.0.0-next.155)(vite@5.3.2(@types/node@20.14.9)) + version: 4.0.0-next.3(svelte@5.0.0-next.215)(vite@5.3.2(@types/node@20.14.9)) '@tsconfig/svelte': specifier: ^5.0.4 version: 5.0.4 @@ -110,7 +110,7 @@ importers: version: 3.3.2 prettier-plugin-svelte: specifier: ^3.2.5 - version: 3.2.5(prettier@3.3.2)(svelte@5.0.0-next.155) + version: 3.2.5(prettier@3.3.2)(svelte@5.0.0-next.215) rimraf: specifier: ^5.0.7 version: 5.0.7 @@ -121,11 +121,11 @@ importers: specifier: ^8.2.2 version: 8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)) svelte: - specifier: 5.0.0-next.155 - version: 5.0.0-next.155 + specifier: 5.0.0-next.215 + version: 5.0.0-next.215 svelte-check: specifier: ^3.8.4 - version: 3.8.4(@babel/core@7.24.7)(postcss@8.4.39)(svelte@5.0.0-next.155) + version: 3.8.4(@babel/core@7.24.7)(postcss@8.4.39)(svelte@5.0.0-next.215) tslib: specifier: ^2.6.3 version: 2.6.3 @@ -137,7 +137,7 @@ importers: version: 5.5.2 typescript-svelte-plugin: specifier: ^0.3.39 - version: 0.3.39(svelte@5.0.0-next.155)(typescript@5.5.2) + version: 0.3.39(svelte@5.0.0-next.215)(typescript@5.5.2) vite: specifier: ^5.3.2 version: 5.3.2(@types/node@20.14.9) @@ -5245,8 +5245,8 @@ packages: svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 typescript: ^4.9.4 || ^5.0.0 - svelte@5.0.0-next.155: - resolution: {integrity: sha512-4a4EZuiTmg4eQJuQ6LTyK+DxRAZCYm4mXgqSWcZ7TellzLfaC1Je5nxBl1aZP3xdNhvPFIstQ8c7I6d+99FdZQ==} + svelte@5.0.0-next.215: + resolution: {integrity: sha512-jLCVHMrbiKQvXO2zGl6E/y7F7A5r4OPJBimqNWPuffrimk35j7SSKbMVGVAk6FesxLABxy760ZtnjRQ0XiSCDQ==} engines: {node: '>=18'} sveltedoc-parser@4.2.1: @@ -7786,15 +7786,15 @@ snapshots: react-dom: 18.3.1(react@18.3.1) storybook: 8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)) - '@storybook/svelte-vite@8.2.2(@babel/core@7.24.7)(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@5.0.0-next.155)(vite@5.3.2(@types/node@20.14.9)))(postcss@8.4.39)(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.155)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9))': + '@storybook/svelte-vite@8.2.2(@babel/core@7.24.7)(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@5.0.0-next.215)(vite@5.3.2(@types/node@20.14.9)))(postcss@8.4.39)(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.215)(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9))': dependencies: '@storybook/builder-vite': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.5.2)(vite@5.3.2(@types/node@20.14.9)) - '@storybook/svelte': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.155) - '@sveltejs/vite-plugin-svelte': 4.0.0-next.3(svelte@5.0.0-next.155)(vite@5.3.2(@types/node@20.14.9)) + '@storybook/svelte': 8.2.2(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.215) + '@sveltejs/vite-plugin-svelte': 4.0.0-next.3(svelte@5.0.0-next.215)(vite@5.3.2(@types/node@20.14.9)) magic-string: 0.30.10 storybook: 8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)) - svelte: 5.0.0-next.155 - svelte-preprocess: 6.0.2(@babel/core@7.24.7)(postcss@8.4.39)(svelte@5.0.0-next.155)(typescript@5.5.2) + svelte: 5.0.0-next.215 + svelte-preprocess: 6.0.2(@babel/core@7.24.7)(postcss@8.4.39)(svelte@5.0.0-next.215)(typescript@5.5.2) sveltedoc-parser: 4.2.1 ts-dedent: 2.2.0 vite: 5.3.2(@types/node@20.14.9) @@ -7813,11 +7813,11 @@ snapshots: - typescript - vite-plugin-glimmerx - '@storybook/svelte@8.2.2(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.155)': + '@storybook/svelte@8.2.2(storybook@8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.215)': dependencies: '@storybook/global': 5.0.0 storybook: 8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)) - svelte: 5.0.0-next.155 + svelte: 5.0.0-next.215 sveltedoc-parser: 4.2.1 ts-dedent: 2.2.0 type-fest: 2.19.0 @@ -7846,34 +7846,34 @@ snapshots: dependencies: storybook: 8.2.2(@babel/preset-env@7.24.7(@babel/core@7.24.7)) - '@sveltejs/package@2.3.2(svelte@5.0.0-next.155)(typescript@5.5.2)': + '@sveltejs/package@2.3.2(svelte@5.0.0-next.215)(typescript@5.5.2)': dependencies: chokidar: 3.6.0 kleur: 4.1.5 sade: 1.8.1 semver: 7.6.2 - svelte: 5.0.0-next.155 - svelte2tsx: 0.7.9(svelte@5.0.0-next.155)(typescript@5.5.2) + svelte: 5.0.0-next.215 + svelte2tsx: 0.7.9(svelte@5.0.0-next.215)(typescript@5.5.2) transitivePeerDependencies: - typescript - '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.1(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@5.0.0-next.155)(vite@5.3.2(@types/node@20.14.9)))(svelte@5.0.0-next.155)(vite@5.3.2(@types/node@20.14.9))': + '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.1(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@5.0.0-next.215)(vite@5.3.2(@types/node@20.14.9)))(svelte@5.0.0-next.215)(vite@5.3.2(@types/node@20.14.9))': dependencies: - '@sveltejs/vite-plugin-svelte': 4.0.0-next.3(svelte@5.0.0-next.155)(vite@5.3.2(@types/node@20.14.9)) + '@sveltejs/vite-plugin-svelte': 4.0.0-next.3(svelte@5.0.0-next.215)(vite@5.3.2(@types/node@20.14.9)) debug: 4.3.5 - svelte: 5.0.0-next.155 + svelte: 5.0.0-next.215 vite: 5.3.2(@types/node@20.14.9) transitivePeerDependencies: - supports-color - '@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@5.0.0-next.155)(vite@5.3.2(@types/node@20.14.9))': + '@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@5.0.0-next.215)(vite@5.3.2(@types/node@20.14.9))': dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.1(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@5.0.0-next.155)(vite@5.3.2(@types/node@20.14.9)))(svelte@5.0.0-next.155)(vite@5.3.2(@types/node@20.14.9)) + '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.1(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@5.0.0-next.215)(vite@5.3.2(@types/node@20.14.9)))(svelte@5.0.0-next.215)(vite@5.3.2(@types/node@20.14.9)) debug: 4.3.5 deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.10 - svelte: 5.0.0-next.155 + svelte: 5.0.0-next.215 vite: 5.3.2(@types/node@20.14.9) vitefu: 0.2.5(vite@5.3.2(@types/node@20.14.9)) transitivePeerDependencies: @@ -11726,10 +11726,10 @@ snapshots: dependencies: fast-diff: 1.3.0 - prettier-plugin-svelte@3.2.5(prettier@3.3.2)(svelte@5.0.0-next.155): + prettier-plugin-svelte@3.2.5(prettier@3.3.2)(svelte@5.0.0-next.215): dependencies: prettier: 3.3.2 - svelte: 5.0.0-next.155 + svelte: 5.0.0-next.215 prettier@3.3.2: {} @@ -12563,14 +12563,14 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - svelte-check@3.8.4(@babel/core@7.24.7)(postcss@8.4.39)(svelte@5.0.0-next.155): + svelte-check@3.8.4(@babel/core@7.24.7)(postcss@8.4.39)(svelte@5.0.0-next.215): dependencies: '@jridgewell/trace-mapping': 0.3.25 chokidar: 3.6.0 picocolors: 1.0.1 sade: 1.8.1 - svelte: 5.0.0-next.155 - svelte-preprocess: 6.0.2(@babel/core@7.24.7)(postcss@8.4.39)(svelte@5.0.0-next.155)(typescript@5.5.2) + svelte: 5.0.0-next.215 + svelte-preprocess: 6.0.2(@babel/core@7.24.7)(postcss@8.4.39)(svelte@5.0.0-next.215)(typescript@5.5.2) typescript: 5.5.2 transitivePeerDependencies: - '@babel/core' @@ -12583,29 +12583,29 @@ snapshots: - stylus - sugarss - svelte-preprocess@6.0.2(@babel/core@7.24.7)(postcss@8.4.39)(svelte@5.0.0-next.155)(typescript@5.5.2): + svelte-preprocess@6.0.2(@babel/core@7.24.7)(postcss@8.4.39)(svelte@5.0.0-next.215)(typescript@5.5.2): dependencies: - svelte: 5.0.0-next.155 + svelte: 5.0.0-next.215 optionalDependencies: '@babel/core': 7.24.7 postcss: 8.4.39 typescript: 5.5.2 - svelte2tsx@0.7.13(svelte@5.0.0-next.155)(typescript@5.5.2): + svelte2tsx@0.7.13(svelte@5.0.0-next.215)(typescript@5.5.2): dependencies: dedent-js: 1.0.1 pascal-case: 3.1.2 - svelte: 5.0.0-next.155 + svelte: 5.0.0-next.215 typescript: 5.5.2 - svelte2tsx@0.7.9(svelte@5.0.0-next.155)(typescript@5.5.2): + svelte2tsx@0.7.9(svelte@5.0.0-next.215)(typescript@5.5.2): dependencies: dedent-js: 1.0.1 pascal-case: 3.1.2 - svelte: 5.0.0-next.155 + svelte: 5.0.0-next.215 typescript: 5.5.2 - svelte@5.0.0-next.155: + svelte@5.0.0-next.215: dependencies: '@ampproject/remapping': 2.3.0 '@jridgewell/sourcemap-codec': 1.4.15 @@ -12846,10 +12846,10 @@ snapshots: typescript-memoize@1.1.1: {} - typescript-svelte-plugin@0.3.39(svelte@5.0.0-next.155)(typescript@5.5.2): + typescript-svelte-plugin@0.3.39(svelte@5.0.0-next.215)(typescript@5.5.2): dependencies: '@jridgewell/sourcemap-codec': 1.4.15 - svelte2tsx: 0.7.13(svelte@5.0.0-next.155)(typescript@5.5.2) + svelte2tsx: 0.7.13(svelte@5.0.0-next.215)(typescript@5.5.2) transitivePeerDependencies: - svelte - typescript diff --git a/src/compiler/transform/index.test.ts b/src/compiler/transform/index.test.ts index 5346460e..1d00c268 100644 --- a/src/compiler/transform/index.test.ts +++ b/src/compiler/transform/index.test.ts @@ -46,29 +46,20 @@ describe(transformStoriesCode.name, () => { expect(code.toString()).toMatchInlineSnapshot( ` - "import 'svelte/internal/disclose-version'; + "import "svelte/internal/disclose-version"; $.mark_module_start(); - Example_stories.filename = 'stories/Example.stories.svelte'; - - import * as $ from 'svelte/internal/client'; - - var Example_default = $.add_locations( - $.template(\`


\`, 1), - Example_stories.filename, - [ - [45, 4], - [46, 4], - [47, 24], - ] - ); - var Example_default_1 = $.add_locations($.template(\`Label\`, 1), Example_stories.filename, []); - var root = $.add_locations($.template(\` \`, 1), Example_stories.filename, []); + Example_stories[$.FILENAME] = "tests/stories/Example.stories.svelte"; + import * as $ from "svelte/internal/client"; import { action } from '@storybook/addon-actions'; import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf'; import Example from './Example.svelte'; + var root_2 = $.add_locations($.template(\`


\`, 1), Example_stories[$.FILENAME], [[45, 4], [46, 4], [47, 24]]); + var root_4 = $.add_locations($.template(\`Label\`, 1), Example_stories[$.FILENAME], []); + var root = $.add_locations($.template(\` \`, 1), Example_stories[$.FILENAME], []); + /** * Description set explicitly in the comment above \`defineMeta\`. * @@ -97,40 +88,40 @@ describe(transformStoriesCode.name, () => { }); function Example_stories($$anchor, $$props) { - if (new.target === Example_stories) - throw new Error( - 'Instantiating a component with \`new\` is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information' - ); + $.check_target(new.target); $.push($$props, true, Example_stories); - var render = $.wrap_snippet(($$anchor, args = $.noop, context = $.noop) => { + const render = $.wrap_snippet(Example_stories, ($$anchor, args = $.noop, context = $.noop) => { var fragment = $.comment(); var node = $.first_child(fragment); - $.validate_component(Example)( - node, - $.spread_props(args, { - onclick: handleClick, - children: $.wrap_snippet(($$anchor, $$slotProps) => { - var fragment_1 = Example_default(); - var p = $.first_child(fragment_1); - var text = $.child(p); - var p_1 = $.sibling($.sibling(p, true)); - var text_1 = $.child(p_1); - var text_2 = $.sibling(p_1, true); - var br = $.sibling(text_2); - - $.template_effect(() => { - $.set_text(text, args()?.id); - $.set_text(text_1, context().name); - $.set_text(text_2, \` You clicked: \${$.stringify($.get(count))}\`); - }); - - $.append($$anchor, fragment_1); - }), - $$slots: { default: true }, - }) - ); + Example(node, $.spread_props(args, { + onclick: handleClick, + children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => { + var fragment_1 = root_2(); + var p = $.first_child(fragment_1); + var text = $.child(p); + + $.reset(p); + + var p_1 = $.sibling($.sibling(p, true)); + var text_1 = $.child(p_1); + + $.reset(p_1); + + var text_2 = $.sibling(p_1, true); + var br = $.sibling(text_2); + + $.template_effect(() => { + $.set_text(text, args().id); + $.set_text(text_1, context().name); + $.set_text(text_2, \` You clicked: \${$.get(count) ?? ""}\`); + }); + + $.append($$anchor, fragment_1); + }), + $$slots: { default: true } + })); $.append($$anchor, fragment); }); @@ -148,8 +139,8 @@ describe(transformStoriesCode.name, () => { var fragment_2 = root(); var node_1 = $.first_child(fragment_2); - $.validate_component(Story)(node_1, { - name: 'Default', + Story(node_1, { + name: "Default", parameters: { docs: { description: { story: "Description for the default story" } @@ -162,8 +153,8 @@ describe(transformStoriesCode.name, () => { var node_2 = $.sibling($.sibling(node_1, true)); - $.validate_component(Story)(node_2, { - name: 'Rounded', + Story(node_2, { + name: "Rounded", args: { rounded: true }, parameters: { docs: { @@ -177,8 +168,8 @@ describe(transformStoriesCode.name, () => { var node_3 = $.sibling($.sibling(node_2, true)); - $.validate_component(Story)(node_3, { - name: 'Square', + Story(node_3, { + name: "Square", args: { rounded: false }, parameters: { docs: { @@ -192,15 +183,17 @@ describe(transformStoriesCode.name, () => { var node_4 = $.sibling($.sibling(node_3, true)); - $.validate_component(Story)(node_4, { - name: 'Without template', - children: $.wrap_snippet(($$anchor, $$slotProps) => { + Story(node_4, { + name: "Without template", + children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => { var fragment_3 = $.comment(); var node_5 = $.first_child(fragment_3); - $.validate_component(Example)(node_5, { - children: $.wrap_snippet(($$anchor, $$slotProps) => { - var fragment_4 = Example_default_1(); + Example(node_5, { + children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => { + $.next(); + + var fragment_4 = root_4(); $.append($$anchor, fragment_4); }), @@ -220,27 +213,17 @@ describe(transformStoriesCode.name, () => { } if (import.meta.hot) { - const s = $.source(Example_stories); - const filename = Example_stories.filename; - - Example_stories = $.hmr(s); - Example_stories.filename = filename; - - if (import.meta.hot.acceptExports) { - import.meta.hot.acceptExports(['default'], (module) => { - $.set(s, module.default); - }); - } else { - import.meta.hot.acceptExports(['default'], (module) => { - $.set(s, module.default); - }); - } + Example_stories = $.hmr(Example_stories, () => Example_stories[$.HMR].source); + + import.meta.hot.acceptExports(["default"], (module) => { + module.default[$.HMR].source = Example_stories[$.HMR].source; + $.set(Example_stories[$.HMR].source, module.default[$.HMR].original); + }); } $.mark_module_end(Example_stories); - Example_stories.__docgen = { keywords: [], data: [], name: 'Example.stories.svelte' }; import { createRuntimeStories } from "@storybook/addon-svelte-csf/internal/create-runtime-stories"; diff --git a/src/compiler/transform/story/index.test.ts b/src/compiler/transform/story/index.test.ts index a5194796..b279e4f8 100644 --- a/src/compiler/transform/story/index.test.ts +++ b/src/compiler/transform/story/index.test.ts @@ -70,70 +70,72 @@ describe(transformStory.name, () => { }); expect(print(compiledPostTransformedStories[0]).code).toMatchInlineSnapshot(` - "$.validate_component(Story)(node_1, { - name: 'Default', - parameters: { - docs: { - description: { story: "Description for the default story" } - }, - __svelteCsf: { - rawCode: "\\n

{args.id}

\\n

{context.name}

\\n You clicked: {count}
\\n" - } - } - });" - `); + "Story(node_1, { + name: "Default", + parameters: { + docs: { + description: { story: "Description for the default story" } + }, + __svelteCsf: { + rawCode: "\\n

{args.id}

\\n

{context.name}

\\n You clicked: {count}
\\n" + } + } + })" + `); expect(print(compiledPostTransformedStories[1]).code).toMatchInlineSnapshot(` - "$.validate_component(Story)(node_2, { - name: 'Rounded', - args: { rounded: true }, - parameters: { - docs: { - description: { story: "Description for the rounded story" } - }, - __svelteCsf: { - rawCode: "\\n

{args.id}

\\n

{context.name}

\\n You clicked: {count}
\\n" - } - } - });" - `); + "Story(node_2, { + name: "Rounded", + args: { rounded: true }, + parameters: { + docs: { + description: { story: "Description for the rounded story" } + }, + __svelteCsf: { + rawCode: "\\n

{args.id}

\\n

{context.name}

\\n You clicked: {count}
\\n" + } + } + })" + `); expect(print(compiledPostTransformedStories[2]).code).toMatchInlineSnapshot(` - "$.validate_component(Story)(node_3, { - name: 'Square', - args: { rounded: false }, - parameters: { - docs: { - description: { story: "Description for the squared story" } - }, - __svelteCsf: { - rawCode: "\\n

{args.id}

\\n

{context.name}

\\n You clicked: {count}
\\n" - } - } - });" - `); + "Story(node_3, { + name: "Square", + args: { rounded: false }, + parameters: { + docs: { + description: { story: "Description for the squared story" } + }, + __svelteCsf: { + rawCode: "\\n

{args.id}

\\n

{context.name}

\\n You clicked: {count}
\\n" + } + } + })" + `); expect(print(compiledPostTransformedStories[3]).code).toMatchInlineSnapshot(` - "$.validate_component(Story)(node_4, { - name: 'Without template', - children: $.wrap_snippet(($$anchor, $$slotProps) => { - var fragment_3 = $.comment(); - var node_5 = $.first_child(fragment_3); + "Story(node_4, { + name: "Without template", + children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => { + var fragment_3 = $.comment(); + var node_5 = $.first_child(fragment_3); - $.validate_component(Example)(node_5, { - children: $.wrap_snippet(($$anchor, $$slotProps) => { - var fragment_4 = Example_default_1(); + Example(node_5, { + children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => { + $.next(); - $.append($$anchor, fragment_4); - }), - $$slots: { default: true } - }); + var fragment_4 = root_4(); - $.append($$anchor, fragment_3); - }), - $$slots: { default: true }, - parameters: { - __svelteCsf: { rawCode: "Label" } - } - });" - `); + $.append($$anchor, fragment_4); + }), + $$slots: { default: true } + }); + + $.append($$anchor, fragment_3); + }), + $$slots: { default: true }, + parameters: { + __svelteCsf: { rawCode: "Label" } + } + })" + `); }); }); diff --git a/src/parser/analyse/story/attributes.test.ts b/src/parser/analyse/story/attributes.test.ts index b1fd6617..9675a198 100644 --- a/src/parser/analyse/story/attributes.test.ts +++ b/src/parser/analyse/story/attributes.test.ts @@ -37,9 +37,9 @@ describe(getStringValueFromAttribute.name, () => { .toThrowErrorMatchingInlineSnapshot(` [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0001 (AttributeNotStringError): In the stories file: - A '' has a prop 'name' whose value must be a static literal string. + A '' has a prop 'name' whose value must be a static literal string. - More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0001 + More info: https://github.com/storybookjs/addon-svelte-csf/blob/v4.1.2/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0001 ] `); }); diff --git a/src/parser/analyse/story/attributes.ts b/src/parser/analyse/story/attributes.ts index dfea9138..66ec41aa 100644 --- a/src/parser/analyse/story/attributes.ts +++ b/src/parser/analyse/story/attributes.ts @@ -21,10 +21,14 @@ export function getStringValueFromAttribute(params: Params) { const { value } = node; - if (value === true || value.length !== 1) { + if (value === true) { throw new AttributeNotStringError({ filename, component, attribute: node }); } + if (value.type === 'ExpressionTag' && value.expression.type === 'Literal') { + return value.expression.value; + } + if (value[0].type === 'Text') { return value[0].data; } @@ -51,9 +55,8 @@ export function getArrayOfStringsValueFromAttribute(params: Params) { if ( value === true || - value.length !== 1 || - value[0].type !== 'ExpressionTag' || - value[0].expression.type !== 'ArrayExpression' + value.type !== 'ExpressionTag' || + value.expression.type !== 'ArrayExpression' ) { throw new AttributeNotArrayError({ component, @@ -64,7 +67,7 @@ export function getArrayOfStringsValueFromAttribute(params: Params) { const arrayOfStrings: string[] = []; - for (const element of value[0].expression.elements) { + for (const element of value.expression.elements) { if (element?.type !== 'Literal' || typeof element.value !== 'string') { throw new AttributeNotArrayOfStringsError({ filename, diff --git a/src/parser/extract/compiled/stories.ts b/src/parser/extract/compiled/stories.ts index 74a7c0ce..54b5d08d 100644 --- a/src/parser/extract/compiled/stories.ts +++ b/src/parser/extract/compiled/stories.ts @@ -10,9 +10,6 @@ interface Params { type Result = (CallExpression | ExpressionStatement)[]; -/** - * WARN: The content of this function body differs in the production/development mode - */ export async function extractStoriesNodesFromExportDefaultFn(params: Params) { const { walk } = await import('zimmerframe'); @@ -20,32 +17,8 @@ export async function extractStoriesNodesFromExportDefaultFn(params: Params) { const { storiesFunctionDeclaration, storyIdentifier } = nodes; const state: Result = []; const visitors: Visitors = { - ExpressionStatement(node, { state, next }) { - if (process.env.NODE_ENV !== 'development') { - next(); - } - - // 🫠 ... some fun with AST - // Good to know: - // I can't split into smaller if-statements, - // because TypeScript wouldn't understand that `next()` gets out of the currently visited node scope - aka `return;` - if ( - node.expression.type === 'CallExpression' && - node.expression.callee.type === 'CallExpression' && - node.expression.callee.callee.type === 'MemberExpression' && - node.expression.callee.callee.object.type === 'Identifier' && - node.expression.callee.callee.object.name === '$' && - node.expression.callee.arguments[0].type === 'Identifier' && - node.expression.callee.arguments[0].name === storyIdentifier.name - ) { - state.push(node); - } - }, - - CallExpression(node, { state, next }) { - if (process.env.NODE_ENV !== 'production') { - next(); - } + CallExpression(node, context) { + const { state } = context; if (node.callee.type === 'Identifier' && node.callee.name === storyIdentifier.name) { state.push(node); diff --git a/src/parser/extract/svelte/snippet-block.ts b/src/parser/extract/svelte/snippet-block.ts index 77181a90..86c757e5 100644 --- a/src/parser/extract/svelte/snippet-block.ts +++ b/src/parser/extract/svelte/snippet-block.ts @@ -41,7 +41,7 @@ export function findStoryAttributeChildrenSnippetBlock(options: { const { value } = children; - if (value === true || value[0].type === 'Text' || value[0].expression.type !== 'Identifier') { + if (value === true || value.type !== 'ExpressionTag' || value.expression.type !== 'Identifier') { throw new InvalidStoryChildrenAttributeError({ component: component, childrenAttribute: children, @@ -50,7 +50,7 @@ export function findStoryAttributeChildrenSnippetBlock(options: { } return findSnippetBlockByName({ - name: value[0].expression.name, + name: value.expression.name, nodes: nodes, }); } diff --git a/src/utils/error.ts b/src/utils/error.ts index c0b7f20a..527692b2 100644 --- a/src/utils/error.ts +++ b/src/utils/error.ts @@ -111,29 +111,35 @@ export abstract class StorybookSvelteCSFError extends Error { // WARN: I had to duplicate logic. We already have functions for it. // But we can't import it, because it would create a cyclic-dependency. protected get storyNameFromAttribute() { - if (this.component) { - for (const attribute of this.component?.attributes) { + if (!this.component) { + return ''; + } + + const { attributes } = this.component; + + for (const attribute of attributes) { + if (attribute.type === 'Attribute' && attribute.name === 'name' && attribute.value !== true) { + if (attribute.value.type === 'ExpressionTag') { + return attribute.value.expression.value; + } + + if (attribute.value[0].type === 'Text') { + return attribute.value[0].data; + } + + if (attribute.value[0].type === 'Text') { + return attribute.value[0].data; + } + if ( - attribute.type === 'Attribute' && - attribute.name === 'name' && - attribute.value !== true + attribute.value[0].type === 'ExpressionTag' && + attribute.value[0].expression.type === 'Literal' && + typeof attribute.value[0].expression.value === 'string' ) { - if (attribute.value[0].type === 'Text') { - return attribute.value[0].data; - } - - if ( - attribute.value[0].type === 'ExpressionTag' && - attribute.value[0].expression.type === 'Literal' && - typeof attribute.value[0].expression.value === 'string' - ) { - return attribute.value[0].expression.value; - } + return attribute.value[0].expression.value; } } } - - return ''; } public get filepathURL() { diff --git a/src/utils/error/parser/analyse/story.ts b/src/utils/error/parser/analyse/story.ts index b05e054f..fd28ea41 100644 --- a/src/utils/error/parser/analyse/story.ts +++ b/src/utils/error/parser/analyse/story.ts @@ -55,10 +55,17 @@ export class AttributeNotArrayError extends StorybookSvelteCSFError { } get valueType() { - const { value } = this.attribute; + const { attribute } = this; + const { value } = attribute; + if (value === true) { return true; } + + if (value.type === 'ExpressionTag') { + return value.expression.value; + } + if (value[0].type === 'Text') { return value[0].data; } @@ -101,10 +108,17 @@ export class AttributeNotArrayOfStringsError extends StorybookSvelteCSFError { } get valueType() { - const { value } = this.attribute; + const { attribute } = this; + const { value } = attribute; + if (value === true) { return true; } + + if (value.type === 'ExpressionTag') { + return value.expression.value; + } + if (value[0].type === 'Text') { return value[0].data; } diff --git a/tests/__compiled__/pre-transform/Example.stories.dev.js b/tests/__compiled__/pre-transform/Example.stories.dev.js index aee3b0fa..21f32734 100644 --- a/tests/__compiled__/pre-transform/Example.stories.dev.js +++ b/tests/__compiled__/pre-transform/Example.stories.dev.js @@ -1,26 +1,17 @@ -import 'svelte/internal/disclose-version'; +import "svelte/internal/disclose-version"; $.mark_module_start(); -Example_stories.filename = 'stories/Example.stories.svelte'; - -import * as $ from 'svelte/internal/client'; - -var Example_default = $.add_locations( - $.template(`


`, 1), - Example_stories.filename, - [ - [45, 4], - [46, 4], - [47, 24], - ] -); -var Example_default_1 = $.add_locations($.template(`Label`, 1), Example_stories.filename, []); -var root = $.add_locations($.template(` `, 1), Example_stories.filename, []); +Example_stories[$.FILENAME] = "tests/stories/Example.stories.svelte"; +import * as $ from "svelte/internal/client"; import { action } from '@storybook/addon-actions'; import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf'; import Example from './Example.svelte'; +var root_2 = $.add_locations($.template(`


`, 1), Example_stories[$.FILENAME], [[45, 4], [46, 4], [47, 24]]); +var root_4 = $.add_locations($.template(`Label`, 1), Example_stories[$.FILENAME], []); +var root = $.add_locations($.template(` `, 1), Example_stories[$.FILENAME], []); + /** * Description set explicitly in the comment above `defineMeta`. * @@ -37,45 +28,45 @@ const { Story } = defineMeta({ args: { onclick: action('onclick'), onmouseenter: action('onmouseenter'), - onmouseleave: action('onmouseleave'), - }, + onmouseleave: action('onmouseleave') + } }); function Example_stories($$anchor, $$props) { - if (new.target === Example_stories) - throw new Error( - 'Instantiating a component with `new` is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information' - ); + $.check_target(new.target); $.push($$props, true, Example_stories); - var render = $.wrap_snippet(($$anchor, args = $.noop, context = $.noop) => { + const render = $.wrap_snippet(Example_stories, ($$anchor, args = $.noop, context = $.noop) => { var fragment = $.comment(); var node = $.first_child(fragment); - $.validate_component(Example)( - node, - $.spread_props(args, { - onclick: handleClick, - children: $.wrap_snippet(($$anchor, $$slotProps) => { - var fragment_1 = Example_default(); - var p = $.first_child(fragment_1); - var text = $.child(p); - var p_1 = $.sibling($.sibling(p, true)); - var text_1 = $.child(p_1); - var text_2 = $.sibling(p_1, true); - var br = $.sibling(text_2); - - $.template_effect(() => { - $.set_text(text, args()?.id); - $.set_text(text_1, context().name); - $.set_text(text_2, ` You clicked: ${$.stringify($.get(count))}`); - }); - - $.append($$anchor, fragment_1); - }), - $$slots: { default: true }, - }) - ); + Example(node, $.spread_props(args, { + onclick: handleClick, + children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => { + var fragment_1 = root_2(); + var p = $.first_child(fragment_1); + var text = $.child(p); + + $.reset(p); + + var p_1 = $.sibling($.sibling(p, true)); + var text_1 = $.child(p_1); + + $.reset(p_1); + + var text_2 = $.sibling(p_1, true); + var br = $.sibling(text_2); + + $.template_effect(() => { + $.set_text(text, args().id); + $.set_text(text_1, context().name); + $.set_text(text_2, ` You clicked: ${$.get(count) ?? ""}`); + }); + + $.append($$anchor, fragment_1); + }), + $$slots: { default: true } + })); $.append($$anchor, fragment); }); @@ -93,36 +84,38 @@ function Example_stories($$anchor, $$props) { var fragment_2 = root(); var node_1 = $.first_child(fragment_2); - $.validate_component(Story)(node_1, { name: 'Default' }); + Story(node_1, { name: "Default" }); var node_2 = $.sibling($.sibling(node_1, true)); - $.validate_component(Story)(node_2, { name: 'Rounded', args: { rounded: true } }); + Story(node_2, { name: "Rounded", args: { rounded: true } }); var node_3 = $.sibling($.sibling(node_2, true)); - $.validate_component(Story)(node_3, { name: 'Square', args: { rounded: false } }); + Story(node_3, { name: "Square", args: { rounded: false } }); var node_4 = $.sibling($.sibling(node_3, true)); - $.validate_component(Story)(node_4, { - name: 'Without template', - children: $.wrap_snippet(($$anchor, $$slotProps) => { + Story(node_4, { + name: "Without template", + children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => { var fragment_3 = $.comment(); var node_5 = $.first_child(fragment_3); - $.validate_component(Example)(node_5, { - children: $.wrap_snippet(($$anchor, $$slotProps) => { - var fragment_4 = Example_default_1(); + Example(node_5, { + children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => { + $.next(); + + var fragment_4 = root_4(); $.append($$anchor, fragment_4); }), - $$slots: { default: true }, + $$slots: { default: true } }); $.append($$anchor, fragment_3); }), - $$slots: { default: true }, + $$slots: { default: true } }); $.append($$anchor, fragment_2); @@ -130,24 +123,14 @@ function Example_stories($$anchor, $$props) { } if (import.meta.hot) { - const s = $.source(Example_stories); - const filename = Example_stories.filename; - - Example_stories = $.hmr(s); - Example_stories.filename = filename; - - if (import.meta.hot.acceptExports) { - import.meta.hot.acceptExports(['default'], (module) => { - $.set(s, module.default); - }); - } else { - import.meta.hot.acceptExports(['default'], (module) => { - $.set(s, module.default); - }); - } + Example_stories = $.hmr(Example_stories, () => Example_stories[$.HMR].source); + + import.meta.hot.acceptExports(["default"], (module) => { + module.default[$.HMR].source = Example_stories[$.HMR].source; + $.set(Example_stories[$.HMR].source, module.default[$.HMR].original); + }); } export default Example_stories; $.mark_module_end(Example_stories); -Example_stories.__docgen = { keywords: [], data: [], name: 'Example.stories.svelte' };