@storybook/svelte 10.1.0-alpha.10 → 10.1.0-alpha.12
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-QEV3A2KO.js +224 -0
- package/dist/entry-preview-docs.js +32 -97
- package/dist/entry-preview.js +2 -2
- package/dist/index.js +15 -28
- package/dist/playwright.js +1 -1
- package/dist/preset.js +10 -13
- package/package.json +3 -3
- package/dist/_browser-chunks/chunk-4ZGG6PUN.js +0 -293
- package/dist/_browser-chunks/chunk-JFJ5UJ7Q.js +0 -11
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__export
|
|
3
|
+
} from "./chunk-4BE7D4DS.js";
|
|
4
|
+
|
|
5
|
+
// src/entry-preview.ts
|
|
6
|
+
var entry_preview_exports = {};
|
|
7
|
+
__export(entry_preview_exports, {
|
|
8
|
+
applyDecorators: () => decorateStory,
|
|
9
|
+
argTypesEnhancers: () => argTypesEnhancers,
|
|
10
|
+
mount: () => mount2,
|
|
11
|
+
parameters: () => parameters,
|
|
12
|
+
render: () => render,
|
|
13
|
+
renderToCanvas: () => renderToCanvas
|
|
14
|
+
});
|
|
15
|
+
import { enhanceArgTypes } from "storybook/internal/docs-tools";
|
|
16
|
+
|
|
17
|
+
// src/extractArgTypes.ts
|
|
18
|
+
import { logger } from "storybook/internal/client-logger";
|
|
19
|
+
function hasKeyword(keyword, keywords) {
|
|
20
|
+
return keywords ? keywords.find((k) => k.name === keyword) != null : !1;
|
|
21
|
+
}
|
|
22
|
+
var extractArgTypes = (component) => {
|
|
23
|
+
try {
|
|
24
|
+
let docgen = component.__docgen;
|
|
25
|
+
if (docgen)
|
|
26
|
+
return createArgTypes(docgen);
|
|
27
|
+
} catch (err) {
|
|
28
|
+
logger.log(`Error extracting argTypes: ${err}`);
|
|
29
|
+
}
|
|
30
|
+
return {};
|
|
31
|
+
}, createArgTypes = (docgen) => {
|
|
32
|
+
let results = {};
|
|
33
|
+
return docgen.data && docgen.data.forEach((item) => {
|
|
34
|
+
results[item.name] = {
|
|
35
|
+
...parseTypeToControl(item.type),
|
|
36
|
+
name: item.name,
|
|
37
|
+
description: item.description || void 0,
|
|
38
|
+
type: {
|
|
39
|
+
required: hasKeyword("required", item.keywords || []),
|
|
40
|
+
name: item.type?.text === "{}" ? "object" : item.type?.text
|
|
41
|
+
},
|
|
42
|
+
table: {
|
|
43
|
+
type: {
|
|
44
|
+
summary: item.type?.text
|
|
45
|
+
},
|
|
46
|
+
defaultValue: {
|
|
47
|
+
summary: item.defaultValue
|
|
48
|
+
},
|
|
49
|
+
category: "properties"
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
}), docgen.events && docgen.events.forEach((item) => {
|
|
53
|
+
results[`event_${item.name}`] = {
|
|
54
|
+
name: item.name,
|
|
55
|
+
action: item.name,
|
|
56
|
+
control: !1,
|
|
57
|
+
...item.description ? { description: item.description } : {},
|
|
58
|
+
table: {
|
|
59
|
+
category: "events"
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
}), docgen.slots && docgen.slots.forEach((item) => {
|
|
63
|
+
results[`slot_${item.name}`] = {
|
|
64
|
+
name: item.name,
|
|
65
|
+
control: !1,
|
|
66
|
+
description: [item.description, item.params?.map((p) => `\`${p.name}\``).join(" ")].filter((p) => p).join(`
|
|
67
|
+
|
|
68
|
+
`),
|
|
69
|
+
table: {
|
|
70
|
+
category: "slots"
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
}), results;
|
|
74
|
+
}, parseTypeToControl = (type) => {
|
|
75
|
+
if (!type)
|
|
76
|
+
return null;
|
|
77
|
+
if (type.kind === "type")
|
|
78
|
+
switch (type.type) {
|
|
79
|
+
case "string":
|
|
80
|
+
return { control: { type: "text" } };
|
|
81
|
+
case "any":
|
|
82
|
+
return { control: { type: "object" } };
|
|
83
|
+
default:
|
|
84
|
+
return { control: { type: type.type } };
|
|
85
|
+
}
|
|
86
|
+
else if (type.kind === "union") {
|
|
87
|
+
if (Array.isArray(type.type) && !type.type.some(
|
|
88
|
+
(t) => t.kind !== "const" || !["string", "number", "null", "undefined"].includes(t.type)
|
|
89
|
+
)) {
|
|
90
|
+
let options = type.type.map((t) => t.value);
|
|
91
|
+
return {
|
|
92
|
+
control: {
|
|
93
|
+
type: "radio"
|
|
94
|
+
},
|
|
95
|
+
options
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
} else if (type.kind === "function")
|
|
99
|
+
return { control: null };
|
|
100
|
+
return null;
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
// src/extractComponentDescription.ts
|
|
104
|
+
function extractComponentDescription(component) {
|
|
105
|
+
return component?.__docgen?.description || "";
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// src/render.ts
|
|
109
|
+
import { RESET_STORY_ARGS } from "storybook/internal/core-events";
|
|
110
|
+
import PreviewRender from "@storybook/svelte/internal/PreviewRender.svelte";
|
|
111
|
+
import { createReactiveProps } from "@storybook/svelte/internal/createReactiveProps";
|
|
112
|
+
import { addons } from "storybook/preview-api";
|
|
113
|
+
import * as svelte from "svelte";
|
|
114
|
+
var storyIdsToRemountFromResetArgsEvent = /* @__PURE__ */ new Set();
|
|
115
|
+
addons.getChannel().on(RESET_STORY_ARGS, ({ storyId }) => {
|
|
116
|
+
storyIdsToRemountFromResetArgsEvent.add(storyId);
|
|
117
|
+
});
|
|
118
|
+
var componentsByDomElement = /* @__PURE__ */ new Map();
|
|
119
|
+
async function renderToCanvas({
|
|
120
|
+
storyFn,
|
|
121
|
+
title,
|
|
122
|
+
name,
|
|
123
|
+
showMain,
|
|
124
|
+
showError,
|
|
125
|
+
storyContext,
|
|
126
|
+
forceRemount
|
|
127
|
+
}, canvasElement) {
|
|
128
|
+
function unmount2(canvasElementToUnmount) {
|
|
129
|
+
let { mountedComponent } = componentsByDomElement.get(canvasElementToUnmount) ?? {};
|
|
130
|
+
mountedComponent && (svelte.unmount(mountedComponent), componentsByDomElement.delete(canvasElementToUnmount));
|
|
131
|
+
}
|
|
132
|
+
let existingComponent = componentsByDomElement.get(canvasElement), remount = forceRemount;
|
|
133
|
+
if (storyIdsToRemountFromResetArgsEvent.has(storyContext.id) && (remount = !0, storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)), remount && unmount2(canvasElement), !existingComponent || remount) {
|
|
134
|
+
let props = createReactiveProps({
|
|
135
|
+
storyFn,
|
|
136
|
+
storyContext,
|
|
137
|
+
name,
|
|
138
|
+
title,
|
|
139
|
+
showError
|
|
140
|
+
}), mountedComponent = svelte.mount(PreviewRender, {
|
|
141
|
+
target: canvasElement,
|
|
142
|
+
props
|
|
143
|
+
});
|
|
144
|
+
componentsByDomElement.set(canvasElement, { mountedComponent, props }), await svelte.tick();
|
|
145
|
+
} else
|
|
146
|
+
Object.assign(existingComponent.props, {
|
|
147
|
+
storyFn,
|
|
148
|
+
storyContext,
|
|
149
|
+
name,
|
|
150
|
+
title,
|
|
151
|
+
showError
|
|
152
|
+
}), await svelte.tick();
|
|
153
|
+
return showMain(), () => {
|
|
154
|
+
unmount2(canvasElement);
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
var render = (args, context) => {
|
|
158
|
+
let { id, component: Component } = context;
|
|
159
|
+
if (!Component)
|
|
160
|
+
throw new Error(
|
|
161
|
+
`Unable to render story ${id} as the component annotation is missing from the default export`
|
|
162
|
+
);
|
|
163
|
+
return { Component, props: args };
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
// src/decorators.ts
|
|
167
|
+
import DecoratorHandler from "@storybook/svelte/internal/DecoratorHandler.svelte";
|
|
168
|
+
import { sanitizeStoryContextUpdate } from "storybook/preview-api";
|
|
169
|
+
function unWrap(obj) {
|
|
170
|
+
return obj && typeof obj == "object" && "default" in obj ? obj.default : obj;
|
|
171
|
+
}
|
|
172
|
+
function prepareStory(context, rawStory, rawInnerStory) {
|
|
173
|
+
let story = unWrap(rawStory), innerStory = rawInnerStory && unWrap(rawInnerStory), preparedStory;
|
|
174
|
+
return !story || Object.keys(story).length === 0 ? preparedStory = {
|
|
175
|
+
Component: context.component
|
|
176
|
+
} : story.Component ? preparedStory = story : preparedStory = {
|
|
177
|
+
Component: story
|
|
178
|
+
}, innerStory ? {
|
|
179
|
+
Component: DecoratorHandler,
|
|
180
|
+
props: {
|
|
181
|
+
// inner stories will already have been prepared, keep as is
|
|
182
|
+
...innerStory,
|
|
183
|
+
decorator: preparedStory
|
|
184
|
+
}
|
|
185
|
+
} : { ...preparedStory, argTypes: context.argTypes };
|
|
186
|
+
}
|
|
187
|
+
function decorateStory(storyFn, decorators) {
|
|
188
|
+
return decorators.reduce(
|
|
189
|
+
(decorated, decorator) => (context) => {
|
|
190
|
+
let story, decoratedStory = decorator((update) => (story = decorated({
|
|
191
|
+
...context,
|
|
192
|
+
...sanitizeStoryContextUpdate(update)
|
|
193
|
+
}), story), context);
|
|
194
|
+
return story || (story = decorated(context)), decoratedStory === story ? story : prepareStory(context, decoratedStory, story);
|
|
195
|
+
},
|
|
196
|
+
(context) => prepareStory(context, storyFn(context))
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
// src/mount.ts
|
|
201
|
+
var mount2 = (context) => async (Component, options) => (Component && (context.originalStoryFn = () => ({
|
|
202
|
+
Component,
|
|
203
|
+
props: options && "props" in options ? options?.props : options
|
|
204
|
+
})), await context.renderToCanvas(), context.canvas);
|
|
205
|
+
|
|
206
|
+
// src/entry-preview.ts
|
|
207
|
+
var parameters = {
|
|
208
|
+
renderer: "svelte",
|
|
209
|
+
docs: {
|
|
210
|
+
story: { inline: !0 },
|
|
211
|
+
extractArgTypes,
|
|
212
|
+
extractComponentDescription
|
|
213
|
+
}
|
|
214
|
+
}, argTypesEnhancers = [enhanceArgTypes];
|
|
215
|
+
|
|
216
|
+
export {
|
|
217
|
+
renderToCanvas,
|
|
218
|
+
render,
|
|
219
|
+
decorateStory,
|
|
220
|
+
mount2 as mount,
|
|
221
|
+
parameters,
|
|
222
|
+
argTypesEnhancers,
|
|
223
|
+
entry_preview_exports
|
|
224
|
+
};
|
|
@@ -1,121 +1,56 @@
|
|
|
1
|
-
import
|
|
2
|
-
__name
|
|
3
|
-
} from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
|
|
1
|
+
import "./_browser-chunks/chunk-4BE7D4DS.js";
|
|
4
2
|
|
|
5
3
|
// src/docs/sourceDecorator.ts
|
|
6
4
|
import { deprecate } from "storybook/internal/client-logger";
|
|
7
5
|
import { SourceType } from "storybook/internal/docs-tools";
|
|
8
6
|
import { emitTransformCode, useEffect, useRef } from "storybook/preview-api";
|
|
9
|
-
var skipSourceRender =
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
return true;
|
|
14
|
-
}
|
|
15
|
-
if (sourceParams?.type === SourceType.DYNAMIC) {
|
|
16
|
-
return false;
|
|
17
|
-
}
|
|
18
|
-
return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
|
|
19
|
-
}, "skipSourceRender");
|
|
7
|
+
var skipSourceRender = (context) => {
|
|
8
|
+
let sourceParams = context?.parameters.docs?.source, isArgsStory = context?.parameters.__isArgsStory;
|
|
9
|
+
return (context?.tags ?? []).some((tag) => tag.startsWith("svelte-csf")) ? !0 : sourceParams?.type === SourceType.DYNAMIC ? !1 : !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
|
|
10
|
+
};
|
|
20
11
|
function toSvelteProperty(key, value, argTypes) {
|
|
21
|
-
if (value
|
|
22
|
-
return null;
|
|
23
|
-
}
|
|
24
|
-
const argType = argTypes[key];
|
|
25
|
-
if (argType && argType.defaultValue === value) {
|
|
12
|
+
if (value == null)
|
|
26
13
|
return null;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return null;
|
|
30
|
-
}
|
|
31
|
-
if (value === true) {
|
|
32
|
-
return key;
|
|
33
|
-
}
|
|
34
|
-
if (typeof value === "string") {
|
|
35
|
-
return `${key}=${JSON.stringify(value)}`;
|
|
36
|
-
}
|
|
37
|
-
if (typeof value === "function") {
|
|
38
|
-
return `${key}={<handler>}`;
|
|
39
|
-
}
|
|
40
|
-
return `${key}={${JSON.stringify(value)}}`;
|
|
14
|
+
let argType = argTypes[key];
|
|
15
|
+
return argType && argType.defaultValue === value || argType && argType.action ? null : value === !0 ? key : typeof value == "string" ? `${key}=${JSON.stringify(value)}` : typeof value == "function" ? `${key}={<handler>}` : `${key}={${JSON.stringify(value)}}`;
|
|
41
16
|
}
|
|
42
|
-
__name(toSvelteProperty, "toSvelteProperty");
|
|
43
17
|
function getComponentName(component) {
|
|
44
|
-
if (component == null)
|
|
18
|
+
if (component == null)
|
|
45
19
|
return null;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
let { name } = __docgen;
|
|
49
|
-
if (!name) {
|
|
50
|
-
return component.name;
|
|
51
|
-
}
|
|
52
|
-
if (name.endsWith(".svelte")) {
|
|
53
|
-
name = name.substring(0, name.length - 7);
|
|
54
|
-
}
|
|
55
|
-
return name;
|
|
20
|
+
let { __docgen = {} } = component, { name } = __docgen;
|
|
21
|
+
return name ? (name.endsWith(".svelte") && (name = name.substring(0, name.length - 7)), name) : component.name;
|
|
56
22
|
}
|
|
57
|
-
__name(getComponentName, "getComponentName");
|
|
58
23
|
function generateSvelteSource(component, args, argTypes, slotProperty) {
|
|
59
|
-
|
|
60
|
-
if (!name)
|
|
24
|
+
let name = getComponentName(component);
|
|
25
|
+
if (!name)
|
|
61
26
|
return null;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
const slotValue = slotProperty ? args[slotProperty] : null;
|
|
67
|
-
const srcStart = multiline ? `<${name}
|
|
68
|
-
${propsArray.join("\n ")}` : `<${name} ${props}`;
|
|
69
|
-
if (slotValue) {
|
|
70
|
-
return `${srcStart}>
|
|
27
|
+
let propsArray = Object.entries(args).filter(([k]) => k !== slotProperty).map(([k, v]) => toSvelteProperty(k, v, argTypes)).filter((p) => p), props = propsArray.join(" "), multiline = props.length > 50, slotValue = slotProperty ? args[slotProperty] : null, srcStart = multiline ? `<${name}
|
|
28
|
+
${propsArray.join(`
|
|
29
|
+
`)}` : `<${name} ${props}`;
|
|
30
|
+
return slotValue ? `${srcStart}>
|
|
71
31
|
${slotValue}
|
|
72
|
-
</${name}
|
|
73
|
-
}
|
|
74
|
-
return `${srcStart}/>`;
|
|
32
|
+
</${name}>` : `${srcStart}/>`;
|
|
75
33
|
}
|
|
76
|
-
__name(generateSvelteSource, "generateSvelteSource");
|
|
77
34
|
function getWrapperProperties(component) {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
return { wrapper: false };
|
|
81
|
-
}
|
|
82
|
-
if (!__docgen.keywords?.find((kw) => kw.name === "wrapper")) {
|
|
83
|
-
return { wrapper: false };
|
|
84
|
-
}
|
|
85
|
-
const slotProp = __docgen.data?.find(
|
|
35
|
+
let { __docgen } = component || {};
|
|
36
|
+
return __docgen ? __docgen.keywords?.find((kw) => kw.name === "wrapper") ? { wrapper: !0, slotProperty: __docgen.data?.find(
|
|
86
37
|
(prop) => prop.keywords.find((kw) => kw.name === "slot")
|
|
87
|
-
);
|
|
88
|
-
return { wrapper: true, slotProperty: slotProp?.name };
|
|
38
|
+
)?.name } : { wrapper: !1 } : { wrapper: !1 };
|
|
89
39
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
const source = useRef(void 0);
|
|
95
|
-
useEffect(() => {
|
|
96
|
-
if (skip) {
|
|
40
|
+
var sourceDecorator = (storyFn, context) => {
|
|
41
|
+
let skip = skipSourceRender(context), story = storyFn(), source = useRef(void 0);
|
|
42
|
+
return useEffect(() => {
|
|
43
|
+
if (skip)
|
|
97
44
|
return;
|
|
98
|
-
}
|
|
99
|
-
const { parameters = {}, args = {}, component: ctxComponent } = context || {};
|
|
100
|
-
let { Component: component } = context.originalStoryFn(
|
|
45
|
+
let { parameters = {}, args = {}, component: ctxComponent } = context || {}, { Component: component } = context.originalStoryFn(
|
|
101
46
|
args,
|
|
102
47
|
context
|
|
103
|
-
);
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
component = ctxComponent;
|
|
110
|
-
}
|
|
111
|
-
const generated = generateSvelteSource(component, args, context?.argTypes, slotProperty);
|
|
112
|
-
if (generated && source.current !== generated) {
|
|
113
|
-
emitTransformCode(generated, context);
|
|
114
|
-
source.current = generated;
|
|
115
|
-
}
|
|
116
|
-
});
|
|
117
|
-
return story;
|
|
118
|
-
}, "sourceDecorator");
|
|
48
|
+
), { wrapper, slotProperty } = getWrapperProperties(component);
|
|
49
|
+
wrapper && (parameters.component && deprecate("parameters.component is deprecated. Using context.component instead."), component = ctxComponent);
|
|
50
|
+
let generated = generateSvelteSource(component, args, context?.argTypes, slotProperty);
|
|
51
|
+
generated && source.current !== generated && (emitTransformCode(generated, context), source.current = generated);
|
|
52
|
+
}), story;
|
|
53
|
+
};
|
|
119
54
|
|
|
120
55
|
// src/entry-preview-docs.ts
|
|
121
56
|
var decorators = [sourceDecorator];
|
package/dist/entry-preview.js
CHANGED
|
@@ -5,8 +5,8 @@ import {
|
|
|
5
5
|
parameters,
|
|
6
6
|
render,
|
|
7
7
|
renderToCanvas
|
|
8
|
-
} from "./_browser-chunks/chunk-
|
|
9
|
-
import "./_browser-chunks/chunk-
|
|
8
|
+
} from "./_browser-chunks/chunk-QEV3A2KO.js";
|
|
9
|
+
import "./_browser-chunks/chunk-4BE7D4DS.js";
|
|
10
10
|
export {
|
|
11
11
|
decorateStory as applyDecorators,
|
|
12
12
|
argTypesEnhancers,
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
entry_preview_exports,
|
|
3
3
|
renderToCanvas
|
|
4
|
-
} from "./_browser-chunks/chunk-
|
|
5
|
-
import
|
|
6
|
-
__name
|
|
7
|
-
} from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
|
|
4
|
+
} from "./_browser-chunks/chunk-QEV3A2KO.js";
|
|
5
|
+
import "./_browser-chunks/chunk-4BE7D4DS.js";
|
|
8
6
|
|
|
9
7
|
// src/globals.ts
|
|
10
8
|
globalThis.STORYBOOK_ENV = "svelte";
|
|
@@ -19,58 +17,47 @@ import {
|
|
|
19
17
|
setDefaultProjectAnnotations
|
|
20
18
|
} from "storybook/preview-api";
|
|
21
19
|
function setProjectAnnotations(projectAnnotations) {
|
|
22
|
-
setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS)
|
|
23
|
-
return originalSetProjectAnnotations(
|
|
20
|
+
return setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS), originalSetProjectAnnotations(
|
|
24
21
|
projectAnnotations
|
|
25
22
|
);
|
|
26
23
|
}
|
|
27
|
-
__name(setProjectAnnotations, "setProjectAnnotations");
|
|
28
24
|
var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS = {
|
|
29
25
|
...entry_preview_exports,
|
|
30
26
|
/** @deprecated */
|
|
31
|
-
renderToCanvas:
|
|
32
|
-
if (renderContext.storyContext.testingLibraryRender == null)
|
|
27
|
+
renderToCanvas: (renderContext, canvasElement) => {
|
|
28
|
+
if (renderContext.storyContext.testingLibraryRender == null)
|
|
33
29
|
return renderToCanvas(renderContext, canvasElement);
|
|
34
|
-
|
|
35
|
-
const {
|
|
30
|
+
let {
|
|
36
31
|
storyFn,
|
|
37
32
|
storyContext: { testingLibraryRender: render }
|
|
38
|
-
} = renderContext;
|
|
39
|
-
const { Component, props } = storyFn();
|
|
40
|
-
const { unmount } = render(Component, { props, target: canvasElement });
|
|
33
|
+
} = renderContext, { Component, props } = storyFn(), { unmount } = render(Component, { props, target: canvasElement });
|
|
41
34
|
return unmount;
|
|
42
|
-
}
|
|
35
|
+
}
|
|
43
36
|
};
|
|
44
37
|
function composeStory(story, componentAnnotations, projectAnnotations, exportsName) {
|
|
45
|
-
|
|
38
|
+
let composedStory = originalComposeStory(
|
|
46
39
|
story,
|
|
47
40
|
// @ts-expect-error Fix this later: Type 'Partial<{ [x: string]: any; }>' is not assignable to type 'Partial<Simplify<TArgs, {}>>'
|
|
48
41
|
componentAnnotations,
|
|
49
42
|
projectAnnotations,
|
|
50
43
|
globalThis.globalProjectAnnotations ?? INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
|
|
51
44
|
exportsName
|
|
52
|
-
)
|
|
53
|
-
const props = createReactiveProps({
|
|
45
|
+
), props = createReactiveProps({
|
|
54
46
|
storyFn: composedStory,
|
|
55
47
|
storyContext: { ...composedStory },
|
|
56
48
|
name: composedStory.storyName,
|
|
57
49
|
title: composedStory.id,
|
|
58
|
-
showError:
|
|
59
|
-
}
|
|
60
|
-
})
|
|
61
|
-
const renderable = {
|
|
50
|
+
showError: () => {
|
|
51
|
+
}
|
|
52
|
+
}), renderable = {
|
|
62
53
|
Component: PreviewRender,
|
|
63
54
|
props
|
|
64
55
|
};
|
|
65
|
-
Object.assign(renderable, composedStory);
|
|
66
|
-
return renderable;
|
|
56
|
+
return Object.assign(renderable, composedStory), renderable;
|
|
67
57
|
}
|
|
68
|
-
__name(composeStory, "composeStory");
|
|
69
58
|
function composeStories(csfExports, projectAnnotations) {
|
|
70
|
-
|
|
71
|
-
return composedStories;
|
|
59
|
+
return originalComposeStories(csfExports, projectAnnotations, composeStory);
|
|
72
60
|
}
|
|
73
|
-
__name(composeStories, "composeStories");
|
|
74
61
|
export {
|
|
75
62
|
INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
|
|
76
63
|
composeStories,
|
package/dist/playwright.js
CHANGED
package/dist/preset.js
CHANGED
|
@@ -1,26 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import CJS_COMPAT_NODE_URL_zwzdkne998 from 'node:url';
|
|
2
|
+
import CJS_COMPAT_NODE_PATH_zwzdkne998 from 'node:path';
|
|
3
|
+
import CJS_COMPAT_NODE_MODULE_zwzdkne998 from "node:module";
|
|
4
4
|
|
|
5
|
-
var __filename =
|
|
6
|
-
var __dirname =
|
|
7
|
-
var require =
|
|
5
|
+
var __filename = CJS_COMPAT_NODE_URL_zwzdkne998.fileURLToPath(import.meta.url);
|
|
6
|
+
var __dirname = CJS_COMPAT_NODE_PATH_zwzdkne998.dirname(__filename);
|
|
7
|
+
var require = CJS_COMPAT_NODE_MODULE_zwzdkne998.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/svelte/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/svelte/entry-preview"))]).concat(
|
|
21
18
|
docsEnabled ? [fileURLToPath(import.meta.resolve("@storybook/svelte/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/svelte",
|
|
3
|
-
"version": "10.1.0-alpha.
|
|
3
|
+
"version": "10.1.0-alpha.12",
|
|
4
4
|
"description": "Storybook Svelte renderer: Develop, document, and test UI components in isolation.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook",
|
|
@@ -68,11 +68,11 @@
|
|
|
68
68
|
"vite": "^7.0.4"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
|
-
"storybook": "^10.1.0-alpha.
|
|
71
|
+
"storybook": "^10.1.0-alpha.12",
|
|
72
72
|
"svelte": "^5.0.0"
|
|
73
73
|
},
|
|
74
74
|
"publishConfig": {
|
|
75
75
|
"access": "public"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae1l"
|
|
78
78
|
}
|
|
@@ -1,293 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
__export,
|
|
3
|
-
__name
|
|
4
|
-
} from "./chunk-JFJ5UJ7Q.js";
|
|
5
|
-
|
|
6
|
-
// src/entry-preview.ts
|
|
7
|
-
var entry_preview_exports = {};
|
|
8
|
-
__export(entry_preview_exports, {
|
|
9
|
-
applyDecorators: () => decorateStory,
|
|
10
|
-
argTypesEnhancers: () => argTypesEnhancers,
|
|
11
|
-
mount: () => mount2,
|
|
12
|
-
parameters: () => parameters,
|
|
13
|
-
render: () => render,
|
|
14
|
-
renderToCanvas: () => renderToCanvas
|
|
15
|
-
});
|
|
16
|
-
import { enhanceArgTypes } from "storybook/internal/docs-tools";
|
|
17
|
-
|
|
18
|
-
// src/extractArgTypes.ts
|
|
19
|
-
import { logger } from "storybook/internal/client-logger";
|
|
20
|
-
function hasKeyword(keyword, keywords) {
|
|
21
|
-
return keywords ? keywords.find((k) => k.name === keyword) != null : false;
|
|
22
|
-
}
|
|
23
|
-
__name(hasKeyword, "hasKeyword");
|
|
24
|
-
var extractArgTypes = /* @__PURE__ */ __name((component) => {
|
|
25
|
-
try {
|
|
26
|
-
const docgen = component.__docgen;
|
|
27
|
-
if (docgen) {
|
|
28
|
-
return createArgTypes(docgen);
|
|
29
|
-
}
|
|
30
|
-
} catch (err) {
|
|
31
|
-
logger.log(`Error extracting argTypes: ${err}`);
|
|
32
|
-
}
|
|
33
|
-
return {};
|
|
34
|
-
}, "extractArgTypes");
|
|
35
|
-
var createArgTypes = /* @__PURE__ */ __name((docgen) => {
|
|
36
|
-
const results = {};
|
|
37
|
-
if (docgen.data) {
|
|
38
|
-
docgen.data.forEach((item) => {
|
|
39
|
-
results[item.name] = {
|
|
40
|
-
...parseTypeToControl(item.type),
|
|
41
|
-
name: item.name,
|
|
42
|
-
description: item.description || void 0,
|
|
43
|
-
type: {
|
|
44
|
-
required: hasKeyword("required", item.keywords || []),
|
|
45
|
-
name: item.type?.text === "{}" ? "object" : item.type?.text
|
|
46
|
-
},
|
|
47
|
-
table: {
|
|
48
|
-
type: {
|
|
49
|
-
summary: item.type?.text
|
|
50
|
-
},
|
|
51
|
-
defaultValue: {
|
|
52
|
-
summary: item.defaultValue
|
|
53
|
-
},
|
|
54
|
-
category: "properties"
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
if (docgen.events) {
|
|
60
|
-
docgen.events.forEach((item) => {
|
|
61
|
-
results[`event_${item.name}`] = {
|
|
62
|
-
name: item.name,
|
|
63
|
-
action: item.name,
|
|
64
|
-
control: false,
|
|
65
|
-
...item.description ? { description: item.description } : {},
|
|
66
|
-
table: {
|
|
67
|
-
category: "events"
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
if (docgen.slots) {
|
|
73
|
-
docgen.slots.forEach((item) => {
|
|
74
|
-
results[`slot_${item.name}`] = {
|
|
75
|
-
name: item.name,
|
|
76
|
-
control: false,
|
|
77
|
-
description: [item.description, item.params?.map((p) => `\`${p.name}\``).join(" ")].filter((p) => p).join("\n\n"),
|
|
78
|
-
table: {
|
|
79
|
-
category: "slots"
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
return results;
|
|
85
|
-
}, "createArgTypes");
|
|
86
|
-
var parseTypeToControl = /* @__PURE__ */ __name((type) => {
|
|
87
|
-
if (!type) {
|
|
88
|
-
return null;
|
|
89
|
-
}
|
|
90
|
-
if (type.kind === "type") {
|
|
91
|
-
switch (type.type) {
|
|
92
|
-
case "string":
|
|
93
|
-
return { control: { type: "text" } };
|
|
94
|
-
case "any":
|
|
95
|
-
return { control: { type: "object" } };
|
|
96
|
-
default:
|
|
97
|
-
return { control: { type: type.type } };
|
|
98
|
-
}
|
|
99
|
-
} else if (type.kind === "union") {
|
|
100
|
-
if (Array.isArray(type.type) && !type.type.some(
|
|
101
|
-
(t) => t.kind !== "const" || !["string", "number", "null", "undefined"].includes(t.type)
|
|
102
|
-
)) {
|
|
103
|
-
const options = type.type.map((t) => t.value);
|
|
104
|
-
return {
|
|
105
|
-
control: {
|
|
106
|
-
type: "radio"
|
|
107
|
-
},
|
|
108
|
-
options
|
|
109
|
-
};
|
|
110
|
-
}
|
|
111
|
-
} else if (type.kind === "function") {
|
|
112
|
-
return { control: null };
|
|
113
|
-
}
|
|
114
|
-
return null;
|
|
115
|
-
}, "parseTypeToControl");
|
|
116
|
-
|
|
117
|
-
// src/extractComponentDescription.ts
|
|
118
|
-
function extractComponentDescription(component) {
|
|
119
|
-
return component?.__docgen?.description || "";
|
|
120
|
-
}
|
|
121
|
-
__name(extractComponentDescription, "extractComponentDescription");
|
|
122
|
-
|
|
123
|
-
// src/render.ts
|
|
124
|
-
import { RESET_STORY_ARGS } from "storybook/internal/core-events";
|
|
125
|
-
import PreviewRender from "@storybook/svelte/internal/PreviewRender.svelte";
|
|
126
|
-
import { createReactiveProps } from "@storybook/svelte/internal/createReactiveProps";
|
|
127
|
-
import { addons } from "storybook/preview-api";
|
|
128
|
-
import * as svelte from "svelte";
|
|
129
|
-
var storyIdsToRemountFromResetArgsEvent = /* @__PURE__ */ new Set();
|
|
130
|
-
addons.getChannel().on(RESET_STORY_ARGS, ({ storyId }) => {
|
|
131
|
-
storyIdsToRemountFromResetArgsEvent.add(storyId);
|
|
132
|
-
});
|
|
133
|
-
var componentsByDomElement = /* @__PURE__ */ new Map();
|
|
134
|
-
async function renderToCanvas({
|
|
135
|
-
storyFn,
|
|
136
|
-
title,
|
|
137
|
-
name,
|
|
138
|
-
showMain,
|
|
139
|
-
showError,
|
|
140
|
-
storyContext,
|
|
141
|
-
forceRemount
|
|
142
|
-
}, canvasElement) {
|
|
143
|
-
function unmount2(canvasElementToUnmount) {
|
|
144
|
-
const { mountedComponent } = componentsByDomElement.get(canvasElementToUnmount) ?? {};
|
|
145
|
-
if (!mountedComponent) {
|
|
146
|
-
return;
|
|
147
|
-
}
|
|
148
|
-
svelte.unmount(mountedComponent);
|
|
149
|
-
componentsByDomElement.delete(canvasElementToUnmount);
|
|
150
|
-
}
|
|
151
|
-
__name(unmount2, "unmount");
|
|
152
|
-
const existingComponent = componentsByDomElement.get(canvasElement);
|
|
153
|
-
let remount = forceRemount;
|
|
154
|
-
if (storyIdsToRemountFromResetArgsEvent.has(storyContext.id)) {
|
|
155
|
-
remount = true;
|
|
156
|
-
storyIdsToRemountFromResetArgsEvent.delete(storyContext.id);
|
|
157
|
-
}
|
|
158
|
-
if (remount) {
|
|
159
|
-
unmount2(canvasElement);
|
|
160
|
-
}
|
|
161
|
-
if (!existingComponent || remount) {
|
|
162
|
-
const props = createReactiveProps({
|
|
163
|
-
storyFn,
|
|
164
|
-
storyContext,
|
|
165
|
-
name,
|
|
166
|
-
title,
|
|
167
|
-
showError
|
|
168
|
-
});
|
|
169
|
-
const mountedComponent = svelte.mount(PreviewRender, {
|
|
170
|
-
target: canvasElement,
|
|
171
|
-
props
|
|
172
|
-
});
|
|
173
|
-
componentsByDomElement.set(canvasElement, { mountedComponent, props });
|
|
174
|
-
await svelte.tick();
|
|
175
|
-
} else {
|
|
176
|
-
Object.assign(existingComponent.props, {
|
|
177
|
-
storyFn,
|
|
178
|
-
storyContext,
|
|
179
|
-
name,
|
|
180
|
-
title,
|
|
181
|
-
showError
|
|
182
|
-
});
|
|
183
|
-
await svelte.tick();
|
|
184
|
-
}
|
|
185
|
-
showMain();
|
|
186
|
-
return () => {
|
|
187
|
-
unmount2(canvasElement);
|
|
188
|
-
};
|
|
189
|
-
}
|
|
190
|
-
__name(renderToCanvas, "renderToCanvas");
|
|
191
|
-
var render = /* @__PURE__ */ __name((args, context) => {
|
|
192
|
-
const { id, component: Component } = context;
|
|
193
|
-
if (!Component) {
|
|
194
|
-
throw new Error(
|
|
195
|
-
`Unable to render story ${id} as the component annotation is missing from the default export`
|
|
196
|
-
);
|
|
197
|
-
}
|
|
198
|
-
return { Component, props: args };
|
|
199
|
-
}, "render");
|
|
200
|
-
|
|
201
|
-
// src/decorators.ts
|
|
202
|
-
import DecoratorHandler from "@storybook/svelte/internal/DecoratorHandler.svelte";
|
|
203
|
-
import { sanitizeStoryContextUpdate } from "storybook/preview-api";
|
|
204
|
-
function unWrap(obj) {
|
|
205
|
-
return obj && typeof obj === "object" && "default" in obj ? obj.default : obj;
|
|
206
|
-
}
|
|
207
|
-
__name(unWrap, "unWrap");
|
|
208
|
-
function prepareStory(context, rawStory, rawInnerStory) {
|
|
209
|
-
const story = unWrap(rawStory);
|
|
210
|
-
const innerStory = rawInnerStory && unWrap(rawInnerStory);
|
|
211
|
-
let preparedStory;
|
|
212
|
-
if (!story || Object.keys(story).length === 0) {
|
|
213
|
-
preparedStory = {
|
|
214
|
-
Component: context.component
|
|
215
|
-
};
|
|
216
|
-
} else if (story.Component) {
|
|
217
|
-
preparedStory = story;
|
|
218
|
-
} else {
|
|
219
|
-
preparedStory = {
|
|
220
|
-
Component: story
|
|
221
|
-
};
|
|
222
|
-
}
|
|
223
|
-
if (innerStory) {
|
|
224
|
-
return {
|
|
225
|
-
Component: DecoratorHandler,
|
|
226
|
-
props: {
|
|
227
|
-
// inner stories will already have been prepared, keep as is
|
|
228
|
-
...innerStory,
|
|
229
|
-
decorator: preparedStory
|
|
230
|
-
}
|
|
231
|
-
};
|
|
232
|
-
}
|
|
233
|
-
return { ...preparedStory, argTypes: context.argTypes };
|
|
234
|
-
}
|
|
235
|
-
__name(prepareStory, "prepareStory");
|
|
236
|
-
function decorateStory(storyFn, decorators) {
|
|
237
|
-
return decorators.reduce(
|
|
238
|
-
(decorated, decorator) => (context) => {
|
|
239
|
-
let story;
|
|
240
|
-
const decoratedStory = decorator((update) => {
|
|
241
|
-
story = decorated({
|
|
242
|
-
...context,
|
|
243
|
-
...sanitizeStoryContextUpdate(update)
|
|
244
|
-
});
|
|
245
|
-
return story;
|
|
246
|
-
}, context);
|
|
247
|
-
if (!story) {
|
|
248
|
-
story = decorated(context);
|
|
249
|
-
}
|
|
250
|
-
if (decoratedStory === story) {
|
|
251
|
-
return story;
|
|
252
|
-
}
|
|
253
|
-
return prepareStory(context, decoratedStory, story);
|
|
254
|
-
},
|
|
255
|
-
(context) => prepareStory(context, storyFn(context))
|
|
256
|
-
);
|
|
257
|
-
}
|
|
258
|
-
__name(decorateStory, "decorateStory");
|
|
259
|
-
|
|
260
|
-
// src/mount.ts
|
|
261
|
-
var mount2 = /* @__PURE__ */ __name((context) => {
|
|
262
|
-
return async (Component, options) => {
|
|
263
|
-
if (Component) {
|
|
264
|
-
context.originalStoryFn = () => ({
|
|
265
|
-
Component,
|
|
266
|
-
props: options && "props" in options ? options?.props : options
|
|
267
|
-
});
|
|
268
|
-
}
|
|
269
|
-
await context.renderToCanvas();
|
|
270
|
-
return context.canvas;
|
|
271
|
-
};
|
|
272
|
-
}, "mount");
|
|
273
|
-
|
|
274
|
-
// src/entry-preview.ts
|
|
275
|
-
var parameters = {
|
|
276
|
-
renderer: "svelte",
|
|
277
|
-
docs: {
|
|
278
|
-
story: { inline: true },
|
|
279
|
-
extractArgTypes,
|
|
280
|
-
extractComponentDescription
|
|
281
|
-
}
|
|
282
|
-
};
|
|
283
|
-
var argTypesEnhancers = [enhanceArgTypes];
|
|
284
|
-
|
|
285
|
-
export {
|
|
286
|
-
renderToCanvas,
|
|
287
|
-
render,
|
|
288
|
-
decorateStory,
|
|
289
|
-
mount2 as mount,
|
|
290
|
-
parameters,
|
|
291
|
-
argTypesEnhancers,
|
|
292
|
-
entry_preview_exports
|
|
293
|
-
};
|
|
@@ -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
|
-
};
|