Svelte CSF Stories #1

j3rem1e · 2021-02-24T20:36:28Z

Implementation of a svelte story format

shilman

This is tremendous @j3rem1e -- I'm thrilled you were able to get it working without modifying Storybook core 🙌

Anthropic · 2021-02-25T06:34:26Z

@j3rem1e would it be possible, based on your knowledge gained from working on this epically awesome PR here, to actually include a storybook definition within a svelte component in future? Just curious, not even a suggestion.

I admit the documentation part of this PR had me initially thinking that would be possible, till I read it more carefully.

@j3rem1e you sir are a champion, can't wait to use this.

j3rem1e · 2021-02-27T19:28:08Z

@Anthropic I don't think it will be easy to do that. maybe with a preprocessor, but mixin a component and his stories is probably not a good idea :

Story or Meta component should be included only in a Storybook, not in the final prod bundle
script tag should not be shared either, otherwise test code will be included in the prod bundle

phated

Had a few questions about how this works 😄

package.json

src/parser/collect-stories.js

src/parser/extract-id.test.js

src/parser/extract-stories.ts

src/parser/svelte-stories-loader.ts

phated · 2021-02-28T20:42:49Z

src/parser/svelte-stories-loader.ts

+    .map(([id]) => `export const ${id} = __storiesMetaData.stories[${JSON.stringify(id)}]`)
+    .join('\n');
+
+  const codeWithoutDefaultExport = code.replace('export default ', '//export default');


What's this for?

In svelte, the component are exported as a default export. this is not valid in CSF, the default export should be the tag.

This line is just a 'cheap' way to transform the js generated by svelte by removing this default export.

phated · 2021-02-28T20:43:50Z

src/parser/svelte-stories-loader.ts

