@modern-js/storybook-builder 0.0.0-next-20230913035856

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.
Files changed (78) hide show
  1. package/.eslintrc.js +7 -0
  2. package/.turbo/turbo-build.log +6 -0
  3. package/CHANGELOG.md +24 -0
  4. package/LICENSE +21 -0
  5. package/dist/cjs/addons/components/modern.js +65 -0
  6. package/dist/cjs/addons/constants.js +11 -0
  7. package/dist/cjs/addons/index.js +20 -0
  8. package/dist/cjs/addons/preset/preview.js +14 -0
  9. package/dist/cjs/addons/type.js +4 -0
  10. package/dist/cjs/addons/withPluginRuntime.js +20 -0
  11. package/dist/cjs/build.js +109 -0
  12. package/dist/cjs/core.js +40 -0
  13. package/dist/cjs/docgen/actualNameHandler.js +34 -0
  14. package/dist/cjs/docgen/index.js +74 -0
  15. package/dist/cjs/docgen/loader.js +37 -0
  16. package/dist/cjs/docgen/process.js +39 -0
  17. package/dist/cjs/index.js +35 -0
  18. package/dist/cjs/plugin-storybook.js +316 -0
  19. package/dist/cjs/preset.js +61 -0
  20. package/dist/cjs/types.js +11 -0
  21. package/dist/cjs/utils.js +142 -0
  22. package/dist/esm/addons/components/modern.js +44 -0
  23. package/dist/esm/addons/constants.js +1 -0
  24. package/dist/esm/addons/index.js +5 -0
  25. package/dist/esm/addons/preset/preview.js +4 -0
  26. package/dist/esm/addons/type.js +1 -0
  27. package/dist/esm/addons/withPluginRuntime.js +10 -0
  28. package/dist/esm/build.js +83 -0
  29. package/dist/esm/core.js +30 -0
  30. package/dist/esm/docgen/actualNameHandler.js +24 -0
  31. package/dist/esm/docgen/index.js +54 -0
  32. package/dist/esm/docgen/loader.js +26 -0
  33. package/dist/esm/docgen/process.js +28 -0
  34. package/dist/esm/index.js +6 -0
  35. package/dist/esm/plugin-storybook.js +296 -0
  36. package/dist/esm/preset.js +36 -0
  37. package/dist/esm/types.js +1 -0
  38. package/dist/esm/utils.js +95 -0
  39. package/dist/types/addons/components/modern.d.ts +5 -0
  40. package/dist/types/addons/constants.d.ts +1 -0
  41. package/dist/types/addons/index.d.ts +2 -0
  42. package/dist/types/addons/preset/preview.d.ts +1 -0
  43. package/dist/types/addons/type.d.ts +4 -0
  44. package/dist/types/addons/withPluginRuntime.d.ts +2 -0
  45. package/dist/types/build.d.ts +7 -0
  46. package/dist/types/core.d.ts +4 -0
  47. package/dist/types/docgen/actualNameHandler.d.ts +14 -0
  48. package/dist/types/docgen/index.d.ts +9 -0
  49. package/dist/types/docgen/loader.d.ts +2 -0
  50. package/dist/types/docgen/process.d.ts +10 -0
  51. package/dist/types/index.d.ts +3 -0
  52. package/dist/types/plugin-storybook.d.ts +6 -0
  53. package/dist/types/preset.d.ts +6 -0
  54. package/dist/types/types.d.ts +15 -0
  55. package/dist/types/utils.d.ts +12 -0
  56. package/index.js +24 -0
  57. package/modern.config.js +5 -0
  58. package/package.json +96 -0
  59. package/src/addons/components/modern.tsx +52 -0
  60. package/src/addons/constants.ts +1 -0
  61. package/src/addons/index.ts +8 -0
  62. package/src/addons/preset/preview.ts +3 -0
  63. package/src/addons/type.ts +4 -0
  64. package/src/addons/withPluginRuntime.ts +18 -0
  65. package/src/build.ts +119 -0
  66. package/src/core.ts +51 -0
  67. package/src/docgen/actualNameHandler.ts +57 -0
  68. package/src/docgen/index.ts +100 -0
  69. package/src/docgen/loader.ts +34 -0
  70. package/src/docgen/process.ts +44 -0
  71. package/src/index.ts +7 -0
  72. package/src/plugin-storybook.ts +462 -0
  73. package/src/preset.ts +59 -0
  74. package/src/types.ts +21 -0
  75. package/src/utils.ts +131 -0
  76. package/templates/preview.ejs +54 -0
  77. package/templates/virtualModuleModernEntry.js.handlebars +43 -0
  78. package/tsconfig.json +16 -0
