@storybook/builder-vite 0.1.28 → 0.1.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Storybook uses two different loaders when dealing with MDX:
3
3
  *
4
- * - *.stories.mdx are compiled with the CSF compiler
4
+ * - *stories.mdx and *story.mdx are compiled with the CSF compiler
5
5
  * - *.mdx are compiled with the MDX compiler directly
6
6
  *
7
7
  * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
@@ -9,7 +9,7 @@ const mdx_1 = require("@storybook/csf-tools/mdx");
9
9
  /**
10
10
  * Storybook uses two different loaders when dealing with MDX:
11
11
  *
12
- * - *.stories.mdx are compiled with the CSF compiler
12
+ * - *stories.mdx and *story.mdx are compiled with the CSF compiler
13
13
  * - *.mdx are compiled with the MDX compiler directly
14
14
  *
15
15
  * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
@@ -17,7 +17,7 @@ const mdx_1 = require("@storybook/csf-tools/mdx");
17
17
  function mdxPlugin() {
18
18
  return (0, vite_plugin_mdx_1.default)((filename) => {
19
19
  const compilers = [];
20
- if (filename.includes('.stories.')) {
20
+ if (filename.endsWith('stories.mdx') || filename.endsWith('story.mdx')) {
21
21
  compilers.push((0, mdx_1.createCompiler)({}));
22
22
  }
23
23
  return {
@@ -1 +1 @@
1
- {"version":3,"file":"mdx-plugin.js","sourceRoot":"","sources":["../mdx-plugin.ts"],"names":[],"mappings":";;;;;;AAAA,sEAAkC;AAClC,kDAA0D;AAE1D;;;;;;;GAOG;AACH,SAAgB,SAAS;IACvB,OAAO,IAAA,yBAAG,EAAC,CAAC,QAAQ,EAAE,EAAE;QACtB,MAAM,SAAS,GAAG,EAAE,CAAC;QAErB,IAAI,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YAClC,SAAS,CAAC,IAAI,CAAC,IAAA,oBAAc,EAAC,EAAE,CAAC,CAAC,CAAC;SACpC;QAED,OAAO;YACL,SAAS;SACV,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAZD,8BAYC","sourcesContent":["import mdx from 'vite-plugin-mdx';\nimport { createCompiler } from '@storybook/csf-tools/mdx';\n\n/**\n * Storybook uses two different loaders when dealing with MDX:\n *\n * - *.stories.mdx are compiled with the CSF compiler\n * - *.mdx are compiled with the MDX compiler directly\n *\n * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx\n */\nexport function mdxPlugin() {\n return mdx((filename) => {\n const compilers = [];\n\n if (filename.includes('.stories.')) {\n compilers.push(createCompiler({}));\n }\n\n return {\n compilers,\n };\n });\n}\n"]}
1
+ {"version":3,"file":"mdx-plugin.js","sourceRoot":"","sources":["../mdx-plugin.ts"],"names":[],"mappings":";;;;;;AAAA,sEAAkC;AAClC,kDAA0D;AAE1D;;;;;;;GAOG;AACH,SAAgB,SAAS;IACvB,OAAO,IAAA,yBAAG,EAAC,CAAC,QAAQ,EAAE,EAAE;QACtB,MAAM,SAAS,GAAG,EAAE,CAAC;QAErB,IAAI,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YACtE,SAAS,CAAC,IAAI,CAAC,IAAA,oBAAc,EAAC,EAAE,CAAC,CAAC,CAAC;SACpC;QAED,OAAO;YACL,SAAS;SACV,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAZD,8BAYC","sourcesContent":["import mdx from 'vite-plugin-mdx';\nimport { createCompiler } from '@storybook/csf-tools/mdx';\n\n/**\n * Storybook uses two different loaders when dealing with MDX:\n *\n * - *stories.mdx and *story.mdx are compiled with the CSF compiler\n * - *.mdx are compiled with the MDX compiler directly\n *\n * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx\n */\nexport function mdxPlugin() {\n return mdx((filename) => {\n const compilers = [];\n\n if (filename.endsWith('stories.mdx') || filename.endsWith('story.mdx')) {\n compilers.push(createCompiler({}));\n }\n\n return {\n compilers,\n };\n });\n}\n"]}
@@ -0,0 +1,9 @@
1
+ import type { Plugin } from 'vite';
2
+ /**
3
+ * This plugin is a workaround to inject some styles into the `<head>` of the iframe to
4
+ * prevent the "no story" text from appearing breifly while the page loads in.
5
+ *
6
+ * It can be removed, and these styles placed back into the head,
7
+ * when https://github.com/vitejs/vite/issues/6737 is closed.
8
+ */
9
+ export declare function noFouc(): Plugin;
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.noFouc = void 0;
4
+ /**
5
+ * This plugin is a workaround to inject some styles into the `<head>` of the iframe to
6
+ * prevent the "no story" text from appearing breifly while the page loads in.
7
+ *
8
+ * It can be removed, and these styles placed back into the head,
9
+ * when https://github.com/vitejs/vite/issues/6737 is closed.
10
+ */
11
+ function noFouc() {
12
+ return {
13
+ name: 'no-fouc',
14
+ enforce: 'post',
15
+ async transformIndexHtml(html, ctx) {
16
+ if (ctx.path !== '/iframe.html') {
17
+ return;
18
+ }
19
+ return insertHeadStyles(html);
20
+ },
21
+ };
22
+ }
23
+ exports.noFouc = noFouc;
24
+ function insertHeadStyles(html) {
25
+ return html.replace('</head>', `
26
+ <style>
27
+ /* Fix for elements flashing */
28
+ body > * {
29
+ display: none !important;
30
+ }
31
+ .sb-show-preparing-story > .sb-preparing-story,
32
+ .sb-show-preparing-docs > .sb-preparing-docs,
33
+ .sb-show-nopreview > .sb-nopreview,
34
+ .sb-show-errordisplay > .sb-errordisplay,
35
+ .sb-show-main > #root,
36
+ .sb-show-main > #docs-root {
37
+ display: block !important;
38
+ }
39
+ #root[hidden],
40
+ #docs-root[hidden] {
41
+ display: none !important;
42
+ }
43
+ </style>
44
+ </head>
45
+ `.trim());
46
+ }
47
+ //# sourceMappingURL=no-fouc.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"no-fouc.js","sourceRoot":"","sources":["../../plugins/no-fouc.ts"],"names":[],"mappings":";;;AAEA;;;;;;GAMG;AACH,SAAgB,MAAM;IACpB,OAAO;QACL,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,MAAM;QACf,KAAK,CAAC,kBAAkB,CAAC,IAAI,EAAE,GAAG;YAChC,IAAI,GAAG,CAAC,IAAI,KAAK,cAAc,EAAE;gBAC/B,OAAO;aACR;YAED,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;KACF,CAAC;AACJ,CAAC;AAZD,wBAYC;AAED,SAAS,gBAAgB,CAAC,IAAY;IACpC,OAAO,IAAI,CAAC,OAAO,CACjB,SAAS,EACT;;;;;;;;;;;;;;;;;;;;GAoBD,CAAC,IAAI,EAAE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type { Plugin } from 'vite';\n\n/**\n * This plugin is a workaround to inject some styles into the `<head>` of the iframe to\n * prevent the \"no story\" text from appearing breifly while the page loads in.\n *\n * It can be removed, and these styles placed back into the head,\n * when https://github.com/vitejs/vite/issues/6737 is closed.\n */\nexport function noFouc(): Plugin {\n return {\n name: 'no-fouc',\n enforce: 'post',\n async transformIndexHtml(html, ctx) {\n if (ctx.path !== '/iframe.html') {\n return;\n }\n\n return insertHeadStyles(html);\n },\n };\n}\n\nfunction insertHeadStyles(html: string) {\n return html.replace(\n '</head>',\n `\n <style>\n /* Fix for elements flashing */\n body > * {\n display: none !important;\n }\n .sb-show-preparing-story > .sb-preparing-story,\n .sb-show-preparing-docs > .sb-preparing-docs,\n .sb-show-nopreview > .sb-nopreview,\n .sb-show-errordisplay > .sb-errordisplay,\n .sb-show-main > #root,\n .sb-show-main > #docs-root {\n display: block !important;\n }\n #root[hidden],\n #docs-root[hidden] {\n display: none !important;\n }\n </style>\n</head>\n `.trim()\n );\n}\n"]}
@@ -1,2 +1,7 @@
1
1
  import type { Plugin } from 'vite';
