Skip to content

Commit

Permalink
Merge pull request #72 from storybookjs/vite-support
Browse files Browse the repository at this point in the history
Add vite support
  • Loading branch information
JReinhold authored Dec 7, 2022
2 parents 26046ac + ae738ba commit ecaf1b5
Show file tree
Hide file tree
Showing 6 changed files with 314 additions and 17 deletions.
7 changes: 3 additions & 4 deletions .babelrc.js
Original file line number Diff line number Diff line change
@@ -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' },
},
],
],
Expand Down
6 changes: 6 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -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: [],
};
30 changes: 20 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
59 changes: 59 additions & 0 deletions src/plugins/vite-svelte-csf.js
Original file line number Diff line number Diff line change
@@ -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 }),
};
},
};
}
30 changes: 27 additions & 3 deletions src/preset/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { svelteIndexer } from "./indexer.js";
import { svelteIndexer } from './indexer.js';

export function managerEntries(entry = []) {
return [...entry, require.resolve('./manager')];
Expand All @@ -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 || []),
];
}
};
Loading

0 comments on commit ecaf1b5

Please sign in to comment.