package/src/utils.ts ADDED
@@ -0,0 +1,131 @@
1
+ /* eslint-disable consistent-return */
2
+ import path, { dirname, join } from 'path';
3
+ import { createRequire } from 'node:module';
4
+ import { fs, logger } from '@modern-js/utils';
5
+ import {
6
+ AllBuilderConfig,
7
+ RspackBuilderConfig,
8
+ WebpackBuilderConfig,
9
+ } from './types';
10
+
11
+ export const VIRTUAL_MODULE_BASE = '.MODERN_STORYBOOK';
12
+
13
+ export const STORIES_FILENAME = 'storybook-stories.js';
14
+ export const STORYBOOK_CONFIG_ENTRY = 'storybook-config-entry.js';
15
+
16
+ export const requireResolve = (importer: string, path: string) => {
17
+ const require = createRequire(importer);
18
+ require.resolve(path);
19
+ };
20
+
21
+ export async function getProvider(
22
+ bundler: 'webpack' | 'rspack',
23
+ builderConfig: AllBuilderConfig,
24
+ ) {
25
+ try {
26
+ if (bundler === 'webpack') {
27
+ const { builderWebpackProvider } = await import(
28
+ '@modern-js/builder-webpack-provider'
29
+ );
30
+ return builderWebpackProvider({
31
+ builderConfig: builderConfig as WebpackBuilderConfig,
32
+ });
33
+ } else {
34
+ const { builderRspackProvider } = await import(
35
+ '@modern-js/builder-rspack-provider'
36
+ );
37
+ return builderRspackProvider({
38
+ builderConfig: builderConfig as RspackBuilderConfig,
39
+ });
40
+ }
41
+ } catch (e) {
42
+ logger.error(
43
+ `Cannot find provider, you need to install @modern-js/builder-${bundler}-provider first`,
44
+ );
45
+ }
46
+ }
47
+
48
+ // use this instead of virtualModuleWebpackPlugin for rspack compatibility
49
+ export async function virtualModule(
50
+ tempDir: string,
51
+ cwd: string,
52
+ virtualModuleMap: Record<string, string>,
53
+ ): Promise<[Record<string, string>, (p: string, content: string) => void]> {
54
+ fs.ensureDirSync(tempDir);
55
+ const alias: Record<string, string> = {};
56
+
57
+ await Promise.all(
58
+ Reflect.ownKeys(virtualModuleMap).map(k => {
59
+ const virtualPath = k as string;
60
+ const relativePath = path.relative(cwd, virtualPath);
61
+ const realPath = path.join(tempDir, relativePath);
62
+ alias[virtualPath] = realPath;
63
+ return fs.writeFile(realPath, virtualModuleMap[virtualPath]);
64
+ }),
65
+ );
66
+
67
+ return [
68
+ alias,
69
+ (virtualPath: string, content: string) => {
70
+ const relativePath = path.relative(cwd, virtualPath);
71
+ const realPath = path.join(tempDir, relativePath);
72
+ fs.writeFileSync(realPath, content);
73
+ },
74
+ ];
75
+ }
76
+
77
+ export async function toImportFn(cwd: string, stories: string[]) {
78
+ const objectEntries = stories.map(file => {
79
+ const ext = path.extname(file);
80
+ const relativePath = path.relative(cwd, file);
81
+ if (!['.js', '.jsx', '.ts', '.tsx', '.mdx'].includes(ext)) {
82
+ logger.warn(
83
+ `Cannot process ${ext} file with storyStoreV7: ${relativePath}`,
84
+ );
85
+ }
86
+
87
+ return ` '${toImportPath(relativePath)}': async () => import('${file}')`;
88
+ });
89
+
90
+ return `
91
+ const importers = {
92
+ ${objectEntries.join(',\n')}
93
+ };
94
+
95
+ export async function importFn(path) {
96
+ return importers[path]();
97
+ }
98
+ `;
99
+ }
100
+
101
+ function toImportPath(relativePath: string) {
102
+ return relativePath.startsWith('../') ? relativePath : `./${relativePath}`;
103
+ }
104
+
105
+ export function getAbsolutePath<I extends string>(input: I): I {
106
+ return dirname(require.resolve(join(input, 'package.json'))) as any;
107
+ }
108
+
109
+ export function maybeGetAbsolutePath<I extends string>(input: I): I | false {
110
+ try {
111
+ return getAbsolutePath(input);
112
+ } catch (e) {
113
+ return false;
114
+ }
115
+ }
116
+
117
+ export async function runWithErrorMsg<T>(
118
+ op: () => Promise<T>,
119
+ msg: string,
120
+ ): Promise<T | undefined> {
121
+ try {
122
+ return await op();
123
+ } catch (e) {
124
+ logger.error(msg);
125
+ console.error(e);
126
+ }
127
+ }
128
+
129
+ export function isDev() {
130
+ return process.env.NODE_ENV === 'development';
131
+ }
package/templates/preview.ejs ADDED
@@ -0,0 +1,54 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title><%= htmlWebpackPlugin.options.title || 'Storybook'%></title>
6
+
7
+ <% if (htmlWebpackPlugin.files.favicon) { %>
8
+ <link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon%>" />
9
+ <% } %>
10
+
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+
13
+ <link rel="prefetch" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin />
14
+ <link rel="prefetch" href="./sb-common-assets/nunito-sans-italic.woff2" as="font" type="font/woff2" crossorigin />
15
+ <link rel="prefetch" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin />
16
+ <link rel="prefetch" href="./sb-common-assets/nunito-sans-bold-italic.woff2" as="font" type="font/woff2" crossorigin />
17
+ <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
18
+
19
+ <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
20
+ htmlWebpackPlugin.files.css.forEach(file => { %>
21
+ <link href="<%= file %>" rel="stylesheet" />
22
+ <% }); %>
23
+
24
+ <style>
25
+ #storybook-root[hidden],
26
+ #storybook-docs[hidden] {
27
+ display: none !important;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %>
33
+
34
+ <div id="storybook-root"></div>
35
+ <div id="storybook-docs"></div>
36
+
37
+ <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
38
+ <script>
39
+ <% for (var varName in globals) { %>
40
+ <% if (globals[varName] != undefined) { %>
41
+ window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
42
+ <% } %>
43
+ <% } %>
44
+ </script>
45
+ <% } %>
46
+ <script type="module">
47
+ import './sb-preview/runtime.js';
48
+
49
+ <% htmlWebpackPlugin.files.js.forEach(file => { %>
50
+ import '<%= file %>';
51
+ <% }); %>
52
+ </script>
53
+ </body>
54
+ </html>
package/templates/virtualModuleModernEntry.js.handlebars ADDED
@@ -0,0 +1,43 @@
1
+ import { global } from '@storybook/global';
2
+
3
+ import { ClientApi, PreviewWeb, addons, composeConfigs } from '@storybook/preview-api';
4
+ import { createBrowserChannel } from '@storybook/channels';
5
+
6
+ import { importFn } from './{{storiesFilename}}';
7
+
8
+ const getProjectAnnotations = () =>
9
+ composeConfigs([
10
+ {{#each previewAnnotations}}require('{{this}}'),
11
+ {{/each}}
12
+ ]);
13
+
14
+ const channel = createBrowserChannel({ page: 'preview' });
15
+ addons.setChannel(channel);
16
+
17
+ if (global.CONFIG_TYPE === 'DEVELOPMENT'){
18
+ window.__STORYBOOK_SERVER_CHANNEL__ = channel;
19
+ }
20
+
21
+ const preview = new PreviewWeb();
22
+
23
+ window.__STORYBOOK_PREVIEW__ = preview;
24
+ window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
25
+ window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
26
+ window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });
27
+
28
+ preview.initialize({ importFn, getProjectAnnotations });
29
+
30
+ if (import.meta.webpackHot) {
31
+ import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
32
+ // importFn has changed so we need to patch the new one in
33
+ preview.onStoriesChanged({ importFn });
34
+ });
35
+
36
+ import.meta.webpackHot.accept([
37
+ {{#each previewAnnotations}}'{{this}}',
38
+ {{/each}}
39
+ ], () => {
40
+ // getProjectAnnotations has changed so we need to patch the new one in
41
+ preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
42
+ });
43
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "extends": "@modern-js/tsconfig/base",
3
+ "compilerOptions": {
4
+ "target": "ES2020",
5
+ "declaration": true,
6
+ "outDir": "dist",
7
+ "isolatedModules": true,
8
+ "noImplicitAny": true,
9
+ "skipLibCheck": true,
10
+ "sourceMap": true,
11
+ "moduleResolution": "NodeNext",
12
+ "module": "NodeNext",
13
+ "esModuleInterop": true
14
+ },
15
+ "include": ["./src"],
16
+ }