@storybook/builder-webpack5 6.5.0-alpha.24 → 6.5.0-alpha.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.
Files changed (8) hide show
  1. package/dist/cjs/preview/iframe-webpack.config.js +4 -8
  2. package/dist/cjs/preview/virtualModuleModernEntry.js.handlebars +3 -2
  3. package/dist/esm/preview/iframe-webpack.config.js +4 -8
  4. package/dist/esm/preview/virtualModuleModernEntry.js.handlebars +3 -2
  5. package/dist/modern/preview/iframe-webpack.config.js +4 -8
  6. package/dist/modern/preview/virtualModuleModernEntry.js.handlebars +3 -2
  7. package/package.json +17 -18
  8. package/templates/virtualModuleModernEntry.js.handlebars +44 -0
package/dist/cjs/preview/iframe-webpack.config.js CHANGED
@@ -85,7 +85,7 @@ var _default = async function _default(options) {
85
85
 
86
86
  var configEntryPath = _path.default.resolve(_path.default.join(workingDir, 'storybook-config-entry.js'));
87
87
 
88
- virtualModuleMapping[configEntryPath] = (0, _coreCommon.handlebars)(await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
88
+ virtualModuleMapping[configEntryPath] = (0, _coreCommon.handlebars)(await (0, _coreCommon.readTemplate)(require.resolve('@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars')), {
89
89
  storiesFilename: storiesFilename,
90
90
  configs: configs
91
91
  } // We need to double escape `\` for webpack. We may have some in windows paths
@@ -100,9 +100,7 @@ var _default = async function _default(options) {
100
100
  var entryTemplate = await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleEntry.template.js'));
101
101
  configs.forEach(function (configFilename) {
102
102
  var clientApi = storybookPaths['@storybook/client-api'];
103
- var clientLogger = storybookPaths['@storybook/client-logger']; // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM
104
- // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
105
-
103
+ var clientLogger = storybookPaths['@storybook/client-logger'];
106
104
  virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = (0, _coreCommon.interpolate)(entryTemplate, {
107
105
  configFilename: configFilename,
108
106
  clientApi: clientApi,
@@ -112,11 +110,9 @@ var _default = async function _default(options) {
112
110
  });
113
111
 
114
112
  if (stories.length > 0) {
115
- var storyTemplate = await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleStory.template.js')); // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs
116
- // in the user's webpack mode, which may be strict about the use of require/import.
117
- // See https://github.com/storybookjs/storybook/issues/14877
113
+ var storyTemplate = await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleStory.template.js'));
118
114
 
119
- var _storiesFilename = _path.default.resolve(_path.default.join(workingDir, `generated-stories-entry.cjs`));
115
+ var _storiesFilename = _path.default.resolve(_path.default.join(workingDir, `generated-stories-entry.js`));
120
116
 
121
117
  virtualModuleMapping[_storiesFilename] = (0, _coreCommon.interpolate)(storyTemplate, {
122
118
  frameworkImportPath: frameworkImportPath
package/dist/cjs/preview/virtualModuleModernEntry.js.handlebars CHANGED
@@ -1,3 +1,4 @@
1
+ import fetch from 'unfetch';
1
2
  import global from 'global';
2
3
 
3
4
  import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
@@ -32,12 +33,12 @@ window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore
32
33
  preview.initialize({ importFn, getProjectAnnotations });
33
34
 
34
35
  if (module.hot) {
35
- import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
36
+ module.hot.accept('./{{storiesFilename}}', () => {
36
37
  // importFn has changed so we need to patch the new one in
37
38
  preview.onStoriesChanged({ importFn });
38
39
  });
39
40
 
40
- import.meta.webpackHot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
41
+ module.hot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
41
42
  // getProjectAnnotations has changed so we need to patch the new one in
42
43
  preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
43
44
  });
package/dist/esm/preview/iframe-webpack.config.js CHANGED
@@ -60,7 +60,7 @@ export default (async function (options) {
60
60
  var storiesPath = path.resolve(path.join(workingDir, storiesFilename));
61
61
  virtualModuleMapping[storiesPath] = toImportFn(stories);
62
62
  var configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js'));
63
- virtualModuleMapping[configEntryPath] = handlebars(await readTemplate(path.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
63
+ virtualModuleMapping[configEntryPath] = handlebars(await readTemplate(require.resolve('@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars')), {
64
64
  storiesFilename: storiesFilename,
65
65
  configs: configs
66
66
  } // We need to double escape `\` for webpack. We may have some in windows paths
@@ -74,9 +74,7 @@ export default (async function (options) {
74
74
  var entryTemplate = await readTemplate(path.join(__dirname, 'virtualModuleEntry.template.js'));
75
75
  configs.forEach(function (configFilename) {
76
76
  var clientApi = storybookPaths['@storybook/client-api'];
77
- var clientLogger = storybookPaths['@storybook/client-logger']; // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM
78
- // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
79
-
77
+ var clientLogger = storybookPaths['@storybook/client-logger'];
80
78
  virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = interpolate(entryTemplate, {
81
79
  configFilename: configFilename,
82
80
  clientApi: clientApi,
@@ -86,11 +84,9 @@ export default (async function (options) {
86
84
  });
87
85
 
88
86
  if (stories.length > 0) {
89
- var storyTemplate = await readTemplate(path.join(__dirname, 'virtualModuleStory.template.js')); // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs
90
- // in the user's webpack mode, which may be strict about the use of require/import.
91
- // See https://github.com/storybookjs/storybook/issues/14877
87
+ var storyTemplate = await readTemplate(path.join(__dirname, 'virtualModuleStory.template.js'));
92
88
 
93
- var _storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.cjs`));
89
+ var _storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.js`));
94
90
 
95
91
  virtualModuleMapping[_storiesFilename] = interpolate(storyTemplate, {
96
92
  frameworkImportPath: frameworkImportPath
package/dist/esm/preview/virtualModuleModernEntry.js.handlebars CHANGED
@@ -1,3 +1,4 @@
1
+ import fetch from 'unfetch';
1
2
  import global from 'global';
2
3
 
3
4
  import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
@@ -32,12 +33,12 @@ window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore
32
33
  preview.initialize({ importFn, getProjectAnnotations });
33
34
 
34
35
  if (module.hot) {
35
- import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
36
+ module.hot.accept('./{{storiesFilename}}', () => {
36
37
  // importFn has changed so we need to patch the new one in
37
38
  preview.onStoriesChanged({ importFn });
38
39
  });
39
40
 
40
- import.meta.webpackHot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
41
+ module.hot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
41
42
  // getProjectAnnotations has changed so we need to patch the new one in
42
43
  preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
43
44
  });
package/dist/modern/preview/iframe-webpack.config.js CHANGED
@@ -60,7 +60,7 @@ export default (async function (options) {
60
60
  var storiesPath = path.resolve(path.join(workingDir, storiesFilename));
61
61
  virtualModuleMapping[storiesPath] = toImportFn(stories);
62
62
  var configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js'));
63
- virtualModuleMapping[configEntryPath] = handlebars(await readTemplate(path.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
63
+ virtualModuleMapping[configEntryPath] = handlebars(await readTemplate(require.resolve('@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars')), {
64
64
  storiesFilename: storiesFilename,
65
65
  configs: configs
66
66
  } // We need to double escape `\` for webpack. We may have some in windows paths
@@ -74,9 +74,7 @@ export default (async function (options) {
74
74
  var entryTemplate = await readTemplate(path.join(__dirname, 'virtualModuleEntry.template.js'));
75
75
  configs.forEach(function (configFilename) {
76
76
  var clientApi = storybookPaths['@storybook/client-api'];
77
- var clientLogger = storybookPaths['@storybook/client-logger']; // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM
78
- // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
79
-
77
+ var clientLogger = storybookPaths['@storybook/client-logger'];
80
78
  virtualModuleMapping[`${configFilename}-generated-config-entry.js`] = interpolate(entryTemplate, {
81
79
  configFilename: configFilename,
82
80
  clientApi: clientApi,
@@ -86,11 +84,9 @@ export default (async function (options) {
86
84
  });
87
85
 
88
86
  if (stories.length > 0) {
89
- var storyTemplate = await readTemplate(path.join(__dirname, 'virtualModuleStory.template.js')); // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs
90
- // in the user's webpack mode, which may be strict about the use of require/import.
91
- // See https://github.com/storybookjs/storybook/issues/14877
87
+ var storyTemplate = await readTemplate(path.join(__dirname, 'virtualModuleStory.template.js'));
92
88
 
93
- var _storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.cjs`));
89
+ var _storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.js`));
94
90
 
95
91
  virtualModuleMapping[_storiesFilename] = interpolate(storyTemplate, {
96
92
  frameworkImportPath: frameworkImportPath
package/dist/modern/preview/virtualModuleModernEntry.js.handlebars CHANGED
@@ -1,3 +1,4 @@
1
+ import fetch from 'unfetch';
1
2
  import global from 'global';
2
3
 
3
4
  import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
@@ -32,12 +33,12 @@ window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore
32
33
  preview.initialize({ importFn, getProjectAnnotations });
33
34
 
34
35
  if (module.hot) {
35
- import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
36
+ module.hot.accept('./{{storiesFilename}}', () => {
36
37
  // importFn has changed so we need to patch the new one in
37
38
  preview.onStoriesChanged({ importFn });
38
39
  });
39
40
 
40
- import.meta.webpackHot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
41
+ module.hot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
41
42
  // getProjectAnnotations has changed so we need to patch the new one in
42
43
  preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
43
44
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/builder-webpack5",
3
- "version": "6.5.0-alpha.24",
3
+ "version": "6.5.0-alpha.28",
4
4
  "description": "Storybook framework-agnostic API",
5
5
  "keywords": [
6
6
  "storybook"
@@ -31,8 +31,7 @@
31
31
  },
32
32
  "files": [
33
33
  "dist/**/*",
34
- "dll/**/*",
35
- "types/**/*",
34
+ "templates/**/*",
36
35
  "*.js",
37
36
  "*.d.ts"
38
37
  ],
@@ -60,21 +59,21 @@
60
59
  "@babel/preset-env": "^7.12.11",
61
60
  "@babel/preset-react": "^7.12.10",
62
61
  "@babel/preset-typescript": "^7.12.7",
63
- "@storybook/addons": "6.5.0-alpha.24",
64
- "@storybook/api": "6.5.0-alpha.24",
65
- "@storybook/channel-postmessage": "6.5.0-alpha.24",
66
- "@storybook/channels": "6.5.0-alpha.24",
67
- "@storybook/client-api": "6.5.0-alpha.24",
68
- "@storybook/client-logger": "6.5.0-alpha.24",
69
- "@storybook/components": "6.5.0-alpha.24",
70
- "@storybook/core-common": "6.5.0-alpha.24",
71
- "@storybook/core-events": "6.5.0-alpha.24",
72
- "@storybook/node-logger": "6.5.0-alpha.24",
73
- "@storybook/preview-web": "6.5.0-alpha.24",
74
- "@storybook/router": "6.5.0-alpha.24",
62
+ "@storybook/addons": "6.5.0-alpha.28",
63
+ "@storybook/api": "6.5.0-alpha.28",
64
+ "@storybook/channel-postmessage": "6.5.0-alpha.28",
65
+ "@storybook/channels": "6.5.0-alpha.28",
66
+ "@storybook/client-api": "6.5.0-alpha.28",
67
+ "@storybook/client-logger": "6.5.0-alpha.28",
68
+ "@storybook/components": "6.5.0-alpha.28",
69
+ "@storybook/core-common": "6.5.0-alpha.28",
70
+ "@storybook/core-events": "6.5.0-alpha.28",
71
+ "@storybook/node-logger": "6.5.0-alpha.28",
72
+ "@storybook/preview-web": "6.5.0-alpha.28",
73
+ "@storybook/router": "6.5.0-alpha.28",
75
74
  "@storybook/semver": "^7.3.2",
76
- "@storybook/store": "6.5.0-alpha.24",
77
- "@storybook/theming": "6.5.0-alpha.24",
75
+ "@storybook/store": "6.5.0-alpha.28",
76
+ "@storybook/theming": "6.5.0-alpha.28",
78
77
  "@types/node": "^14.0.10 || ^16.0.0",
79
78
  "babel-loader": "^8.0.0",
80
79
  "babel-plugin-named-exports-order": "^0.0.2",
@@ -116,6 +115,6 @@
116
115
  "publishConfig": {
117
116
  "access": "public"
118
117
  },
119
- "gitHead": "9630a513a02d0faaa812d0761db396468cf8f3ca",
118
+ "gitHead": "a95a47b6cb372d38518aa220129169d889b23d64",
120
119
  "sbmodern": "dist/modern/index.js"
121
120
  }
package/templates/virtualModuleModernEntry.js.handlebars ADDED
@@ -0,0 +1,44 @@
1
+ import global from 'global';
2
+
3
+ import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
4
+ import { ClientApi } from '@storybook/client-api';
5
+ import { addons } from '@storybook/addons';
6
+ import createPostMessageChannel from '@storybook/channel-postmessage';
7
+ import createWebSocketChannel from '@storybook/channel-websocket';
8
+
9
+ import { importFn } from './{{storiesFilename}}';
10
+
11
+ const { SERVER_CHANNEL_URL } = global;
12
+
13
+ const getProjectAnnotations = () =>
14
+ composeConfigs([{{#each configs}}require('{{this}}'),{{/each}}]);
15
+
16
+ const channel = createPostMessageChannel({ page: 'preview' });
17
+ addons.setChannel(channel);
18
+
19
+ if (SERVER_CHANNEL_URL) {
20
+ const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
21
+ addons.setServerChannel(serverChannel);
22
+ window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
23
+ }
24
+
25
+ const preview = new PreviewWeb();
26
+
27
+ window.__STORYBOOK_PREVIEW__ = preview;
28
+ window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
29
+ window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
30
+ window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });
31
+
32
+ preview.initialize({ importFn, getProjectAnnotations });
33
+
34
+ if (module.hot) {
35
+ import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
36
+ // importFn has changed so we need to patch the new one in
37
+ preview.onStoriesChanged({ importFn });
38
+ });
39
+
40
+ import.meta.webpackHot.accept([{{#each configs}}'{{this}}',{{/each}}], () => {
41
+ // getProjectAnnotations has changed so we need to patch the new one in
42
+ preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
43
+ });
44
+ }