Revert "Implement a Svelte StoryIndexer" #76

.babelrc.js

@@ -1,8 +1,5 @@
 module.exports = {
   presets: ['@babel/preset-env', '@babel/preset-typescript'],
-  plugins: [
-    "@babel/plugin-transform-runtime"
-  ],
   env: {
     esm: {
       presets: [

.storybook/main.js

@@ -1,7 +1,4 @@
-const path = require("path");
-
 module.exports = {
-  framework: '@storybook/svelte-webpack5',
   stories: [
     "../stories/**/*.stories.svelte",
   ],
@@ -10,28 +7,4 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
   ],
-  webpackFinal: async (config, { configType }) => {
-		// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-		// You can change the configuration based on that.
-		// 'PRODUCTION' is used when building the static version of storybook.
-
-		config.resolve = {
-			...config.resolve,
-			alias: {
-				svelte: path.resolve("node_modules", "svelte"),
-			},
-		};
-
-		config.module.rules = [ {
-			resourceQuery: /raw/,
-			type: 'asset/source'
-		}, ...config.module.rules]
-
-		config.module.rules
-			.filter(r => r.test && r.test.toString().includes("svelte"))
-			.forEach(r => r.resourceQuery = { not: [/raw/] });
-
-		// Return the altered config
-		return config;
-	},
 };

package.json

@@ -28,14 +28,13 @@
     "prepublish": "yarn clean && yarn build",
     "test": "jest",
     "lint": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
-    "storybook": "sb dev -p 6006",
+    "storybook": "start-storybook -p 6006",
     "start": "concurrently \"yarn storybook -- --no-manager-cache --quiet\" \"yarn build -- --watch\"",
-    "build-storybook": "sb build",
+    "build-storybook": "build-storybook",
     "release": "yarn build && auto shipit"
   },
   "dependencies": {
-    "ts-dedent": "^2.0.0",
-    "@babel/runtime": "^7.17.5"
+    "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@auto-it/released": "^10.32.6",
@@ -44,18 +43,13 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.5",
-    "@storybook/addon-essentials": "^7.0.0-alpha.29",
-    "@storybook/addon-interactions": "^7.0.0-alpha.29",
+    "@storybook/addon-essentials": "^6.4.20",
+    "@storybook/addon-interactions": "^6.4.20",
     "@storybook/jest": "^0.0.10",
     "@storybook/testing-library": "^0.0.9",
-    "@storybook/addon-storyshots": "^7.0.0-alpha.29",
+    "@storybook/addon-storyshots": "^6.4.20",
     "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/svelte": "^7.0.0-alpha.29",
-    "@storybook/core-server": "^7.0.0-alpha.29",
-    "@storybook/core-client": "^7.0.0-alpha.29",
-    "@storybook/svelte-webpack5": "7.0.0-alpha.29",
-    "sb": "7.0.0-alpha.29",
+    "@storybook/svelte": "^6.4.20",
     "auto": "^10.3.0",
     "babel-jest": "^29.1.0",
     "babel-loader": "^8.1.0",
@@ -68,15 +62,14 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "svelte": "^3.50.0",
+    "svelte": "^3.46.6",
     "svelte-jester": "^2.3.2",
     "svelte-loader": "^3.1.2",
     "typescript": "^3.9.7"
   },
   "peerDependencies": {
     "@storybook/svelte": ">=6.4.20",
-    "@storybook/theming": ">=6.4.20",
-    "svelte": "^3.50.0",
+    "svelte": "^3.46.6",
     "svelte-loader": "^3.1.2"
   },
   "peerDependenciesMeta": {

src/parser/extract-id.ts

@@ -24,10 +24,6 @@ export function extractId(
     return id;
   }
 
-  if (!name) {
-    throw new Error("Id or Name should be specified");
-  }
-
   let generated = name.replace(/\W+(.|$)/g, (_, chr) => chr.toUpperCase());
   if (allocatedIds.indexOf(generated) >= 0) {
     logger.warn(`Story name conflict with exports - Please add an explicit id for story ${name}`);

src/parser/extract-stories.test.js

@@ -18,13 +18,11 @@ describe('extractSource', () => {
           "default",
           "Story",
         ],
-        "meta": Object {},
         "stories": Object {
           "MyStory": Object {
             "hasArgs": false,
             "name": "MyStory",
             "source": "<div>a story</div>",
-            "storyId": "mystory--my-story",
             "template": false,
           },
         },
@@ -48,13 +46,11 @@ describe('extractSource', () => {
           "default",
           "Story",
         ],
-        "meta": Object {},
         "stories": Object {
           "myId": Object {
             "hasArgs": false,
             "name": "MyStory",
             "source": "<div>a story</div>",
-            "storyId": "myid--my-id",
             "template": false,
           },
         },
@@ -78,13 +74,11 @@ describe('extractSource', () => {
           "default",
           "Story",
         ],
-        "meta": Object {},
         "stories": Object {
           "MyStory": Object {
             "hasArgs": true,
             "name": "MyStory",
             "source": "<div>a story</div>",
-            "storyId": "mystory--my-story",
             "template": false,
           },
         },
@@ -108,13 +102,11 @@ describe('extractSource', () => {
           "default",
           "Template",
         ],
-        "meta": Object {},
         "stories": Object {
           "tpl:MyTemplate": Object {
             "hasArgs": false,
             "name": "MyTemplate",
             "source": "<div>a template</div>",
-            "storyId": "mytemplate--my-template",
             "template": true,
           },
         },
@@ -138,13 +130,11 @@ describe('extractSource', () => {
           "default",
           "Template",
         ],
-        "meta": Object {},
         "stories": Object {
           "tpl:default": Object {
             "hasArgs": false,
             "name": "default",
             "source": "<div>a template</div>",
-            "storyId": "default--default",
             "template": true,
           },
         },
@@ -171,20 +161,17 @@ describe('extractSource', () => {
           "default",
           "Template",
         ],
-        "meta": Object {},
         "stories": Object {
           "Story1": Object {
             "hasArgs": false,
             "name": "Story1",
             "source": "<div>story 1</div>",
-            "storyId": "story1--story-1",
             "template": false,
           },
           "Story2": Object {
             "hasArgs": false,
             "name": "Story2",
             "source": "<div>story 2</div>",
-            "storyId": "story2--story-2",
             "template": false,
           },
         },
@@ -211,16 +198,11 @@ describe('extractSource', () => {
           "SBStory",
           "SBMeta",
         ],
-        "meta": Object {
-          "id": undefined,
-          "title": "test",
-        },
         "stories": Object {
           "Story1": Object {
             "hasArgs": false,
             "name": "Story1",
             "source": "<div>story 1</div>",
-            "storyId": "test--story-1",
             "template": false,
           },
         },
@@ -246,13 +228,11 @@ describe('extractSource', () => {
           "Story",
           "Button",
         ],
-        "meta": Object {},
         "stories": Object {
           "Button77471352": Object {
             "hasArgs": false,
             "name": "Button",
             "source": "<div>a story</div>",
-            "storyId": "button77471352--button-77471352",
             "template": false,
           },
         },

src/parser/extract-stories.ts

@@ -1,34 +1,27 @@
 import dedent from 'ts-dedent';
 import * as svelte from 'svelte/compiler';
 import { extractId } from './extract-id';
-import { toId, storyNameFromExport } from "@storybook/csf";
+
 interface StoryDef {
-  storyId: string;
   name: string;
   template: boolean;
   source: string;
   hasArgs: boolean;
 }
 
-interface MetaDef {
-  title?: string;
-  id?: string;
-}
-
 interface StoriesDef {
-  meta: MetaDef;
   stories: Record<string, StoryDef>;
   allocatedIds: string[];
 }
 
-function getStaticAttribute(name: string, node: any): string|undefined {
+function getStaticAttribute(name: string, node: any): string {
   // extract the attribute
   const attribute = node.attributes.find(
     (att: any) => att.type === 'Attribute' && att.name === name
   );
 
   if (!attribute) {
-    return undefined;
+    return null;
   }
 
   const { value } = attribute;
@@ -54,41 +47,37 @@ export function extractStories(component: string): StoriesDef {
   const localNames = {
     Story: 'Story',
     Template: 'Template',
-    Meta: 'Meta',
   };
 
-  if (ast.instance) {
-    svelte.walk(ast.instance, {
-      enter(node: any) {
-        if (node.type === 'ImportDeclaration') {
-          if (node.source.value === '@storybook/addon-svelte-csf') {
-            node.specifiers
-              .filter((n: any) => n.type === 'ImportSpecifier')
-              .forEach((n: any) => {
-                localNames[n.imported.name] = n.local.name;
-              });
-          }
-
-          this.skip();
-        }
-      },
-    });
-
-    // extracts allocated Ids
-    svelte.walk(ast.instance, {
-      enter(node: any) {
-        if (node.type === 'ImportDeclaration') {
+  svelte.walk(ast.instance, {
+    enter(node: any) {
+      if (node.type === 'ImportDeclaration') {
+        if (node.source.value === '@storybook/addon-svelte-csf') {
           node.specifiers
-            .map((n: any) => n.local.name)
-            .forEach((name: string) => allocatedIds.push(name));
-          this.skip();
+            .filter((n: any) => n.type === 'ImportSpecifier')
+            .forEach((n: any) => {
+              localNames[n.imported.name] = n.local.name;
+            });
         }
-      },
-    });
-  }
+
+        this.skip();
+      }
+    },
+  });
+
+  // extracts allocated Ids
+  svelte.walk(ast.instance, {
+    enter(node: any) {
+      if (node.type === 'ImportDeclaration') {
+        node.specifiers
+          .map((n: any) => n.local.name)
+          .forEach((name: string) => allocatedIds.push(name));
+        this.skip();
+      }
+    },
+  });
 
   const stories: Record<string, StoryDef> = {};
-  const meta: MetaDef = {};
   svelte.walk(ast.html, {
     enter(node: any) {
       if (
@@ -124,28 +113,19 @@ export function extractStories(component: string): StoriesDef {
 
             source = dedent(component.substr(start, end - start));
           }
+
           stories[isTemplate ? `tpl:${id}` : id] = {
-            storyId: toId(meta.id || meta.title || id, storyNameFromExport(id)),
             name,
             template: isTemplate,
             source,
             hasArgs: node.attributes.find((att: any) => att.type === 'Let') != null,
           };
         }
-      } else if (
-        node.type === 'InlineComponent' &&
-        (node.name === localNames.Meta)
-      ) {
-        this.skip();
-
-        meta.title = getStaticAttribute("title", node);
-        meta.id = getStaticAttribute("id", node);
       }
     },
   });
 
   return {
-    meta,
     stories,
     allocatedIds,
   };

src/preset/index.js

@@ -1,5 +1,3 @@
-import { svelteIndexer } from "./indexer.js";
-
 export function managerEntries(entry = []) {
   return [...entry, require.resolve('./manager')];
 }
@@ -24,14 +22,3 @@ export function webpack(config) {
     },
   };
 }
-
-export const storyIndexers = async (indexers) => {
-
-  return [
-    {
-      test: /\.stories\.svelte$/,
-      indexer: svelteIndexer,
-    },
-    ...(indexers || []),
-  ];
-}