+
+  return dedent`${codeWithoutDefaultExport}
+    const { default: parser } = require('${parser}');
+    const __storiesMetaData = parser(${componentName}, ${JSON.stringify(stories)});


So the parser is still run dynamically, even though the stories were already parsed?

Yes, the Stories are executed in a context which disable rendering, but collect every args/loaders/parameters

betaboon · 2021-03-01T11:46:43Z

i just checked out this branch and ran npm run build followed by npm run storybook and ran into the following error for all svelte-stories:

WARNING in ./stories/button.stories.svelte
Module build failed (from ./dist/parser/svelte-stories-loader.js):
TypeError: name.replaceAll is not a function
    at extractId (/home/betaboon/src/js/addon-svelte-csf/dist/parser/extract-id.js:17:15)
    at Object.enter (/home/betaboon/src/js/addon-svelte-csf/dist/parser/extract-stories.js:86:43)
    at visit (/home/betaboon/src/js/addon-svelte-csf/node_modules/svelte/compiler.js:5256:11)
    at visit (/home/betaboon/src/js/addon-svelte-csf/node_modules/svelte/compiler.js:5288:13)
    at Object.walk (/home/betaboon/src/js/addon-svelte-csf/node_modules/svelte/compiler.js:5207:10)
    at extractStories (/home/betaboon/src/js/addon-svelte-csf/dist/parser/extract-stories.js:72:10)
    at Object.transformSvelteStories (/home/betaboon/src/js/addon-svelte-csf/dist/parser/svelte-stories-loader.js:64:52)

it is working for me with the following patch:

diff --git a/src/parser/extract-id.ts b/src/parser/extract-id.ts
index e47f87a..cb54669 100644
--- a/src/parser/extract-id.ts
+++ b/src/parser/extract-id.ts
@@ -4,5 +4,5 @@ export function extractId({ id, name }: { id?: string; name?: string }): string
     return id;
   }
 
-  return name.replaceAll(/[^a-zA-Z0-9_]/g, '_');
+  return name.replace(/[^a-zA-Z0-9_]/g, '_');
 }

j3rem1e · 2021-03-01T12:01:44Z

@betaboon this should be fixed, I removed replaceAll which is not supported by all platforms.

betaboon · 2021-03-01T12:02:28Z

@betaboon this should be fixed, I removed replaceAll which is not supported by all platforms.

i can confirm that it is fixed (after the force-push) :) thank you

betaboon · 2021-03-01T16:49:01Z

just fyi: using argTypes works great as well:

<script>
  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
  import Button from "./Button.svelte";

  const meta = {
    title: "Example/Button",
    component: Button,
    argTypes: {
      backgroundColor: { control: "color" },
      size: {
        control: {
          type: "inline-radio",
          options: ["small", "medium", "large"],
        },
      },
      onClick: { action: "onClick" },
    },
  };
</script>

<Meta {...meta} />

<Template let:args>
  <Button {...args} on:click={args.onClick} />
</Template>

<Story name="Primary" args={{ label: 'Button', primary: true }} />

<Story name="Secondary" args={{ label: 'Button' }} />

<Story name="Large" args={{ label: 'Button', size: 'large' }} />

<Story name="Small" args={{ label: 'Button', size: 'small' }} />

PS: would it be possible to get a pre-release on npm ? :)

phated

@shilman I'm inclined to say this is good-to-go unless you have any feedback on my couple of comments.

shilman · 2021-03-05T13:49:07Z

Sorry just seeing the notification now--will review in the morning 🙏

hkievet · 2023-03-04T16:34:41Z

src/jest-transform.js

@@ -0,0 +1,25 @@
+const svelte = require('svelte/compiler');
+
+const parser = require.resolve('./parser/collect-stories').replace(/[/\\]/g, '/');


Why [/\\] and not just [\\]?

Svelte Stories

1b15c7e

j3rem1e mentioned this pull request Feb 24, 2021

Svelte: Native Svelte CSF storybookjs/storybook#13772

Closed

shilman requested a review from phated February 24, 2021 23:13

shilman approved these changes Feb 24, 2021

View reviewed changes

This was referenced Feb 24, 2021

Svelte: Svelte syntax Component Story Format (Reupload) storybookjs/storybook#12367

Closed

Svelte: support using svelte templates (v3) in stories storybookjs/storybook#6653

Closed

shilman mentioned this pull request Feb 24, 2021

Svelte: Svelte syntax Component Story Format storybookjs/storybook#7682

Closed

5 tasks

phated reviewed Feb 28, 2021

View reviewed changes

j3rem1e added 3 commits February 28, 2021 22:57

Support renamed import

7606615

Fix dependencies

964c314

Fix typo

9b4875e

j3rem1e added 2 commits March 1, 2021 12:59

Improve generated stories ID

0d67b0c

Fix storyshots integrity options

a655daf

j3rem1e force-pushed the svelte-csf branch from 1d3abd3 to a655daf Compare March 1, 2021 11:59

phated approved these changes Mar 3, 2021

View reviewed changes

shilman changed the title ~~Svelte Stories~~ Svelte CSF Stories Mar 6, 2021

shilman merged commit f514912 into storybookjs:main Mar 6, 2021

shilman added enhancement New feature or request major Increment the major version when merged labels Mar 6, 2021

betaboon mentioned this pull request Mar 14, 2021

How do I use argTypes including controls? #5

Closed

hkievet reviewed Mar 4, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Svelte CSF Stories #1

Svelte CSF Stories #1

j3rem1e commented Feb 24, 2021

shilman left a comment

Anthropic commented Feb 25, 2021 •

edited

Loading

j3rem1e commented Feb 27, 2021

phated left a comment

phated Feb 28, 2021

j3rem1e Feb 28, 2021

phated Feb 28, 2021

j3rem1e Feb 28, 2021

betaboon commented Mar 1, 2021

j3rem1e commented Mar 1, 2021

betaboon commented Mar 1, 2021

betaboon commented Mar 1, 2021

phated left a comment

shilman commented Mar 5, 2021

hkievet Mar 4, 2023

		@@ -0,0 +1,25 @@
		const svelte = require('svelte/compiler');

		const parser = require.resolve('./parser/collect-stories').replace(/[/\\]/g, '/');

Svelte CSF Stories #1

Svelte CSF Stories #1

Conversation

j3rem1e commented Feb 24, 2021

shilman left a comment

Choose a reason for hiding this comment

Anthropic commented Feb 25, 2021 • edited Loading

j3rem1e commented Feb 27, 2021

phated left a comment

Choose a reason for hiding this comment

phated Feb 28, 2021

Choose a reason for hiding this comment

j3rem1e Feb 28, 2021

Choose a reason for hiding this comment

phated Feb 28, 2021

Choose a reason for hiding this comment

j3rem1e Feb 28, 2021

Choose a reason for hiding this comment

betaboon commented Mar 1, 2021

j3rem1e commented Mar 1, 2021

betaboon commented Mar 1, 2021

betaboon commented Mar 1, 2021

phated left a comment

Choose a reason for hiding this comment

shilman commented Mar 5, 2021

hkievet Mar 4, 2023

Choose a reason for hiding this comment

Anthropic commented Feb 25, 2021 •

edited

Loading