@module-federation/storybook-addon 1.0.0 → 2.0.1
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/package.json +14 -18
- package/src/lib/storybook-addon.d.ts +1 -1
- package/src/lib/storybook-addon.js +3 -3
- package/src/lib/storybook-addon.js.map +1 -1
- package/src/utils/correctImportPath.d.ts +1 -0
- package/src/utils/correctImportPath.js +24 -0
- package/src/utils/correctImportPath.js.map +1 -0
- package/src/utils/with-module-federation.d.ts +1 -1
- package/src/utils/with-module-federation.js.map +1 -1
- package/CHANGELOG.md +0 -1127
- package/README.md +0 -133
package/README.md
DELETED
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
# Storybook addon for Module Federation
|
|
2
|
-
|
|
3
|
-
This addon enables to consume remote Module Federated apps/components
|
|
4
|
-
|
|
5
|
-
## Install
|
|
6
|
-
|
|
7
|
-
```shell
|
|
8
|
-
# with NPM
|
|
9
|
-
npm install @module-federation/storybook-addon
|
|
10
|
-
|
|
11
|
-
# with Yarn
|
|
12
|
-
yarn add @module-federation/storybook-addon
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Configuration
|
|
16
|
-
|
|
17
|
-
In file `./storybook/main.js`:
|
|
18
|
-
```js
|
|
19
|
-
const moduleFederationConfig = {
|
|
20
|
-
// Module Federation config
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const storybookConfig = {
|
|
24
|
-
"stories": [
|
|
25
|
-
"../src/**/*.stories.mdx",
|
|
26
|
-
"../src/**/*.stories.@(js|jsx|ts|tsx)"
|
|
27
|
-
],
|
|
28
|
-
"addons": [
|
|
29
|
-
// other addons,
|
|
30
|
-
{
|
|
31
|
-
name: "@module-federation/storybook-addon",
|
|
32
|
-
options: {
|
|
33
|
-
moduleFederationConfig
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
],
|
|
37
|
-
"framework": "@storybook/react",
|
|
38
|
-
"core": {
|
|
39
|
-
"builder": "@storybook/builder-webpack5" // is required webpack 5 builder
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
module.exports = storybookConfig;
|
|
44
|
-
```
|
|
45
|
-
---
|
|
46
|
-
### For the [NX](https://nx.dev/getting-started/intro) projects:
|
|
47
|
-
|
|
48
|
-
Replace NX utils `withModuleFederation` in `webpack.config.js` with our utils `withModuleFederation`.
|
|
49
|
-
Example:
|
|
50
|
-
```javascript
|
|
51
|
-
const { composePlugins, withNx } = require('@nx/webpack');
|
|
52
|
-
const { withReact } = require('@nx/react');
|
|
53
|
-
const { withModuleFederation } = require('@module-federation/storybook-addon');
|
|
54
|
-
|
|
55
|
-
const baseConfig = require('./module-federation.config');
|
|
56
|
-
|
|
57
|
-
const config = {
|
|
58
|
-
...baseConfig,
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
module.exports = composePlugins(
|
|
62
|
-
withNx(),
|
|
63
|
-
withReact(),
|
|
64
|
-
withModuleFederation(config)
|
|
65
|
-
);
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
In file `./storybook/main.js`:
|
|
69
|
-
```js
|
|
70
|
-
const nxModuleFederationConfig = {
|
|
71
|
-
// Module Federation config
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
const storybookConfig = {
|
|
75
|
-
"stories": [
|
|
76
|
-
"../src/**/*.stories.mdx",
|
|
77
|
-
"../src/**/*.stories.@(js|jsx|ts|tsx)"
|
|
78
|
-
],
|
|
79
|
-
"addons": [
|
|
80
|
-
// other addons,
|
|
81
|
-
{
|
|
82
|
-
name: "@module-federation/storybook-addon",
|
|
83
|
-
options: {
|
|
84
|
-
nxModuleFederationConfig
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
],
|
|
88
|
-
"framework": "@storybook/react",
|
|
89
|
-
"core": {
|
|
90
|
-
"builder": "@storybook/builder-webpack5" // is required webpack 5 builder
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
module.exports = storybookConfig;
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
## Usage
|
|
98
|
-
|
|
99
|
-
```jsx
|
|
100
|
-
import React, { Suspense } from 'react';
|
|
101
|
-
|
|
102
|
-
const LazyButton = React.lazy(() => import('remote/Button'));
|
|
103
|
-
|
|
104
|
-
const Button = (props) => (
|
|
105
|
-
<Suspense fallback={<p>Please wait...</p>}><LazyButton {...props} /></Suspense>
|
|
106
|
-
);
|
|
107
|
-
|
|
108
|
-
export default {
|
|
109
|
-
title: 'ModuleFederation/Button',
|
|
110
|
-
component: Button,
|
|
111
|
-
argTypes: {
|
|
112
|
-
variant: {
|
|
113
|
-
control: 'select',
|
|
114
|
-
options: ['primary', 'secondary']
|
|
115
|
-
},
|
|
116
|
-
},
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
const Template = (args) => <Button {...args} />;
|
|
120
|
-
|
|
121
|
-
export const Primary = Template.bind({variant: 'primary'});
|
|
122
|
-
Primary.args = {
|
|
123
|
-
variant: 'primary',
|
|
124
|
-
children: 'Button',
|
|
125
|
-
};
|
|
126
|
-
|
|
127
|
-
export const Secondary = Template.bind({});
|
|
128
|
-
Secondary.args = {
|
|
129
|
-
variant: 'secondary',
|
|
130
|
-
children: 'Button',
|
|
131
|
-
};
|
|
132
|
-
|
|
133
|
-
```
|