Skip to content

Commit 42e363b

Browse files
authored
Merge pull request #2709 from modernweb-dev/feat/mocks-improve-addon-setup-for-storybook-build
feat(mocks): improve addon setup for storybook-builder
2 parents 57b90e9 + 59d5386 commit 42e363b

File tree

6 files changed

+79
-13
lines changed

6 files changed

+79
-13
lines changed

.changeset/pretty-walls-develop.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@web/mocks': minor
3+
---
4+
5+
improve addon setup for storybook-builder

packages/mocks/README.md

+48-13
Original file line numberDiff line numberDiff line change
@@ -90,17 +90,27 @@ http.get('/api/foo', ({ request, cookies, params }) => {
9090
- `cookies` an object based on the request cookies
9191
- `params` an object based on the request params
9292

93-
## `@web/dev-server`/`@web/dev-server-storybook`
93+
## `@web/dev-server`/`@web/dev-server-storybook`/`@web/storybook-builder`
9494

9595
`feature-a/web-dev-server.config.mjs`:
9696

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+
98102
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';
100106

101107
export default {
102108
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+
],
104114
};
105115
```
106116

@@ -111,6 +121,10 @@ You can also add the `mockRollupPlugin` to your `.storybook/main.cjs` config for
111121
```diff
112122
module.exports = {
113123
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)
114128
+ rollupConfig: async config => {
115129
+ const { mockRollupPlugin } = await import('@web/mocks/plugins.js');
116130
+ config.plugins.push(mockRollupPlugin());
@@ -161,6 +175,26 @@ mockRollupPlugin({
161175

162176
This can be used to avoid CORS issues when deploying your Storybooks.
163177

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+
164198
</details>
165199
<br/>
166200

@@ -170,9 +204,10 @@ And add the addon:
170204
```diff
171205
module.exports = {
172206
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)
176211
+ addons: ['@web/mocks/storybook/addon.js'],
177212
rollupConfig: async config => {
178213
const { mockRollupPlugin } = await import('@web/mocks/plugins.js');
@@ -184,13 +219,13 @@ module.exports = {
184219

185220
`feature-a/.storybook/preview.js`:
186221

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
192225

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];
194229
```
195230

196231
`feature-a/stories/default.stories.js`:

packages/mocks/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@
2323
"types": "./dist-types/browser.d.ts",
2424
"default": "./browser.js"
2525
},
26+
"./storybook-addon/manager": "./storybook-addon/manager.js",
27+
"./storybook-addon/preset": "./storybook-addon/preset.js",
28+
"./storybook-addon/preview": "./storybook-addon/preview.js",
2629
"./storybook/addon/decorator.js": {
2730
"types": "./dist-types/storybook/addon/decorator.d.ts",
2831
"default": "./storybook/addon/decorator.js"
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '../storybook/addon/manager.js';
+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* @param {import('@web/dev-server').DevServerConfig} config
3+
*/
4+
export async function wdsFinal(config) {
5+
const { mockPlugin } = await import('@web/mocks/plugins.js');
6+
// @ts-expect-error
7+
config.plugins.push(mockPlugin());
8+
return config;
9+
}
10+
11+
/**
12+
* @param {import('rollup').RollupOptions} config
13+
*/
14+
export async function rollupFinal(config) {
15+
const { mockRollupPlugin } = await import('@web/mocks/plugins.js');
16+
// @ts-expect-error
17+
config.plugins.push(mockRollupPlugin());
18+
return config;
19+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { withMocks } from '../storybook/addon/decorator.js';
2+
3+
export const decorators = [withMocks];

0 commit comments

Comments
 (0)