Add vite support

.babelrc.js

@@ -1,12 +1,13 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript'],
+  presets: [['@babel/preset-env', { targets: { node: '14' } }], '@babel/preset-typescript'],
   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,6 +34,7 @@
     "release": "yarn build && auto shipit"
   },
   "dependencies": {
+    "magic-string": "^0.26.6",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -45,11 +46,12 @@
     "@babel/preset-typescript": "^7.16.7",
     "@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": "^6.4.20",
     "@storybook/eslint-config-storybook": "^3.1.2",
+    "@storybook/jest": "^0.0.10",
     "@storybook/svelte": "^6.4.20",
+    "@storybook/testing-library": "^0.0.9",
+    "@sveltejs/vite-plugin-svelte": "^1.0.8",
     "auto": "^10.3.0",
     "babel-jest": "^29.1.0",
     "babel-loader": "^8.1.0",
@@ -65,16 +67,25 @@
     "svelte": "^3.46.6",
     "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",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0",
     "svelte": "^3.46.6",
-    "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

@@ -22,3 +22,28 @@ export function webpack(config) {
     },
   };
 }
+
+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,
+  };
+}