@storybook/addon-svelte-csf 4.0.6 → 4.0.8

package/README.md

@@ -14,21 +14,29 @@ It supports:
 ## Example
 
 ```svelte
-<script>
-  import { Meta, Story, Template } from '@storybook/addon-svelte-csf';
-
+<script context="module">
   import Button from './Button.svelte';
 
+  export const meta = {
+    title: "Button",
+    component: Button
+  }
+</script>
+
+<script>
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+
   let count = 0;
   function handleClick() {
     count += 1;
   }
 </script>
 
-<Meta title="Button" component={Button}/>
-
 <Template let:args>
-  <Button {...args} on:click={handleClick}>
+  <!--👇 'on:click' allows to forward event to addon-actions  -->
+  <Button {...args} 
+    on:click
+    on:click={handleClick}>
     You clicked: {count}
   </Button>
 </Template>
@@ -43,6 +51,9 @@ It supports:
 </Story>
 ```
 
+Actions are automatically registered by Storybook. To be used by this addon, you just have to forward the event (`on:click` in the previous example).
+
+
 ## Getting Started
 
 1. `npm install --save-dev @storybook/addon-svelte-csf` or `yarn add --dev @storybook/addon-svelte-csf`

package/dist/components/RenderContext.svelte

@@ -9,9 +9,25 @@
   export let args = {};
   export let storyContext = {};
 
+  /** @type {import('svelte').SvelteComponent} */
+  let instance;
+
   createRenderContext($$props);
 
+  // events are static and don't need to be reactive
+  const eventsFromArgTypes = Object.fromEntries(
+    Object.entries(storyContext.argTypes)
+      .filter(([k, v]) => v.action && args[k] != null)
+      .map(([k, v]) => [v.action, args[k]])
+  ); 
+
   $: setStoryRenderContext(args, storyContext);
+
+
+  $: if (instance) {
+    Object.entries(eventsFromArgTypes).forEach(([event, handler]) => instance.$on(event, handler));
+  }
+
 </script>
 
-<svelte:component this={Stories} />
+<svelte:component this={Stories} bind:this={instance}/>

package/dist/index.d.ts

@@ -44,7 +44,22 @@ interface TemplateProps extends BaseAnnotations<any, DecoratorReturnType> {
     id?: string;
 }
 
