@storybook/builder-vite 0.1.25 → 0.1.28
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.
- package/README.md +1 -0
- package/codegen-entries.ts +1 -4
- package/codegen-iframe-script.ts +15 -9
- package/codegen-modern-iframe-script.ts +2 -2
- package/dist/codegen-entries.js +1 -4
- package/dist/codegen-entries.js.map +1 -1
- package/dist/codegen-iframe-script.js +14 -7
- package/dist/codegen-iframe-script.js.map +1 -1
- package/dist/codegen-modern-iframe-script.js +2 -2
- package/dist/codegen-modern-iframe-script.js.map +1 -1
- package/dist/list-stories.d.ts +1 -1
- package/dist/list-stories.js +8 -8
- package/dist/list-stories.js.map +1 -1
- package/dist/utils/transform-abs-path.d.ts +1 -0
- package/dist/utils/transform-abs-path.js +18 -0
- package/dist/utils/transform-abs-path.js.map +1 -0
- package/list-stories.ts +10 -11
- package/package.json +3 -3
- package/utils/transform-abs-path.ts +11 -0
package/README.md
CHANGED
package/codegen-entries.ts
CHANGED
|
@@ -9,17 +9,14 @@ const absoluteFilesToImport = (files: string[], name: string) =>
|
|
|
9
9
|
files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`).join('\n');
|
|
10
10
|
|
|
11
11
|
export async function generateVirtualStoryEntryCode(options: ExtendedOptions) {
|
|
12
|
-
const { frameworkPath, framework } = options;
|
|
13
12
|
const storyEntries = await listStories(options);
|
|
14
13
|
const resolveMap = storyEntries.reduce<Record<string, string>>(
|
|
15
14
|
(prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),
|
|
16
15
|
{}
|
|
17
16
|
);
|
|
18
17
|
const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');
|
|
19
|
-
const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
|
|
20
18
|
|
|
21
19
|
return `
|
|
22
|
-
import { configure } from '${frameworkImportPath}';
|
|
23
20
|
${absoluteFilesToImport(storyEntries, 'story')}
|
|
24
21
|
|
|
25
22
|
function loadable(key) {
|
|
@@ -31,7 +28,7 @@ export async function generateVirtualStoryEntryCode(options: ExtendedOptions) {
|
|
|
31
28
|
resolve: (key) => (${JSON.stringify(resolveMap)}[key])
|
|
32
29
|
});
|
|
33
30
|
|
|
34
|
-
export function configStories() {
|
|
31
|
+
export function configStories(configure) {
|
|
35
32
|
configure(loadable, { hot: import.meta.hot }, false);
|
|
36
33
|
}
|
|
37
34
|
`.trim();
|
package/codegen-iframe-script.ts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
|
|
2
|
+
import { transformAbsPath } from './utils/transform-abs-path';
|
|
4
3
|
import type { ExtendedOptions } from './types';
|
|
5
4
|
|
|
6
5
|
export async function generateIframeScriptCode(options: ExtendedOptions) {
|
|
7
|
-
const { presets } = options;
|
|
6
|
+
const { presets, frameworkPath, framework } = options;
|
|
7
|
+
const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
|
|
8
8
|
|
|
9
9
|
const presetEntries = await presets.apply('config', [], options);
|
|
10
10
|
const configEntries = [...presetEntries].filter(Boolean);
|
|
11
11
|
|
|
12
12
|
const absoluteFilesToImport = (files: string[], name: string) =>
|
|
13
|
-
files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'
|
|
13
|
+
files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${transformAbsPath(el)}'`).join('\n');
|
|
14
14
|
|
|
15
15
|
const importArray = (name: string, length: number) => new Array(length).fill(0).map((_, i) => `${name}_${i}`);
|
|
16
16
|
|
|
@@ -18,18 +18,21 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
|
|
|
18
18
|
/** @todo Inline variable and remove `noinspection` */
|
|
19
19
|
// language=JavaScript
|
|
20
20
|
const code = `
|
|
21
|
-
|
|
21
|
+
// Ensure that the client API is initialized by the framework before any other iframe code
|
|
22
|
+
// is loaded. That way our client-apis can assume the existence of the API+store
|
|
23
|
+
import { configure } from '${frameworkImportPath}';
|
|
24
|
+
|
|
22
25
|
import {
|
|
23
26
|
addDecorator,
|
|
24
27
|
addParameters,
|
|
25
28
|
addLoader,
|
|
26
29
|
addArgTypesEnhancer,
|
|
27
|
-
addArgsEnhancer
|
|
30
|
+
addArgsEnhancer,
|
|
31
|
+
setGlobalRender
|
|
28
32
|
} from '@storybook/client-api';
|
|
29
33
|
import { logger } from '@storybook/client-logger';
|
|
30
34
|
${absoluteFilesToImport(configEntries, 'config')}
|
|
31
35
|
import * as preview from '${virtualPreviewFile}';
|
|
32
|
-
// This import should occur after the config imports above
|
|
33
36
|
import { configStories } from '${virtualStoriesFile}';
|
|
34
37
|
|
|
35
38
|
const configs = [${importArray('config', configEntries.length).concat('preview.default').join(',')}].filter(Boolean)
|
|
@@ -57,6 +60,9 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
|
|
|
57
60
|
case 'argsEnhancers': {
|
|
58
61
|
return value.forEach((enhancer) => addArgsEnhancer(enhancer))
|
|
59
62
|
}
|
|
63
|
+
case 'render': {
|
|
64
|
+
return setGlobalRender(value)
|
|
65
|
+
}
|
|
60
66
|
case 'globals':
|
|
61
67
|
case 'globalTypes': {
|
|
62
68
|
const v = {};
|
|
@@ -81,7 +87,7 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
|
|
|
81
87
|
}
|
|
82
88
|
*/
|
|
83
89
|
|
|
84
|
-
configStories();
|
|
90
|
+
configStories(configure);
|
|
85
91
|
`.trim();
|
|
86
92
|
return code;
|
|
87
93
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { loadPreviewOrConfigFile } from '@storybook/core-common';
|
|
2
|
-
import { normalizePath } from 'vite';
|
|
3
2
|
import { virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';
|
|
3
|
+
import { transformAbsPath } from './utils/transform-abs-path';
|
|
4
4
|
import type { ExtendedOptions } from './types';
|
|
5
5
|
|
|
6
6
|
export async function generateModernIframeScriptCode(options: ExtendedOptions) {
|
|
@@ -10,7 +10,7 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) {
|
|
|
10
10
|
const presetEntries = await presets.apply('config', [], options);
|
|
11
11
|
const configEntries = [...presetEntries, previewOrConfigFile]
|
|
12
12
|
.filter(Boolean)
|
|
13
|
-
.map((configEntry) =>
|
|
13
|
+
.map((configEntry) => transformAbsPath(configEntry));
|
|
14
14
|
|
|
15
15
|
// noinspection UnnecessaryLocalVariableJS
|
|
16
16
|
/**
|
package/dist/codegen-entries.js
CHANGED
|
@@ -10,13 +10,10 @@ const vite_1 = require("vite");
|
|
|
10
10
|
const list_stories_1 = require("./list-stories");
|
|
11
11
|
const absoluteFilesToImport = (files, name) => files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${(0, vite_1.normalizePath)(el)}'`).join('\n');
|
|
12
12
|
async function generateVirtualStoryEntryCode(options) {
|
|
13
|
-
const { frameworkPath, framework } = options;
|
|
14
13
|
const storyEntries = await (0, list_stories_1.listStories)(options);
|
|
15
14
|
const resolveMap = storyEntries.reduce((prev, entry) => ({ ...prev, [entry]: entry.replace((0, slash_1.default)(process.cwd()), '.') }), {});
|
|
16
15
|
const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');
|
|
17
|
-
const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
|
|
18
16
|
return `
|
|
19
|
-
import { configure } from '${frameworkImportPath}';
|
|
20
17
|
${absoluteFilesToImport(storyEntries, 'story')}
|
|
21
18
|
|
|
22
19
|
function loadable(key) {
|
|
@@ -28,7 +25,7 @@ async function generateVirtualStoryEntryCode(options) {
|
|
|
28
25
|
resolve: (key) => (${JSON.stringify(resolveMap)}[key])
|
|
29
26
|
});
|
|
30
27
|
|
|
31
|
-
export function configStories() {
|
|
28
|
+
export function configStories(configure) {
|
|
32
29
|
configure(loadable, { hot: import.meta.hot }, false);
|
|
33
30
|
}
|
|
34
31
|
`.trim();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"codegen-entries.js","sourceRoot":"","sources":["../codegen-entries.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAEjE,kDAA0B;AAC1B,+BAAqC;AAErC,iDAA6C;AAE7C,MAAM,qBAAqB,GAAG,CAAC,KAAe,EAAE,IAAY,EAAE,EAAE,CAC9D,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,IAAA,oBAAa,EAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEzG,KAAK,UAAU,6BAA6B,CAAC,OAAwB;IAC1E,MAAM,
|
|
1
|
+
{"version":3,"file":"codegen-entries.js","sourceRoot":"","sources":["../codegen-entries.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAEjE,kDAA0B;AAC1B,+BAAqC;AAErC,iDAA6C;AAE7C,MAAM,qBAAqB,GAAG,CAAC,KAAe,EAAE,IAAY,EAAE,EAAE,CAC9D,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,IAAA,oBAAa,EAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEzG,KAAK,UAAU,6BAA6B,CAAC,OAAwB;IAC1E,MAAM,YAAY,GAAG,MAAM,IAAA,0BAAW,EAAC,OAAO,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,YAAY,CAAC,MAAM,CACpC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,IAAA,eAAK,EAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EACjF,EAAE,CACH,CAAC;IACF,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjG,OAAO;MACH,qBAAqB,CAAC,YAAY,EAAE,OAAO,CAAC;;;gBAGlC,OAAO;;;;qBAIF,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;2BACjC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;;;;;GAMlD,CAAC,IAAI,EAAE,CAAC;AACX,CAAC;AAxBD,sEAwBC;AAEM,KAAK,UAAU,wBAAwB,CAAC,EAAE,SAAS,EAAW;IACnE,MAAM,WAAW,GAAG,IAAA,qCAAuB,EAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IAC3D,IAAI,CAAC,WAAW;QAAE,OAAO,EAAE,CAAC;IAE5B,OAAO,6BAA6B,IAAA,eAAK,EAAC,WAAW,CAAC;0BAC9B,CAAC;AAC3B,CAAC;AAND,4DAMC","sourcesContent":["import { loadPreviewOrConfigFile } from '@storybook/core-common';\nimport type { Options } from '@storybook/core-common';\nimport slash from 'slash';\nimport { normalizePath } from 'vite';\nimport type { ExtendedOptions } from './types';\nimport { listStories } from './list-stories';\n\nconst absoluteFilesToImport = (files: string[], name: string) =>\n files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`).join('\\n');\n\nexport async function generateVirtualStoryEntryCode(options: ExtendedOptions) {\n const storyEntries = await listStories(options);\n const resolveMap = storyEntries.reduce<Record<string, string>>(\n (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),\n {}\n );\n const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');\n\n return `\n ${absoluteFilesToImport(storyEntries, 'story')}\n\n function loadable(key) {\n return {${modules}}[key];\n }\n \n Object.assign(loadable, {\n keys: () => (${JSON.stringify(Object.keys(resolveMap))}),\n resolve: (key) => (${JSON.stringify(resolveMap)}[key])\n });\n\n export function configStories(configure) {\n configure(loadable, { hot: import.meta.hot }, false);\n }\n `.trim();\n}\n\nexport async function generatePreviewEntryCode({ configDir }: Options) {\n const previewFile = loadPreviewOrConfigFile({ configDir });\n if (!previewFile) return '';\n\n return `import * as preview from '${slash(previewFile)}';\n export default preview;`;\n}\n"]}
|
|
@@ -1,30 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.generateIframeScriptCode = void 0;
|
|
4
|
-
const vite_1 = require("vite");
|
|
5
4
|
const virtual_file_names_1 = require("./virtual-file-names");
|
|
5
|
+
const transform_abs_path_1 = require("./utils/transform-abs-path");
|
|
6
6
|
async function generateIframeScriptCode(options) {
|
|
7
|
-
const { presets } = options;
|
|
7
|
+
const { presets, frameworkPath, framework } = options;
|
|
8
|
+
const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
|
|
8
9
|
const presetEntries = await presets.apply('config', [], options);
|
|
9
10
|
const configEntries = [...presetEntries].filter(Boolean);
|
|
10
|
-
const absoluteFilesToImport = (files, name) => files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'
|
|
11
|
+
const absoluteFilesToImport = (files, name) => files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${(0, transform_abs_path_1.transformAbsPath)(el)}'`).join('\n');
|
|
11
12
|
const importArray = (name, length) => new Array(length).fill(0).map((_, i) => `${name}_${i}`);
|
|
12
13
|
// noinspection UnnecessaryLocalVariableJS
|
|
13
14
|
/** @todo Inline variable and remove `noinspection` */
|
|
14
15
|
// language=JavaScript
|
|
15
16
|
const code = `
|
|
16
|
-
|
|
17
|
+
// Ensure that the client API is initialized by the framework before any other iframe code
|
|
18
|
+
// is loaded. That way our client-apis can assume the existence of the API+store
|
|
19
|
+
import { configure } from '${frameworkImportPath}';
|
|
20
|
+
|
|
17
21
|
import {
|
|
18
22
|
addDecorator,
|
|
19
23
|
addParameters,
|
|
20
24
|
addLoader,
|
|
21
25
|
addArgTypesEnhancer,
|
|
22
|
-
addArgsEnhancer
|
|
26
|
+
addArgsEnhancer,
|
|
27
|
+
setGlobalRender
|
|
23
28
|
} from '@storybook/client-api';
|
|
24
29
|
import { logger } from '@storybook/client-logger';
|
|
25
30
|
${absoluteFilesToImport(configEntries, 'config')}
|
|
26
31
|
import * as preview from '${virtual_file_names_1.virtualPreviewFile}';
|
|
27
|
-
// This import should occur after the config imports above
|
|
28
32
|
import { configStories } from '${virtual_file_names_1.virtualStoriesFile}';
|
|
29
33
|
|
|
30
34
|
const configs = [${importArray('config', configEntries.length).concat('preview.default').join(',')}].filter(Boolean)
|
|
@@ -52,6 +56,9 @@ async function generateIframeScriptCode(options) {
|
|
|
52
56
|
case 'argsEnhancers': {
|
|
53
57
|
return value.forEach((enhancer) => addArgsEnhancer(enhancer))
|
|
54
58
|
}
|
|
59
|
+
case 'render': {
|
|
60
|
+
return setGlobalRender(value)
|
|
61
|
+
}
|
|
55
62
|
case 'globals':
|
|
56
63
|
case 'globalTypes': {
|
|
57
64
|
const v = {};
|
|
@@ -76,7 +83,7 @@ async function generateIframeScriptCode(options) {
|
|
|
76
83
|
}
|
|
77
84
|
*/
|
|
78
85
|
|
|
79
|
-
configStories();
|
|
86
|
+
configStories(configure);
|
|
80
87
|
`.trim();
|
|
81
88
|
return code;
|
|
82
89
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"codegen-iframe-script.js","sourceRoot":"","sources":["../codegen-iframe-script.ts"],"names":[],"mappings":";;;AAAA
|
|
1
|
+
{"version":3,"file":"codegen-iframe-script.js","sourceRoot":"","sources":["../codegen-iframe-script.ts"],"names":[],"mappings":";;;AAAA,6DAA8E;AAC9E,mEAA8D;AAGvD,KAAK,UAAU,wBAAwB,CAAC,OAAwB;IACrE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IACtD,MAAM,mBAAmB,GAAG,aAAa,IAAI,cAAc,SAAS,EAAE,CAAC;IAEvE,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,qBAAqB,GAAG,CAAC,KAAe,EAAE,IAAY,EAAE,EAAE,CAC9D,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,IAAA,qCAAgB,EAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE9G,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,MAAc,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC;IAE9G,0CAA0C;IAC1C,sDAAsD;IACtD,sBAAsB;IACtB,MAAM,IAAI,GAAG;;;iCAGkB,mBAAmB;;;;;;;;;;;MAW9C,qBAAqB,CAAC,aAAa,EAAE,QAAQ,CAAC;gCACpB,uCAAkB;qCACb,uCAAkB;;uBAEhC,WAAW,CAAC,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDjG,CAAC,IAAI,EAAE,CAAC;IACX,OAAO,IAAI,CAAC;AACd,CAAC;AAxFD,4DAwFC","sourcesContent":["import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';\nimport { transformAbsPath } from './utils/transform-abs-path';\nimport type { ExtendedOptions } from './types';\n\nexport async function generateIframeScriptCode(options: ExtendedOptions) {\n const { presets, frameworkPath, framework } = options;\n const frameworkImportPath = frameworkPath || `@storybook/${framework}`;\n\n const presetEntries = await presets.apply('config', [], options);\n const configEntries = [...presetEntries].filter(Boolean);\n\n const absoluteFilesToImport = (files: string[], name: string) =>\n files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${transformAbsPath(el)}'`).join('\\n');\n\n const importArray = (name: string, length: number) => new Array(length).fill(0).map((_, i) => `${name}_${i}`);\n\n // noinspection UnnecessaryLocalVariableJS\n /** @todo Inline variable and remove `noinspection` */\n // language=JavaScript\n const code = `\n // Ensure that the client API is initialized by the framework before any other iframe code\n // is loaded. That way our client-apis can assume the existence of the API+store\n import { configure } from '${frameworkImportPath}';\n\n import {\n addDecorator,\n addParameters,\n addLoader,\n addArgTypesEnhancer,\n addArgsEnhancer,\n setGlobalRender\n } from '@storybook/client-api';\n import { logger } from '@storybook/client-logger';\n ${absoluteFilesToImport(configEntries, 'config')}\n import * as preview from '${virtualPreviewFile}';\n import { configStories } from '${virtualStoriesFile}';\n\n const configs = [${importArray('config', configEntries.length).concat('preview.default').join(',')}].filter(Boolean)\n\n configs.forEach(config => {\n Object.keys(config).forEach((key) => {\n const value = config[key];\n switch (key) {\n case 'args':\n case 'argTypes': {\n return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));\n }\n case 'decorators': {\n return value.forEach((decorator) => addDecorator(decorator, false));\n }\n case 'loaders': {\n return value.forEach((loader) => addLoader(loader, false));\n }\n case 'parameters': {\n return addParameters({ ...value }, false);\n }\n case 'argTypesEnhancers': {\n return value.forEach((enhancer) => addArgTypesEnhancer(enhancer));\n }\n case 'argsEnhancers': {\n return value.forEach((enhancer) => addArgsEnhancer(enhancer))\n }\n case 'render': {\n return setGlobalRender(value)\n }\n case 'globals':\n case 'globalTypes': {\n const v = {};\n v[key] = value;\n return addParameters(v, false);\n }\n case 'decorateStory':\n case 'renderToDOM': {\n return null; // This key is not handled directly in v6 mode.\n }\n default: {\n // eslint-disable-next-line prefer-template\n return console.log(key + ' was not supported :( !');\n }\n }\n });\n })\n \n /* TODO: not quite sure what to do with this, to fix HMR\n if (import.meta.hot) {\n import.meta.hot.accept(); \n }\n */\n\n configStories(configure);\n `.trim();\n return code;\n}\n"]}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.generateModernIframeScriptCode = void 0;
|
|
4
4
|
const core_common_1 = require("@storybook/core-common");
|
|
5
|
-
const vite_1 = require("vite");
|
|
6
5
|
const virtual_file_names_1 = require("./virtual-file-names");
|
|
6
|
+
const transform_abs_path_1 = require("./utils/transform-abs-path");
|
|
7
7
|
async function generateModernIframeScriptCode(options) {
|
|
8
8
|
const { presets, configDir } = options;
|
|
9
9
|
const previewOrConfigFile = (0, core_common_1.loadPreviewOrConfigFile)({ configDir });
|
|
10
10
|
const presetEntries = await presets.apply('config', [], options);
|
|
11
11
|
const configEntries = [...presetEntries, previewOrConfigFile]
|
|
12
12
|
.filter(Boolean)
|
|
13
|
-
.map((configEntry) =>
|
|
13
|
+
.map((configEntry) => (0, transform_abs_path_1.transformAbsPath)(configEntry));
|
|
14
14
|
// noinspection UnnecessaryLocalVariableJS
|
|
15
15
|
/**
|
|
16
16
|
* This code is largely taken from https://github.com/storybookjs/storybook/blob/d1195cbd0c61687f1720fefdb772e2f490a46584/lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"codegen-modern-iframe-script.js","sourceRoot":"","sources":["../codegen-modern-iframe-script.ts"],"names":[],"mappings":";;;AAAA,wDAAiE;AACjE
|
|
1
|
+
{"version":3,"file":"codegen-modern-iframe-script.js","sourceRoot":"","sources":["../codegen-modern-iframe-script.ts"],"names":[],"mappings":";;;AAAA,wDAAiE;AACjE,6DAAiF;AACjF,mEAA8D;AAGvD,KAAK,UAAU,8BAA8B,CAAC,OAAwB;IAC3E,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAEvC,MAAM,mBAAmB,GAAG,IAAA,qCAAuB,EAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IACnE,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,CAAC,GAAG,aAAa,EAAE,mBAAmB,CAAC;SAC1D,MAAM,CAAC,OAAO,CAAC;SACf,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,IAAA,qCAAgB,EAAC,WAAW,CAAC,CAAC,CAAC;IAEvD,0CAA0C;IAC1C;;;;;OAKG;IACH,sBAAsB;IACtB,MAAM,IAAI,GAAG;;;cAGD,0CAAqB;gCACH,uCAAkB;;;0CAGR,aAAa;SAC9C,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,WAAW,IAAI,CAAC;SAChD,IAAI,CAAC,KAAK,CAAC;;;;;;;;;;;kCAWc,uCAAkB;;;;;;+BAMrB,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;;;;;;;KAOvD,CAAC,IAAI,EAAE,CAAC;IACX,OAAO,IAAI,CAAC;AACd,CAAC;AApDD,wEAoDC","sourcesContent":["import { loadPreviewOrConfigFile } from '@storybook/core-common';\nimport { virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';\nimport { transformAbsPath } from './utils/transform-abs-path';\nimport type { ExtendedOptions } from './types';\n\nexport async function generateModernIframeScriptCode(options: ExtendedOptions) {\n const { presets, configDir } = options;\n\n const previewOrConfigFile = loadPreviewOrConfigFile({ configDir });\n const presetEntries = await presets.apply('config', [], options);\n const configEntries = [...presetEntries, previewOrConfigFile]\n .filter(Boolean)\n .map((configEntry) => transformAbsPath(configEntry));\n\n // noinspection UnnecessaryLocalVariableJS\n /**\n * This code is largely taken from https://github.com/storybookjs/storybook/blob/d1195cbd0c61687f1720fefdb772e2f490a46584/lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars\n * Some small tweaks were made to `getProjectAnnotations` (since `import()` needs to be resolved asynchronously)\n * and the HMR implementation has been tweaked to work with Vite.\n * @todo Inline variable and remove `noinspection`\n */\n // language=JavaScript\n const code = `\n import { composeConfigs, PreviewWeb } from '@storybook/preview-web';\n import { ClientApi } from '@storybook/client-api';\n import '${virtualAddonSetupFile}';\n import { importFn } from '${virtualStoriesFile}';\n\n const getProjectAnnotations = async () =>\n composeConfigs(await Promise.all([${configEntries\n .map((configEntry) => `import('${configEntry}')`)\n .join(',\\n')}]));\n\n const preview = new PreviewWeb();\n\n window.__STORYBOOK_PREVIEW__ = preview;\n window.__STORYBOOK_STORY_STORE__ = preview.storyStore;\n window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });\n\n preview.initialize({ importFn, getProjectAnnotations });\n\n if (import.meta.hot) {\n import.meta.hot.accept('${virtualStoriesFile}', (newModule) => {\n\n // importFn has changed so we need to patch the new one in\n preview.onStoriesChanged({ importFn: newModule.importFn });\n });\n\n import.meta.hot.accept(${JSON.stringify(configEntries)}, ([...newConfigEntries]) => {\n const newGetProjectAnnotations = () => composeConfigs(newConfigEntries);\n\n // getProjectAnnotations has changed so we need to patch the new one in\n preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });\n });\n }\n `.trim();\n return code;\n}\n"]}
|
package/dist/list-stories.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { Options } from '@storybook/core-common';
|
|
2
|
-
export declare function listStories(
|
|
2
|
+
export declare function listStories(options: Options): Promise<string[]>;
|
package/dist/list-stories.js
CHANGED
|
@@ -22,14 +22,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
22
22
|
exports.listStories = void 0;
|
|
23
23
|
const path = __importStar(require("path"));
|
|
24
24
|
const glob_promise_1 = require("glob-promise");
|
|
25
|
-
|
|
26
|
-
async function listStories(
|
|
27
|
-
return (await Promise.all((await presets.apply('stories')
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return (0, glob_promise_1.promise)(path.isAbsolute(
|
|
25
|
+
const core_common_1 = require("@storybook/core-common");
|
|
26
|
+
async function listStories(options) {
|
|
27
|
+
return (await Promise.all((0, core_common_1.normalizeStories)(await options.presets.apply('stories', [], options), {
|
|
28
|
+
configDir: options.configDir,
|
|
29
|
+
workingDir: options.configDir,
|
|
30
|
+
}).map(({ directory, files }) => {
|
|
31
|
+
const pattern = path.join(directory, files);
|
|
32
|
+
return (0, glob_promise_1.promise)(path.isAbsolute(pattern) ? pattern : path.join(options.configDir, pattern));
|
|
33
33
|
}))).reduce((carry, stories) => carry.concat(stories), []);
|
|
34
34
|
}
|
|
35
35
|
exports.listStories = listStories;
|
package/dist/list-stories.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-stories.js","sourceRoot":"","sources":["../list-stories.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA6B;AAC7B,+CAA+C;
|
|
1
|
+
{"version":3,"file":"list-stories.js","sourceRoot":"","sources":["../list-stories.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA6B;AAC7B,+CAA+C;AAC/C,wDAA0D;AAInD,KAAK,UAAU,WAAW,CAAC,OAAgB;IAChD,OAAO,CACL,MAAM,OAAO,CAAC,GAAG,CACf,IAAA,8BAAgB,EAAC,MAAM,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,EAAE,OAAO,CAAC,EAAE;QACpE,SAAS,EAAE,OAAO,CAAC,SAAS;QAC5B,UAAU,EAAE,OAAO,CAAC,SAAS;KAC9B,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAE5C,OAAO,IAAA,sBAAI,EAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC1F,CAAC,CAAC,CACH,CACF,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;AAC1D,CAAC;AAbD,kCAaC","sourcesContent":["import * as path from 'path';\nimport { promise as glob } from 'glob-promise';\nimport { normalizeStories } from '@storybook/core-common';\n\nimport type { Options } from '@storybook/core-common';\n\nexport async function listStories(options: Options) {\n return (\n await Promise.all(\n normalizeStories(await options.presets.apply('stories', [], options), {\n configDir: options.configDir,\n workingDir: options.configDir,\n }).map(({ directory, files }) => {\n const pattern = path.join(directory, files);\n\n return glob(path.isAbsolute(pattern) ? pattern : path.join(options.configDir, pattern));\n })\n )\n ).reduce((carry, stories) => carry.concat(stories), []);\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function transformAbsPath(absPath: string): string;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.transformAbsPath = void 0;
|
|
7
|
+
const path_1 = __importDefault(require("path"));
|
|
8
|
+
const vite_1 = require("vite");
|
|
9
|
+
// We need to convert from an absolute path, to a traditional node module import path,
|
|
10
|
+
// so that vite can correctly pre-bundle/optimize
|
|
11
|
+
function transformAbsPath(absPath) {
|
|
12
|
+
const splits = absPath.split(`node_modules${path_1.default.sep}`);
|
|
13
|
+
// Return everything after the final "node_modules/"
|
|
14
|
+
const module = (0, vite_1.normalizePath)(splits[splits.length - 1]);
|
|
15
|
+
return module;
|
|
16
|
+
}
|
|
17
|
+
exports.transformAbsPath = transformAbsPath;
|
|
18
|
+
//# sourceMappingURL=transform-abs-path.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"transform-abs-path.js","sourceRoot":"","sources":["../../utils/transform-abs-path.ts"],"names":[],"mappings":";;;;;;AAAA,gDAAwB;AACxB,+BAAqC;AAErC,sFAAsF;AACtF,iDAAiD;AACjD,SAAgB,gBAAgB,CAAC,OAAe;IAC9C,MAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,eAAe,cAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACxD,oDAAoD;IACpD,MAAM,MAAM,GAAG,IAAA,oBAAa,EAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IACxD,OAAO,MAAM,CAAC;AAChB,CAAC;AALD,4CAKC","sourcesContent":["import path from 'path';\nimport { normalizePath } from 'vite';\n\n// We need to convert from an absolute path, to a traditional node module import path,\n// so that vite can correctly pre-bundle/optimize\nexport function transformAbsPath(absPath: string) {\n const splits = absPath.split(`node_modules${path.sep}`);\n // Return everything after the final \"node_modules/\"\n const module = normalizePath(splits[splits.length - 1]);\n return module;\n}\n"]}
|
package/list-stories.ts
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import * as path from 'path';
|
|
2
2
|
import { promise as glob } from 'glob-promise';
|
|
3
|
+
import { normalizeStories } from '@storybook/core-common';
|
|
3
4
|
|
|
4
|
-
import type { Options
|
|
5
|
+
import type { Options } from '@storybook/core-common';
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
export async function listStories({ presets, configDir }: Options) {
|
|
7
|
+
export async function listStories(options: Options) {
|
|
8
8
|
return (
|
|
9
9
|
await Promise.all(
|
|
10
|
-
(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
return glob(path.isAbsolute(files) ? files : path.join(configDir, files));
|
|
10
|
+
normalizeStories(await options.presets.apply('stories', [], options), {
|
|
11
|
+
configDir: options.configDir,
|
|
12
|
+
workingDir: options.configDir,
|
|
13
|
+
}).map(({ directory, files }) => {
|
|
14
|
+
const pattern = path.join(directory, files);
|
|
15
|
+
|
|
16
|
+
return glob(path.isAbsolute(pattern) ? pattern : path.join(options.configDir, pattern));
|
|
18
17
|
})
|
|
19
18
|
)
|
|
20
19
|
).reduce((carry, stories) => carry.concat(stories), []);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/builder-vite",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.28",
|
|
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",
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@joshwooding/vite-plugin-react-docgen-typescript": "0.0.4",
|
|
17
17
|
"@mdx-js/mdx": "^1.6.22",
|
|
18
|
-
"@storybook/csf-tools": "^6.
|
|
19
|
-
"@storybook/source-loader": "^6.3
|
|
18
|
+
"@storybook/csf-tools": "^6.4.3",
|
|
19
|
+
"@storybook/source-loader": "^6.4.3",
|
|
20
20
|
"@vitejs/plugin-react": "^1.0.8",
|
|
21
21
|
"ast-types": "^0.14.2",
|
|
22
22
|
"es-module-lexer": "^0.9.3",
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
import { normalizePath } from 'vite';
|
|
3
|
+
|
|
4
|
+
// We need to convert from an absolute path, to a traditional node module import path,
|
|
5
|
+
// so that vite can correctly pre-bundle/optimize
|
|
6
|
+
export function transformAbsPath(absPath: string) {
|
|
7
|
+
const splits = absPath.split(`node_modules${path.sep}`);
|
|
8
|
+
// Return everything after the final "node_modules/"
|
|
9
|
+
const module = normalizePath(splits[splits.length - 1]);
|
|
10
|
+
return module;
|
|
11
|
+
}
|