@storybook/html 10.1.0-alpha.9 → 10.1.0-beta.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/dist/_browser-chunks/chunk-4BE7D4DS.js +9 -0
- package/dist/_browser-chunks/{chunk-R4NDMI3K.js → chunk-CREPD6LO.js} +23 -37
- package/dist/entry-preview-docs.js +12 -30
- package/dist/entry-preview.js +2 -2
- package/dist/index.js +3 -7
- package/dist/preset.js +10 -13
- package/package.json +3 -3
- package/dist/_browser-chunks/chunk-JFJ5UJ7Q.js +0 -11
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
|
-
__export
|
|
3
|
-
|
|
4
|
-
} from "./chunk-JFJ5UJ7Q.js";
|
|
2
|
+
__export
|
|
3
|
+
} from "./chunk-4BE7D4DS.js";
|
|
5
4
|
|
|
6
5
|
// src/entry-preview.ts
|
|
7
6
|
var entry_preview_exports = {};
|
|
@@ -17,49 +16,39 @@ import { enhanceArgTypes } from "storybook/internal/docs-tools";
|
|
|
17
16
|
import { global } from "@storybook/global";
|
|
18
17
|
import { simulateDOMContentLoaded, simulatePageLoad } from "storybook/preview-api";
|
|
19
18
|
import { dedent } from "ts-dedent";
|
|
20
|
-
var { Node } = global
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
if (typeof Component === "string") {
|
|
19
|
+
var { Node } = global, render = (args, context) => {
|
|
20
|
+
let { id, component: Component } = context;
|
|
21
|
+
if (typeof Component == "string") {
|
|
24
22
|
let output = Component;
|
|
25
|
-
Object.keys(args).forEach((key) => {
|
|
23
|
+
return Object.keys(args).forEach((key) => {
|
|
26
24
|
output = output.replace(`{{${key}}}`, args[key]);
|
|
27
|
-
});
|
|
28
|
-
return output;
|
|
25
|
+
}), output;
|
|
29
26
|
}
|
|
30
27
|
if (Component instanceof HTMLElement) {
|
|
31
|
-
|
|
32
|
-
Object.keys(args).forEach((key) => {
|
|
28
|
+
let output = Component.cloneNode(!0);
|
|
29
|
+
return Object.keys(args).forEach((key) => {
|
|
33
30
|
output.setAttribute(
|
|
34
31
|
key,
|
|
35
|
-
typeof args[key]
|
|
32
|
+
typeof args[key] == "string" ? args[key] : JSON.stringify(args[key])
|
|
36
33
|
);
|
|
37
|
-
});
|
|
38
|
-
return output;
|
|
34
|
+
}), output;
|
|
39
35
|
}
|
|
40
|
-
if (typeof Component
|
|
36
|
+
if (typeof Component == "function")
|
|
41
37
|
return Component(args, context);
|
|
42
|
-
|
|
43
|
-
console.warn(dedent`
|
|
38
|
+
throw console.warn(dedent`
|
|
44
39
|
Storybook's HTML renderer only supports rendering DOM elements and strings.
|
|
45
40
|
Received: ${Component}
|
|
46
|
-
`);
|
|
47
|
-
|
|
48
|
-
}, "render");
|
|
41
|
+
`), new Error(`Unable to render story ${id}`);
|
|
42
|
+
};
|
|
49
43
|
function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount }, canvasElement) {
|
|
50
|
-
|
|
51
|
-
showMain()
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
} else if (element instanceof Node) {
|
|
56
|
-
if (canvasElement.firstChild === element && forceRemount === false) {
|
|
44
|
+
let element = storyFn();
|
|
45
|
+
if (showMain(), typeof element == "string")
|
|
46
|
+
canvasElement.innerHTML = element, simulatePageLoad(canvasElement);
|
|
47
|
+
else if (element instanceof Node) {
|
|
48
|
+
if (canvasElement.firstChild === element && forceRemount === !1)
|
|
57
49
|
return;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
canvasElement.appendChild(element);
|
|
61
|
-
simulateDOMContentLoaded();
|
|
62
|
-
} else {
|
|
50
|
+
canvasElement.innerHTML = "", canvasElement.appendChild(element), simulateDOMContentLoaded();
|
|
51
|
+
} else
|
|
63
52
|
showError({
|
|
64
53
|
title: `Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,
|
|
65
54
|
description: dedent`
|
|
@@ -67,13 +56,10 @@ function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount
|
|
|
67
56
|
Use "() => <your snippet or node>" or when defining the story.
|
|
68
57
|
`
|
|
69
58
|
});
|
|
70
|
-
}
|
|
71
59
|
}
|
|
72
|
-
__name(renderToCanvas, "renderToCanvas");
|
|
73
60
|
|
|
74
61
|
// src/entry-preview.ts
|
|
75
|
-
var parameters = { renderer: "html" };
|
|
76
|
-
var argTypesEnhancers = [enhanceArgTypes];
|
|
62
|
+
var parameters = { renderer: "html" }, argTypesEnhancers = [enhanceArgTypes];
|
|
77
63
|
|
|
78
64
|
export {
|
|
79
65
|
render,
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
__name
|
|
3
|
-
} from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
|
|
1
|
+
import "./_browser-chunks/chunk-4BE7D4DS.js";
|
|
4
2
|
|
|
5
3
|
// src/entry-preview-docs.ts
|
|
6
4
|
import { SourceType as SourceType2 } from "storybook/internal/docs-tools";
|
|
@@ -9,37 +7,21 @@ import { SourceType as SourceType2 } from "storybook/internal/docs-tools";
|
|
|
9
7
|
import { SourceType } from "storybook/internal/docs-tools";
|
|
10
8
|
import { emitTransformCode, useEffect, useRef } from "storybook/preview-api";
|
|
11
9
|
function skipSourceRender(context) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
if (sourceParams?.type === SourceType.DYNAMIC) {
|
|
15
|
-
return false;
|
|
16
|
-
}
|
|
17
|
-
return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
|
|
10
|
+
let sourceParams = context?.parameters.docs?.source, isArgsStory = context?.parameters.__isArgsStory;
|
|
11
|
+
return sourceParams?.type === SourceType.DYNAMIC ? !1 : !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
|
|
18
12
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
if (typeof renderedForSource === "string" && source.current !== renderedForSource) {
|
|
27
|
-
emitTransformCode(renderedForSource, context);
|
|
28
|
-
source.current = renderedForSource;
|
|
29
|
-
} else if (renderedForSource instanceof Element && source.current !== renderedForSource.outerHTML) {
|
|
30
|
-
emitTransformCode(renderedForSource.outerHTML, context);
|
|
31
|
-
source.current = renderedForSource.outerHTML;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
return story;
|
|
36
|
-
}, "sourceDecorator");
|
|
13
|
+
var sourceDecorator = (storyFn, context) => {
|
|
14
|
+
let source = useRef(void 0), story = storyFn();
|
|
15
|
+
return useEffect(() => {
|
|
16
|
+
let renderedForSource = context?.parameters.docs?.source?.excludeDecorators ? context.originalStoryFn(context.args, context) : story;
|
|
17
|
+
skipSourceRender(context) || (typeof renderedForSource == "string" && source.current !== renderedForSource ? (emitTransformCode(renderedForSource, context), source.current = renderedForSource) : renderedForSource instanceof Element && source.current !== renderedForSource.outerHTML && (emitTransformCode(renderedForSource.outerHTML, context), source.current = renderedForSource.outerHTML));
|
|
18
|
+
}), story;
|
|
19
|
+
};
|
|
37
20
|
|
|
38
21
|
// src/entry-preview-docs.ts
|
|
39
|
-
var decorators = [sourceDecorator]
|
|
40
|
-
var parameters = {
|
|
22
|
+
var decorators = [sourceDecorator], parameters = {
|
|
41
23
|
docs: {
|
|
42
|
-
story: { inline:
|
|
24
|
+
story: { inline: !0 },
|
|
43
25
|
source: {
|
|
44
26
|
type: SourceType2.DYNAMIC,
|
|
45
27
|
language: "html",
|
package/dist/entry-preview.js
CHANGED
|
@@ -3,8 +3,8 @@ import {
|
|
|
3
3
|
parameters,
|
|
4
4
|
render,
|
|
5
5
|
renderToCanvas
|
|
6
|
-
} from "./_browser-chunks/chunk-
|
|
7
|
-
import "./_browser-chunks/chunk-
|
|
6
|
+
} from "./_browser-chunks/chunk-CREPD6LO.js";
|
|
7
|
+
import "./_browser-chunks/chunk-4BE7D4DS.js";
|
|
8
8
|
export {
|
|
9
9
|
argTypesEnhancers,
|
|
10
10
|
parameters,
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
entry_preview_exports
|
|
3
|
-
} from "./_browser-chunks/chunk-
|
|
4
|
-
import
|
|
5
|
-
__name
|
|
6
|
-
} from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
|
|
3
|
+
} from "./_browser-chunks/chunk-CREPD6LO.js";
|
|
4
|
+
import "./_browser-chunks/chunk-4BE7D4DS.js";
|
|
7
5
|
|
|
8
6
|
// src/globals.ts
|
|
9
7
|
import { global } from "@storybook/global";
|
|
@@ -16,12 +14,10 @@ import {
|
|
|
16
14
|
setDefaultProjectAnnotations
|
|
17
15
|
} from "storybook/preview-api";
|
|
18
16
|
function setProjectAnnotations(projectAnnotations) {
|
|
19
|
-
setDefaultProjectAnnotations(entry_preview_exports)
|
|
20
|
-
return originalSetProjectAnnotations(
|
|
17
|
+
return setDefaultProjectAnnotations(entry_preview_exports), originalSetProjectAnnotations(
|
|
21
18
|
projectAnnotations
|
|
22
19
|
);
|
|
23
20
|
}
|
|
24
|
-
__name(setProjectAnnotations, "setProjectAnnotations");
|
|
25
21
|
export {
|
|
26
22
|
setProjectAnnotations
|
|
27
23
|
};
|
package/dist/preset.js
CHANGED
|
@@ -1,26 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import CJS_COMPAT_NODE_URL_c9x89ebtvkt from 'node:url';
|
|
2
|
+
import CJS_COMPAT_NODE_PATH_c9x89ebtvkt from 'node:path';
|
|
3
|
+
import CJS_COMPAT_NODE_MODULE_c9x89ebtvkt from "node:module";
|
|
4
4
|
|
|
5
|
-
var __filename =
|
|
6
|
-
var __dirname =
|
|
7
|
-
var require =
|
|
5
|
+
var __filename = CJS_COMPAT_NODE_URL_c9x89ebtvkt.fileURLToPath(import.meta.url);
|
|
6
|
+
var __dirname = CJS_COMPAT_NODE_PATH_c9x89ebtvkt.dirname(__filename);
|
|
7
|
+
var require = CJS_COMPAT_NODE_MODULE_c9x89ebtvkt.createRequire(import.meta.url);
|
|
8
8
|
|
|
9
9
|
// ------------------------------------------------------------
|
|
10
10
|
// end of CJS compatibility banner, injected by Storybook's esbuild configuration
|
|
11
11
|
// ------------------------------------------------------------
|
|
12
|
-
var __defProp = Object.defineProperty;
|
|
13
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
14
12
|
|
|
15
13
|
// src/preset.ts
|
|
16
14
|
import { fileURLToPath } from "node:url";
|
|
17
|
-
var previewAnnotations =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
return result.concat(input).concat([fileURLToPath(import.meta.resolve("@storybook/html/entry-preview"))]).concat(
|
|
15
|
+
var previewAnnotations = async (input = [], options) => {
|
|
16
|
+
let docsEnabled = Object.keys(await options.presets.apply("docs", {}, options)).length > 0;
|
|
17
|
+
return [].concat(input).concat([fileURLToPath(import.meta.resolve("@storybook/html/entry-preview"))]).concat(
|
|
21
18
|
docsEnabled ? [fileURLToPath(import.meta.resolve("@storybook/html/entry-preview-docs"))] : []
|
|
22
19
|
);
|
|
23
|
-
}
|
|
20
|
+
};
|
|
24
21
|
export {
|
|
25
22
|
previewAnnotations
|
|
26
23
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/html",
|
|
3
|
-
"version": "10.1.0-
|
|
3
|
+
"version": "10.1.0-beta.0",
|
|
4
4
|
"description": "Storybook HTML renderer: Develop, document, and test UI components in isolation",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook",
|
|
@@ -54,10 +54,10 @@
|
|
|
54
54
|
"typescript": "^5.8.3"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
|
-
"storybook": "^10.1.0-
|
|
57
|
+
"storybook": "^10.1.0-beta.0"
|
|
58
58
|
},
|
|
59
59
|
"publishConfig": {
|
|
60
60
|
"access": "public"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae1l"
|
|
63
63
|
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
var __export = (target, all) => {
|
|
4
|
-
for (var name in all)
|
|
5
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export {
|
|
9
|
-
__name,
|
|
10
|
-
__export
|
|
11
|
-
};
|