@storybook/svelte 9.2.0-alpha.3 → 10.0.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/README.md CHANGED
@@ -1 +1,5 @@
1
1
  # Storybook Svelte renderer
2
+
3
+ Develop, document, and test UI components in isolation.
4
+
5
+ Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).
@@ -0,0 +1,291 @@
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
+ 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
+ } else {
175
+ Object.assign(existingComponent.props, {
176
+ storyFn,
177
+ storyContext,
178
+ name,
179
+ title,
180
+ showError
181
+ });
182
+ }
183
+ showMain();
184
+ return () => {
185
+ unmount2(canvasElement);
186
+ };
187
+ }
188
+ __name(renderToCanvas, "renderToCanvas");
189
+ var render = /* @__PURE__ */ __name((args, context) => {
190
+ const { id, component: Component } = context;
191
+ if (!Component) {
192
+ throw new Error(
193
+ `Unable to render story ${id} as the component annotation is missing from the default export`
194
+ );
195
+ }
196
+ return { Component, props: args };
197
+ }, "render");
198
+
199
+ // src/decorators.ts
200
+ import DecoratorHandler from "@storybook/svelte/internal/DecoratorHandler.svelte";
201
+ import { sanitizeStoryContextUpdate } from "storybook/preview-api";
202
+ function unWrap(obj) {
203
+ return obj && typeof obj === "object" && "default" in obj ? obj.default : obj;
204
+ }
205
+ __name(unWrap, "unWrap");
206
+ function prepareStory(context, rawStory, rawInnerStory) {
207
+ const story = unWrap(rawStory);
208
+ const innerStory = rawInnerStory && unWrap(rawInnerStory);
209
+ let preparedStory;
210
+ if (!story || Object.keys(story).length === 0) {
211
+ preparedStory = {
212
+ Component: context.component
213
+ };
214
+ } else if (story.Component) {
215
+ preparedStory = story;
216
+ } else {
217
+ preparedStory = {
218
+ Component: story
219
+ };
220
+ }
221
+ if (innerStory) {
222
+ return {
223
+ Component: DecoratorHandler,
224
+ props: {
225
+ // inner stories will already have been prepared, keep as is
226
+ ...innerStory,
227
+ decorator: preparedStory
228
+ }
229
+ };
230
+ }
231
+ return { ...preparedStory, argTypes: context.argTypes };
232
+ }
233
+ __name(prepareStory, "prepareStory");
234
+ function decorateStory(storyFn, decorators) {
235
+ return decorators.reduce(
236
+ (decorated, decorator) => (context) => {
237
+ let story;
238
+ const decoratedStory = decorator((update) => {
239
+ story = decorated({
240
+ ...context,
241
+ ...sanitizeStoryContextUpdate(update)
242
+ });
243
+ return story;
244
+ }, context);
245
+ if (!story) {
246
+ story = decorated(context);
247
+ }
248
+ if (decoratedStory === story) {
249
+ return story;
250
+ }
251
+ return prepareStory(context, decoratedStory, story);
252
+ },
253
+ (context) => prepareStory(context, storyFn(context))
254
+ );
255
+ }
256
+ __name(decorateStory, "decorateStory");
257
+
258
+ // src/mount.ts
259
+ var mount2 = /* @__PURE__ */ __name((context) => {
260
+ return async (Component, options) => {
261
+ if (Component) {
262
+ context.originalStoryFn = () => ({
263
+ Component,
264
+ props: options && "props" in options ? options?.props : options
265
+ });
266
+ }
267
+ await context.renderToCanvas();
268
+ return context.canvas;
269
+ };
270
+ }, "mount");
271
+
272
+ // src/entry-preview.ts
273
+ var parameters = {
274
+ renderer: "svelte",
275
+ docs: {
276
+ story: { inline: true },
277
+ extractArgTypes,
278
+ extractComponentDescription
279
+ }
280
+ };
281
+ var argTypesEnhancers = [enhanceArgTypes];
282
+
283
+ export {
284
+ renderToCanvas,
285
+ render,
286
+ decorateStory,
287
+ mount2 as mount,
288
+ parameters,
289
+ argTypesEnhancers,
290
+ entry_preview_exports
291
+ };
@@ -0,0 +1,11 @@
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
+ };
@@ -1,5 +1,124 @@
1
- "use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_docs_exports={};__export(entry_preview_docs_exports,{decorators:()=>decorators});module.exports=__toCommonJS(entry_preview_docs_exports);var import_client_logger=require("storybook/internal/client-logger"),import_docs_tools=require("storybook/internal/docs-tools"),import_preview_api=require("storybook/preview-api"),skipSourceRender=context=>{let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return(context?.tags??[]).some(tag=>tag.startsWith("svelte-csf"))?!0:sourceParams?.type===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===import_docs_tools.SourceType.CODE};function toSvelteProperty(key,value,argTypes){if(value==null)return null;let argType=argTypes[key];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)}}`}function getComponentName(component){if(component==null)return null;let{__docgen={}}=component,{name}=__docgen;return name?(name.endsWith(".svelte")&&(name=name.substring(0,name.length-7)),name):component.name}function generateSvelteSource(component,args,argTypes,slotProperty){let name=getComponentName(component);if(!name)return null;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}
2
- ${propsArray.join(`
3
- `)}`:`<${name} ${props}`;return slotValue?`${srcStart}>
1
+ import {
2
+ __name
3
+ } from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
4
+
5
+ // src/docs/sourceDecorator.ts
6
+ import { deprecate } from "storybook/internal/client-logger";
7
+ import { SourceType } from "storybook/internal/docs-tools";
8
+ import { emitTransformCode, useEffect, useRef } from "storybook/preview-api";
9
+ var skipSourceRender = /* @__PURE__ */ __name((context) => {
10
+ const sourceParams = context?.parameters.docs?.source;
11
+ const isArgsStory = context?.parameters.__isArgsStory;
12
+ if ((context?.tags ?? []).some((tag) => tag.startsWith("svelte-csf"))) {
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");
20
+ function toSvelteProperty(key, value, argTypes) {
21
+ if (value === void 0 || value === null) {
22
+ return null;
23
+ }
24
+ const argType = argTypes[key];
25
+ if (argType && argType.defaultValue === value) {
26
+ return null;
27
+ }
28
+ if (argType && argType.action) {
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)}}`;
41
+ }
42
+ __name(toSvelteProperty, "toSvelteProperty");
43
+ function getComponentName(component) {
44
+ if (component == null) {
45
+ return null;
46
+ }
47
+ const { __docgen = {} } = component;
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;
56
+ }
57
+ __name(getComponentName, "getComponentName");
58
+ function generateSvelteSource(component, args, argTypes, slotProperty) {
59
+ const name = getComponentName(component);
60
+ if (!name) {
61
+ return null;
62
+ }
63
+ const propsArray = Object.entries(args).filter(([k]) => k !== slotProperty).map(([k, v]) => toSvelteProperty(k, v, argTypes)).filter((p) => p);
64
+ const props = propsArray.join(" ");
65
+ const multiline = props.length > 50;
66
+ const slotValue = slotProperty ? args[slotProperty] : null;
67
+ const srcStart = multiline ? `<${name}
68
+ ${propsArray.join("\n ")}` : `<${name} ${props}`;
69
+ if (slotValue) {
70
+ return `${srcStart}>
4
71
  ${slotValue}
5
- </${name}>`:`${srcStart}/>`}function getWrapperProperties(component){let{__docgen}=component||{};return __docgen?__docgen.keywords?.find(kw=>kw.name==="wrapper")?{wrapper:!0,slotProperty:__docgen.data?.find(prop=>prop.keywords.find(kw=>kw.name==="slot"))?.name}:{wrapper:!1}:{wrapper:!1}}var sourceDecorator=(storyFn,context)=>{let skip=skipSourceRender(context),story=storyFn(),source=(0,import_preview_api.useRef)(void 0);return(0,import_preview_api.useEffect)(()=>{if(skip)return;let{parameters={},args={},component:ctxComponent}=context||{},{Component:component}=context.originalStoryFn(args,context),{wrapper,slotProperty}=getWrapperProperties(component);wrapper&&(parameters.component&&(0,import_client_logger.deprecate)("parameters.component is deprecated. Using context.component instead."),component=ctxComponent);let generated=generateSvelteSource(component,args,context?.argTypes,slotProperty);generated&&source.current!==generated&&((0,import_preview_api.emitTransformCode)(generated,context),source.current=generated)}),story};var decorators=[sourceDecorator];0&&(module.exports={decorators});
72
+ </${name}>`;
73
+ }
74
+ return `${srcStart}/>`;
75
+ }
76
+ __name(generateSvelteSource, "generateSvelteSource");
77
+ function getWrapperProperties(component) {
78
+ const { __docgen } = component || {};
79
+ if (!__docgen) {
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(
86
+ (prop) => prop.keywords.find((kw) => kw.name === "slot")
87
+ );
88
+ return { wrapper: true, slotProperty: slotProp?.name };
89
+ }
90
+ __name(getWrapperProperties, "getWrapperProperties");
91
+ var sourceDecorator = /* @__PURE__ */ __name((storyFn, context) => {
92
+ const skip = skipSourceRender(context);
93
+ const story = storyFn();
94
+ const source = useRef(void 0);
95
+ useEffect(() => {
96
+ if (skip) {
97
+ return;
98
+ }
99
+ const { parameters = {}, args = {}, component: ctxComponent } = context || {};
100
+ let { Component: component } = context.originalStoryFn(
101
+ args,
102
+ context
103
+ );
104
+ const { wrapper, slotProperty } = getWrapperProperties(component);
105
+ if (wrapper) {
106
+ if (parameters.component) {
107
+ deprecate("parameters.component is deprecated. Using context.component instead.");
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");
119
+
120
+ // src/entry-preview-docs.ts
121
+ var decorators = [sourceDecorator];
122
+ export {
123
+ decorators
124
+ };
@@ -1,3 +1,17 @@
1
- "use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,argTypesEnhancers:()=>argTypesEnhancers,mount:()=>mount2,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(entry_preview_exports);var import_docs_tools=require("storybook/internal/docs-tools");var import_client_logger=require("storybook/internal/client-logger");function hasKeyword(keyword,keywords){return keywords?keywords.find(k=>k.name===keyword)!=null:!1}var extractArgTypes=component=>{try{let docgen=component.__docgen;if(docgen)return createArgTypes(docgen)}catch(err){import_client_logger.logger.log(`Error extracting argTypes: ${err}`)}return{}},createArgTypes=docgen=>{let results={};return docgen.data&&docgen.data.forEach(item=>{results[item.name]={...parseTypeToControl(item.type),name:item.name,description:item.description||void 0,type:{required:hasKeyword("required",item.keywords||[]),name:item.type?.text==="{}"?"object":item.type?.text},table:{type:{summary:item.type?.text},defaultValue:{summary:item.defaultValue},category:"properties"}}}),docgen.events&&docgen.events.forEach(item=>{results[`event_${item.name}`]={name:item.name,action:item.name,control:!1,...item.description?{description:item.description}:{},table:{category:"events"}}}),docgen.slots&&docgen.slots.forEach(item=>{results[`slot_${item.name}`]={name:item.name,control:!1,description:[item.description,item.params?.map(p=>`\`${p.name}\``).join(" ")].filter(p=>p).join(`
2
-
3
- `),table:{category:"slots"}}}),results},parseTypeToControl=type=>{if(!type)return null;if(type.kind==="type")switch(type.type){case"string":return{control:{type:"text"}};case"any":return{control:{type:"object"}};default:return{control:{type:type.type}}}else if(type.kind==="union"){if(Array.isArray(type.type)&&!type.type.some(t=>t.kind!=="const"||!["string","number","null","undefined"].includes(t.type))){let options=type.type.map(t=>t.value);return{control:{type:"radio"},options}}}else if(type.kind==="function")return{control:null};return null};function extractComponentDescription(component){return component?.__docgen?.description||""}var import_core_events=require("storybook/internal/core-events"),import_PreviewRender=__toESM(require("@storybook/svelte/internal/PreviewRender.svelte")),import_createReactiveProps=require("@storybook/svelte/internal/createReactiveProps"),import_preview_api=require("storybook/preview-api"),svelte=__toESM(require("svelte")),storyIdsToRemountFromResetArgsEvent=new Set;import_preview_api.addons.getChannel().on(import_core_events.RESET_STORY_ARGS,({storyId})=>{storyIdsToRemountFromResetArgsEvent.add(storyId)});var componentsByDomElement=new Map;function renderToCanvas({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){let{mountedComponent}=componentsByDomElement.get(canvasElementToUnmount)??{};mountedComponent&&(svelte.unmount(mountedComponent),componentsByDomElement.delete(canvasElementToUnmount))}let existingComponent=componentsByDomElement.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let props=(0,import_createReactiveProps.createReactiveProps)({storyFn,storyContext,name,title,showError}),mountedComponent=svelte.mount(import_PreviewRender.default,{target:canvasElement,props});componentsByDomElement.set(canvasElement,{mountedComponent,props})}else Object.assign(existingComponent.props,{storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement)}}var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return{Component,props:args}};var import_DecoratorHandler=__toESM(require("@storybook/svelte/internal/DecoratorHandler.svelte")),import_preview_api2=require("storybook/preview-api");function unWrap(obj){return obj&&typeof obj=="object"&&"default"in obj?obj.default:obj}function prepareStory(context,rawStory,rawInnerStory){let story=unWrap(rawStory),innerStory=rawInnerStory&&unWrap(rawInnerStory),preparedStory;return!story||Object.keys(story).length===0?preparedStory={Component:context.component}:story.Component?preparedStory=story:preparedStory={Component:story},innerStory?{Component:import_DecoratorHandler.default,props:{...innerStory,decorator:preparedStory}}:{...preparedStory,argTypes:context.argTypes}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...(0,import_preview_api2.sanitizeStoryContextUpdate)(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepareStory(context,decoratedStory,story)},context=>prepareStory(context,storyFn(context)))}var mount2=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>({Component,props:options&&"props"in options?options?.props:options})),await context.renderToCanvas(),context.canvas);var parameters={renderer:"svelte",docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},argTypesEnhancers=[import_docs_tools.enhanceArgTypes];0&&(module.exports={applyDecorators,argTypesEnhancers,mount,parameters,render,renderToCanvas});
1
+ import {
2
+ argTypesEnhancers,
3
+ decorateStory,
4
+ mount,
5
+ parameters,
6
+ render,
7
+ renderToCanvas
8
+ } from "./_browser-chunks/chunk-6F5NZ26N.js";
9
+ import "./_browser-chunks/chunk-JFJ5UJ7Q.js";
10
+ export {
11
+ decorateStory as applyDecorators,
12
+ argTypesEnhancers,
13
+ mount,
14
+ parameters,
15
+ render,
16
+ renderToCanvas
17
+ };
package/dist/index.d.ts CHANGED
@@ -1,10 +1,32 @@
1
- import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations, StoryAnnotationsOrFn, Store_CSFExports, StoriesWithPartialProps, ComposedStoryFn } from 'storybook/internal/types';
1
+ import { WebRenderer, Canvas, Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations, StoryAnnotationsOrFn, ComposedStoryFn, Store_CSFExports, StoriesWithPartialProps } from 'storybook/internal/types';
2
2
  export { ArgTypes, Args, Parameters, StrictArgs } from 'storybook/internal/types';
3
- import { SvelteComponent, ComponentProps, ComponentType } from 'svelte';
3
+ import * as svelte from 'svelte';
4
+ import { SvelteComponent, ComponentConstructorOptions, ComponentEvents, ComponentProps, ComponentType as ComponentType$1 } from 'svelte';
4
5
  import { Simplify, SetOptional } from 'type-fest';
5
- import { a as Svelte5ComponentType, S as SvelteRenderer } from './types-b7d0039b.js';
6
6
  import PreviewRender from '@storybook/svelte/internal/PreviewRender.svelte';
7
7
 
8
+ type ComponentType<Props extends Record<string, any> = any, Events extends Record<string, any> = any> = new (options: ComponentConstructorOptions<Props>) => {
9
+ [P in keyof SvelteComponent<Props> as P extends `$$${string}` ? never : P]: SvelteComponent<Props, Events>[P];
10
+ };
11
+ type Svelte5ComponentType<Props extends Record<string, any> = any> = typeof svelte extends {
12
+ mount: any;
13
+ } ? svelte.Component<Props, any, any> : never;
14
+ interface SvelteRenderer<C extends SvelteComponent | Svelte5ComponentType = SvelteComponent> extends WebRenderer {
15
+ component: ComponentType<this['T'] extends Record<string, any> ? this['T'] : any> | Svelte5ComponentType<this['T'] extends Record<string, any> ? this['T'] : any>;
16
+ storyResult: this['T'] extends Record<string, any> ? SvelteStoryResult<this['T'], C extends SvelteComponent ? ComponentEvents<C> : {}> : SvelteStoryResult;
17
+ mount: (Component?: ComponentType | Svelte5ComponentType, options?: Record<string, any> & {
18
+ props: Record<string, any>;
19
+ }) => Promise<Canvas>;
20
+ }
21
+ interface SvelteStoryResult<Props extends Record<string, any> = any, Events extends Record<string, any> = any> {
22
+ Component?: ComponentType<Props> | Svelte5ComponentType<Props>;
23
+ on?: Record<string, any> extends Events ? Record<string, (event: CustomEvent) => void> : {
24
+ [K in keyof Events as string extends K ? never : K]?: (event: Events[K]) => void;
25
+ };
26
+ props?: Props;
27
+ decorator?: ComponentType<Props> | Svelte5ComponentType<Props>;
28
+ }
29
+
8
30
  /**
9
31
  * Metadata to configure the stories for a component.
10
32
  *
@@ -26,7 +48,7 @@ type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
26
48
  render?: ArgsStoryFn<SvelteRenderer, any>;
27
49
  component: infer Comp;
28
50
  args?: infer DefaultArgs;
29
- } ? Simplify<ComponentProps<Comp extends ComponentType<infer Component> ? Component : Comp extends Svelte5ComponentType ? Comp : never> & ArgsFromMeta<SvelteRenderer, MetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<SvelteRenderer<Comp extends ComponentType<infer Component> ? Component : Comp extends Svelte5ComponentType ? Comp : never>, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>> : never : MetaOrCmpOrArgs extends SvelteComponent | Svelte5ComponentType ? StoryAnnotations<SvelteRenderer<MetaOrCmpOrArgs>, ComponentProps<MetaOrCmpOrArgs>> : StoryAnnotations<SvelteRenderer, MetaOrCmpOrArgs>;
51
+ } ? Simplify<ComponentProps<Comp extends ComponentType$1<infer Component> ? Component : Comp extends Svelte5ComponentType ? Comp : never> & ArgsFromMeta<SvelteRenderer, MetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<SvelteRenderer<Comp extends ComponentType$1<infer Component> ? Component : Comp extends Svelte5ComponentType ? Comp : never>, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>> : never : MetaOrCmpOrArgs extends SvelteComponent | Svelte5ComponentType ? StoryAnnotations<SvelteRenderer<MetaOrCmpOrArgs>, ComponentProps<MetaOrCmpOrArgs>> : StoryAnnotations<SvelteRenderer, MetaOrCmpOrArgs>;
30
52
 
31
53
  type Decorator<TArgs = StrictArgs> = DecoratorFunction<SvelteRenderer, TArgs>;
32
54
  type Loader<TArgs = StrictArgs> = LoaderFunction<SvelteRenderer, TArgs>;
@@ -119,4 +141,4 @@ declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotations
119
141
  */
120
142
  declare function composeStories<TModule extends Store_CSFExports<SvelteRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<SvelteRenderer>): Omit<MapToComposed<StoriesWithPartialProps<SvelteRenderer, TModule>>, keyof Store_CSFExports>;
121
143
 
122
- export { Decorator, INTERNAL_DEFAULT_PROJECT_ANNOTATIONS, Loader, Meta, Preview, StoryContext, StoryFn, StoryObj, SvelteRenderer, composeStories, composeStory, setProjectAnnotations };
144
+ export { type Decorator, INTERNAL_DEFAULT_PROJECT_ANNOTATIONS, type Loader, type Meta, type Preview, type StoryContext, type StoryFn, type StoryObj, type SvelteRenderer, composeStories, composeStory, setProjectAnnotations };
package/dist/index.js CHANGED
@@ -1,3 +1,79 @@
1
- "use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var index_exports={};__export(index_exports,{INTERNAL_DEFAULT_PROJECT_ANNOTATIONS:()=>INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,composeStories:()=>composeStories,composeStory:()=>composeStory,setProjectAnnotations:()=>setProjectAnnotations});module.exports=__toCommonJS(index_exports);globalThis.STORYBOOK_ENV="svelte";var import_PreviewRender2=__toESM(require("@storybook/svelte/internal/PreviewRender.svelte")),import_createReactiveProps2=require("@storybook/svelte/internal/createReactiveProps"),import_preview_api3=require("storybook/preview-api");var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,argTypesEnhancers:()=>argTypesEnhancers,mount:()=>mount2,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var import_docs_tools=require("storybook/internal/docs-tools");var import_client_logger=require("storybook/internal/client-logger");function hasKeyword(keyword,keywords){return keywords?keywords.find(k=>k.name===keyword)!=null:!1}var extractArgTypes=component=>{try{let docgen=component.__docgen;if(docgen)return createArgTypes(docgen)}catch(err){import_client_logger.logger.log(`Error extracting argTypes: ${err}`)}return{}},createArgTypes=docgen=>{let results={};return docgen.data&&docgen.data.forEach(item=>{results[item.name]={...parseTypeToControl(item.type),name:item.name,description:item.description||void 0,type:{required:hasKeyword("required",item.keywords||[]),name:item.type?.text==="{}"?"object":item.type?.text},table:{type:{summary:item.type?.text},defaultValue:{summary:item.defaultValue},category:"properties"}}}),docgen.events&&docgen.events.forEach(item=>{results[`event_${item.name}`]={name:item.name,action:item.name,control:!1,...item.description?{description:item.description}:{},table:{category:"events"}}}),docgen.slots&&docgen.slots.forEach(item=>{results[`slot_${item.name}`]={name:item.name,control:!1,description:[item.description,item.params?.map(p=>`\`${p.name}\``).join(" ")].filter(p=>p).join(`
1
+ import {
2
+ entry_preview_exports,
3
+ renderToCanvas
4
+ } from "./_browser-chunks/chunk-6F5NZ26N.js";
5
+ import {
6
+ __name
7
+ } from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
2
8
 
3
- `),table:{category:"slots"}}}),results},parseTypeToControl=type=>{if(!type)return null;if(type.kind==="type")switch(type.type){case"string":return{control:{type:"text"}};case"any":return{control:{type:"object"}};default:return{control:{type:type.type}}}else if(type.kind==="union"){if(Array.isArray(type.type)&&!type.type.some(t=>t.kind!=="const"||!["string","number","null","undefined"].includes(t.type))){let options=type.type.map(t=>t.value);return{control:{type:"radio"},options}}}else if(type.kind==="function")return{control:null};return null};function extractComponentDescription(component){return component?.__docgen?.description||""}var import_core_events=require("storybook/internal/core-events"),import_PreviewRender=__toESM(require("@storybook/svelte/internal/PreviewRender.svelte")),import_createReactiveProps=require("@storybook/svelte/internal/createReactiveProps"),import_preview_api=require("storybook/preview-api"),svelte=__toESM(require("svelte")),storyIdsToRemountFromResetArgsEvent=new Set;import_preview_api.addons.getChannel().on(import_core_events.RESET_STORY_ARGS,({storyId})=>{storyIdsToRemountFromResetArgsEvent.add(storyId)});var componentsByDomElement=new Map;function renderToCanvas({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){let{mountedComponent}=componentsByDomElement.get(canvasElementToUnmount)??{};mountedComponent&&(svelte.unmount(mountedComponent),componentsByDomElement.delete(canvasElementToUnmount))}let existingComponent=componentsByDomElement.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let props=(0,import_createReactiveProps.createReactiveProps)({storyFn,storyContext,name,title,showError}),mountedComponent=svelte.mount(import_PreviewRender.default,{target:canvasElement,props});componentsByDomElement.set(canvasElement,{mountedComponent,props})}else Object.assign(existingComponent.props,{storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement)}}var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return{Component,props:args}};var import_DecoratorHandler=__toESM(require("@storybook/svelte/internal/DecoratorHandler.svelte")),import_preview_api2=require("storybook/preview-api");function unWrap(obj){return obj&&typeof obj=="object"&&"default"in obj?obj.default:obj}function prepareStory(context,rawStory,rawInnerStory){let story=unWrap(rawStory),innerStory=rawInnerStory&&unWrap(rawInnerStory),preparedStory;return!story||Object.keys(story).length===0?preparedStory={Component:context.component}:story.Component?preparedStory=story:preparedStory={Component:story},innerStory?{Component:import_DecoratorHandler.default,props:{...innerStory,decorator:preparedStory}}:{...preparedStory,argTypes:context.argTypes}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...(0,import_preview_api2.sanitizeStoryContextUpdate)(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepareStory(context,decoratedStory,story)},context=>prepareStory(context,storyFn(context)))}var mount2=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>({Component,props:options&&"props"in options?options?.props:options})),await context.renderToCanvas(),context.canvas);var parameters={renderer:"svelte",docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},argTypesEnhancers=[import_docs_tools.enhanceArgTypes];function setProjectAnnotations(projectAnnotations){return(0,import_preview_api3.setDefaultProjectAnnotations)(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS),(0,import_preview_api3.setProjectAnnotations)(projectAnnotations)}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS={...entry_preview_exports,renderToCanvas:(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)return renderToCanvas(renderContext,canvasElement);let{storyFn,storyContext:{testingLibraryRender:render2}}=renderContext,{Component,props}=storyFn(),{unmount:unmount2}=render2(Component,{props,target:canvasElement});return unmount2}};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){let composedStory=(0,import_preview_api3.composeStory)(story,componentAnnotations,projectAnnotations,globalThis.globalProjectAnnotations??INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,exportsName),props=(0,import_createReactiveProps2.createReactiveProps)({storyFn:composedStory,storyContext:{...composedStory},name:composedStory.storyName,title:composedStory.id,showError:()=>{}}),renderable={Component:import_PreviewRender2.default,props};return Object.assign(renderable,composedStory),renderable}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api3.composeStories)(csfExports,projectAnnotations,composeStory)}0&&(module.exports={INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,composeStories,composeStory,setProjectAnnotations});
9
+ // src/globals.ts
10
+ globalThis.STORYBOOK_ENV = "svelte";
11
+
12
+ // src/portable-stories.ts
13
+ import PreviewRender from "@storybook/svelte/internal/PreviewRender.svelte";
14
+ import { createReactiveProps } from "@storybook/svelte/internal/createReactiveProps";
15
+ import {
16
+ composeStories as originalComposeStories,
17
+ composeStory as originalComposeStory,
18
+ setProjectAnnotations as originalSetProjectAnnotations,
19
+ setDefaultProjectAnnotations
20
+ } from "storybook/preview-api";
21
+ function setProjectAnnotations(projectAnnotations) {
22
+ setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS);
23
+ return originalSetProjectAnnotations(
24
+ projectAnnotations
25
+ );
26
+ }
27
+ __name(setProjectAnnotations, "setProjectAnnotations");
28
+ var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS = {
29
+ ...entry_preview_exports,
30
+ /** @deprecated */
31
+ renderToCanvas: /* @__PURE__ */ __name((renderContext, canvasElement) => {
32
+ if (renderContext.storyContext.testingLibraryRender == null) {
33
+ return renderToCanvas(renderContext, canvasElement);
34
+ }
35
+ const {
36
+ storyFn,
37
+ storyContext: { testingLibraryRender: render }
38
+ } = renderContext;
39
+ const { Component, props } = storyFn();
40
+ const { unmount } = render(Component, { props, target: canvasElement });
41
+ return unmount;
42
+ }, "renderToCanvas")
43
+ };
44
+ function composeStory(story, componentAnnotations, projectAnnotations, exportsName) {
45
+ const composedStory = originalComposeStory(
46
+ story,
47
+ // @ts-expect-error Fix this later: Type 'Partial<{ [x: string]: any; }>' is not assignable to type 'Partial<Simplify<TArgs, {}>>'
48
+ componentAnnotations,
49
+ projectAnnotations,
50
+ globalThis.globalProjectAnnotations ?? INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
51
+ exportsName
52
+ );
53
+ const props = createReactiveProps({
54
+ storyFn: composedStory,
55
+ storyContext: { ...composedStory },
56
+ name: composedStory.storyName,
57
+ title: composedStory.id,
58
+ showError: /* @__PURE__ */ __name(() => {
59
+ }, "showError")
60
+ });
61
+ const renderable = {
62
+ Component: PreviewRender,
63
+ props
64
+ };
65
+ Object.assign(renderable, composedStory);
66
+ return renderable;
67
+ }
68
+ __name(composeStory, "composeStory");
69
+ function composeStories(csfExports, projectAnnotations) {
70
+ const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
71
+ return composedStories;
72
+ }
73
+ __name(composeStories, "composeStories");
74
+ export {
75
+ INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
76
+ composeStories,
77
+ composeStory,
78
+ setProjectAnnotations
79
+ };
@@ -1 +1,7 @@
1
- "use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var playwright_exports={};__export(playwright_exports,{createTest:()=>import_preview_api.createPlaywrightTest});module.exports=__toCommonJS(playwright_exports);var import_preview_api=require("storybook/preview-api");0&&(module.exports={createTest});
1
+ import "./_browser-chunks/chunk-JFJ5UJ7Q.js";
2
+
3
+ // src/playwright.ts
4
+ import { createPlaywrightTest } from "storybook/preview-api";
5
+ export {
6
+ createPlaywrightTest as createTest
7
+ };
package/dist/preset.js CHANGED
@@ -1 +1,26 @@
1
- "use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{previewAnnotations:()=>previewAnnotations});module.exports=__toCommonJS(preset_exports);var import_node_path=require("path"),previewAnnotations=async(input=[],options)=>{let docsEnabled=Object.keys(await options.presets.apply("docs",{},options)).length>0;return[].concat(input).concat([(0,import_node_path.join)(__dirname,"entry-preview.mjs")]).concat(docsEnabled?[(0,import_node_path.join)(__dirname,"entry-preview-docs.mjs")]:[])};0&&(module.exports={previewAnnotations});
1
+ import CJS_COMPAT_NODE_URL_1cof8tuzahu from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_1cof8tuzahu from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_1cof8tuzahu from "node:module";
4
+
5
+ var __filename = CJS_COMPAT_NODE_URL_1cof8tuzahu.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_1cof8tuzahu.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_1cof8tuzahu.createRequire(import.meta.url);
8
+
9
+ // ------------------------------------------------------------
10
+ // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
+ // ------------------------------------------------------------
12
+ var __defProp = Object.defineProperty;
13
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
14
+
15
+ // src/preset.ts
16
+ import { fileURLToPath } from "node:url";
17
+ var previewAnnotations = /* @__PURE__ */ __name(async (input = [], options) => {
18
+ const docsEnabled = Object.keys(await options.presets.apply("docs", {}, options)).length > 0;
19
+ const result = [];
20
+ return result.concat(input).concat([fileURLToPath(import.meta.resolve("@storybook/svelte/entry-preview"))]).concat(
21
+ docsEnabled ? [fileURLToPath(import.meta.resolve("@storybook/svelte/entry-preview-docs"))] : []
22
+ );
23
+ }, "previewAnnotations");
24
+ export {
25
+ previewAnnotations
26
+ };
package/package.json CHANGED
@@ -1,9 +1,12 @@
1
1
  {
2
2
  "name": "@storybook/svelte",
3
- "version": "9.2.0-alpha.3",
4
- "description": "Storybook Svelte renderer",
3
+ "version": "10.0.0-beta.0",
4
+ "description": "Storybook Svelte renderer: Develop, document, and test UI components in isolation.",
5
5
  "keywords": [
6
- "storybook"
6
+ "storybook",
7
+ "storybook-renderer",
8
+ "svelte",
9
+ "components"
7
10
  ],
8
11
  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/renderers/svelte",
9
12
  "bugs": {
@@ -19,31 +22,28 @@
19
22
  "url": "https://opencollective.com/storybook"
20
23
  },
21
24
  "license": "MIT",
25
+ "type": "module",
22
26
  "exports": {
23
27
  ".": {
24
28
  "types": "./dist/index.d.ts",
25
- "import": "./dist/index.mjs",
26
- "require": "./dist/index.js"
29
+ "default": "./dist/index.js"
27
30
  },
31
+ "./entry-preview": "./dist/entry-preview.js",
32
+ "./entry-preview-docs": "./dist/entry-preview-docs.js",
28
33
  "./experimental-playwright": {
29
34
  "types": "./dist/playwright.d.ts",
30
- "import": "./dist/playwright.mjs",
31
- "require": "./dist/playwright.js"
35
+ "default": "./dist/playwright.js"
32
36
  },
33
- "./preset": "./preset.js",
34
- "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
35
- "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
37
+ "./internal/AddStorybookIdDecorator.svelte": "./static/AddStorybookIdDecorator.svelte",
38
+ "./internal/createReactiveProps": "./static/createReactiveProps.svelte.js",
39
+ "./internal/DecoratorHandler.svelte": "./static/DecoratorHandler.svelte",
40
+ "./internal/PreviewRender.svelte": "./static/PreviewRender.svelte",
36
41
  "./package.json": "./package.json",
37
- "./internal/PreviewRender.svelte": "./dist/components/PreviewRender.svelte",
38
- "./internal/DecoratorHandler.svelte": "./dist/components/DecoratorHandler.svelte",
39
- "./internal/AddStorybookIdDecorator.svelte": "./dist/components/AddStorybookIdDecorator.svelte",
40
- "./internal/createReactiveProps": "./dist/createReactiveProps.svelte.js"
42
+ "./preset": "./dist/preset.js"
41
43
  },
42
- "main": "dist/index.js",
43
- "module": "dist/index.mjs",
44
- "types": "dist/index.d.ts",
45
44
  "files": [
46
45
  "dist/**/*",
46
+ "static/**/*",
47
47
  "template/cli/**/*",
48
48
  "README.md",
49
49
  "*.js",
@@ -52,7 +52,7 @@
52
52
  ],
53
53
  "scripts": {
54
54
  "check": "svelte-check",
55
- "prep": "jiti ../../../scripts/prepare/bundle.ts"
55
+ "prep": "jiti ../../../scripts/build/build-package.ts"
56
56
  },
57
57
  "dependencies": {
58
58
  "ts-dedent": "^2.0.0",
@@ -66,28 +66,14 @@
66
66
  "svelte-check": "^4.1.4",
67
67
  "sveltedoc-parser": "^4.2.1",
68
68
  "typescript": "^5.8.3",
69
- "vite": "^6.2.5"
69
+ "vite": "^7.0.4"
70
70
  },
71
71
  "peerDependencies": {
72
- "storybook": "^9.2.0-alpha.3",
72
+ "storybook": "^10.0.0-beta.0",
73
73
  "svelte": "^5.0.0"
74
74
  },
75
- "engines": {
76
- "node": ">=20.0.0"
77
- },
78
75
  "publishConfig": {
79
76
  "access": "public"
80
77
  },
81
- "bundler": {
82
- "post": "./scripts/copy-unbundled-to-dist.ts",
83
- "entries": [
84
- "./src/index.ts",
85
- "./src/preset.ts",
86
- "./src/entry-preview.ts",
87
- "./src/entry-preview-docs.ts",
88
- "./src/playwright.ts"
89
- ],
90
- "platform": "browser"
91
- },
92
- "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684"
78
+ "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae16"
93
79
  }
