@storybook/svelte-vite 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 +3 -1
- package/dist/_node-chunks/chunk-XAHMQWSH.js +17 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -1
- package/dist/node/index.d.ts +22 -4
- package/dist/node/index.js +23 -1
- package/dist/preset.d.ts +22 -4
- package/dist/preset.js +514 -3
- package/package.json +23 -35
- package/preset.js +1 -1
- package/dist/index.mjs +0 -1
- package/dist/node/index.mjs +0 -3
package/README.md
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
# Storybook for Svelte & Vite
|
|
2
2
|
|
|
3
|
-
See [documentation](https://storybook.js.org/docs/get-started/frameworks/svelte-vite?renderer=svelte) for installation instructions, usage examples, APIs, and more.
|
|
3
|
+
See [documentation](https://storybook.js.org/docs/get-started/frameworks/svelte-vite?renderer=svelte&ref=readme) for installation instructions, usage examples, APIs, and more.
|
|
4
|
+
|
|
5
|
+
Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import CJS_COMPAT_NODE_URL_wxvqpsjwy8 from 'node:url';
|
|
2
|
+
import CJS_COMPAT_NODE_PATH_wxvqpsjwy8 from 'node:path';
|
|
3
|
+
import CJS_COMPAT_NODE_MODULE_wxvqpsjwy8 from "node:module";
|
|
4
|
+
|
|
5
|
+
var __filename = CJS_COMPAT_NODE_URL_wxvqpsjwy8.fileURLToPath(import.meta.url);
|
|
6
|
+
var __dirname = CJS_COMPAT_NODE_PATH_wxvqpsjwy8.dirname(__filename);
|
|
7
|
+
var require = CJS_COMPAT_NODE_MODULE_wxvqpsjwy8.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
|
+
export {
|
|
16
|
+
__name
|
|
17
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -22,4 +22,4 @@ type StorybookConfigFramework = {
|
|
|
22
22
|
/** The interface for Storybook configuration in `main.ts` files. */
|
|
23
23
|
type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof StorybookConfigFramework> & StorybookConfigVite & StorybookConfigFramework;
|
|
24
24
|
|
|
25
|
-
export { FrameworkOptions, StorybookConfig };
|
|
25
|
+
export type { FrameworkOptions, StorybookConfig };
|
package/dist/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
// src/index.ts
|
|
2
|
+
export * from "@storybook/svelte";
|
package/dist/node/index.d.ts
CHANGED
|
@@ -1,7 +1,25 @@
|
|
|
1
|
-
import { StorybookConfig } from '
|
|
2
|
-
import '@storybook/
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { StorybookConfig as StorybookConfig$1, CompatibleString } from 'storybook/internal/types';
|
|
2
|
+
import { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
|
|
3
|
+
|
|
4
|
+
type FrameworkName = CompatibleString<'@storybook/svelte-vite'>;
|
|
5
|
+
type BuilderName = CompatibleString<'@storybook/builder-vite'>;
|
|
6
|
+
type FrameworkOptions = {
|
|
7
|
+
builder?: BuilderOptions;
|
|
8
|
+
};
|
|
9
|
+
type StorybookConfigFramework = {
|
|
10
|
+
framework: FrameworkName | {
|
|
11
|
+
name: FrameworkName;
|
|
12
|
+
options: FrameworkOptions;
|
|
13
|
+
};
|
|
14
|
+
core?: StorybookConfig$1['core'] & {
|
|
15
|
+
builder?: BuilderName | {
|
|
16
|
+
name: BuilderName;
|
|
17
|
+
options: BuilderOptions;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
/** The interface for Storybook configuration in `main.ts` files. */
|
|
22
|
+
type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof StorybookConfigFramework> & StorybookConfigVite & StorybookConfigFramework;
|
|
5
23
|
|
|
6
24
|
declare function defineMain(config: StorybookConfig): StorybookConfig;
|
|
7
25
|
|
package/dist/node/index.js
CHANGED
|
@@ -1 +1,23 @@
|
|
|
1
|
-
|
|
1
|
+
import CJS_COMPAT_NODE_URL_wxvqpsjwy8 from 'node:url';
|
|
2
|
+
import CJS_COMPAT_NODE_PATH_wxvqpsjwy8 from 'node:path';
|
|
3
|
+
import CJS_COMPAT_NODE_MODULE_wxvqpsjwy8 from "node:module";
|
|
4
|
+
|
|
5
|
+
var __filename = CJS_COMPAT_NODE_URL_wxvqpsjwy8.fileURLToPath(import.meta.url);
|
|
6
|
+
var __dirname = CJS_COMPAT_NODE_PATH_wxvqpsjwy8.dirname(__filename);
|
|
7
|
+
var require = CJS_COMPAT_NODE_MODULE_wxvqpsjwy8.createRequire(import.meta.url);
|
|
8
|
+
|
|
9
|
+
// ------------------------------------------------------------
|
|
10
|
+
// end of CJS compatibility banner, injected by Storybook's esbuild configuration
|
|
11
|
+
// ------------------------------------------------------------
|
|
12
|
+
import {
|
|
13
|
+
__name
|
|
14
|
+
} from "../_node-chunks/chunk-XAHMQWSH.js";
|
|
15
|
+
|
|
16
|
+
// src/node/index.ts
|
|
17
|
+
function defineMain(config) {
|
|
18
|
+
return config;
|
|
19
|
+
}
|
|
20
|
+
__name(defineMain, "defineMain");
|
|
21
|
+
export {
|
|
22
|
+
defineMain
|
|
23
|
+
};
|
package/dist/preset.d.ts
CHANGED
|
@@ -1,7 +1,25 @@
|
|
|
1
|
-
import { PresetProperty } from 'storybook/internal/types';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { StorybookConfig as StorybookConfig$1, CompatibleString, PresetProperty } from 'storybook/internal/types';
|
|
2
|
+
import { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
|
|
3
|
+
|
|
4
|
+
type FrameworkName = CompatibleString<'@storybook/svelte-vite'>;
|
|
5
|
+
type BuilderName = CompatibleString<'@storybook/builder-vite'>;
|
|
6
|
+
type FrameworkOptions = {
|
|
7
|
+
builder?: BuilderOptions;
|
|
8
|
+
};
|
|
9
|
+
type StorybookConfigFramework = {
|
|
10
|
+
framework: FrameworkName | {
|
|
11
|
+
name: FrameworkName;
|
|
12
|
+
options: FrameworkOptions;
|
|
13
|
+
};
|
|
14
|
+
core?: StorybookConfig$1['core'] & {
|
|
15
|
+
builder?: BuilderName | {
|
|
16
|
+
name: BuilderName;
|
|
17
|
+
options: BuilderOptions;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
/** The interface for Storybook configuration in `main.ts` files. */
|
|
22
|
+
type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof StorybookConfigFramework> & StorybookConfigVite & StorybookConfigFramework;
|
|
5
23
|
|
|
6
24
|
declare const core: PresetProperty<'core'>;
|
|
7
25
|
declare const viteFinal: NonNullable<StorybookConfig['viteFinal']>;
|
package/dist/preset.js
CHANGED
|
@@ -1,3 +1,514 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import CJS_COMPAT_NODE_URL_wxvqpsjwy8 from 'node:url';
|
|
2
|
+
import CJS_COMPAT_NODE_PATH_wxvqpsjwy8 from 'node:path';
|
|
3
|
+
import CJS_COMPAT_NODE_MODULE_wxvqpsjwy8 from "node:module";
|
|
4
|
+
|
|
5
|
+
var __filename = CJS_COMPAT_NODE_URL_wxvqpsjwy8.fileURLToPath(import.meta.url);
|
|
6
|
+
var __dirname = CJS_COMPAT_NODE_PATH_wxvqpsjwy8.dirname(__filename);
|
|
7
|
+
var require = CJS_COMPAT_NODE_MODULE_wxvqpsjwy8.createRequire(import.meta.url);
|
|
8
|
+
|
|
9
|
+
// ------------------------------------------------------------
|
|
10
|
+
// end of CJS compatibility banner, injected by Storybook's esbuild configuration
|
|
11
|
+
// ------------------------------------------------------------
|
|
12
|
+
import {
|
|
13
|
+
__name
|
|
14
|
+
} from "./_node-chunks/chunk-XAHMQWSH.js";
|
|
15
|
+
|
|
16
|
+
// src/plugins/svelte-docgen.ts
|
|
17
|
+
import { basename, relative } from "node:path";
|
|
18
|
+
import MagicString from "magic-string";
|
|
19
|
+
|
|
20
|
+
// src/plugins/generateDocgen.ts
|
|
21
|
+
import path from "node:path";
|
|
22
|
+
import svelte2tsx, { internalHelpers } from "svelte2tsx";
|
|
23
|
+
import { VERSION } from "svelte/compiler";
|
|
24
|
+
import ts from "typescript";
|
|
25
|
+
function convertType(type, checker) {
|
|
26
|
+
if (type.flags & ts.TypeFlags.Any) {
|
|
27
|
+
return { type: "any" };
|
|
28
|
+
}
|
|
29
|
+
if (type.flags & ts.TypeFlags.Number) {
|
|
30
|
+
return { type: "number" };
|
|
31
|
+
}
|
|
32
|
+
if (type.flags & ts.TypeFlags.String) {
|
|
33
|
+
return { type: "string" };
|
|
34
|
+
}
|
|
35
|
+
if (type.flags & ts.TypeFlags.Boolean) {
|
|
36
|
+
return { type: "boolean" };
|
|
37
|
+
}
|
|
38
|
+
if (type.flags & ts.TypeFlags.ESSymbol) {
|
|
39
|
+
return { type: "symbol" };
|
|
40
|
+
}
|
|
41
|
+
if (type.flags & ts.TypeFlags.Null) {
|
|
42
|
+
return { type: "null" };
|
|
43
|
+
}
|
|
44
|
+
if (type.flags & ts.TypeFlags.Undefined) {
|
|
45
|
+
return { type: "undefined" };
|
|
46
|
+
}
|
|
47
|
+
if (type.flags & ts.TypeFlags.Void) {
|
|
48
|
+
return { type: "void" };
|
|
49
|
+
}
|
|
50
|
+
if (type.getCallSignatures().length > 0) {
|
|
51
|
+
return { type: "function", text: checker.typeToString(type) };
|
|
52
|
+
}
|
|
53
|
+
if (type.flags & ts.TypeFlags.Object) {
|
|
54
|
+
const indexType = checker.getIndexTypeOfType(type, ts.IndexKind.Number);
|
|
55
|
+
if (indexType) {
|
|
56
|
+
return { type: "array", text: checker.typeToString(type) };
|
|
57
|
+
}
|
|
58
|
+
return { type: "object", text: checker.typeToString(type) };
|
|
59
|
+
}
|
|
60
|
+
if (type.isNumberLiteral() || type.isStringLiteral()) {
|
|
61
|
+
return {
|
|
62
|
+
type: "literal",
|
|
63
|
+
value: type.value,
|
|
64
|
+
text: type.flags & ts.TypeFlags.EnumLiteral ? checker.typeToString(type) : JSON.stringify(type.value)
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
if (type.flags & ts.TypeFlags.BooleanLiteral) {
|
|
68
|
+
const text = checker.typeToString(type);
|
|
69
|
+
return { type: "literal", value: text === "true", text };
|
|
70
|
+
}
|
|
71
|
+
if (type.isUnion()) {
|
|
72
|
+
const types = type.types.map((t) => convertType(t, checker)).filter((t) => {
|
|
73
|
+
return t !== void 0 && t.type !== "undefined";
|
|
74
|
+
});
|
|
75
|
+
const idxTrue = types.findIndex((t) => t.type === "literal" && t.value === true);
|
|
76
|
+
const idxFalse = types.findIndex((t) => t.type === "literal" && t.value === false);
|
|
77
|
+
if (idxTrue !== -1 && idxFalse !== -1) {
|
|
78
|
+
types.splice(Math.max(idxTrue, idxFalse), 1);
|
|
79
|
+
types.splice(Math.min(idxTrue, idxFalse), 1, { type: "boolean" });
|
|
80
|
+
}
|
|
81
|
+
return types.length > 1 ? { type: "union", types } : types[0];
|
|
82
|
+
}
|
|
83
|
+
if (type.isIntersection()) {
|
|
84
|
+
const types = type.types.map((t) => convertType(t, checker)).filter((t) => t !== void 0);
|
|
85
|
+
return { type: "intersection", types };
|
|
86
|
+
}
|
|
87
|
+
return void 0;
|
|
88
|
+
}
|
|
89
|
+
__name(convertType, "convertType");
|
|
90
|
+
function initializerToDefaultValue(expr, checker) {
|
|
91
|
+
if (ts.isNumericLiteral(expr)) {
|
|
92
|
+
return { text: expr.text };
|
|
93
|
+
} else if (ts.isStringLiteral(expr)) {
|
|
94
|
+
return { text: JSON.stringify(expr.text) };
|
|
95
|
+
} else if (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr)) {
|
|
96
|
+
const symbol = checker.getSymbolAtLocation(expr);
|
|
97
|
+
if (symbol && checker.isUndefinedSymbol(symbol)) {
|
|
98
|
+
return void 0;
|
|
99
|
+
}
|
|
100
|
+
const type = checker.getTypeAtLocation(expr);
|
|
101
|
+
if (type.flags & ts.TypeFlags.EnumLiteral) {
|
|
102
|
+
return { text: checker.typeToString(type) };
|
|
103
|
+
} else if (type.isLiteral()) {
|
|
104
|
+
return { text: JSON.stringify(type.value) };
|
|
105
|
+
} else if (type.flags & ts.TypeFlags.Null) {
|
|
106
|
+
return { text: "null" };
|
|
107
|
+
} else if (type.flags & ts.TypeFlags.BooleanLiteral) {
|
|
108
|
+
return { text: checker.typeToString(type) };
|
|
109
|
+
} else if (type.getCallSignatures().length > 0) {
|
|
110
|
+
return { text: "function" };
|
|
111
|
+
}
|
|
112
|
+
} else if (ts.isArrayLiteralExpression(expr) || ts.isObjectLiteralExpression(expr) || ts.isNewExpression(expr)) {
|
|
113
|
+
return { text: expr.getText() };
|
|
114
|
+
} else if (ts.isArrowFunction(expr)) {
|
|
115
|
+
return { text: "function" };
|
|
116
|
+
}
|
|
117
|
+
switch (expr.kind) {
|
|
118
|
+
case ts.SyntaxKind.TrueKeyword:
|
|
119
|
+
return { text: "true" };
|
|
120
|
+
case ts.SyntaxKind.FalseKeyword:
|
|
121
|
+
return { text: "false" };
|
|
122
|
+
case ts.SyntaxKind.NullKeyword:
|
|
123
|
+
return { text: "null" };
|
|
124
|
+
}
|
|
125
|
+
return { text: "..." };
|
|
126
|
+
}
|
|
127
|
+
__name(initializerToDefaultValue, "initializerToDefaultValue");
|
|
128
|
+
function loadConfig(basepath) {
|
|
129
|
+
const configPath = ts.findConfigFile(basepath, ts.sys.fileExists) || ts.findConfigFile(basepath, ts.sys.fileExists, "jsconfig.json");
|
|
130
|
+
const forcedOptions = {
|
|
131
|
+
sourceMap: false,
|
|
132
|
+
noEmit: true,
|
|
133
|
+
strict: true,
|
|
134
|
+
allowJs: true,
|
|
135
|
+
checkJs: true,
|
|
136
|
+
skipLibCheck: true,
|
|
137
|
+
skipDefaultLibCheck: true
|
|
138
|
+
};
|
|
139
|
+
if (!configPath) {
|
|
140
|
+
return [forcedOptions, /* @__PURE__ */ new Set()];
|
|
141
|
+
}
|
|
142
|
+
const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
|
|
143
|
+
const config = ts.parseJsonConfigFileContent(
|
|
144
|
+
configFile.config,
|
|
145
|
+
ts.sys,
|
|
146
|
+
path.dirname(configPath),
|
|
147
|
+
void 0,
|
|
148
|
+
configPath,
|
|
149
|
+
void 0,
|
|
150
|
+
[
|
|
151
|
+
{
|
|
152
|
+
extension: "svelte",
|
|
153
|
+
isMixedContent: true,
|
|
154
|
+
scriptKind: ts.ScriptKind.Deferred
|
|
155
|
+
}
|
|
156
|
+
]
|
|
157
|
+
);
|
|
158
|
+
const fileNames = new Set(
|
|
159
|
+
config.fileNames.filter((fileName) => fileName.endsWith(".svelte")).map((fileName) => fileName + ".tsx")
|
|
160
|
+
);
|
|
161
|
+
return [
|
|
162
|
+
{
|
|
163
|
+
...config.options,
|
|
164
|
+
...forcedOptions
|
|
165
|
+
},
|
|
166
|
+
fileNames
|
|
167
|
+
];
|
|
168
|
+
}
|
|
169
|
+
__name(loadConfig, "loadConfig");
|
|
170
|
+
function createDocgenCache() {
|
|
171
|
+
return {
|
|
172
|
+
filenameToModifiedTime: {},
|
|
173
|
+
filenameToSourceFile: {},
|
|
174
|
+
fileCache: {}
|
|
175
|
+
};
|
|
176
|
+
}
|
|
177
|
+
__name(createDocgenCache, "createDocgenCache");
|
|
178
|
+
function generateDocgen(targetFileName, cache) {
|
|
179
|
+
if (targetFileName.endsWith(".svelte")) {
|
|
180
|
+
targetFileName = targetFileName + ".tsx";
|
|
181
|
+
}
|
|
182
|
+
if (cache.options === void 0 || !cache.rootNames?.has(targetFileName)) {
|
|
183
|
+
[cache.options, cache.rootNames] = loadConfig(targetFileName);
|
|
184
|
+
const shimFilename = import.meta.resolve("svelte2tsx/svelte-shims-v4.d.ts");
|
|
185
|
+
cache.rootNames.add(shimFilename);
|
|
186
|
+
cache.rootNames.add(targetFileName);
|
|
187
|
+
}
|
|
188
|
+
const originalHost = ts.createCompilerHost(cache.options);
|
|
189
|
+
const host = {
|
|
190
|
+
...originalHost,
|
|
191
|
+
readFile(fileName) {
|
|
192
|
+
const isCacheTarget = fileName.endsWith(path.sep + "package.json");
|
|
193
|
+
if (isCacheTarget && cache.fileCache[fileName]) {
|
|
194
|
+
return cache.fileCache[fileName];
|
|
195
|
+
}
|
|
196
|
+
const content = originalHost.readFile(fileName);
|
|
197
|
+
if (content && isCacheTarget) {
|
|
198
|
+
cache.fileCache[fileName] = content;
|
|
199
|
+
}
|
|
200
|
+
return content;
|
|
201
|
+
},
|
|
202
|
+
fileExists(fileName) {
|
|
203
|
+
const isCacheTarget = fileName.endsWith(path.sep + "package.json");
|
|
204
|
+
if (isCacheTarget && cache.fileCache[fileName]) {
|
|
205
|
+
return true;
|
|
206
|
+
}
|
|
207
|
+
let exists = originalHost.fileExists(fileName);
|
|
208
|
+
if (exists) {
|
|
209
|
+
return exists;
|
|
210
|
+
}
|
|
211
|
+
if (fileName.endsWith(".svelte.tsx") || fileName.endsWith(".svelte.jsx")) {
|
|
212
|
+
fileName = fileName.slice(0, -4);
|
|
213
|
+
exists = originalHost.fileExists(fileName);
|
|
214
|
+
return exists;
|
|
215
|
+
}
|
|
216
|
+
return false;
|
|
217
|
+
},
|
|
218
|
+
getSourceFile(fileName, languageVersion, onError) {
|
|
219
|
+
if (fileName.endsWith(".svelte.tsx") || fileName.endsWith(".svelte.jsx")) {
|
|
220
|
+
const realFileName = fileName.slice(0, -4);
|
|
221
|
+
const modifiedTime = ts.sys.getModifiedTime ? ts.sys.getModifiedTime(realFileName) : void 0;
|
|
222
|
+
if (modifiedTime) {
|
|
223
|
+
const cachedModifiedTime = cache.filenameToModifiedTime[fileName];
|
|
224
|
+
if (cachedModifiedTime?.getTime() === modifiedTime.getTime()) {
|
|
225
|
+
return cache.filenameToSourceFile[fileName];
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
const content = originalHost.readFile(realFileName);
|
|
229
|
+
if (content === void 0) {
|
|
230
|
+
return;
|
|
231
|
+
}
|
|
232
|
+
const isTsFile = /<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(content);
|
|
233
|
+
const tsx = svelte2tsx.svelte2tsx(content, {
|
|
234
|
+
version: VERSION,
|
|
235
|
+
isTsFile,
|
|
236
|
+
mode: "dts"
|
|
237
|
+
});
|
|
238
|
+
const sourceFile2 = ts.createSourceFile(
|
|
239
|
+
fileName,
|
|
240
|
+
tsx.code,
|
|
241
|
+
languageVersion,
|
|
242
|
+
true,
|
|
243
|
+
isTsFile ? ts.ScriptKind.TS : ts.ScriptKind.JS
|
|
244
|
+
// Set to 'JS' to enable TypeScript to parse JSDoc.
|
|
245
|
+
);
|
|
246
|
+
cache.filenameToSourceFile[fileName] = sourceFile2;
|
|
247
|
+
cache.filenameToModifiedTime[fileName] = modifiedTime;
|
|
248
|
+
return sourceFile2;
|
|
249
|
+
} else {
|
|
250
|
+
let staticCaching = false;
|
|
251
|
+
staticCaching ||= fileName.split(path.sep).some((part) => part.toLowerCase() === "node_modules");
|
|
252
|
+
const cachedSourceFile = cache.filenameToSourceFile[fileName];
|
|
253
|
+
if (cachedSourceFile && staticCaching) {
|
|
254
|
+
return cachedSourceFile;
|
|
255
|
+
}
|
|
256
|
+
const modifiedTime = ts.sys.getModifiedTime ? ts.sys.getModifiedTime(fileName) : void 0;
|
|
257
|
+
if (modifiedTime) {
|
|
258
|
+
const cachedModifiedTime = cache.filenameToModifiedTime[fileName];
|
|
259
|
+
if (cachedModifiedTime?.getTime() === modifiedTime.getTime()) {
|
|
260
|
+
return cache.filenameToSourceFile[fileName];
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
const content = originalHost.readFile(fileName);
|
|
264
|
+
if (content === void 0) {
|
|
265
|
+
return;
|
|
266
|
+
}
|
|
267
|
+
const sourceFile2 = ts.createSourceFile(fileName, content, languageVersion, true);
|
|
268
|
+
cache.filenameToSourceFile[fileName] = sourceFile2;
|
|
269
|
+
cache.filenameToModifiedTime[fileName] = modifiedTime;
|
|
270
|
+
return sourceFile2;
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
writeFile() {
|
|
274
|
+
}
|
|
275
|
+
};
|
|
276
|
+
const program = ts.createProgram({
|
|
277
|
+
rootNames: Array.from(cache.rootNames),
|
|
278
|
+
options: cache.options,
|
|
279
|
+
host,
|
|
280
|
+
oldProgram: cache.oldProgram
|
|
281
|
+
});
|
|
282
|
+
cache.oldProgram = program;
|
|
283
|
+
const checker = program.getTypeChecker();
|
|
284
|
+
const sourceFile = program.getSourceFile(targetFileName);
|
|
285
|
+
if (sourceFile === void 0) {
|
|
286
|
+
return {
|
|
287
|
+
props: []
|
|
288
|
+
};
|
|
289
|
+
}
|
|
290
|
+
const propMap = /* @__PURE__ */ new Map();
|
|
291
|
+
const renderFunction = sourceFile.statements.find((statement) => {
|
|
292
|
+
return ts.isFunctionDeclaration(statement) && statement.name?.text === internalHelpers.renderName;
|
|
293
|
+
});
|
|
294
|
+
if (renderFunction === void 0) {
|
|
295
|
+
return {
|
|
296
|
+
props: []
|
|
297
|
+
};
|
|
298
|
+
}
|
|
299
|
+
let propsType;
|
|
300
|
+
const signature = checker.getSignatureFromDeclaration(renderFunction);
|
|
301
|
+
if (signature && signature.declaration) {
|
|
302
|
+
const type = checker.getReturnTypeOfSignature(signature);
|
|
303
|
+
type.getProperties().forEach((retObjProp) => {
|
|
304
|
+
if (retObjProp.name === "props") {
|
|
305
|
+
const decl = signature.getDeclaration();
|
|
306
|
+
propsType = checker.getTypeOfSymbolAtLocation(retObjProp, decl);
|
|
307
|
+
propsType.getProperties().forEach((prop) => {
|
|
308
|
+
const name = prop.getName();
|
|
309
|
+
let description = ts.displayPartsToString(prop.getDocumentationComment(checker)) || void 0;
|
|
310
|
+
const propType = checker.getTypeOfSymbolAtLocation(prop, decl);
|
|
311
|
+
if (prop.valueDeclaration) {
|
|
312
|
+
const typeTag = ts.getJSDocTypeTag(prop.valueDeclaration);
|
|
313
|
+
if (typeTag?.comment) {
|
|
314
|
+
description = ((description || "") + "\n" + typeTag.comment).trim();
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
if (prop.valueDeclaration?.getSourceFile().fileName.includes("node_modules/svelte/elements.d.ts")) {
|
|
318
|
+
return;
|
|
319
|
+
}
|
|
320
|
+
const optional = (prop.flags & ts.SymbolFlags.Optional) !== 0;
|
|
321
|
+
propMap.set(name, {
|
|
322
|
+
name,
|
|
323
|
+
optional,
|
|
324
|
+
description,
|
|
325
|
+
type: convertType(propType, checker)
|
|
326
|
+
});
|
|
327
|
+
});
|
|
328
|
+
}
|
|
329
|
+
});
|
|
330
|
+
}
|
|
331
|
+
renderFunction.body?.forEachChild((node) => {
|
|
332
|
+
if (ts.isVariableStatement(node)) {
|
|
333
|
+
node.declarationList.declarations.forEach((declaration) => {
|
|
334
|
+
if (ts.isObjectBindingPattern(declaration.name)) {
|
|
335
|
+
const isPropsRune = declaration.initializer && ts.isCallExpression(declaration.initializer) && ts.isIdentifier(declaration.initializer.expression) && declaration.initializer.expression.text === "$props";
|
|
336
|
+
const isPropsType = declaration.type && propsType === checker.getTypeFromTypeNode(declaration.type);
|
|
337
|
+
if (isPropsRune || isPropsType) {
|
|
338
|
+
declaration.name.elements.forEach((element) => {
|
|
339
|
+
const name = element.name.getText();
|
|
340
|
+
const prop = propMap.get(name);
|
|
341
|
+
if (prop && element.initializer) {
|
|
342
|
+
const defaultValue = initializerToDefaultValue(element.initializer, checker);
|
|
343
|
+
if (defaultValue) {
|
|
344
|
+
prop.defaultValue = defaultValue;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
});
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
if (ts.isVariableDeclaration(declaration) && ts.isIdentifier(declaration.name) && propMap.has(declaration.name.text)) {
|
|
351
|
+
const prop = propMap.get(declaration.name.text);
|
|
352
|
+
if (prop && declaration.initializer) {
|
|
353
|
+
prop.optional = true;
|
|
354
|
+
const defaultValue = initializerToDefaultValue(declaration.initializer, checker);
|
|
355
|
+
if (defaultValue) {
|
|
356
|
+
prop.defaultValue = defaultValue;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
});
|
|
361
|
+
}
|
|
362
|
+
});
|
|
363
|
+
return {
|
|
364
|
+
props: Array.from(propMap.values())
|
|
365
|
+
};
|
|
366
|
+
}
|
|
367
|
+
__name(generateDocgen, "generateDocgen");
|
|
368
|
+
|
|
369
|
+
// src/plugins/svelte-docgen.ts
|
|
370
|
+
function getComponentName(ast) {
|
|
371
|
+
const exportDefaultDeclaration = ast.body.find((n) => n.type === "ExportDefaultDeclaration");
|
|
372
|
+
if (!exportDefaultDeclaration) {
|
|
373
|
+
throw new Error("Unreachable - no default export found");
|
|
374
|
+
}
|
|
375
|
+
if (exportDefaultDeclaration.declaration.type === "Identifier") {
|
|
376
|
+
return exportDefaultDeclaration.declaration.name;
|
|
377
|
+
}
|
|
378
|
+
if (exportDefaultDeclaration.declaration.type !== "ClassDeclaration" && exportDefaultDeclaration.declaration.type !== "FunctionDeclaration") {
|
|
379
|
+
throw new Error("Unreachable - not a class or a function");
|
|
380
|
+
}
|
|
381
|
+
if (!exportDefaultDeclaration.declaration.id) {
|
|
382
|
+
throw new Error("Unreachable - unnamed class/function");
|
|
383
|
+
}
|
|
384
|
+
return exportDefaultDeclaration.declaration.id.name;
|
|
385
|
+
}
|
|
386
|
+
__name(getComponentName, "getComponentName");
|
|
387
|
+
function transformToSvelteDocParserType(type) {
|
|
388
|
+
switch (type.type) {
|
|
389
|
+
case "string":
|
|
390
|
+
return { kind: "type", type: "string", text: "string" };
|
|
391
|
+
case "number":
|
|
392
|
+
return { kind: "type", type: "number", text: "number" };
|
|
393
|
+
case "boolean":
|
|
394
|
+
return { kind: "type", type: "boolean", text: "boolean" };
|
|
395
|
+
case "symbol":
|
|
396
|
+
return { kind: "type", type: "other", text: "symbol" };
|
|
397
|
+
case "null":
|
|
398
|
+
return { kind: "type", type: "other", text: "null" };
|
|
399
|
+
case "undefined":
|
|
400
|
+
return { kind: "type", type: "other", text: "undefined" };
|
|
401
|
+
case "void":
|
|
402
|
+
return { kind: "type", type: "other", text: "void" };
|
|
403
|
+
case "any":
|
|
404
|
+
return { kind: "type", type: "any", text: "any" };
|
|
405
|
+
case "object":
|
|
406
|
+
return { kind: "type", type: "object", text: type.text };
|
|
407
|
+
case "array":
|
|
408
|
+
return { kind: "type", type: "array", text: type.text };
|
|
409
|
+
case "function":
|
|
410
|
+
return { kind: "function", text: type.text };
|
|
411
|
+
case "literal":
|
|
412
|
+
return { kind: "const", type: typeof type.value, value: type.value, text: type.text };
|
|
413
|
+
case "union": {
|
|
414
|
+
const nonNull = type.types.filter((t) => t.type !== "null");
|
|
415
|
+
const text = nonNull.map((t) => transformToSvelteDocParserType(t).text).join(" | ");
|
|
416
|
+
const types = nonNull.map((t) => transformToSvelteDocParserType(t));
|
|
417
|
+
return types.length === 1 ? types[0] : { kind: "union", type: types, text };
|
|
418
|
+
}
|
|
419
|
+
case "intersection": {
|
|
420
|
+
const text = type.types.map((t) => transformToSvelteDocParserType(t).text).join(" & ");
|
|
421
|
+
return { kind: "type", type: "intersection", text };
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
__name(transformToSvelteDocParserType, "transformToSvelteDocParserType");
|
|
426
|
+
function transformToSvelteDocParserDataItems(docgen) {
|
|
427
|
+
return docgen.props.map((p) => {
|
|
428
|
+
const required = p.optional === false && p.defaultValue === void 0;
|
|
429
|
+
return {
|
|
430
|
+
name: p.name,
|
|
431
|
+
visibility: "public",
|
|
432
|
+
description: p.description,
|
|
433
|
+
keywords: required ? [{ name: "required", description: "" }] : [],
|
|
434
|
+
kind: "let",
|
|
435
|
+
type: p.type ? transformToSvelteDocParserType(p.type) : void 0,
|
|
436
|
+
static: false,
|
|
437
|
+
readonly: false,
|
|
438
|
+
importPath: void 0,
|
|
439
|
+
originalName: void 0,
|
|
440
|
+
localName: void 0,
|
|
441
|
+
defaultValue: p.defaultValue ? p.defaultValue.text : void 0
|
|
442
|
+
};
|
|
443
|
+
});
|
|
444
|
+
}
|
|
445
|
+
__name(transformToSvelteDocParserDataItems, "transformToSvelteDocParserDataItems");
|
|
446
|
+
async function svelteDocgen() {
|
|
447
|
+
const cwd = process.cwd();
|
|
448
|
+
const include = /\.svelte$/;
|
|
449
|
+
const exclude = /node_modules\/.*/;
|
|
450
|
+
const { createFilter } = await import("vite");
|
|
451
|
+
const filter = createFilter(include, exclude);
|
|
452
|
+
const sourceFileCache = createDocgenCache();
|
|
453
|
+
return {
|
|
454
|
+
name: "storybook:svelte-docgen-plugin",
|
|
455
|
+
async transform(src, id) {
|
|
456
|
+
if (id.startsWith("\0") || !filter(id)) {
|
|
457
|
+
return void 0;
|
|
458
|
+
}
|
|
459
|
+
const resource = relative(cwd, id);
|
|
460
|
+
const docgen = generateDocgen(resource, sourceFileCache);
|
|
461
|
+
const data = transformToSvelteDocParserDataItems(docgen);
|
|
462
|
+
const componentDoc = {
|
|
463
|
+
data,
|
|
464
|
+
name: basename(resource)
|
|
465
|
+
};
|
|
466
|
+
const s = new MagicString(src);
|
|
467
|
+
const outputAst = this.parse(src);
|
|
468
|
+
const componentName = getComponentName(outputAst);
|
|
469
|
+
s.append(`
|
|
470
|
+
;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`);
|
|
471
|
+
return {
|
|
472
|
+
code: s.toString(),
|
|
473
|
+
map: s.generateMap({ hires: true, source: id })
|
|
474
|
+
};
|
|
475
|
+
}
|
|
476
|
+
};
|
|
477
|
+
}
|
|
478
|
+
__name(svelteDocgen, "svelteDocgen");
|
|
479
|
+
|
|
480
|
+
// src/utils.ts
|
|
481
|
+
import { SvelteViteWithSvelteKitError } from "storybook/internal/server-errors";
|
|
482
|
+
import { hasVitePlugins } from "@storybook/builder-vite";
|
|
483
|
+
async function handleSvelteKit(plugins, options) {
|
|
484
|
+
const frameworkPreset = await options.presets.apply("framework", {}, options);
|
|
485
|
+
const framework = typeof frameworkPreset === "string" ? frameworkPreset : frameworkPreset.name;
|
|
486
|
+
const hasSvelteKitPlugins = await hasVitePlugins(plugins, [
|
|
487
|
+
"vite-plugin-svelte-kit",
|
|
488
|
+
"vite-plugin-sveltekit-setup",
|
|
489
|
+
"vite-plugin-sveltekit-compile"
|
|
490
|
+
]);
|
|
491
|
+
if (hasSvelteKitPlugins && !framework.includes("@storybook/sveltekit")) {
|
|
492
|
+
throw new SvelteViteWithSvelteKitError();
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
__name(handleSvelteKit, "handleSvelteKit");
|
|
496
|
+
|
|
497
|
+
// src/preset.ts
|
|
498
|
+
var core = {
|
|
499
|
+
builder: import.meta.resolve("@storybook/builder-vite"),
|
|
500
|
+
renderer: import.meta.resolve("@storybook/svelte/preset")
|
|
501
|
+
};
|
|
502
|
+
var viteFinal = /* @__PURE__ */ __name(async (config, options) => {
|
|
503
|
+
const { plugins = [] } = config;
|
|
504
|
+
plugins.push(await svelteDocgen());
|
|
505
|
+
await handleSvelteKit(plugins, options);
|
|
506
|
+
return {
|
|
507
|
+
...config,
|
|
508
|
+
plugins
|
|
509
|
+
};
|
|
510
|
+
}, "viteFinal");
|
|
511
|
+
export {
|
|
512
|
+
core,
|
|
513
|
+
viteFinal
|
|
514
|
+
};
|
package/package.json
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/svelte-vite",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "Storybook for Svelte and Vite: Develop
|
|
3
|
+
"version": "10.0.0-beta.0",
|
|
4
|
+
"description": "Storybook for Svelte and Vite: Develop, document, and test UI components in isolation",
|
|
5
5
|
"keywords": [
|
|
6
|
-
"storybook"
|
|
6
|
+
"storybook",
|
|
7
|
+
"storybook-framework",
|
|
8
|
+
"svelte",
|
|
9
|
+
"vite",
|
|
10
|
+
"component",
|
|
11
|
+
"components"
|
|
7
12
|
],
|
|
8
13
|
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/svelte-vite",
|
|
9
14
|
"bugs": {
|
|
@@ -19,28 +24,22 @@
|
|
|
19
24
|
"url": "https://opencollective.com/storybook"
|
|
20
25
|
},
|
|
21
26
|
"license": "MIT",
|
|
27
|
+
"type": "module",
|
|
22
28
|
"exports": {
|
|
23
29
|
".": {
|
|
24
30
|
"types": "./dist/index.d.ts",
|
|
25
|
-
"
|
|
26
|
-
"import": "./dist/index.mjs",
|
|
27
|
-
"require": "./dist/index.js"
|
|
28
|
-
},
|
|
29
|
-
"./preset": {
|
|
30
|
-
"types": "./dist/preset.d.ts",
|
|
31
|
-
"require": "./dist/preset.js"
|
|
31
|
+
"default": "./dist/index.js"
|
|
32
32
|
},
|
|
33
33
|
"./node": {
|
|
34
34
|
"types": "./dist/node/index.d.ts",
|
|
35
|
-
"
|
|
36
|
-
"import": "./dist/node/index.mjs",
|
|
37
|
-
"require": "./dist/node/index.js"
|
|
35
|
+
"default": "./dist/node/index.js"
|
|
38
36
|
},
|
|
39
|
-
"./package.json": "./package.json"
|
|
37
|
+
"./package.json": "./package.json",
|
|
38
|
+
"./preset": {
|
|
39
|
+
"types": "./dist/preset.d.ts",
|
|
40
|
+
"default": "./dist/preset.js"
|
|
41
|
+
}
|
|
40
42
|
},
|
|
41
|
-
"main": "dist/index.js",
|
|
42
|
-
"module": "dist/index.mjs",
|
|
43
|
-
"types": "dist/index.d.ts",
|
|
44
43
|
"files": [
|
|
45
44
|
"dist/**/*",
|
|
46
45
|
"template/**/*",
|
|
@@ -50,12 +49,12 @@
|
|
|
50
49
|
"!src/**/*"
|
|
51
50
|
],
|
|
52
51
|
"scripts": {
|
|
53
|
-
"check": "jiti ../../../scripts/
|
|
54
|
-
"prep": "jiti ../../../scripts/
|
|
52
|
+
"check": "jiti ../../../scripts/check/check-package.ts",
|
|
53
|
+
"prep": "jiti ../../../scripts/build/build-package.ts"
|
|
55
54
|
},
|
|
56
55
|
"dependencies": {
|
|
57
|
-
"@storybook/builder-vite": "
|
|
58
|
-
"@storybook/svelte": "
|
|
56
|
+
"@storybook/builder-vite": "10.0.0-beta.0",
|
|
57
|
+
"@storybook/svelte": "10.0.0-beta.0",
|
|
59
58
|
"magic-string": "^0.30.0",
|
|
60
59
|
"svelte2tsx": "^0.7.35",
|
|
61
60
|
"typescript": "^4.9.4 || ^5.0.0"
|
|
@@ -66,27 +65,16 @@
|
|
|
66
65
|
"svelte": "^5.0.5",
|
|
67
66
|
"sveltedoc-parser": "^4.2.1",
|
|
68
67
|
"typescript": "^5.8.3",
|
|
69
|
-
"vite": "^
|
|
68
|
+
"vite": "^7.0.4"
|
|
70
69
|
},
|
|
71
70
|
"peerDependencies": {
|
|
72
71
|
"@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
|
|
73
|
-
"storybook": "^
|
|
72
|
+
"storybook": "^10.0.0-beta.0",
|
|
74
73
|
"svelte": "^5.0.0",
|
|
75
74
|
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
|
|
76
75
|
},
|
|
77
|
-
"engines": {
|
|
78
|
-
"node": ">=20.0.0"
|
|
79
|
-
},
|
|
80
76
|
"publishConfig": {
|
|
81
77
|
"access": "public"
|
|
82
78
|
},
|
|
83
|
-
"
|
|
84
|
-
"entries": [
|
|
85
|
-
"./src/index.ts",
|
|
86
|
-
"./src/preset.ts",
|
|
87
|
-
"./src/node/index.ts"
|
|
88
|
-
],
|
|
89
|
-
"platform": "node"
|
|
90
|
-
},
|
|
91
|
-
"gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684"
|
|
79
|
+
"gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae16"
|
|
92
80
|
}
|
package/preset.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export * from './dist/preset.js';
|
package/dist/index.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '@storybook/svelte';
|
package/dist/node/index.mjs
DELETED