@@ -90,17 +90,27 @@ http.get('/api/foo', ({ request, cookies, params }) => {
90
90
- ` cookies ` an object based on the request cookies
91
91
- ` params ` an object based on the request params
92
92
93
- ## ` @web/dev-server ` /` @web/dev-server-storybook `
93
+ ## ` @web/dev-server ` /` @web/dev-server-storybook ` / ` @web/storybook-builder `
94
94
95
95
` feature-a/web-dev-server.config.mjs ` :
96
96
97
- ``` js
97
+ ``` diff
98
+ + // for Storybook 7+ (@web/storybook-builder)
99
+ + // no need to do anything here
100
+ + // this file is not even needed for "@web/storybook-builder"
101
+
98
102
import { storybookPlugin } from '@web/dev-server-storybook';
99
- import { mockPlugin } from ' @web/mocks/plugins.js' ;
103
+
104
+ + // for Storybook 6 (@web/dev-server-storybook)
105
+ + import { mockPlugin } from '@web/mocks/plugins.js';
100
106
101
107
export default {
102
108
nodeResolve: true,
103
- plugins: [mockPlugin (), storybookPlugin ({ type: ' web-components' })],
109
+ plugins: [
110
+ + // for Storybook 6 (@web/dev-server-storybook)
111
+ + mockPlugin(),
112
+ storybookPlugin({ type: 'web-components' })
113
+ ],
104
114
};
105
115
```
106
116
@@ -111,6 +121,10 @@ You can also add the `mockRollupPlugin` to your `.storybook/main.cjs` config for
111
121
``` diff
112
122
module.exports = {
113
123
stories: ['../stories/**/*.stories.{js,md,mdx}'],
124
+ + // for Storybook 7+ (@web/storybook-builder)
125
+ + // no need to do anything here
126
+
127
+ + // for Storybook 6 (@web/dev-server-storybook)
114
128
+ rollupConfig: async config => {
115
129
+ const { mockRollupPlugin } = await import('@web/mocks/plugins.js');
116
130
+ config.plugins.push(mockRollupPlugin());
@@ -161,6 +175,26 @@ mockRollupPlugin({
161
175
162
176
This can be used to avoid CORS issues when deploying your Storybooks.
163
177
178
+ In the Storybook 7+ (@web/storybook-builder ) you can achieve the same by using native Storybook API [ previewHead] ( https://storybook.js.org/docs/api/main-config-preview-head ) :
179
+
180
+ ``` js
181
+ // .storybook/main.js
182
+ /** @type { import('@web/storybook-framework-web-components').StorybookConfig } */
183
+ const config = {
184
+ framework: {
185
+ name: ' @web/storybook-framework-web-components' ,
186
+ },
187
+ // ...
188
+ previewHead (head ) {
189
+ return `
190
+ ${ process .env .NODE_ENV === ' production' ? ` <script>${ interceptor} </script>` : ' ' }
191
+ ${ head}
192
+ ` ;
193
+ },
194
+ };
195
+ export default config ;
196
+ ```
197
+
164
198
</details >
165
199
<br />
166
200
@@ -170,9 +204,10 @@ And add the addon:
170
204
``` diff
171
205
module.exports = {
172
206
stories: ['../stories/**/*.stories.{js,md,mdx}'],
173
- // for Storybook 7 (@web/storybook-builder)
174
- + addons: ['@web/mocks/storybook/addon/manager.js'],
175
- // for Storybook 6 (@web/dev-server-storybook)
207
+ + // for Storybook 7+ (@web/storybook-builder)
208
+ + addons: ['@web/mocks/storybook-addon'],
209
+
210
+ + // for Storybook 6 (@web/dev-server-storybook)
176
211
+ addons: ['@web/mocks/storybook/addon.js'],
177
212
rollupConfig: async config => {
178
213
const { mockRollupPlugin } = await import('@web/mocks/plugins.js');
@@ -184,13 +219,13 @@ module.exports = {
184
219
185
220
` feature-a/.storybook/preview.js ` :
186
221
187
- ``` js
188
- // for Storybook 7 (@web/storybook-builder)
189
- import { withMocks } from ' @web/mocks/storybook/addon/decorator.js' ;
190
- // for Storybook 6 (@web/dev-server-storybook)
191
- import { withMocks } from ' @web/mocks/storybook/decorator.js' ;
222
+ ``` diff
223
+ + // for Storybook 7+ (@web/storybook-builder)
224
+ + // no need to do anything here
192
225
193
- export const decorators = [withMocks];
226
+ + // for Storybook 6 (@web/dev-server-storybook)
227
+ + import { withMocks } from '@web/mocks/storybook/decorator.js';
228
+ + export const decorators = [withMocks];
194
229
```
195
230
196
231
` feature-a/stories/default.stories.js ` :
0 commit comments