@storybook/web-components 6.4.0-beta.24 → 6.4.0-beta.25
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/dist/cjs/client/customElements.js +56 -0
- package/dist/cjs/client/index.js +146 -0
- package/dist/cjs/client/preview/config.js +19 -0
- package/dist/cjs/client/preview/globals.js +8 -0
- package/dist/cjs/client/preview/index.js +50 -0
- package/dist/cjs/client/preview/render.js +73 -0
- package/dist/cjs/client/preview/types-6-0.js +1 -0
- package/dist/cjs/client/preview/types-7-0.js +1 -0
- package/dist/cjs/client/preview/types.js +1 -0
- package/dist/cjs/server/build.js +9 -0
- package/dist/cjs/server/framework-preset-web-components.js +46 -0
- package/dist/cjs/server/index.js +9 -0
- package/dist/cjs/server/options.js +17 -0
- package/dist/cjs/typings.d.js +1 -0
- package/dist/esm/client/customElements.js +41 -0
- package/dist/esm/client/index.js +24 -0
- package/dist/esm/client/preview/config.js +4 -0
- package/dist/esm/client/preview/globals.js +3 -0
- package/dist/esm/client/preview/index.js +27 -0
- package/dist/esm/client/preview/render.js +58 -0
- package/dist/esm/client/preview/types-6-0.js +0 -0
- package/dist/esm/client/preview/types-7-0.js +0 -0
- package/dist/esm/client/preview/types.js +0 -0
- package/dist/esm/server/build.js +3 -0
- package/dist/esm/server/framework-preset-web-components.js +35 -0
- package/dist/esm/server/index.js +3 -0
- package/dist/esm/server/options.js +8 -0
- package/dist/esm/typings.d.js +0 -0
- package/dist/modern/client/customElements.js +42 -0
- package/dist/modern/client/index.js +27 -0
- package/dist/modern/client/preview/config.js +4 -0
- package/dist/modern/client/preview/globals.js +5 -0
- package/dist/modern/client/preview/index.js +19 -0
- package/dist/modern/client/preview/render.js +55 -0
- package/dist/modern/client/preview/types-6-0.js +0 -0
- package/dist/modern/client/preview/types-7-0.js +0 -0
- package/dist/modern/client/preview/types.js +0 -0
- package/dist/modern/server/build.js +3 -0
- package/dist/modern/server/framework-preset-web-components.js +35 -0
- package/dist/modern/server/index.js +3 -0
- package/dist/modern/server/options.js +8 -0
- package/dist/modern/typings.d.js +0 -0
- package/dist/ts3.4/client/customElements.d.ts +8 -0
- package/dist/ts3.4/client/index.d.ts +3 -0
- package/dist/ts3.4/client/preview/config.d.ts +4 -0
- package/dist/ts3.4/client/preview/globals.d.ts +1 -0
- package/dist/ts3.4/client/preview/index.d.ts +24 -0
- package/dist/ts3.4/client/preview/render.d.ts +3 -0
- package/dist/ts3.4/client/preview/types-6-0.d.ts +34 -0
- package/dist/ts3.4/client/preview/types-7-0.d.ts +9 -0
- package/dist/ts3.4/client/preview/types.d.ts +16 -0
- package/dist/ts3.4/server/build.d.ts +1 -0
- package/dist/ts3.4/server/framework-preset-web-components.d.ts +4 -0
- package/dist/ts3.4/server/index.d.ts +1 -0
- package/dist/ts3.4/server/options.d.ts +3 -0
- package/dist/ts3.9/client/customElements.d.ts +8 -0
- package/dist/ts3.9/client/index.d.ts +3 -0
- package/dist/ts3.9/client/preview/config.d.ts +4 -0
- package/dist/ts3.9/client/preview/globals.d.ts +1 -0
- package/dist/ts3.9/client/preview/index.d.ts +24 -0
- package/dist/ts3.9/client/preview/render.d.ts +3 -0
- package/dist/ts3.9/client/preview/types-6-0.d.ts +34 -0
- package/dist/ts3.9/client/preview/types-7-0.d.ts +9 -0
- package/dist/ts3.9/client/preview/types.d.ts +16 -0
- package/dist/ts3.9/server/build.d.ts +1 -0
- package/dist/ts3.9/server/framework-preset-web-components.d.ts +4 -0
- package/dist/ts3.9/server/index.d.ts +1 -0
- package/dist/ts3.9/server/options.d.ts +3 -0
- package/package.json +8 -8
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isValidComponent = isValidComponent;
|
|
7
|
+
exports.isValidMetaData = isValidMetaData;
|
|
8
|
+
exports.setCustomElements = setCustomElements;
|
|
9
|
+
exports.setCustomElementsManifest = setCustomElementsManifest;
|
|
10
|
+
exports.getCustomElements = getCustomElements;
|
|
11
|
+
|
|
12
|
+
/* eslint-disable no-underscore-dangle */
|
|
13
|
+
|
|
14
|
+
/* global window */
|
|
15
|
+
function isValidComponent(tagName) {
|
|
16
|
+
if (!tagName) {
|
|
17
|
+
return false;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
if (typeof tagName === 'string') {
|
|
21
|
+
return true;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
throw new Error('Provided component needs to be a string. e.g. component: "my-element"');
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function isValidMetaData(customElements) {
|
|
28
|
+
if (!customElements) {
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
if (customElements.tags && Array.isArray(customElements.tags) || customElements.modules && Array.isArray(customElements.modules)) {
|
|
33
|
+
return true;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
throw new Error("You need to setup valid meta data in your config.js via setCustomElements().\n See the readme of addon-docs for web components for more details.");
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* @param customElements any for now as spec is not super stable yet
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
function setCustomElements(customElements) {
|
|
44
|
+
// @ts-ignore
|
|
45
|
+
window.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function setCustomElementsManifest(customElements) {
|
|
49
|
+
// @ts-ignore
|
|
50
|
+
window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function getCustomElements() {
|
|
54
|
+
// @ts-ignore
|
|
55
|
+
return window.__STORYBOOK_CUSTOM_ELEMENTS__ || window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__;
|
|
56
|
+
}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/web.dom-collections.for-each.js");
|
|
4
|
+
|
|
5
|
+
require("core-js/modules/es.object.keys.js");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
var _exportNames = {
|
|
11
|
+
storiesOf: true,
|
|
12
|
+
setAddon: true,
|
|
13
|
+
addDecorator: true,
|
|
14
|
+
addParameters: true,
|
|
15
|
+
configure: true,
|
|
16
|
+
getStorybook: true,
|
|
17
|
+
forceReRender: true,
|
|
18
|
+
raw: true,
|
|
19
|
+
getCustomElements: true,
|
|
20
|
+
setCustomElements: true,
|
|
21
|
+
setCustomElementsManifest: true,
|
|
22
|
+
isValidComponent: true,
|
|
23
|
+
isValidMetaData: true
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "storiesOf", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function get() {
|
|
28
|
+
return _preview.storiesOf;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
Object.defineProperty(exports, "setAddon", {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function get() {
|
|
34
|
+
return _preview.setAddon;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
Object.defineProperty(exports, "addDecorator", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function get() {
|
|
40
|
+
return _preview.addDecorator;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
Object.defineProperty(exports, "addParameters", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function get() {
|
|
46
|
+
return _preview.addParameters;
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
Object.defineProperty(exports, "configure", {
|
|
50
|
+
enumerable: true,
|
|
51
|
+
get: function get() {
|
|
52
|
+
return _preview.configure;
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
Object.defineProperty(exports, "getStorybook", {
|
|
56
|
+
enumerable: true,
|
|
57
|
+
get: function get() {
|
|
58
|
+
return _preview.getStorybook;
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
Object.defineProperty(exports, "forceReRender", {
|
|
62
|
+
enumerable: true,
|
|
63
|
+
get: function get() {
|
|
64
|
+
return _preview.forceReRender;
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
Object.defineProperty(exports, "raw", {
|
|
68
|
+
enumerable: true,
|
|
69
|
+
get: function get() {
|
|
70
|
+
return _preview.raw;
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
Object.defineProperty(exports, "getCustomElements", {
|
|
74
|
+
enumerable: true,
|
|
75
|
+
get: function get() {
|
|
76
|
+
return _customElements.getCustomElements;
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
Object.defineProperty(exports, "setCustomElements", {
|
|
80
|
+
enumerable: true,
|
|
81
|
+
get: function get() {
|
|
82
|
+
return _customElements.setCustomElements;
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
Object.defineProperty(exports, "setCustomElementsManifest", {
|
|
86
|
+
enumerable: true,
|
|
87
|
+
get: function get() {
|
|
88
|
+
return _customElements.setCustomElementsManifest;
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
Object.defineProperty(exports, "isValidComponent", {
|
|
92
|
+
enumerable: true,
|
|
93
|
+
get: function get() {
|
|
94
|
+
return _customElements.isValidComponent;
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
Object.defineProperty(exports, "isValidMetaData", {
|
|
98
|
+
enumerable: true,
|
|
99
|
+
get: function get() {
|
|
100
|
+
return _customElements.isValidMetaData;
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
var _global = _interopRequireDefault(require("global"));
|
|
105
|
+
|
|
106
|
+
var _preview = require("./preview");
|
|
107
|
+
|
|
108
|
+
var _customElements = require("./customElements");
|
|
109
|
+
|
|
110
|
+
var _types = require("./preview/types-6-0");
|
|
111
|
+
|
|
112
|
+
Object.keys(_types).forEach(function (key) {
|
|
113
|
+
if (key === "default" || key === "__esModule") return;
|
|
114
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
115
|
+
if (key in exports && exports[key] === _types[key]) return;
|
|
116
|
+
Object.defineProperty(exports, key, {
|
|
117
|
+
enumerable: true,
|
|
118
|
+
get: function get() {
|
|
119
|
+
return _types[key];
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
125
|
+
|
|
126
|
+
var window = _global.default.window,
|
|
127
|
+
EventSource = _global.default.EventSource;
|
|
128
|
+
|
|
129
|
+
// TODO: disable HMR and do full page loads because of customElements.define
|
|
130
|
+
if (module && module.hot && module.hot.decline) {
|
|
131
|
+
module.hot.decline(); // forcing full reloads for customElements as elements can only be defined once per page
|
|
132
|
+
|
|
133
|
+
var hmr = new EventSource('__webpack_hmr');
|
|
134
|
+
hmr.addEventListener('message', function fullPageReload(event) {
|
|
135
|
+
try {
|
|
136
|
+
// Only care for built events. Heartbeats are not parsable so we ignore those
|
|
137
|
+
var _JSON$parse = JSON.parse(event.data),
|
|
138
|
+
action = _JSON$parse.action;
|
|
139
|
+
|
|
140
|
+
if (action === 'built') {
|
|
141
|
+
window.location.reload();
|
|
142
|
+
}
|
|
143
|
+
} catch (error) {// Most part we only get here from the data in the server-sent event not being parsable which is ok
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "renderToDOM", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _render.renderToDOM;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
exports.parameters = void 0;
|
|
13
|
+
|
|
14
|
+
var _render = require("./render");
|
|
15
|
+
|
|
16
|
+
var parameters = {
|
|
17
|
+
framework: 'web-components'
|
|
18
|
+
};
|
|
19
|
+
exports.parameters = parameters;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _global = _interopRequireDefault(require("global"));
|
|
4
|
+
|
|
5
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
6
|
+
|
|
7
|
+
var globalWindow = _global.default.window;
|
|
8
|
+
globalWindow.STORYBOOK_ENV = 'web-components';
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.raw = exports.getStorybook = exports.forceReRender = exports.setAddon = exports.clearDecorators = exports.addParameters = exports.addDecorator = exports.configure = exports.storiesOf = void 0;
|
|
7
|
+
|
|
8
|
+
require("core-js/modules/es.array.concat.js");
|
|
9
|
+
|
|
10
|
+
var _client = require("@storybook/core/client");
|
|
11
|
+
|
|
12
|
+
require("./globals");
|
|
13
|
+
|
|
14
|
+
var _render = require("./render");
|
|
15
|
+
|
|
16
|
+
/* eslint-disable prefer-destructuring */
|
|
17
|
+
var framework = 'web-components';
|
|
18
|
+
var api = (0, _client.start)(_render.renderToDOM);
|
|
19
|
+
|
|
20
|
+
var storiesOf = function storiesOf(kind, m) {
|
|
21
|
+
return api.clientApi.storiesOf(kind, m).addParameters({
|
|
22
|
+
framework: framework
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
exports.storiesOf = storiesOf;
|
|
27
|
+
|
|
28
|
+
var configure = function configure() {
|
|
29
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
30
|
+
args[_key] = arguments[_key];
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return api.configure.apply(api, [framework].concat(args));
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
exports.configure = configure;
|
|
37
|
+
var addDecorator = api.clientApi.addDecorator;
|
|
38
|
+
exports.addDecorator = addDecorator;
|
|
39
|
+
var addParameters = api.clientApi.addParameters;
|
|
40
|
+
exports.addParameters = addParameters;
|
|
41
|
+
var clearDecorators = api.clientApi.clearDecorators;
|
|
42
|
+
exports.clearDecorators = clearDecorators;
|
|
43
|
+
var setAddon = api.clientApi.setAddon;
|
|
44
|
+
exports.setAddon = setAddon;
|
|
45
|
+
var forceReRender = api.forceReRender;
|
|
46
|
+
exports.forceReRender = forceReRender;
|
|
47
|
+
var getStorybook = api.clientApi.getStorybook;
|
|
48
|
+
exports.getStorybook = getStorybook;
|
|
49
|
+
var raw = api.clientApi.raw;
|
|
50
|
+
exports.raw = raw;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.array.slice.js");
|
|
4
|
+
|
|
5
|
+
require("core-js/modules/es.object.freeze.js");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.renderToDOM = renderToDOM;
|
|
11
|
+
|
|
12
|
+
require("core-js/modules/es.function.name.js");
|
|
13
|
+
|
|
14
|
+
require("core-js/modules/es.array.concat.js");
|
|
15
|
+
|
|
16
|
+
var _global = _interopRequireDefault(require("global"));
|
|
17
|
+
|
|
18
|
+
var _tsDedent = _interopRequireDefault(require("ts-dedent"));
|
|
19
|
+
|
|
20
|
+
var _litHtml = require("lit-html");
|
|
21
|
+
|
|
22
|
+
var _directiveHelpers = require("lit-html/directive-helpers.js");
|
|
23
|
+
|
|
24
|
+
var _previewWeb = require("@storybook/preview-web");
|
|
25
|
+
|
|
26
|
+
var _templateObject;
|
|
27
|
+
|
|
28
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
|
+
|
|
30
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
31
|
+
|
|
32
|
+
var Node = _global.default.Node;
|
|
33
|
+
|
|
34
|
+
function renderToDOM(_ref, domElement) {
|
|
35
|
+
var storyFn = _ref.storyFn,
|
|
36
|
+
kind = _ref.kind,
|
|
37
|
+
name = _ref.name,
|
|
38
|
+
showMain = _ref.showMain,
|
|
39
|
+
showError = _ref.showError,
|
|
40
|
+
forceRemount = _ref.forceRemount;
|
|
41
|
+
var element = storyFn();
|
|
42
|
+
showMain();
|
|
43
|
+
|
|
44
|
+
if ((0, _directiveHelpers.isTemplateResult)(element)) {
|
|
45
|
+
// `render` stores the TemplateInstance in the Node and tries to update based on that.
|
|
46
|
+
// Since we reuse `domElement` for all stories, remove the stored instance first.
|
|
47
|
+
// But forceRemount means that it's the same story, so we want too keep the state in that case.
|
|
48
|
+
if (forceRemount || !domElement.querySelector('[id="root-inner"]')) {
|
|
49
|
+
domElement.innerHTML = '<div id="root-inner"></div>';
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
var renderTo = domElement.querySelector('[id="root-inner"]');
|
|
53
|
+
(0, _litHtml.render)(element, renderTo);
|
|
54
|
+
(0, _previewWeb.simulatePageLoad)(domElement);
|
|
55
|
+
} else if (typeof element === 'string') {
|
|
56
|
+
domElement.innerHTML = element;
|
|
57
|
+
(0, _previewWeb.simulatePageLoad)(domElement);
|
|
58
|
+
} else if (element instanceof Node) {
|
|
59
|
+
// Don't re-mount the element if it didn't change and neither did the story
|
|
60
|
+
if (domElement.firstChild === element && !forceRemount) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
domElement.innerHTML = '';
|
|
65
|
+
domElement.appendChild(element);
|
|
66
|
+
(0, _previewWeb.simulateDOMContentLoaded)();
|
|
67
|
+
} else {
|
|
68
|
+
showError({
|
|
69
|
+
title: "Expecting an HTML snippet or DOM node from the story: \"".concat(name, "\" of \"").concat(kind, "\"."),
|
|
70
|
+
description: (0, _tsDedent.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n Did you forget to return the HTML snippet from the story?\n Use \"() => <your snippet or node>\" or when defining the story.\n "])))
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _server = require("@storybook/core/server");
|
|
4
|
+
|
|
5
|
+
var _options = _interopRequireDefault(require("./options"));
|
|
6
|
+
|
|
7
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
8
|
+
|
|
9
|
+
(0, _server.buildStatic)(_options.default);
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.webpack = webpack;
|
|
7
|
+
exports.config = void 0;
|
|
8
|
+
|
|
9
|
+
var _coreCommon = require("@storybook/core-common");
|
|
10
|
+
|
|
11
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
12
|
+
|
|
13
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
14
|
+
|
|
15
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
16
|
+
|
|
17
|
+
function webpack(config, options) {
|
|
18
|
+
var _options$features;
|
|
19
|
+
|
|
20
|
+
var babelrcOptions = (_options$features = options.features) !== null && _options$features !== void 0 && _options$features.babelModeV7 ? null : {
|
|
21
|
+
babelrc: false
|
|
22
|
+
};
|
|
23
|
+
config.module.rules.push({
|
|
24
|
+
test: [new RegExp(`src(.*)\\.js$`), new RegExp(`packages(\\/|\\\\)*(\\/|\\\\)src(\\/|\\\\)(.*)\\.js$`), new RegExp(`node_modules(\\/|\\\\)lit-html(.*)\\.js$`), new RegExp(`node_modules(\\/|\\\\)lit-element(.*)\\.js$`), new RegExp(`node_modules(\\/|\\\\)@open-wc(.*)\\.js$`), new RegExp(`node_modules(\\/|\\\\)@polymer(.*)\\.js$`), new RegExp(`node_modules(\\/|\\\\)@vaadin(.*)\\.js$`)],
|
|
25
|
+
use: {
|
|
26
|
+
loader: require.resolve('babel-loader'),
|
|
27
|
+
options: _objectSpread({
|
|
28
|
+
plugins: [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('@babel/plugin-syntax-import-meta'), // webpack does not support import.meta.url yet, so we rewrite them in babel
|
|
29
|
+
[require.resolve('babel-plugin-bundled-import-meta'), {
|
|
30
|
+
importStyle: 'baseURI'
|
|
31
|
+
}]],
|
|
32
|
+
presets: [[require.resolve('@babel/preset-env'), {
|
|
33
|
+
useBuiltIns: 'entry',
|
|
34
|
+
corejs: 3
|
|
35
|
+
}]]
|
|
36
|
+
}, babelrcOptions)
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
return config;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
var config = function (entry = []) {
|
|
43
|
+
return [...entry, (0, _coreCommon.findDistEsm)(__dirname, 'client/preview/config')];
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
exports.config = config;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _server = require("@storybook/core/server");
|
|
4
|
+
|
|
5
|
+
var _options = _interopRequireDefault(require("./options"));
|
|
6
|
+
|
|
7
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
8
|
+
|
|
9
|
+
(0, _server.buildDev)(_options.default);
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _readPkgUp = require("read-pkg-up");
|
|
9
|
+
|
|
10
|
+
var _default = {
|
|
11
|
+
packageJson: (0, _readPkgUp.sync)({
|
|
12
|
+
cwd: __dirname
|
|
13
|
+
}).packageJson,
|
|
14
|
+
framework: 'web-components',
|
|
15
|
+
frameworkPresets: [require.resolve('./framework-preset-web-components')]
|
|
16
|
+
};
|
|
17
|
+
exports.default = _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/* eslint-disable no-underscore-dangle */
|
|
2
|
+
|
|
3
|
+
/* global window */
|
|
4
|
+
export function isValidComponent(tagName) {
|
|
5
|
+
if (!tagName) {
|
|
6
|
+
return false;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
if (typeof tagName === 'string') {
|
|
10
|
+
return true;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
throw new Error('Provided component needs to be a string. e.g. component: "my-element"');
|
|
14
|
+
}
|
|
15
|
+
export function isValidMetaData(customElements) {
|
|
16
|
+
if (!customElements) {
|
|
17
|
+
return false;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
if (customElements.tags && Array.isArray(customElements.tags) || customElements.modules && Array.isArray(customElements.modules)) {
|
|
21
|
+
return true;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
throw new Error("You need to setup valid meta data in your config.js via setCustomElements().\n See the readme of addon-docs for web components for more details.");
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* @param customElements any for now as spec is not super stable yet
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
export function setCustomElements(customElements) {
|
|
31
|
+
// @ts-ignore
|
|
32
|
+
window.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements;
|
|
33
|
+
}
|
|
34
|
+
export function setCustomElementsManifest(customElements) {
|
|
35
|
+
// @ts-ignore
|
|
36
|
+
window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements;
|
|
37
|
+
}
|
|
38
|
+
export function getCustomElements() {
|
|
39
|
+
// @ts-ignore
|
|
40
|
+
return window.__STORYBOOK_CUSTOM_ELEMENTS__ || window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__;
|
|
41
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import global from 'global';
|
|
2
|
+
var window = global.window,
|
|
3
|
+
EventSource = global.EventSource;
|
|
4
|
+
export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw } from './preview';
|
|
5
|
+
export { getCustomElements, setCustomElements, setCustomElementsManifest, isValidComponent, isValidMetaData } from './customElements';
|
|
6
|
+
export * from './preview/types-6-0'; // TODO: disable HMR and do full page loads because of customElements.define
|
|
7
|
+
|
|
8
|
+
if (module && module.hot && module.hot.decline) {
|
|
9
|
+
module.hot.decline(); // forcing full reloads for customElements as elements can only be defined once per page
|
|
10
|
+
|
|
11
|
+
var hmr = new EventSource('__webpack_hmr');
|
|
12
|
+
hmr.addEventListener('message', function fullPageReload(event) {
|
|
13
|
+
try {
|
|
14
|
+
// Only care for built events. Heartbeats are not parsable so we ignore those
|
|
15
|
+
var _JSON$parse = JSON.parse(event.data),
|
|
16
|
+
action = _JSON$parse.action;
|
|
17
|
+
|
|
18
|
+
if (action === 'built') {
|
|
19
|
+
window.location.reload();
|
|
20
|
+
}
|
|
21
|
+
} catch (error) {// Most part we only get here from the data in the server-sent event not being parsable which is ok
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import "core-js/modules/es.array.concat.js";
|
|
2
|
+
|
|
3
|
+
/* eslint-disable prefer-destructuring */
|
|
4
|
+
import { start } from '@storybook/core/client';
|
|
5
|
+
import './globals';
|
|
6
|
+
import { renderToDOM } from './render';
|
|
7
|
+
var framework = 'web-components';
|
|
8
|
+
var api = start(renderToDOM);
|
|
9
|
+
export var storiesOf = function storiesOf(kind, m) {
|
|
10
|
+
return api.clientApi.storiesOf(kind, m).addParameters({
|
|
11
|
+
framework: framework
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
export var configure = function configure() {
|
|
15
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
16
|
+
args[_key] = arguments[_key];
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return api.configure.apply(api, [framework].concat(args));
|
|
20
|
+
};
|
|
21
|
+
export var addDecorator = api.clientApi.addDecorator;
|
|
22
|
+
export var addParameters = api.clientApi.addParameters;
|
|
23
|
+
export var clearDecorators = api.clientApi.clearDecorators;
|
|
24
|
+
export var setAddon = api.clientApi.setAddon;
|
|
25
|
+
export var forceReRender = api.forceReRender;
|
|
26
|
+
export var getStorybook = api.clientApi.getStorybook;
|
|
27
|
+
export var raw = api.clientApi.raw;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
var _templateObject;
|
|
2
|
+
|
|
3
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
4
|
+
|
|
5
|
+
import "core-js/modules/es.function.name.js";
|
|
6
|
+
import "core-js/modules/es.array.concat.js";
|
|
7
|
+
import "core-js/modules/es.array.slice.js";
|
|
8
|
+
import "core-js/modules/es.object.freeze.js";
|
|
9
|
+
|
|
10
|
+
/* eslint-disable no-param-reassign */
|
|
11
|
+
import global from 'global';
|
|
12
|
+
import dedent from 'ts-dedent';
|
|
13
|
+
import { render } from 'lit-html'; // Keep `.js` extension to avoid issue with Webpack (related to export map?)
|
|
14
|
+
// eslint-disable-next-line import/extensions
|
|
15
|
+
|
|
16
|
+
import { isTemplateResult } from 'lit-html/directive-helpers.js';
|
|
17
|
+
import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
|
|
18
|
+
var Node = global.Node;
|
|
19
|
+
export function renderToDOM(_ref, domElement) {
|
|
20
|
+
var storyFn = _ref.storyFn,
|
|
21
|
+
kind = _ref.kind,
|
|
22
|
+
name = _ref.name,
|
|
23
|
+
showMain = _ref.showMain,
|
|
24
|
+
showError = _ref.showError,
|
|
25
|
+
forceRemount = _ref.forceRemount;
|
|
26
|
+
var element = storyFn();
|
|
27
|
+
showMain();
|
|
28
|
+
|
|
29
|
+
if (isTemplateResult(element)) {
|
|
30
|
+
// `render` stores the TemplateInstance in the Node and tries to update based on that.
|
|
31
|
+
// Since we reuse `domElement` for all stories, remove the stored instance first.
|
|
32
|
+
// But forceRemount means that it's the same story, so we want too keep the state in that case.
|
|
33
|
+
if (forceRemount || !domElement.querySelector('[id="root-inner"]')) {
|
|
34
|
+
domElement.innerHTML = '<div id="root-inner"></div>';
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
var renderTo = domElement.querySelector('[id="root-inner"]');
|
|
38
|
+
render(element, renderTo);
|
|
39
|
+
simulatePageLoad(domElement);
|
|
40
|
+
} else if (typeof element === 'string') {
|
|
41
|
+
domElement.innerHTML = element;
|
|
42
|
+
simulatePageLoad(domElement);
|
|
43
|
+
} else if (element instanceof Node) {
|
|
44
|
+
// Don't re-mount the element if it didn't change and neither did the story
|
|
45
|
+
if (domElement.firstChild === element && !forceRemount) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
domElement.innerHTML = '';
|
|
50
|
+
domElement.appendChild(element);
|
|
51
|
+
simulateDOMContentLoaded();
|
|
52
|
+
} else {
|
|
53
|
+
showError({
|
|
54
|
+
title: "Expecting an HTML snippet or DOM node from the story: \"".concat(name, "\" of \"").concat(kind, "\"."),
|
|
55
|
+
description: dedent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n Did you forget to return the HTML snippet from the story?\n Use \"() => <your snippet or node>\" or when defining the story.\n "])))
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
4
|
+
|
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
|
|
7
|
+
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
8
|
+
import { findDistEsm } from '@storybook/core-common';
|
|
9
|
+
export function webpack(config, options) {
|
|
10
|
+
var _options$features;
|
|
11
|
+
|
|
12
|
+
var babelrcOptions = (_options$features = options.features) !== null && _options$features !== void 0 && _options$features.babelModeV7 ? null : {
|
|
13
|
+
babelrc: false
|
|
14
|
+
};
|
|
15
|
+
config.module.rules.push({
|
|
16
|
+
test: [new RegExp(`src(.*)\\.js$`), new RegExp(`packages(\\/|\\\\)*(\\/|\\\\)src(\\/|\\\\)(.*)\\.js$`), new RegExp(`node_modules(\\/|\\\\)lit-html(.*)\\.js$`), new RegExp(`node_modules(\\/|\\\\)lit-element(.*)\\.js$`), new RegExp(`node_modules(\\/|\\\\)@open-wc(.*)\\.js$`), new RegExp(`node_modules(\\/|\\\\)@polymer(.*)\\.js$`), new RegExp(`node_modules(\\/|\\\\)@vaadin(.*)\\.js$`)],
|
|
17
|
+
use: {
|
|
18
|
+
loader: require.resolve('babel-loader'),
|
|
19
|
+
options: _objectSpread({
|
|
20
|
+
plugins: [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('@babel/plugin-syntax-import-meta'), // webpack does not support import.meta.url yet, so we rewrite them in babel
|
|
21
|
+
[require.resolve('babel-plugin-bundled-import-meta'), {
|
|
22
|
+
importStyle: 'baseURI'
|
|
23
|
+
}]],
|
|
24
|
+
presets: [[require.resolve('@babel/preset-env'), {
|
|
25
|
+
useBuiltIns: 'entry',
|
|
26
|
+
corejs: 3
|
|
27
|
+
}]]
|
|
28
|
+
}, babelrcOptions)
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
return config;
|
|
32
|
+
}
|
|
33
|
+
export var config = function (entry = []) {
|
|
34
|
+
return [...entry, findDistEsm(__dirname, 'client/preview/config')];
|
|
35
|
+
};
|