Supports for tags in <Meta/>

src/index.d.ts

@@ -44,7 +44,23 @@ 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 +71,8 @@ interface Slots {
 }
 /**
  * Meta.
+ * 
+ * @deprecated See https://github.com/storybookjs/addon-svelte-csf/issues/135
  */
 export class Meta extends SvelteComponent<MetaProps> { }
 /**

src/parser/extract-stories.test.ts

@@ -221,6 +221,124 @@ 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('Duplicate Id', () => {
     expect(
       extractStories(`

src/parser/extract-stories.ts

@@ -14,6 +14,7 @@ interface StoryDef {
 interface MetaDef {
   title?: string;
   id?: string;
+  tags?: string[];
 }
 
 interface StoriesDef {
@@ -41,6 +42,57 @@ function getStaticAttribute(name: string, node: any): string | undefined {
   throw new Error(`Attribute ${name} is not static`);
 }
 
+function getStaticBooleanAttribute(name: string, node: any): boolean | undefined {
+  // extract the attribute
+  const attribute = node.attributes.find(
+    (att: any) => att.type === 'Attribute' && att.name === name
+  );
+
+  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(node: any): string[] {
+
+  const finalTags = getStaticBooleanAttribute('autodocs', node) ? ["autodocs"] : [];
+
+  const tags = node.attributes.find((att: any) => att.type === 'Attribute' && att.name === 'tags');
+  if (tags) {
+    let valid = false;
+
+    const { value } = tags;
+    if (value && value.length === 1 ) {
+      const { type, expression, data } = value[0];
+      if (type === 'Text') {
+        // tags="autodocs"
+        finalTags.push(data);
+        valid = true;
+      } else if (type === 'MustacheTag' && expression.type === 'ArrayExpression') {
+        // tags={["autodocs"]}
+        const { elements } = expression;
+        elements.forEach((e : any) => finalTags.push(e.value));
+        valid = true;
+      }
+    }
+
+    if (!valid) {
+      throw new Error('Attribute tags should be a static string array or a string');
+    }
+  }
+
+  return finalTags;
+}
+
 /**
  * Parse a Svelte component and extract stories.
  * @param component Component Source
@@ -139,6 +191,10 @@ export function extractStories(component: string): StoriesDef {
 
         meta.title = getStaticAttribute('title', node);
         meta.id = getStaticAttribute('id', node);
+        const tags = getMetaTags(node);
+        if (tags.length > 0) {
+          meta.tags = tags;
+        }
       }
     },
   });