-interface MetaProps extends BaseMeta<any>, BaseAnnotations<any, DecoratorReturnType> { }
+interface MetaProps extends BaseMeta<any>, BaseAnnotations<any, DecoratorReturnType> {
+    /**
+     * Enable the tag 'autodocs'.
+     * 
+     * @see [Automatic documentation](https://storybook.js.org/docs/svelte/writing-docs/autodocs)
+     */
+    autodocs?: boolean;
+    /**
+     * List of tags to add to the stories.
+     * 
+     * It should be a static array of strings.
+     * 
+     * @example tags={['autodocs']}
+     */
+    tags?: string[];
+}
 
 interface Slots {
     default: {
@@ -55,6 +70,8 @@ interface Slots {
 }
 /**
  * Meta.
+ * 
+ * @deprecated Use `export const meta`. See https://github.com/storybookjs/addon-svelte-csf for an example
  */
 export class Meta extends SvelteComponent<MetaProps> { }
 /**

package/dist/parser/collect-stories.d.ts

@@ -5,7 +5,7 @@ interface Meta {
 declare const _default: (StoriesComponent: any, { stories, allocatedIds }: {
     stories?: {} | undefined;
     allocatedIds?: never[] | undefined;
-}) => {
+}, exportedMeta?: undefined) => {
     meta?: undefined;
     stories?: undefined;
 } | {

package/dist/parser/collect-stories.js

@@ -7,7 +7,7 @@ import { logger } from '@storybook/client-logger';
 const createFragment = document.createDocumentFragment
     ? () => document.createDocumentFragment()
     : () => document.createElement('div');
-export default (StoriesComponent, { stories = {}, allocatedIds = [] }) => {
+export default (StoriesComponent, { stories = {}, allocatedIds = [] }, exportedMeta = undefined) => {
     const repositories = {
         meta: null,
         stories: [],
@@ -26,7 +26,7 @@ export default (StoriesComponent, { stories = {}, allocatedIds = [] }) => {
     catch (e) {
         logger.error(`Error extracting stories ${e.toString()}`, e);
     }
-    const { meta } = repositories;
+    const meta = exportedMeta || repositories.meta;
     if (!meta) {
         logger.error('Missing <Meta/> tag');
         return {};

package/dist/parser/extract-stories.d.ts

@@ -7,6 +7,7 @@ interface StoryDef {
 interface MetaDef {
     title?: string;
     id?: string;
+    tags?: string[];
 }
 interface StoriesDef {
     meta: MetaDef;

package/dist/parser/extract-stories.js

@@ -1,19 +1,80 @@
 import * as svelte from 'svelte/compiler';
 import dedent from 'dedent';
 import { extractId } from './extract-id.js';
+function lookupAttribute(name, attributes) {
+    return attributes.find((att) => (att.type === 'Attribute' && att.name === name) ||
+        (att.type === 'Property' && att.key.name === name));
+}
 function getStaticAttribute(name, node) {
     // extract the attribute
-    const attribute = node.attributes.find((att) => att.type === 'Attribute' && att.name === name);
+    const attribute = lookupAttribute(name, node);
     if (!attribute) {
         return undefined;
     }
     const { value } = attribute;
-    // expect the attribute to be static, ie only one Text node
+    // expect the attribute to be static, ie only one Text node or Literal
+    if (value?.type === 'Literal') {
+        return value.value;
+    }
     if (value && value.length === 1 && value[0].type === 'Text') {
         return value[0].data;
     }
     throw new Error(`Attribute ${name} is not static`);
 }
+function getStaticBooleanAttribute(name, attributes) {
+    // extract the attribute
+    const attribute = lookupAttribute(name, attributes);
+    if (!attribute) {
+        return undefined;
+    }
+    const { value } = attribute;
+    // expect the attribute to be static and a boolean
+    if (typeof value === 'boolean') {
+        return value;
+    }
+    throw new Error(`Attribute ${name} is not a static boolean`);
+}
+function getMetaTags(attributes) {
+    const finalTags = getStaticBooleanAttribute('autodocs', attributes) ? ["autodocs"] : [];
+    const tags = lookupAttribute('tags', attributes);
+    if (tags) {
+        let valid = false;
+        let { value } = tags;
+        if (value && value.length === 1) {
+            value = value[0];
+        }
+        const { type, expression, data } = value;
+        if (type === 'Text') {
+            // tags="autodocs"
+            finalTags.push(data);
+            valid = true;
+        }
+        else if (type === 'ArrayExpression') {
+            // tags={["autodocs"]} in object
+            const { elements } = value;
+            elements.forEach((e) => finalTags.push(e.value));
+            valid = true;
+        }
+        else if (type === 'MustacheTag' && expression.type === 'ArrayExpression') {
+            // tags={["autodocs"]} in template
+            const { elements } = expression;
+            elements.forEach((e) => finalTags.push(e.value));
+            valid = true;
+        }
+        if (!valid) {
+            throw new Error('Attribute tags should be a static string array or a string');
+        }
+    }
+    return finalTags;
+}
+function fillMetaFromAttributes(meta, attributes) {
+    meta.title = getStaticAttribute('title', attributes);
+    meta.id = getStaticAttribute('id', attributes);
+    const tags = getMetaTags(attributes);
+    if (tags.length > 0) {
+        meta.tags = tags;
+    }
+}
 /**
  * Parse a Svelte component and extract stories.
  * @param component Component Source
@@ -57,6 +118,25 @@ export function extractStories(component) {
     }
     const stories = {};
     const meta = {};
+    if (ast.module) {
+        svelte.walk(ast.module.content, {
+            enter(node) {
+                if (node.type === 'ExportNamedDeclaration' &&
+                    node.declaration?.type === 'VariableDeclaration' &&
+                    node.declaration?.declarations.length === 1 &&
+                    node.declaration?.declarations[0]?.id?.name === 'meta') {
+                    if (node.declaration?.kind !== 'const') {
+                        throw new Error('meta should be exported as const');
+                    }
+                    const init = node.declaration?.declarations[0]?.init;
+                    if (init?.type !== 'ObjectExpression') {
+                        throw new Error('meta should export on object');
+                    }
+                    fillMetaFromAttributes(meta, init.properties);
+                }
+            }
+        });
+    }
     svelte.walk(ast.html, {
         enter(node) {
             if (node.type === 'InlineComponent' &&
@@ -64,13 +144,13 @@ export function extractStories(component) {
                 this.skip();
                 const isTemplate = node.name === 'Template';
                 // extract the 'name' attribute
-                let name = getStaticAttribute('name', node);
+                let name = getStaticAttribute('name', node.attributes);
                 // templates has a default name
                 if (!name && isTemplate) {
                     name = 'default';
                 }
                 const id = extractId({
-                    id: getStaticAttribute('id', node),
+                    id: getStaticAttribute('id', node.attributes),
                     name,
                 }, isTemplate ? undefined : allocatedIds);
                 if (name && id) {
@@ -93,8 +173,7 @@ export function extractStories(component) {
             }
             else if (node.type === 'InlineComponent' && node.name === localNames.Meta) {
                 this.skip();
-                meta.title = getStaticAttribute('title', node);
-                meta.id = getStaticAttribute('id', node);
+                fillMetaFromAttributes(meta, node.attributes);
             }
         },
     });

package/dist/parser/extract-stories.test.js

@@ -205,6 +205,142 @@ describe('extractSource', () => {
       }
     `);
     });
+    test('Add tags autodocs', () => {
+        expect(extractStories(`
+        <script>
+          import { Story, Meta } from '@storybook/addon-svelte-csf';
+        </script>
+
+        <Meta title='test' autodocs/>
+
+        <Story name="Story1">
+          <div>story 1</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      {
+        "allocatedIds": [
+          "default",
+          "Story",
+          "Meta",
+        ],
+        "meta": {
+          "id": undefined,
+          "tags": [
+            "autodocs",
+          ],
+          "title": "test",
+        },
+        "stories": {
+          "Story1": {
+            "hasArgs": false,
+            "name": "Story1",
+            "source": "<div>story 1</div>",
+            "storyId": "test--story-1",
+            "template": false,
+          },
+        },
+      }
+    `);
+    });
+    test('Add tags', () => {
+        expect(extractStories(`
+        <script>
+          import { Story, Meta } from '@storybook/addon-svelte-csf';
+        </script>
+
+        <Meta title='test' tags={['a','b']}/>
+
+        <Story name="Story1">
+          <div>story 1</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      {
+        "allocatedIds": [
+          "default",
+          "Story",
+          "Meta",
+        ],
+        "meta": {
+          "id": undefined,
+          "tags": [
+            "a",
+            "b",
+          ],
+          "title": "test",
+        },
+        "stories": {
+          "Story1": {
+            "hasArgs": false,
+            "name": "Story1",
+            "source": "<div>story 1</div>",
+            "storyId": "test--story-1",
+            "template": false,
+          },
+        },
+      }
+    `);
+    });
+    test('Add Only one tag', () => {
+        expect(extractStories(`
+        <script>
+          import { Story, Meta } from '@storybook/addon-svelte-csf';
+        </script>
+
+        <Meta title='test' tags='a'/>
+
+        <Story name="Story1">
+          <div>story 1</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      {
+        "allocatedIds": [
+          "default",
+          "Story",
+          "Meta",
+        ],
+        "meta": {
+          "id": undefined,
+          "tags": [
+            "a",
+          ],
+          "title": "test",
+        },
+        "stories": {
+          "Story1": {
+            "hasArgs": false,
+            "name": "Story1",
+            "source": "<div>story 1</div>",
+            "storyId": "test--story-1",
+            "template": false,
+          },
+        },
+      }
+    `);
+    });
+    test('Meta as exported module object', () => {
+        expect(extractStories(`
+        <script context='module'>
+          export const meta = {
+            title: 'MyStory',
+            tags: ['a']
+          };
+        </script>
+        `)).toMatchInlineSnapshot(`
+      {
+        "allocatedIds": [
+          "default",
+        ],
+        "meta": {
+          "id": undefined,
+          "tags": [
+            "a",
+          ],
+          "title": "MyStory",
+        },
+        "stories": {},
+      }
+    `);
+    });
     test('Duplicate Id', () => {
         expect(extractStories(`
         <script>

package/dist/parser/svelte-stories-loader.js

@@ -42,10 +42,11 @@ function transformSvelteStories(code) {
         .filter(([, def]) => !def.template)
         .map(([id]) => `export const ${id} = __storiesMetaData.stories[${JSON.stringify(id)}]`)
         .join('\n');
-    const codeWithoutDefaultExport = code.replace('export default ', '//export default');
+    const metaExported = code.includes('export { meta }');
+    const codeWithoutDefaultExport = code.replace('export default ', '//export default').replace('export { meta };', '// export { meta };');
     return `${codeWithoutDefaultExport}
     const { default: parser } = require('${parser}');
-    const __storiesMetaData = parser(${componentName}, ${JSON.stringify(storiesDef)});
+    const __storiesMetaData = parser(${componentName}, ${JSON.stringify(storiesDef)}${metaExported ? ', meta' : ''});
     export default __storiesMetaData.meta;
     ${storyDef};
   `;

package/dist/plugins/vite-svelte-csf.js

@@ -32,10 +32,12 @@ export default function csfPlugin(svelteOptions) {
             const namedExportsOrder = Object.entries(stories)
                 .filter(([, def]) => !def.template)
                 .map(([storyId]) => storyId);
+            const metaExported = code.includes('export { meta }');
+            s.replace('export { meta };', '// export { meta };');
             const output = [
                 '',
                 `import parser from '${parser}';`,
-                `const __storiesMetaData = parser(${component}, ${JSON.stringify(all)});`,
+                `const __storiesMetaData = parser(${component}, ${JSON.stringify(all)}${metaExported ? ', meta' : ''});`,
                 'export default __storiesMetaData.meta;',
                 `export const __namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`,
                 storyDef,

package/dist/preset/indexer.d.ts

@@ -4,6 +4,7 @@ export declare function svelteIndexer(fileName: any, { makeTitle }: {
     meta: {
         title: any;
         id?: string | undefined;
+        tags?: string[] | undefined;
     };
     stories: {
         id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-svelte-csf",
-  "version": "4.0.6",
+  "version": "4.0.8",
   "description": "Allows to write stories in Svelte syntax",
   "keywords": [
     "storybook-addons",