Add vite support

.babelrc.js

@@ -1,15 +1,14 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript'],
-  plugins: [
-    "@babel/plugin-transform-runtime"
-  ],
+  presets: [['@babel/preset-env', { targets: { node: '16' } }], '@babel/preset-typescript'],
+  plugins: ['@babel/plugin-transform-runtime'],
   env: {
     esm: {
       presets: [
         [
           '@babel/env',
           {
             modules: false,
+            targets: { chrome: '100' },
           },
         ],
       ],

.eslintrc.js

@@ -1,5 +1,11 @@
 module.exports = {
   root: true,
   extends: ['@storybook/eslint-config-storybook'],
+  rules: {
+    '@typescript-eslint/dot-notation': 'off',
+    '@typescript-eslint/no-implied-eval': 'off',
+    '@typescript-eslint/no-throw-literal': 'off',
+    '@typescript-eslint/return-await': 'off',
+  },
   overrides: [],
 };

package.json

@@ -34,28 +34,28 @@
     "release": "yarn build && auto shipit"
   },
   "dependencies": {
-    "ts-dedent": "^2.0.0",
-    "@babel/runtime": "^7.17.5"
+    "@babel/runtime": "^7.17.5",
+    "magic-string": "^0.26.6",
+    "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@auto-it/released": "^10.32.6",
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.5",
+    "@babel/plugin-transform-runtime": "^7.17.5",
     "@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/jest": "^0.0.10",
-    "@storybook/testing-library": "^0.0.9",
     "@storybook/addon-storyshots": "^7.0.0-alpha.29",
+    "@storybook/core-client": "^7.0.0-alpha.29",
+    "@storybook/core-server": "^7.0.0-alpha.29",
     "@storybook/eslint-config-storybook": "^3.1.2",
+    "@storybook/jest": "^0.0.10",
     "@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/testing-library": "^0.0.9",
     "auto": "^10.3.0",
     "babel-jest": "^29.1.0",
     "babel-loader": "^8.1.0",
@@ -68,20 +68,30 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
+    "sb": "7.0.0-alpha.29",
     "svelte": "^3.50.0",
     "svelte-jester": "^2.3.2",
     "svelte-loader": "^3.1.2",
-    "typescript": "^3.9.7"
+    "typescript": "^3.9.7",
+    "vite": "^3.1.4"
   },
   "peerDependencies": {
     "@storybook/svelte": ">=6.4.20",
     "@storybook/theming": ">=6.4.20",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0",
     "svelte": "^3.50.0",
-    "svelte-loader": "^3.1.2"
+    "svelte-loader": "^3.1.2",
+    "vite": ">=3.0.0"
   },
   "peerDependenciesMeta": {
+    "@sveltejs/vite-plugin-svelte": {
+      "optional": true
+    },
     "svelte-loader": {
       "optional": true
+    },
+    "vite": {
+      "optional": true
     }
   },
   "auto": {

src/plugins/vite-svelte-csf.js

@@ -0,0 +1,59 @@
+import { readFileSync } from 'fs';
+import * as svelte from 'svelte/compiler';
+import MagicString from 'magic-string';
+import { createFilter } from 'vite';
+import { getNameFromFilename } from '../parser/svelte-stories-loader';
+import { extractStories } from '../parser/extract-stories';
+
+const parser = require.resolve('../../esm/parser/collect-stories').replace(/[/\\]/g, '/');
+
+export default function csfPlugin(svelteOptions) {
+  const include = /\.stories\.svelte$/;
+  const filter = createFilter(include);
+
+  return {
+    name: 'storybook:addon-svelte-csf-plugin',
+    enforce: 'post',
+    async transform(code, id) {
+      if (!filter(id)) return undefined;
+
+      const s = new MagicString(code);
+      const component = getNameFromFilename(id);
+      let source = readFileSync(id).toString();
+      if (svelteOptions && svelteOptions.preprocess) {
+        source = (await svelte.preprocess(source, svelteOptions.preprocess, { filename: id })).code;
+      }
+      const all = extractStories(source);
+      const { stories } = all;
+      const storyDef = Object.entries(stories)
+        .filter(([, def]) => !def.template)
+        .map(
+          ([storyId]) =>
+            `export const ${storyId} = __storiesMetaData.stories[${JSON.stringify(storyId)}];`
+        )
+        .join('\n');
+
+      s.replace('export default', '// export default');
+
+      const namedExportsOrder = Object.entries(stories)
+        .filter(([, def]) => !def.template)
+        .map(([storyId]) => storyId);
+
+      const output = [
+        '',
+        `import parser from '${parser}';`,
+        `const __storiesMetaData = parser(${component}, ${JSON.stringify(all)});`,
+        'export default __storiesMetaData.meta;',
+        `export const __namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`,
+        storyDef,
+      ].join('\n');
+
+      s.append(output);
+
+      return {
+        code: s.toString(),
+        map: s.generateMap({ hires: true, source: id }),
+      };
+    },
+  };
+}

src/preset/index.js

@@ -1,4 +1,4 @@
-import { svelteIndexer } from "./indexer.js";
+import { svelteIndexer } from './indexer.js';
 
 export function managerEntries(entry = []) {
   return [...entry, require.resolve('./manager')];
@@ -25,13 +25,37 @@ export function webpack(config) {
   };
 }
 
-export const storyIndexers = async (indexers) => {
+export async function viteFinal(config, options) {
+  const { plugins = [] } = config;
+  const svelteOptions = await options.presets.apply('svelteOptions', {}, options);
+  let svelteConfig = svelteOptions;
+  try {
+    const { loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
+    svelteConfig = { ...(await loadSvelteConfig()), ...svelteOptions };
+  } catch (err) {
+    const { log } = console;
+    if (err.code === 'MODULE_NOT_FOUND') {
+      log('@sveltejs/vite-plugin-svelte not found.  Unable to load config from svelte.config file');
+    } else {
+      throw err;
+    }
+  }
+
+  const { default: svelteCsfPlugin } = await import('../plugins/vite-svelte-csf');
+  plugins.push(svelteCsfPlugin(svelteConfig));
+
+  return {
+    ...config,
+    plugins,
+  };
+}
 
+export const storyIndexers = async (indexers) => {
   return [
     {
       test: /\.stories\.svelte$/,
       indexer: svelteIndexer,
     },
     ...(indexers || []),
   ];
-}
+};