@storybook/server-webpack5 7.0.0-alpha.0
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/LICENSE +21 -0
- package/README.md +317 -0
- package/dist/cjs/index.js +24 -0
- package/dist/cjs/preset.js +76 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/preset.js +6 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/preset.d.ts +11 -0
- package/package.json +53 -0
- package/preset.js +1 -0
- package/standalone.js +7 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
|
13
|
+
all copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
21
|
+
THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
# Storybook for Server
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
Storybook for Server is a UI development environment for your plain HTML snippets rendered by your server backend.
|
|
6
|
+
With it, you can visualize different states of your UI components and develop them interactively.
|
|
7
|
+
|
|
8
|
+

|
|
9
|
+
|
|
10
|
+
Storybook runs outside of your app.
|
|
11
|
+
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
|
12
|
+
|
|
13
|
+
## Getting Started
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
cd my-app
|
|
17
|
+
npx sb init -t server
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
To configure the server that Storybook will connect to, export a global parameter `parameters.server.url` in `.storybook/preview.js`:
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
export const parameters = {
|
|
24
|
+
server: {
|
|
25
|
+
url: `http://localhost:${port}/storybook_preview`,
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
The URL you connect to should have the ability to render a story, see [server rendering](#server-rendering) below.
|
|
31
|
+
|
|
32
|
+
For more information visit: [storybook.js.org](https://storybook.js.org)
|
|
33
|
+
|
|
34
|
+
## Writing Stories
|
|
35
|
+
|
|
36
|
+
To write a story, use whatever API is natural for your server-side rendering framework to generate set of JSON or YAML files of stories analogous to CSF files (see the [`server-kitchen-sink`](../../examples/server-kitchen-sink/stories) example for ideas).
|
|
37
|
+
|
|
38
|
+
```json
|
|
39
|
+
{
|
|
40
|
+
"title": "Component",
|
|
41
|
+
"parameters": {
|
|
42
|
+
"options": { "component": "my_widget" }
|
|
43
|
+
},
|
|
44
|
+
"stories": [
|
|
45
|
+
{
|
|
46
|
+
"name": "Default",
|
|
47
|
+
"parameters": {
|
|
48
|
+
"server": { "id": "path/of/your/story" }
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
In your `.storybook/main.js` you simply provide a glob specifying the location of those JSON files, e.g.
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
module.exports = {
|
|
59
|
+
stories: ['../stories/**/*.stories.json'],
|
|
60
|
+
};
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Notice that the JSON does not specify a rendering function -- `@storybook/server` will instead call your `parameters.server.url` with the story's server id appended.
|
|
64
|
+
|
|
65
|
+
For example the JSON story above is requivalent to the CSF3 definition:
|
|
66
|
+
|
|
67
|
+
```javascript
|
|
68
|
+
export default {
|
|
69
|
+
title: 'Component',
|
|
70
|
+
parameters: {
|
|
71
|
+
options: {
|
|
72
|
+
component: 'my_widget',
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export const Default = {
|
|
78
|
+
name: 'Default',
|
|
79
|
+
parameters: {
|
|
80
|
+
server: {
|
|
81
|
+
id: 'path/of/your/story"',
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
};
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
With the story HTML will be fetched from the server by making a GET request to http://localhost/storybook_preview/path/of/your/story`
|
|
88
|
+
|
|
89
|
+
### Ruby/Rails support
|
|
90
|
+
|
|
91
|
+
In particular the [View Component::Storybook](https://github.com/jonspalmer/view_component_storybook) gem provides a Ruby API for easily creating the above with a Ruby/Rails DSL (as well as providing a server rendering endpoint).
|
|
92
|
+
|
|
93
|
+
## Server rendering
|
|
94
|
+
|
|
95
|
+
The server rendering side of things is relatively straightfoward. When you browse to a story in the sidebar, Storybook will make a `fetch` request to `${parameters.server.url}/{parameters.server.id}` and display the HTML that is returned.
|
|
96
|
+
|
|
97
|
+
You need to ensure the route in your server app renders the appropriate HTML when called in that fashion.
|
|
98
|
+
|
|
99
|
+
### Passing parameters to the server
|
|
100
|
+
|
|
101
|
+
Many components are likely to be dynamic - responding to parameters that change their content or appearance. `@storybook\server` has two mechanisms for passing those parameters to the server - `params` and `args`. Parameters defined in this way are appended to the fetch url as query string parameters. The server endpoint is responsible for interpreting those parameters and vary the returned html appropriately
|
|
102
|
+
|
|
103
|
+
#### Constant parameters with `params`
|
|
104
|
+
|
|
105
|
+
Static parameters can be defined using the `params` story parameter. For example suppose you have a Button component that has a label and color options:
|
|
106
|
+
|
|
107
|
+
```json
|
|
108
|
+
{
|
|
109
|
+
"title": "Buttons",
|
|
110
|
+
"stories": [
|
|
111
|
+
{
|
|
112
|
+
"name": "Red",
|
|
113
|
+
"parameters": {
|
|
114
|
+
"server": {
|
|
115
|
+
"id": "button",
|
|
116
|
+
"params": { "color": "red", "label": "Stop" }
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": "Green",
|
|
122
|
+
"parameters": {
|
|
123
|
+
"server": {
|
|
124
|
+
"id": "button",
|
|
125
|
+
"params": { "color": "green", "label": "OK" }
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
The Red and Green story HTML will be fetched from the urls `server.url/controls/button?color=red&label=Stop` and `server.url/controls/button?color=green&label=OK`
|
|
134
|
+
|
|
135
|
+
Like all story parameters server params can be defined in the default export and overridden in stories.
|
|
136
|
+
|
|
137
|
+
```json
|
|
138
|
+
{
|
|
139
|
+
"title": "Buttons",
|
|
140
|
+
"parameters": {
|
|
141
|
+
"server": {
|
|
142
|
+
"params": { "color": "red" }
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
"stories": [
|
|
146
|
+
{
|
|
147
|
+
"name": "Default",
|
|
148
|
+
"parameters": {
|
|
149
|
+
"server": {
|
|
150
|
+
"id": "button",
|
|
151
|
+
"params": { "label": "Stop" }
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": "Green",
|
|
157
|
+
"parameters": {
|
|
158
|
+
"server": {
|
|
159
|
+
"id": "button",
|
|
160
|
+
"params": { "color": "green", "label": "OK" }
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
]
|
|
165
|
+
}
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
#### Dynamic parameters with `args` and Controls
|
|
169
|
+
|
|
170
|
+
Dynamic parameters can be defined using args and the Controls addon
|
|
171
|
+
|
|
172
|
+
```json
|
|
173
|
+
{
|
|
174
|
+
"title": "Buttons",
|
|
175
|
+
"stories": [
|
|
176
|
+
{
|
|
177
|
+
"name": "Red",
|
|
178
|
+
"parameters": {
|
|
179
|
+
"server": {
|
|
180
|
+
"id": "button"
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
"args": { "color": "red", "label": "Stop" }
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"name": "Green",
|
|
187
|
+
"parameters": {
|
|
188
|
+
"server": {
|
|
189
|
+
"id": "button"
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
"args": { "color": "green", "label": "Go" }
|
|
193
|
+
}
|
|
194
|
+
]
|
|
195
|
+
}
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
Story args are passed to the server as url query parameters just like `params` except now they can be varied on the Controls addon panel.
|
|
199
|
+
|
|
200
|
+
Just like CSF stories we can define `argTypes` to specify the controls used in the controls panel. `argTypes` can be defined at the default or story level.
|
|
201
|
+
|
|
202
|
+
```json
|
|
203
|
+
{
|
|
204
|
+
"title": "Buttons",
|
|
205
|
+
"argTypes": {
|
|
206
|
+
"color": { "control": { "type": "color" } }
|
|
207
|
+
},
|
|
208
|
+
"stories": [
|
|
209
|
+
{
|
|
210
|
+
"name": "Red",
|
|
211
|
+
"parameters": {
|
|
212
|
+
"server": {
|
|
213
|
+
"id": "button"
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
"args": { "color": "red", "label": "Stop" }
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "Green",
|
|
220
|
+
"parameters": {
|
|
221
|
+
"server": {
|
|
222
|
+
"id": "button"
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
"args": { "color": "green", "label": "Go" }
|
|
226
|
+
}
|
|
227
|
+
]
|
|
228
|
+
}
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
## Addon compatibility
|
|
232
|
+
|
|
233
|
+
Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. As some addons assume the story is rendered in JS, they may not work with `@storybook/server` (yet!).
|
|
234
|
+
|
|
235
|
+
Many addons that act on the manager side (such as `backgrounds` and `viewport`) will work out of the box with `@storybook/server` -- you can configure them with parameters written on the server as usual.
|
|
236
|
+
|
|
237
|
+
### Controls
|
|
238
|
+
|
|
239
|
+
To configure controls, simple add `args` and `argTypes` keys to the story JSON much like you would CSF:
|
|
240
|
+
|
|
241
|
+
```json
|
|
242
|
+
{
|
|
243
|
+
"title": "Controls",
|
|
244
|
+
"stories": [
|
|
245
|
+
{
|
|
246
|
+
"name": "Button",
|
|
247
|
+
"parameters": {
|
|
248
|
+
"server": { "id": "controls/button" }
|
|
249
|
+
},
|
|
250
|
+
"args": { "button_text": "Push Me", "color": "red" },
|
|
251
|
+
"argTypes": { "button_text": { "control": { "type": "color" } } }
|
|
252
|
+
}
|
|
253
|
+
]
|
|
254
|
+
}
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
The controls values will be added to your story URL as query parameters.
|
|
258
|
+
|
|
259
|
+
### Actions
|
|
260
|
+
|
|
261
|
+
To use actions, use the `parameters.actions.handles` parameter:
|
|
262
|
+
|
|
263
|
+
```json
|
|
264
|
+
{
|
|
265
|
+
"title": "Actions",
|
|
266
|
+
"stories": [
|
|
267
|
+
{
|
|
268
|
+
"name": "Button",
|
|
269
|
+
"parameters": {
|
|
270
|
+
"server": { "id": "actions/button" },
|
|
271
|
+
"actions": {
|
|
272
|
+
"handles": ["mouseover", "click .btn"]
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
]
|
|
277
|
+
}
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
## Advanced Configuration
|
|
281
|
+
|
|
282
|
+
### fetchStoryHtml
|
|
283
|
+
|
|
284
|
+
For control over how `@storybook/server` fetches Html from the server you can provide a `fetchStoryHtml` function as a parameter. You would typically set this in `.storybook/preview.js` but it's just a regular Storybook parameter so could be overridden at the stories or story level.
|
|
285
|
+
|
|
286
|
+
```javascript
|
|
287
|
+
// .storybook/preview.js
|
|
288
|
+
|
|
289
|
+
const fetchStoryHtml = async (url, path, params, context) => {
|
|
290
|
+
// Custom fetch implementation
|
|
291
|
+
// ....
|
|
292
|
+
return html;
|
|
293
|
+
};
|
|
294
|
+
|
|
295
|
+
export const parameters = {
|
|
296
|
+
server: {
|
|
297
|
+
url: `http://localhost:${port}/storybook_preview`,
|
|
298
|
+
fetchStoryHtml,
|
|
299
|
+
},
|
|
300
|
+
};
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
`fetchStoryHtml` should be an async function with the following signature
|
|
304
|
+
|
|
305
|
+
```javascript
|
|
306
|
+
type FetchStoryHtmlType = (
|
|
307
|
+
url: string,
|
|
308
|
+
id: string,
|
|
309
|
+
params: any,
|
|
310
|
+
context: StoryContext
|
|
311
|
+
) => Promise<string | Node>;
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
- url: Server url configured by the `parameters.server.url`
|
|
315
|
+
- id: Id of the story being rendered given by `parameters.server.id`
|
|
316
|
+
- params: Merged story params `parameters.server.params`and story args
|
|
317
|
+
- context: The context of the story
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.object.to-string.js");
|
|
4
|
+
|
|
5
|
+
require("core-js/modules/web.dom-collections.for-each.js");
|
|
6
|
+
|
|
7
|
+
require("core-js/modules/es.object.keys.js");
|
|
8
|
+
|
|
9
|
+
Object.defineProperty(exports, "__esModule", {
|
|
10
|
+
value: true
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
var _server = require("@storybook/server");
|
|
14
|
+
|
|
15
|
+
Object.keys(_server).forEach(function (key) {
|
|
16
|
+
if (key === "default" || key === "__esModule") return;
|
|
17
|
+
if (key in exports && exports[key] === _server[key]) return;
|
|
18
|
+
Object.defineProperty(exports, key, {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _server[key];
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
});
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
require("core-js/modules/es.symbol.js");
|
|
6
|
+
|
|
7
|
+
require("core-js/modules/es.symbol.description.js");
|
|
8
|
+
|
|
9
|
+
require("core-js/modules/es.symbol.iterator.js");
|
|
10
|
+
|
|
11
|
+
require("core-js/modules/es.array.iterator.js");
|
|
12
|
+
|
|
13
|
+
require("core-js/modules/es.string.iterator.js");
|
|
14
|
+
|
|
15
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
16
|
+
|
|
17
|
+
require("core-js/modules/es.symbol.async-iterator.js");
|
|
18
|
+
|
|
19
|
+
require("core-js/modules/es.symbol.to-string-tag.js");
|
|
20
|
+
|
|
21
|
+
require("core-js/modules/es.json.to-string-tag.js");
|
|
22
|
+
|
|
23
|
+
require("core-js/modules/es.math.to-string-tag.js");
|
|
24
|
+
|
|
25
|
+
require("core-js/modules/es.object.get-prototype-of.js");
|
|
26
|
+
|
|
27
|
+
require("core-js/modules/web.dom-collections.for-each.js");
|
|
28
|
+
|
|
29
|
+
require("core-js/modules/es.function.name.js");
|
|
30
|
+
|
|
31
|
+
require("core-js/modules/es.array.slice.js");
|
|
32
|
+
|
|
33
|
+
Object.defineProperty(exports, "__esModule", {
|
|
34
|
+
value: true
|
|
35
|
+
});
|
|
36
|
+
exports.core = exports.addons = void 0;
|
|
37
|
+
|
|
38
|
+
require("core-js/modules/es.object.assign.js");
|
|
39
|
+
|
|
40
|
+
require("core-js/modules/es.object.to-string.js");
|
|
41
|
+
|
|
42
|
+
require("core-js/modules/es.promise.js");
|
|
43
|
+
|
|
44
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
|
|
45
|
+
|
|
46
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
47
|
+
|
|
48
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
49
|
+
|
|
50
|
+
var addons = ['@storybook/preset-server-webpack', '@storybook/server'];
|
|
51
|
+
exports.addons = addons;
|
|
52
|
+
|
|
53
|
+
var core = /*#__PURE__*/function () {
|
|
54
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(config) {
|
|
55
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
56
|
+
while (1) {
|
|
57
|
+
switch (_context.prev = _context.next) {
|
|
58
|
+
case 0:
|
|
59
|
+
return _context.abrupt("return", Object.assign({}, config, {
|
|
60
|
+
builder: require.resolve('@storybook/builder-webpack5')
|
|
61
|
+
}));
|
|
62
|
+
|
|
63
|
+
case 1:
|
|
64
|
+
case "end":
|
|
65
|
+
return _context.stop();
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}, _callee);
|
|
69
|
+
}));
|
|
70
|
+
|
|
71
|
+
return function core(_x) {
|
|
72
|
+
return _ref.apply(this, arguments);
|
|
73
|
+
};
|
|
74
|
+
}();
|
|
75
|
+
|
|
76
|
+
exports.core = core;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@storybook/server';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@storybook/server';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { StorybookConfig } from '@storybook/core-common';
|
|
2
|
+
export declare const addons: StorybookConfig['addons'];
|
|
3
|
+
export declare const core: (config: StorybookConfig['core']) => Promise<{
|
|
4
|
+
builder: string;
|
|
5
|
+
disableWebpackDefaults?: boolean;
|
|
6
|
+
channelOptions?: Partial<import("telejson").Options>;
|
|
7
|
+
disableProjectJson?: boolean;
|
|
8
|
+
disableTelemetry?: boolean;
|
|
9
|
+
enableCrashReports?: boolean;
|
|
10
|
+
crossOriginIsolated?: boolean;
|
|
11
|
+
}>;
|
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@storybook/server-webpack5",
|
|
3
|
+
"version": "7.0.0-alpha.0",
|
|
4
|
+
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"storybook"
|
|
7
|
+
],
|
|
8
|
+
"homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/server-webpack5",
|
|
9
|
+
"bugs": {
|
|
10
|
+
"url": "https://github.com/storybookjs/storybook/issues"
|
|
11
|
+
},
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/storybookjs/storybook.git",
|
|
15
|
+
"directory": "frameworks/server-webpack5"
|
|
16
|
+
},
|
|
17
|
+
"funding": {
|
|
18
|
+
"type": "opencollective",
|
|
19
|
+
"url": "https://opencollective.com/storybook"
|
|
20
|
+
},
|
|
21
|
+
"license": "MIT",
|
|
22
|
+
"main": "dist/cjs/index.js",
|
|
23
|
+
"module": "dist/esm/index.js",
|
|
24
|
+
"types": "dist/types/index.d.ts",
|
|
25
|
+
"files": [
|
|
26
|
+
"dist/**/*",
|
|
27
|
+
"README.md",
|
|
28
|
+
"*.js",
|
|
29
|
+
"*.d.ts"
|
|
30
|
+
],
|
|
31
|
+
"scripts": {
|
|
32
|
+
"prepare": "node ../../scripts/prepare.js"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@storybook/builder-webpack5": "7.0.0-alpha.0",
|
|
36
|
+
"@storybook/core-common": "7.0.0-alpha.0",
|
|
37
|
+
"@storybook/core-server": "7.0.0-alpha.0",
|
|
38
|
+
"@storybook/preset-server-webpack": "7.0.0-alpha.0",
|
|
39
|
+
"@storybook/server": "7.0.0-alpha.0",
|
|
40
|
+
"@types/node": "^14.14.20 || ^16.0.0",
|
|
41
|
+
"core-js": "^3.8.2",
|
|
42
|
+
"react": "16.14.0",
|
|
43
|
+
"react-dom": "16.14.0",
|
|
44
|
+
"regenerator-runtime": "^0.13.7"
|
|
45
|
+
},
|
|
46
|
+
"engines": {
|
|
47
|
+
"node": ">=10.13.0"
|
|
48
|
+
},
|
|
49
|
+
"publishConfig": {
|
|
50
|
+
"access": "public"
|
|
51
|
+
},
|
|
52
|
+
"gitHead": "c82d897ea765da8cf4fbbcc2af1f28c808a93e23"
|
|
53
|
+
}
|
package/preset.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
module.exports = require('./dist/cjs/preset');
|