2
- export declare function reactDocgen(): Plugin;
2
+ declare type Options = {
3
+ include?: string | RegExp | (string | RegExp)[];
4
+ exclude?: string | RegExp | (string | RegExp)[];
5
+ };
6
+ export declare function reactDocgen({ include, exclude }?: Options): Plugin;
7
+ export {};
@@ -4,6 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.reactDocgen = void 0;
7
+ const path_1 = __importDefault(require("path"));
8
+ const pluginutils_1 = require("@rollup/pluginutils");
7
9
  const react_docgen_1 = require("react-docgen");
8
10
  const magic_string_1 = __importDefault(require("magic-string"));
9
11
  const actualNameHandler_1 = __importDefault(require("./docgen-handlers/actualNameHandler"));
@@ -12,34 +14,36 @@ const defaultHandlers = Object.values(react_docgen_1.handlers).map((handler) =>
12
14
  const defaultResolver = react_docgen_1.resolver.findAllExportedComponentDefinitions;
13
15
  const defaultImporter = react_docgen_1.importers.makeFsImporter();
14
16
  const handlers = [...defaultHandlers, actualNameHandler_1.default];
15
- function reactDocgen() {
17
+ function reactDocgen({ include = /\.(mjs|tsx?|jsx?)$/, exclude = [/node_modules\/.*/] } = {}) {
18
+ const cwd = process.cwd();
19
+ const filter = (0, pluginutils_1.createFilter)(include, exclude);
16
20
  return {
17
21
  name: 'react-docgen',
18
22
  enforce: 'pre',
19
23
  async transform(src, id) {
20
- // JSX syntax is only allowed in .tsx and .jsx, but components can technically be created without JSX
21
- if (/\.(mjs|tsx?|jsx?)$/.test(id)) {
22
- try {
23
- // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.
24
- const docgenResults = (0, react_docgen_1.parse)(src, defaultResolver, handlers, { importer: defaultImporter, filename: id });
25
- const s = new magic_string_1.default(src);
26
- docgenResults.forEach((info) => {
27
- const { actualName, ...docgenInfo } = info;
28
- if (actualName) {
29
- const docNode = JSON.stringify(docgenInfo);
30
- s.append(`;${actualName}.__docgenInfo=${docNode}`);
31
- }
32
- });
33
- return {
34
- code: s.toString(),
35
- map: s.generateMap(),
36
- };
37
- }
38
- catch (e) {
39
- // Usually this is just an error from react-docgen that it couldn't find a component
40
- // Only uncomment for troubleshooting
41
- // console.error(e);
42
- }
24
+ const relPath = path_1.default.relative(cwd, id);
25
+ if (!filter(relPath))
26
+ return;
27
+ try {
28
+ // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.
29
+ const docgenResults = (0, react_docgen_1.parse)(src, defaultResolver, handlers, { importer: defaultImporter, filename: id });
30
+ const s = new magic_string_1.default(src);
31
+ docgenResults.forEach((info) => {
32
+ const { actualName, ...docgenInfo } = info;
33
+ if (actualName) {
34
+ const docNode = JSON.stringify(docgenInfo);
35
+ s.append(`;${actualName}.__docgenInfo=${docNode}`);
36
+ }
37
+ });
38
+ return {
39
+ code: s.toString(),
40
+ map: s.generateMap(),
41
+ };
42
+ }
43
+ catch (e) {
44
+ // Usually this is just an error from react-docgen that it couldn't find a component
45
+ // Only uncomment for troubleshooting
46
+ // console.error(e);
43
47
  }
44
48
  },
45
49
  };
@@ -1 +1 @@
1
- {"version":3,"file":"react-docgen.js","sourceRoot":"","sources":["../../plugins/react-docgen.ts"],"names":[],"mappings":";;;;;;AAAA,+CAKsB;AAEtB,gEAAuC;AAEvC,4FAAoE;AAIpE,oFAAoF;AACpF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAc,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC;AAChF,MAAM,eAAe,GAAG,uBAAc,CAAC,mCAAmC,CAAC;AAC3E,MAAM,eAAe,GAAG,wBAAe,CAAC,cAAc,EAAE,CAAC;AACzD,MAAM,QAAQ,GAAG,CAAC,GAAG,eAAe,EAAE,2BAAiB,CAAC,CAAC;AAEzD,SAAgB,WAAW;IACzB,OAAO;QACL,IAAI,EAAE,cAAc;QACpB,OAAO,EAAE,KAAK;QACd,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,EAAU;YACrC,qGAAqG;YACrG,IAAI,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;gBACjC,IAAI;oBACF,yFAAyF;oBACzF,MAAM,aAAa,GAAG,IAAA,oBAAK,EAAC,GAAG,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3F,CAAC;oBACb,MAAM,CAAC,GAAG,IAAI,sBAAW,CAAC,GAAG,CAAC,CAAC;oBAE/B,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;wBAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC;wBAC3C,IAAI,UAAU,EAAE;4BACd,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;4BAC3C,CAAC,CAAC,MAAM,CAAC,IAAI,UAAU,iBAAiB,OAAO,EAAE,CAAC,CAAC;yBACpD;oBACH,CAAC,CAAC,CAAC;oBAEH,OAAO;wBACL,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE;wBAClB,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE;qBACrB,CAAC;iBACH;gBAAC,OAAO,CAAC,EAAE;oBACV,oFAAoF;oBACpF,qCAAqC;oBACrC,oBAAoB;iBACrB;aACF;QACH,CAAC;KACF,CAAC;AACJ,CAAC;AAjCD,kCAiCC","sourcesContent":["import {\n parse,\n handlers as docgenHandlers,\n resolver as docgenResolver,\n importers as docgenImporters,\n} from 'react-docgen';\nimport type { DocumentationObject } from 'react-docgen/lib/Documentation';\nimport MagicString from 'magic-string';\nimport type { Plugin } from 'vite';\nimport actualNameHandler from './docgen-handlers/actualNameHandler';\n\ntype DocObj = DocumentationObject & { actualName: string };\n\n// TODO: None of these are able to be overridden, so `default` is aspirational here.\nconst defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);\nconst defaultResolver = docgenResolver.findAllExportedComponentDefinitions;\nconst defaultImporter = docgenImporters.makeFsImporter();\nconst handlers = [...defaultHandlers, actualNameHandler];\n\nexport function reactDocgen(): Plugin {\n return {\n name: 'react-docgen',\n enforce: 'pre',\n async transform(src: string, id: string) {\n // JSX syntax is only allowed in .tsx and .jsx, but components can technically be created without JSX\n if (/\\.(mjs|tsx?|jsx?)$/.test(id)) {\n try {\n // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.\n const docgenResults = parse(src, defaultResolver, handlers, { importer: defaultImporter, filename: id }) as\n | DocObj[];\n const s = new MagicString(src);\n\n docgenResults.forEach((info) => {\n const { actualName, ...docgenInfo } = info;\n if (actualName) {\n const docNode = JSON.stringify(docgenInfo);\n s.append(`;${actualName}.__docgenInfo=${docNode}`);\n }\n });\n\n return {\n code: s.toString(),\n map: s.generateMap(),\n };\n } catch (e) {\n // Usually this is just an error from react-docgen that it couldn't find a component\n // Only uncomment for troubleshooting\n // console.error(e);\n }\n }\n },\n };\n}\n"]}
1
+ {"version":3,"file":"react-docgen.js","sourceRoot":"","sources":["../../plugins/react-docgen.ts"],"names":[],"mappings":";;;;;;AAAA,gDAAwB;AACxB,qDAAmD;AACnD,+CAKsB;AAEtB,gEAAuC;AAEvC,4FAAoE;AAIpE,oFAAoF;AACpF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAc,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC;AAChF,MAAM,eAAe,GAAG,uBAAc,CAAC,mCAAmC,CAAC;AAC3E,MAAM,eAAe,GAAG,wBAAe,CAAC,cAAc,EAAE,CAAC;AACzD,MAAM,QAAQ,GAAG,CAAC,GAAG,eAAe,EAAE,2BAAiB,CAAC,CAAC;AAOzD,SAAgB,WAAW,CAAC,EAAE,OAAO,GAAG,oBAAoB,EAAE,OAAO,GAAG,CAAC,kBAAkB,CAAC,KAAc,EAAE;IAC1G,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,IAAA,0BAAY,EAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAE9C,OAAO;QACL,IAAI,EAAE,cAAc;QACpB,OAAO,EAAE,KAAK;QACd,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,EAAU;YACrC,MAAM,OAAO,GAAG,cAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YACvC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;gBAAE,OAAO;YAE7B,IAAI;gBACF,yFAAyF;gBACzF,MAAM,aAAa,GAAG,IAAA,oBAAK,EAAC,GAAG,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3F,CAAC;gBACb,MAAM,CAAC,GAAG,IAAI,sBAAW,CAAC,GAAG,CAAC,CAAC;gBAE/B,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;oBAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC;oBAC3C,IAAI,UAAU,EAAE;wBACd,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;wBAC3C,CAAC,CAAC,MAAM,CAAC,IAAI,UAAU,iBAAiB,OAAO,EAAE,CAAC,CAAC;qBACpD;gBACH,CAAC,CAAC,CAAC;gBAEH,OAAO;oBACL,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE;oBAClB,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE;iBACrB,CAAC;aACH;YAAC,OAAO,CAAC,EAAE;gBACV,oFAAoF;gBACpF,qCAAqC;gBACrC,oBAAoB;aACrB;QACH,CAAC;KACF,CAAC;AACJ,CAAC;AApCD,kCAoCC","sourcesContent":["import path from 'path';\nimport { createFilter } from '@rollup/pluginutils';\nimport {\n parse,\n handlers as docgenHandlers,\n resolver as docgenResolver,\n importers as docgenImporters,\n} from 'react-docgen';\nimport type { DocumentationObject } from 'react-docgen/lib/Documentation';\nimport MagicString from 'magic-string';\nimport type { Plugin } from 'vite';\nimport actualNameHandler from './docgen-handlers/actualNameHandler';\n\ntype DocObj = DocumentationObject & { actualName: string };\n\n// TODO: None of these are able to be overridden, so `default` is aspirational here.\nconst defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);\nconst defaultResolver = docgenResolver.findAllExportedComponentDefinitions;\nconst defaultImporter = docgenImporters.makeFsImporter();\nconst handlers = [...defaultHandlers, actualNameHandler];\n\ntype Options = {\n include?: string | RegExp | (string | RegExp)[];\n exclude?: string | RegExp | (string | RegExp)[];\n};\n\nexport function reactDocgen({ include = /\\.(mjs|tsx?|jsx?)$/, exclude = [/node_modules\\/.*/] }: Options = {}): Plugin {\n const cwd = process.cwd();\n const filter = createFilter(include, exclude);\n\n return {\n name: 'react-docgen',\n enforce: 'pre',\n async transform(src: string, id: string) {\n const relPath = path.relative(cwd, id);\n if (!filter(relPath)) return;\n\n try {\n // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.\n const docgenResults = parse(src, defaultResolver, handlers, { importer: defaultImporter, filename: id }) as\n | DocObj[];\n const s = new MagicString(src);\n\n docgenResults.forEach((info) => {\n const { actualName, ...docgenInfo } = info;\n if (actualName) {\n const docNode = JSON.stringify(docgenInfo);\n s.append(`;${actualName}.__docgenInfo=${docNode}`);\n }\n });\n\n return {\n code: s.toString(),\n map: s.generateMap(),\n };\n } catch (e) {\n // Usually this is just an error from react-docgen that it couldn't find a component\n // Only uncomment for troubleshooting\n // console.error(e);\n }\n },\n };\n}\n"]}
@@ -30,6 +30,7 @@ const mock_core_js_1 = require("./mock-core-js");
30
30
  const code_generator_plugin_1 = require("./code-generator-plugin");
31
31
  const inject_export_order_plugin_1 = require("./inject-export-order-plugin");
32
32
  const mdx_plugin_1 = require("./mdx-plugin");
33
+ const no_fouc_1 = require("./plugins/no-fouc");
33
34
  const source_loader_plugin_1 = require("./source-loader-plugin");
34
35
  function readPackageJson() {
35
36
  const packageJsonPath = path.resolve('package.json');
@@ -69,6 +70,7 @@ async function pluginConfig(options, _type) {
69
70
  (0, mock_core_js_1.mockCoreJs)(),
70
71
  (0, source_loader_plugin_1.sourceLoaderPlugin)(),
71
72
  (0, mdx_plugin_1.mdxPlugin)(),
73
+ (0, no_fouc_1.noFouc)(),
72
74
  inject_export_order_plugin_1.injectExportOrderPlugin,
73
75
  ];
74
76
  if (framework === 'vue' || framework === 'vue3') {
@@ -1 +1 @@
1
- {"version":3,"file":"vite-config.js","sourceRoot":"","sources":["../vite-config.ts"],"names":[],"mappings":"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","sourcesContent":["import * as path from 'path';\nimport fs from 'fs';\nimport { Plugin } from 'vite';\nimport { allowedEnvPrefix as envPrefix } from './envs';\nimport { TypescriptConfig } from '@storybook/core-common';\nimport { mockCoreJs } from './mock-core-js';\nimport { codeGeneratorPlugin } from './code-generator-plugin';\nimport { injectExportOrderPlugin } from './inject-export-order-plugin';\nimport { mdxPlugin } from './mdx-plugin';\nimport { sourceLoaderPlugin } from './source-loader-plugin';\n\nimport type { UserConfig } from 'vite';\nimport type { ExtendedOptions } from './types';\n\nexport type PluginConfigType = 'build' | 'development';\n\nexport function readPackageJson(): Record<string, any> | false {\n const packageJsonPath = path.resolve('package.json');\n if (!fs.existsSync(packageJsonPath)) {\n return false;\n }\n\n const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');\n return JSON.parse(jsonContent);\n}\n\n// Vite config that is common to development and production mode\nexport async function commonConfig(\n options: ExtendedOptions,\n _type: PluginConfigType\n): Promise<UserConfig & { configFile: false; root: string }> {\n const { framework } = options;\n\n return {\n configFile: false,\n root: path.resolve(options.configDir, '..'),\n cacheDir: 'node_modules/.vite-storybook',\n envPrefix,\n define: {},\n resolve:\n framework === 'vue3'\n ? {\n alias: {\n vue: 'vue/dist/vue.esm-bundler.js',\n },\n }\n : {},\n plugins: await pluginConfig(options, _type),\n };\n}\n\nexport async function pluginConfig(options: ExtendedOptions, _type: PluginConfigType) {\n const { framework, presets } = options;\n const svelteOptions = await presets.apply('svelteOptions', {}, options);\n\n const plugins = [\n codeGeneratorPlugin(options),\n mockCoreJs(),\n sourceLoaderPlugin(),\n mdxPlugin(),\n injectExportOrderPlugin,\n ] as Plugin[];\n if (framework === 'vue' || framework === 'vue3') {\n try {\n const vuePlugin = require('@vitejs/plugin-vue');\n plugins.push(vuePlugin());\n const { vueDocgen } = await import('./plugins/vue-docgen');\n plugins.push(vueDocgen());\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires @vitejs/plugin-vue to be installed ' +\n 'when using @storybook/vue or @storybook/vue3.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n }\n if (framework === 'svelte') {\n try {\n const sveltePlugin = require('@sveltejs/vite-plugin-svelte').svelte;\n plugins.push(sveltePlugin(svelteOptions));\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires @sveltejs/vite-plugin-svelte to be installed' +\n ' when using @storybook/svelte.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n\n try {\n const csfPlugin = require('./svelte/csf-plugin').default;\n plugins.push(csfPlugin(svelteOptions));\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires @storybook/addon-svelte-csf to be installed when using @storybook/svelte.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n }\n\n if (framework === 'react') {\n plugins.push(\n require('@vitejs/plugin-react')({\n // Do not treat story files as HMR boundaries, storybook itself needs to handle them.\n exclude: [/\\.stories\\.([tj])sx?$/, /node_modules/],\n })\n );\n\n const { reactDocgen, reactDocgenTypescriptOptions } = await presets.apply('typescript', {} as TypescriptConfig);\n\n let typescriptPresent;\n\n try {\n const pkgJson = readPackageJson();\n typescriptPresent = pkgJson && (pkgJson?.devDependencies?.typescript || pkgJson?.dependencies?.typescript);\n } catch (e) {\n typescriptPresent = false;\n }\n\n if (reactDocgen === 'react-docgen-typescript' && typescriptPresent) {\n plugins.push(require('@joshwooding/vite-plugin-react-docgen-typescript').default(reactDocgenTypescriptOptions));\n } else if (reactDocgen) {\n const { reactDocgen } = await import('./plugins/react-docgen');\n // Needs to run before the react plugin, so add to the front\n plugins.unshift(reactDocgen());\n }\n }\n\n if (framework === 'glimmerx') {\n const plugin = require('vite-plugin-glimmerx/index.cjs');\n plugins.push(plugin.default());\n }\n\n return plugins;\n}\n"]}
1
+ {"version":3,"file":"vite-config.js","sourceRoot":"","sources":["../vite-config.ts"],"names":[],"mappings":"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","sourcesContent":["import * as path from 'path';\nimport fs from 'fs';\nimport { Plugin } from 'vite';\nimport { allowedEnvPrefix as envPrefix } from './envs';\nimport { TypescriptConfig } from '@storybook/core-common';\nimport { mockCoreJs } from './mock-core-js';\nimport { codeGeneratorPlugin } from './code-generator-plugin';\nimport { injectExportOrderPlugin } from './inject-export-order-plugin';\nimport { mdxPlugin } from './mdx-plugin';\nimport { noFouc } from './plugins/no-fouc';\nimport { sourceLoaderPlugin } from './source-loader-plugin';\n\nimport type { UserConfig } from 'vite';\nimport type { ExtendedOptions } from './types';\n\nexport type PluginConfigType = 'build' | 'development';\n\nexport function readPackageJson(): Record<string, any> | false {\n const packageJsonPath = path.resolve('package.json');\n if (!fs.existsSync(packageJsonPath)) {\n return false;\n }\n\n const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');\n return JSON.parse(jsonContent);\n}\n\n// Vite config that is common to development and production mode\nexport async function commonConfig(\n options: ExtendedOptions,\n _type: PluginConfigType\n): Promise<UserConfig & { configFile: false; root: string }> {\n const { framework } = options;\n\n return {\n configFile: false,\n root: path.resolve(options.configDir, '..'),\n cacheDir: 'node_modules/.vite-storybook',\n envPrefix,\n define: {},\n resolve:\n framework === 'vue3'\n ? {\n alias: {\n vue: 'vue/dist/vue.esm-bundler.js',\n },\n }\n : {},\n plugins: await pluginConfig(options, _type),\n };\n}\n\nexport async function pluginConfig(options: ExtendedOptions, _type: PluginConfigType) {\n const { framework, presets } = options;\n const svelteOptions = await presets.apply('svelteOptions', {}, options);\n\n const plugins = [\n codeGeneratorPlugin(options),\n mockCoreJs(),\n sourceLoaderPlugin(),\n mdxPlugin(),\n noFouc(),\n injectExportOrderPlugin,\n ] as Plugin[];\n if (framework === 'vue' || framework === 'vue3') {\n try {\n const vuePlugin = require('@vitejs/plugin-vue');\n plugins.push(vuePlugin());\n const { vueDocgen } = await import('./plugins/vue-docgen');\n plugins.push(vueDocgen());\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires @vitejs/plugin-vue to be installed ' +\n 'when using @storybook/vue or @storybook/vue3.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n }\n if (framework === 'svelte') {\n try {\n const sveltePlugin = require('@sveltejs/vite-plugin-svelte').svelte;\n plugins.push(sveltePlugin(svelteOptions));\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires @sveltejs/vite-plugin-svelte to be installed' +\n ' when using @storybook/svelte.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n\n try {\n const csfPlugin = require('./svelte/csf-plugin').default;\n plugins.push(csfPlugin(svelteOptions));\n } catch (err) {\n if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n throw new Error(\n '@storybook/builder-vite requires @storybook/addon-svelte-csf to be installed when using @storybook/svelte.' +\n ' Please install it and start storybook again.'\n );\n }\n throw err;\n }\n }\n\n if (framework === 'react') {\n plugins.push(\n require('@vitejs/plugin-react')({\n // Do not treat story files as HMR boundaries, storybook itself needs to handle them.\n exclude: [/\\.stories\\.([tj])sx?$/, /node_modules/],\n })\n );\n\n const { reactDocgen, reactDocgenTypescriptOptions } = await presets.apply('typescript', {} as TypescriptConfig);\n\n let typescriptPresent;\n\n try {\n const pkgJson = readPackageJson();\n typescriptPresent = pkgJson && (pkgJson?.devDependencies?.typescript || pkgJson?.dependencies?.typescript);\n } catch (e) {\n typescriptPresent = false;\n }\n\n if (reactDocgen === 'react-docgen-typescript' && typescriptPresent) {\n plugins.push(require('@joshwooding/vite-plugin-react-docgen-typescript').default(reactDocgenTypescriptOptions));\n } else if (reactDocgen) {\n const { reactDocgen } = await import('./plugins/react-docgen');\n // Needs to run before the react plugin, so add to the front\n plugins.unshift(reactDocgen());\n }\n }\n\n if (framework === 'glimmerx') {\n const plugin = require('vite-plugin-glimmerx/index.cjs');\n plugins.push(plugin.default());\n }\n\n return plugins;\n}\n"]}
package/input/iframe.html CHANGED
@@ -19,13 +19,6 @@
19
19
  window.module = undefined;
20
20
  </script>
21
21
  <!-- [HEAD HTML SNIPPET HERE] -->
22
- <style>
23
- /*noinspection CssUnusedSymbol*/
24
- #root[hidden],
25
- #docs-root[hidden] {
26
- display: none !important;
27
- }
28
- </style>
29
22
  </head>
30
23
  <body>
31
24
  <!-- [BODY HTML SNIPPET HERE] -->
package/mdx-plugin.ts CHANGED
@@ -4,7 +4,7 @@ import { createCompiler } from '@storybook/csf-tools/mdx';
4
4
  /**
5
5
  * Storybook uses two different loaders when dealing with MDX:
6
6
  *
7
- * - *.stories.mdx are compiled with the CSF compiler
7
+ * - *stories.mdx and *story.mdx are compiled with the CSF compiler
8
8
  * - *.mdx are compiled with the MDX compiler directly
9
9
  *
10
10
  * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
@@ -13,7 +13,7 @@ export function mdxPlugin() {
13
13
  return mdx((filename) => {
14
14
  const compilers = [];
15
15
 
16
- if (filename.includes('.stories.')) {
16
+ if (filename.endsWith('stories.mdx') || filename.endsWith('story.mdx')) {
17
17
  compilers.push(createCompiler({}));
18
18
  }
19
19
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/builder-vite",
3
- "version": "0.1.28",
3
+ "version": "0.1.29",
4
4
  "description": "An experimental plugin to run and build Storybooks with Vite",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -0,0 +1,49 @@
1
+ import type { Plugin } from 'vite';
2
+
3
+ /**
4
+ * This plugin is a workaround to inject some styles into the `<head>` of the iframe to
5
+ * prevent the "no story" text from appearing breifly while the page loads in.
6
+ *
7
+ * It can be removed, and these styles placed back into the head,
8
+ * when https://github.com/vitejs/vite/issues/6737 is closed.
9
+ */
10
+ export function noFouc(): Plugin {
11
+ return {
12
+ name: 'no-fouc',
13
+ enforce: 'post',
14
+ async transformIndexHtml(html, ctx) {
15
+ if (ctx.path !== '/iframe.html') {
16
+ return;
17
+ }
18
+
19
+ return insertHeadStyles(html);
20
+ },
21
+ };
22
+ }
23
+
24
+ function insertHeadStyles(html: string) {
25
+ return html.replace(
26
+ '</head>',
27
+ `
28
+ <style>
29
+ /* Fix for elements flashing */
30
+ body > * {
31
+ display: none !important;
32
+ }
33
+ .sb-show-preparing-story > .sb-preparing-story,
34
+ .sb-show-preparing-docs > .sb-preparing-docs,
35
+ .sb-show-nopreview > .sb-nopreview,
36
+ .sb-show-errordisplay > .sb-errordisplay,
37
+ .sb-show-main > #root,
38
+ .sb-show-main > #docs-root {
39
+ display: block !important;
40
+ }
41
+ #root[hidden],
42
+ #docs-root[hidden] {
43
+ display: none !important;
44
+ }
45
+ </style>
46
+ </head>
47
+ `.trim()
48
+ );
49
+ }
@@ -1,3 +1,5 @@
1
+ import path from 'path';
2
+ import { createFilter } from '@rollup/pluginutils';
1
3
  import {
2
4
  parse,
3
5
  handlers as docgenHandlers,
@@ -17,36 +19,44 @@ const defaultResolver = docgenResolver.findAllExportedComponentDefinitions;
17
19
  const defaultImporter = docgenImporters.makeFsImporter();
18
20
  const handlers = [...defaultHandlers, actualNameHandler];
19
21
 
20
- export function reactDocgen(): Plugin {
22
+ type Options = {
23
+ include?: string | RegExp | (string | RegExp)[];
24
+ exclude?: string | RegExp | (string | RegExp)[];
25
+ };
26
+
27
+ export function reactDocgen({ include = /\.(mjs|tsx?|jsx?)$/, exclude = [/node_modules\/.*/] }: Options = {}): Plugin {
28
+ const cwd = process.cwd();
29
+ const filter = createFilter(include, exclude);
30
+
21
31
  return {
22
32
  name: 'react-docgen',
23
33
  enforce: 'pre',
24
34
  async transform(src: string, id: string) {
25
- // JSX syntax is only allowed in .tsx and .jsx, but components can technically be created without JSX
26
- if (/\.(mjs|tsx?|jsx?)$/.test(id)) {
27
- try {
28
- // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.
29
- const docgenResults = parse(src, defaultResolver, handlers, { importer: defaultImporter, filename: id }) as
30
- | DocObj[];
31
- const s = new MagicString(src);
32
-
33
- docgenResults.forEach((info) => {
34
- const { actualName, ...docgenInfo } = info;
35
- if (actualName) {
36
- const docNode = JSON.stringify(docgenInfo);
37
- s.append(`;${actualName}.__docgenInfo=${docNode}`);
38
- }
39
- });
40
-
41
- return {
42
- code: s.toString(),
43
- map: s.generateMap(),
44
- };
45
- } catch (e) {
46
- // Usually this is just an error from react-docgen that it couldn't find a component
47
- // Only uncomment for troubleshooting
48
- // console.error(e);
49
- }
35
+ const relPath = path.relative(cwd, id);
36
+ if (!filter(relPath)) return;
37
+
38
+ try {
39
+ // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.
40
+ const docgenResults = parse(src, defaultResolver, handlers, { importer: defaultImporter, filename: id }) as
41
+ | DocObj[];
42
+ const s = new MagicString(src);
43
+
44
+ docgenResults.forEach((info) => {
45
+ const { actualName, ...docgenInfo } = info;
46
+ if (actualName) {
47
+ const docNode = JSON.stringify(docgenInfo);
48
+ s.append(`;${actualName}.__docgenInfo=${docNode}`);
49
+ }
50
+ });
51
+
52
+ return {
53
+ code: s.toString(),
54
+ map: s.generateMap(),
55
+ };
56
+ } catch (e) {
57
+ // Usually this is just an error from react-docgen that it couldn't find a component
58
+ // Only uncomment for troubleshooting
59
+ // console.error(e);
50
60
  }
51
61
  },
52
62
  };
package/vite-config.ts CHANGED
@@ -7,6 +7,7 @@ import { mockCoreJs } from './mock-core-js';
7
7
  import { codeGeneratorPlugin } from './code-generator-plugin';
8
8
  import { injectExportOrderPlugin } from './inject-export-order-plugin';
9
9
  import { mdxPlugin } from './mdx-plugin';
10
+ import { noFouc } from './plugins/no-fouc';
10
11
  import { sourceLoaderPlugin } from './source-loader-plugin';
11
12
 
12
13
  import type { UserConfig } from 'vite';
@@ -58,6 +59,7 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
58
59
  mockCoreJs(),
59
60
  sourceLoaderPlugin(),
60
61
  mdxPlugin(),
62
+ noFouc(),
61
63
  injectExportOrderPlugin,
62
64
  ] as Plugin[];
63
65
  if (framework === 'vue' || framework === 'vue3') {