package/preset.js CHANGED
@@ -1 +1 @@
1
- module.exports = require('./dist/preset');
1
+ export * from './dist/preset.js';
@@ -1,3 +0,0 @@
1
- var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};
2
-
3
- export { __export };
@@ -1,15 +0,0 @@
1
- import { __export } from './chunk-CEH6MNVV.mjs';
2
- import { enhanceArgTypes } from 'storybook/internal/docs-tools';
3
- import { logger } from 'storybook/internal/client-logger';
4
- import { RESET_STORY_ARGS } from 'storybook/internal/core-events';
5
- import PreviewRender from '@storybook/svelte/internal/PreviewRender.svelte';
6
- import { createReactiveProps } from '@storybook/svelte/internal/createReactiveProps';
7
- import { addons, sanitizeStoryContextUpdate } from 'storybook/preview-api';
8
- import * as svelte from 'svelte';
9
- import DecoratorHandler from '@storybook/svelte/internal/DecoratorHandler.svelte';
10
-
11
- var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,argTypesEnhancers:()=>argTypesEnhancers,mount:()=>mount2,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});function hasKeyword(keyword,keywords){return keywords?keywords.find(k=>k.name===keyword)!=null:!1}var extractArgTypes=component=>{try{let docgen=component.__docgen;if(docgen)return createArgTypes(docgen)}catch(err){logger.log(`Error extracting argTypes: ${err}`);}return {}},createArgTypes=docgen=>{let results={};return docgen.data&&docgen.data.forEach(item=>{results[item.name]={...parseTypeToControl(item.type),name:item.name,description:item.description||void 0,type:{required:hasKeyword("required",item.keywords||[]),name:item.type?.text==="{}"?"object":item.type?.text},table:{type:{summary:item.type?.text},defaultValue:{summary:item.defaultValue},category:"properties"}};}),docgen.events&&docgen.events.forEach(item=>{results[`event_${item.name}`]={name:item.name,action:item.name,control:!1,...item.description?{description:item.description}:{},table:{category:"events"}};}),docgen.slots&&docgen.slots.forEach(item=>{results[`slot_${item.name}`]={name:item.name,control:!1,description:[item.description,item.params?.map(p=>`\`${p.name}\``).join(" ")].filter(p=>p).join(`
12
-
13
- `),table:{category:"slots"}};}),results},parseTypeToControl=type=>{if(!type)return null;if(type.kind==="type")switch(type.type){case"string":return {control:{type:"text"}};case"any":return {control:{type:"object"}};default:return {control:{type:type.type}}}else if(type.kind==="union"){if(Array.isArray(type.type)&&!type.type.some(t=>t.kind!=="const"||!["string","number","null","undefined"].includes(t.type))){let options=type.type.map(t=>t.value);return {control:{type:"radio"},options}}}else if(type.kind==="function")return {control:null};return null};function extractComponentDescription(component){return component?.__docgen?.description||""}var storyIdsToRemountFromResetArgsEvent=new Set;addons.getChannel().on(RESET_STORY_ARGS,({storyId})=>{storyIdsToRemountFromResetArgsEvent.add(storyId);});var componentsByDomElement=new Map;function renderToCanvas({storyFn,title,name,showMain,showError,storyContext,forceRemount},canvasElement){function unmount2(canvasElementToUnmount){let{mountedComponent}=componentsByDomElement.get(canvasElementToUnmount)??{};mountedComponent&&(svelte.unmount(mountedComponent),componentsByDomElement.delete(canvasElementToUnmount));}let existingComponent=componentsByDomElement.get(canvasElement),remount=forceRemount;if(storyIdsToRemountFromResetArgsEvent.has(storyContext.id)&&(remount=!0,storyIdsToRemountFromResetArgsEvent.delete(storyContext.id)),remount&&unmount2(canvasElement),!existingComponent||remount){let props=createReactiveProps({storyFn,storyContext,name,title,showError}),mountedComponent=svelte.mount(PreviewRender,{target:canvasElement,props});componentsByDomElement.set(canvasElement,{mountedComponent,props});}else Object.assign(existingComponent.props,{storyFn,storyContext,name,title,showError});return showMain(),()=>{unmount2(canvasElement);}}var render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return {Component,props:args}};function unWrap(obj){return obj&&typeof obj=="object"&&"default"in obj?obj.default:obj}function prepareStory(context,rawStory,rawInnerStory){let story=unWrap(rawStory),innerStory=rawInnerStory&&unWrap(rawInnerStory),preparedStory;return !story||Object.keys(story).length===0?preparedStory={Component:context.component}:story.Component?preparedStory=story:preparedStory={Component:story},innerStory?{Component:DecoratorHandler,props:{...innerStory,decorator:preparedStory}}:{...preparedStory,argTypes:context.argTypes}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...sanitizeStoryContextUpdate(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepareStory(context,decoratedStory,story)},context=>prepareStory(context,storyFn(context)))}var mount2=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>({Component,props:options&&"props"in options?options?.props:options})),await context.renderToCanvas(),context.canvas);var parameters={renderer:"svelte",docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},argTypesEnhancers=[enhanceArgTypes];
14
-
15
- export { argTypesEnhancers, decorateStory, entry_preview_exports, mount2 as mount, parameters, render, renderToCanvas };
@@ -1,7 +0,0 @@
1
- import { DecoratorFunction } from 'storybook/internal/types';
2
- import { S as SvelteRenderer } from './types-b7d0039b.js';
3
- import 'svelte';
4
-
5
- declare const decorators: DecoratorFunction<SvelteRenderer>[];
6
-
7
- export { decorators };
@@ -1,12 +0,0 @@
1
- import './chunk-CEH6MNVV.mjs';
2
- import { deprecate } from 'storybook/internal/client-logger';
3
- import { SourceType } from 'storybook/internal/docs-tools';
4
- import { useRef, useEffect, emitTransformCode } from 'storybook/preview-api';
5
-
6
- var skipSourceRender=context=>{let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return (context?.tags??[]).some(tag=>tag.startsWith("svelte-csf"))?!0:sourceParams?.type===SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===SourceType.CODE};function toSvelteProperty(key,value,argTypes){if(value==null)return null;let argType=argTypes[key];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)}}`}function getComponentName(component){if(component==null)return null;let{__docgen={}}=component,{name}=__docgen;return name?(name.endsWith(".svelte")&&(name=name.substring(0,name.length-7)),name):component.name}function generateSvelteSource(component,args,argTypes,slotProperty){let name=getComponentName(component);if(!name)return null;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}
7
- ${propsArray.join(`
8
- `)}`:`<${name} ${props}`;return slotValue?`${srcStart}>
9
- ${slotValue}
10
- </${name}>`:`${srcStart}/>`}function getWrapperProperties(component){let{__docgen}=component||{};return __docgen?__docgen.keywords?.find(kw=>kw.name==="wrapper")?{wrapper:!0,slotProperty:__docgen.data?.find(prop=>prop.keywords.find(kw=>kw.name==="slot"))?.name}:{wrapper:!1}:{wrapper:!1}}var sourceDecorator=(storyFn,context)=>{let skip=skipSourceRender(context),story=storyFn(),source=useRef(void 0);return useEffect(()=>{if(skip)return;let{parameters={},args={},component:ctxComponent}=context||{},{Component:component}=context.originalStoryFn(args,context),{wrapper,slotProperty}=getWrapperProperties(component);wrapper&&(parameters.component&&deprecate("parameters.component is deprecated. Using context.component instead."),component=ctxComponent);let generated=generateSvelteSource(component,args,context?.argTypes,slotProperty);generated&&source.current!==generated&&(emitTransformCode(generated,context),source.current=generated);}),story};var decorators=[sourceDecorator];
11
-
12
- export { decorators };
@@ -1,28 +0,0 @@
1
- import * as storybook_internal_docs_tools from 'storybook/internal/docs-tools';
2
- import { RenderContext, ArgsStoryFn, BaseAnnotations, ArgTypesEnhancer } from 'storybook/internal/types';
3
- import { S as SvelteRenderer } from './types-b7d0039b.js';
4
- import 'svelte';
5
-
6
- declare function extractComponentDescription(component?: any): string;
7
-
8
- declare function renderToCanvas({ storyFn, title, name, showMain, showError, storyContext, forceRemount, }: RenderContext<SvelteRenderer>, canvasElement: SvelteRenderer['canvasElement']): () => void;
9
- declare const render: ArgsStoryFn<SvelteRenderer>;
10
-
11
- declare function decorateStory(storyFn: any, decorators: any[]): any;
12
-
13
- declare const mount: BaseAnnotations<SvelteRenderer>['mount'];
14
-
15
- declare const parameters: {
16
- renderer: string;
17
- docs: {
18
- story: {
19
- inline: boolean;
20
- };
21
- extractArgTypes: storybook_internal_docs_tools.ArgTypesExtractor;
22
- extractComponentDescription: typeof extractComponentDescription;
23
- };
24
- };
25
-
26
- declare const argTypesEnhancers: ArgTypesEnhancer<SvelteRenderer>[];
27
-
28
- export { decorateStory as applyDecorators, argTypesEnhancers, mount, parameters, render, renderToCanvas };
@@ -1,2 +0,0 @@
1
- export { decorateStory as applyDecorators, argTypesEnhancers, mount, parameters, render, renderToCanvas } from './chunk-TTEVCAEV.mjs';
2
- import './chunk-CEH6MNVV.mjs';
package/dist/index.mjs DELETED
@@ -1,9 +0,0 @@
1
- import { entry_preview_exports, renderToCanvas } from './chunk-TTEVCAEV.mjs';
2
- import './chunk-CEH6MNVV.mjs';
3
- import PreviewRender from '@storybook/svelte/internal/PreviewRender.svelte';
4
- import { createReactiveProps } from '@storybook/svelte/internal/createReactiveProps';
5
- import { setDefaultProjectAnnotations, setProjectAnnotations as setProjectAnnotations$1, composeStory as composeStory$1, composeStories as composeStories$1 } from 'storybook/preview-api';
6
-
7
- globalThis.STORYBOOK_ENV="svelte";function setProjectAnnotations(projectAnnotations){return setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS),setProjectAnnotations$1(projectAnnotations)}var INTERNAL_DEFAULT_PROJECT_ANNOTATIONS={...entry_preview_exports,renderToCanvas:(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)return renderToCanvas(renderContext,canvasElement);let{storyFn,storyContext:{testingLibraryRender:render}}=renderContext,{Component,props}=storyFn(),{unmount}=render(Component,{props,target:canvasElement});return unmount}};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){let composedStory=composeStory$1(story,componentAnnotations,projectAnnotations,globalThis.globalProjectAnnotations??INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,exportsName),props=createReactiveProps({storyFn:composedStory,storyContext:{...composedStory},name:composedStory.storyName,title:composedStory.id,showError:()=>{}}),renderable={Component:PreviewRender,props};return Object.assign(renderable,composedStory),renderable}function composeStories(csfExports,projectAnnotations){return composeStories$1(csfExports,projectAnnotations,composeStory)}
8
-
9
- export { INTERNAL_DEFAULT_PROJECT_ANNOTATIONS, composeStories, composeStory, setProjectAnnotations };
@@ -1,2 +0,0 @@
1
- import './chunk-CEH6MNVV.mjs';
2
- export { createPlaywrightTest as createTest } from 'storybook/preview-api';
package/dist/preset.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import { PresetProperty } from 'storybook/internal/types';
2
-
3
- declare const previewAnnotations: PresetProperty<'previewAnnotations'>;
4
-
5
- export { previewAnnotations };
@@ -1,27 +0,0 @@
1
- import * as svelte from 'svelte';
2
- import { SvelteComponent, ComponentEvents, ComponentConstructorOptions } from 'svelte';
3
- import { WebRenderer, Canvas } from 'storybook/internal/types';
4
-
5
- type ComponentType<Props extends Record<string, any> = any, Events extends Record<string, any> = any> = new (options: ComponentConstructorOptions<Props>) => {
6
- [P in keyof SvelteComponent<Props> as P extends `$$${string}` ? never : P]: SvelteComponent<Props, Events>[P];
7
- };
8
- type Svelte5ComponentType<Props extends Record<string, any> = any> = typeof svelte extends {
9
- mount: any;
10
- } ? svelte.Component<Props, any, any> : never;
11
- interface SvelteRenderer<C extends SvelteComponent | Svelte5ComponentType = SvelteComponent> extends WebRenderer {
12
- component: ComponentType<this['T'] extends Record<string, any> ? this['T'] : any> | Svelte5ComponentType<this['T'] extends Record<string, any> ? this['T'] : any>;
13
- storyResult: this['T'] extends Record<string, any> ? SvelteStoryResult<this['T'], C extends SvelteComponent ? ComponentEvents<C> : {}> : SvelteStoryResult;
14
- mount: (Component?: ComponentType | Svelte5ComponentType, options?: Record<string, any> & {
15
- props: Record<string, any>;
16
- }) => Promise<Canvas>;
17
- }
18
- interface SvelteStoryResult<Props extends Record<string, any> = any, Events extends Record<string, any> = any> {
19
- Component?: ComponentType<Props> | Svelte5ComponentType<Props>;
20
- on?: Record<string, any> extends Events ? Record<string, (event: CustomEvent) => void> : {
21
- [K in keyof Events as string extends K ? never : K]?: (event: Events[K]) => void;
22
- };
23
- props?: Props;
24
- decorator?: ComponentType<Props> | Svelte5ComponentType<Props>;
25
- }
26
-
27
- export { SvelteRenderer as S, Svelte5ComponentType as a };
File without changes