@analogjs/storybook-angular 3.0.0-alpha.7 → 3.0.0-alpha.9
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/package.json +3 -5
- package/src/index.js +2 -2
- package/src/lib/build-storybook/build-storybook.js +6 -2
- package/src/lib/build-storybook/build-storybook.js.map +1 -1
- package/src/lib/preset.js +110 -164
- package/src/lib/preset.js.map +1 -1
- package/src/lib/start-storybook/start-storybook.js +6 -2
- package/src/lib/start-storybook/start-storybook.js.map +1 -1
- package/src/lib/testing.js +16 -17
- package/src/lib/testing.js.map +1 -1
- package/src/lib/utils/standalone-options.js +0 -1
- package/src/types.js +0 -1
- package/README.md +0 -270
- package/src/index.js.map +0 -1
- package/src/lib/utils/standalone-options.js.map +0 -1
- package/src/types.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@analogjs/storybook-angular",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.9",
|
|
4
4
|
"description": "Storybook Integration for Angular & Vite",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [
|
|
@@ -65,7 +65,5 @@
|
|
|
65
65
|
"publishConfig": {
|
|
66
66
|
"access": "public",
|
|
67
67
|
"provenance": true
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
"module": "./src/index.js"
|
|
71
|
-
}
|
|
68
|
+
}
|
|
69
|
+
}
|
package/src/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { applicationConfig, argsToTemplate, componentWrapperDecorator, moduleMetadata, setProjectAnnotations } from "@storybook/angular";
|
|
2
|
+
export { applicationConfig, argsToTemplate, componentWrapperDecorator, moduleMetadata, setProjectAnnotations };
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
import BuildStorybookBuilder from
|
|
2
|
-
|
|
1
|
+
import BuildStorybookBuilder from "@storybook/angular/builders/build-storybook";
|
|
2
|
+
//#region packages/storybook-angular/src/lib/build-storybook/build-storybook.ts
|
|
3
|
+
var build_storybook_default = BuildStorybookBuilder;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { build_storybook_default as default };
|
|
6
|
+
|
|
3
7
|
//# sourceMappingURL=build-storybook.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"build-storybook.js","
|
|
1
|
+
{"version":3,"file":"build-storybook.js","names":[],"sources":["../../../../../../packages/storybook-angular/src/lib/build-storybook/build-storybook.ts"],"sourcesContent":["import BuildStorybookBuilder from '@storybook/angular/builders/build-storybook';\n\nexport default BuildStorybookBuilder;\n"],"mappings":";;AAEA,IAAA,0BAAe"}
|
package/src/lib/preset.js
CHANGED
|
@@ -1,174 +1,120 @@
|
|
|
1
|
-
import { resolve } from
|
|
2
|
-
import { core as
|
|
3
|
-
import { fileURLToPath } from
|
|
4
|
-
import * as vite from
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
1
|
+
import { resolve } from "node:path";
|
|
2
|
+
import { addons, core as core$1 } from "@storybook/angular/preset";
|
|
3
|
+
import { fileURLToPath } from "node:url";
|
|
4
|
+
import * as vite from "vite";
|
|
5
|
+
//#region packages/storybook-angular/src/lib/preset.ts
|
|
6
|
+
var previewAnnotations = async (entries = [], options) => {
|
|
7
|
+
const config = fileURLToPath(import.meta.resolve("@storybook/angular/client/config"));
|
|
8
|
+
const annotations = [...entries, config];
|
|
9
|
+
if (options.enableProdMode) {
|
|
10
|
+
const previewProdPath = fileURLToPath(import.meta.resolve("@storybook/angular/client/preview-prod"));
|
|
11
|
+
annotations.unshift(previewProdPath);
|
|
12
|
+
}
|
|
13
|
+
const docsConfig = await options.presets.apply("docs", {}, options);
|
|
14
|
+
if (Object.keys(docsConfig).length > 0) {
|
|
15
|
+
const docsConfigPath = fileURLToPath(import.meta.resolve("@storybook/angular/client/docs/config"));
|
|
16
|
+
annotations.push(docsConfigPath);
|
|
17
|
+
}
|
|
18
|
+
return annotations;
|
|
19
19
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
var core = async (config, options) => {
|
|
21
|
+
const presetCore = await core$1(config, options);
|
|
22
|
+
return {
|
|
23
|
+
...presetCore,
|
|
24
|
+
builder: {
|
|
25
|
+
name: import.meta.resolve("@storybook/builder-vite"),
|
|
26
|
+
options: { ...presetCore.options }
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
29
|
};
|
|
30
30
|
async function resolveExperimentalZoneless(frameworkOptions, angularBuilderOptions) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
// 3. Auto-detect Angular 21+ (matches @storybook/angular builder behavior)
|
|
40
|
-
try {
|
|
41
|
-
const { VERSION } = await import('@angular/core');
|
|
42
|
-
return !!(VERSION.major && Number(VERSION.major) >= 21);
|
|
43
|
-
}
|
|
44
|
-
catch {
|
|
45
|
-
return false;
|
|
46
|
-
}
|
|
31
|
+
if (typeof frameworkOptions?.experimentalZoneless === "boolean") return frameworkOptions.experimentalZoneless;
|
|
32
|
+
if (typeof angularBuilderOptions?.experimentalZoneless === "boolean") return angularBuilderOptions.experimentalZoneless;
|
|
33
|
+
try {
|
|
34
|
+
const { VERSION } = await import("@angular/core");
|
|
35
|
+
return !!(VERSION.major && Number(VERSION.major) >= 21);
|
|
36
|
+
} catch {
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
47
39
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
tsconfig: typeof framework.options?.tsconfig !== 'undefined'
|
|
80
|
-
? framework.options?.tsconfig
|
|
81
|
-
: (options?.tsConfig ?? './.storybook/tsconfig.json'),
|
|
82
|
-
inlineStylesExtension: typeof framework.options?.inlineStylesExtension !== 'undefined'
|
|
83
|
-
? framework.options?.inlineStylesExtension
|
|
84
|
-
: 'css',
|
|
85
|
-
}),
|
|
86
|
-
angularOptionsPlugin(options, { normalizePath, experimentalZoneless }),
|
|
87
|
-
storybookTransformConfigPlugin(),
|
|
88
|
-
],
|
|
89
|
-
define: {
|
|
90
|
-
STORYBOOK_ANGULAR_OPTIONS: JSON.stringify({
|
|
91
|
-
experimentalZoneless: !!experimentalZoneless,
|
|
92
|
-
}),
|
|
93
|
-
},
|
|
94
|
-
});
|
|
40
|
+
var viteFinal = async (config, options) => {
|
|
41
|
+
config.plugins = (config.plugins ?? []).flat().filter((plugin) => !plugin.name.includes("analogjs"));
|
|
42
|
+
const { mergeConfig, normalizePath } = await import("vite");
|
|
43
|
+
const { default: angular } = await import("@analogjs/vite-plugin-angular");
|
|
44
|
+
const framework = await options.presets.apply("framework");
|
|
45
|
+
const experimentalZoneless = await resolveExperimentalZoneless(framework.options, options?.angularBuilderOptions);
|
|
46
|
+
return mergeConfig(config, {
|
|
47
|
+
optimizeDeps: { include: [
|
|
48
|
+
"@storybook/angular/client",
|
|
49
|
+
"@analogjs/storybook-angular",
|
|
50
|
+
"@angular/compiler",
|
|
51
|
+
"@angular/platform-browser",
|
|
52
|
+
"@angular/platform-browser/animations",
|
|
53
|
+
"tslib",
|
|
54
|
+
...experimentalZoneless ? [] : ["zone.js"]
|
|
55
|
+
] },
|
|
56
|
+
plugins: [
|
|
57
|
+
angular({
|
|
58
|
+
jit: typeof framework.options?.jit !== "undefined" ? framework.options?.jit : true,
|
|
59
|
+
liveReload: typeof framework.options?.liveReload !== "undefined" ? framework.options?.liveReload : false,
|
|
60
|
+
tsconfig: typeof framework.options?.tsconfig !== "undefined" ? framework.options?.tsconfig : options?.tsConfig ?? "./.storybook/tsconfig.json",
|
|
61
|
+
inlineStylesExtension: typeof framework.options?.inlineStylesExtension !== "undefined" ? framework.options?.inlineStylesExtension : "css"
|
|
62
|
+
}),
|
|
63
|
+
angularOptionsPlugin(options, {
|
|
64
|
+
normalizePath,
|
|
65
|
+
experimentalZoneless
|
|
66
|
+
}),
|
|
67
|
+
storybookTransformConfigPlugin()
|
|
68
|
+
],
|
|
69
|
+
define: { STORYBOOK_ANGULAR_OPTIONS: JSON.stringify({ experimentalZoneless: !!experimentalZoneless }) }
|
|
70
|
+
});
|
|
95
71
|
};
|
|
96
|
-
function angularOptionsPlugin(options, { normalizePath, experimentalZoneless
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
styles.forEach((style) => {
|
|
127
|
-
imports.push(style);
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
if (!experimentalZoneless) {
|
|
131
|
-
imports.push('zone.js');
|
|
132
|
-
}
|
|
133
|
-
// Use vite config root when angularBuilderContext is not available
|
|
134
|
-
// (e.g., when running via Vitest instead of Angular builders)
|
|
135
|
-
const projectRoot = resolvedConfig?.root ?? process.cwd();
|
|
136
|
-
return {
|
|
137
|
-
code: `
|
|
138
|
-
${imports
|
|
139
|
-
.map((extraImport) => {
|
|
140
|
-
if (extraImport.startsWith('.') ||
|
|
141
|
-
extraImport.startsWith('src')) {
|
|
142
|
-
// relative to root
|
|
143
|
-
return `import '${resolve(projectRoot, extraImport)}';`;
|
|
144
|
-
}
|
|
145
|
-
// absolute import
|
|
146
|
-
return `import '${extraImport}';`;
|
|
147
|
-
})
|
|
148
|
-
.join('\n')}
|
|
72
|
+
function angularOptionsPlugin(options, { normalizePath, experimentalZoneless }) {
|
|
73
|
+
let resolvedConfig;
|
|
74
|
+
return {
|
|
75
|
+
name: "analogjs-storybook-options-plugin",
|
|
76
|
+
config(userConfig) {
|
|
77
|
+
resolvedConfig = userConfig;
|
|
78
|
+
const loadPaths = options?.angularBuilderOptions?.stylePreprocessorOptions?.loadPaths;
|
|
79
|
+
const sassOptions = options?.angularBuilderOptions?.stylePreprocessorOptions?.sass;
|
|
80
|
+
if (Array.isArray(loadPaths)) {
|
|
81
|
+
const workspaceRoot = options.angularBuilderContext?.workspaceRoot ?? userConfig?.root ?? process.cwd();
|
|
82
|
+
return { css: { preprocessorOptions: { scss: {
|
|
83
|
+
...sassOptions,
|
|
84
|
+
loadPaths: loadPaths.map((loadPath) => `${resolve(workspaceRoot, loadPath)}`)
|
|
85
|
+
} } } };
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
async transform(code, id) {
|
|
89
|
+
if (normalizePath(id).endsWith(normalizePath(`${options.configDir}/preview.ts`))) {
|
|
90
|
+
const imports = [];
|
|
91
|
+
const styles = options?.angularBuilderOptions?.styles;
|
|
92
|
+
if (Array.isArray(styles)) styles.forEach((style) => {
|
|
93
|
+
imports.push(style);
|
|
94
|
+
});
|
|
95
|
+
if (!experimentalZoneless) imports.push("zone.js");
|
|
96
|
+
const projectRoot = resolvedConfig?.root ?? process.cwd();
|
|
97
|
+
return { code: `
|
|
98
|
+
${imports.map((extraImport) => {
|
|
99
|
+
if (extraImport.startsWith(".") || extraImport.startsWith("src")) return `import '${resolve(projectRoot, extraImport)}';`;
|
|
100
|
+
return `import '${extraImport}';`;
|
|
101
|
+
}).join("\n")}
|
|
149
102
|
${code}
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
},
|
|
155
|
-
};
|
|
103
|
+
` };
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
};
|
|
156
107
|
}
|
|
157
108
|
function storybookTransformConfigPlugin() {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
// This fixes display of compodoc argtypes
|
|
166
|
-
keepNames: true,
|
|
167
|
-
},
|
|
168
|
-
};
|
|
169
|
-
},
|
|
170
|
-
};
|
|
109
|
+
return {
|
|
110
|
+
name: "analogjs-storybook-transform-config",
|
|
111
|
+
apply: "build",
|
|
112
|
+
config() {
|
|
113
|
+
return { [vite.rolldownVersion ? "oxc" : "esbuild"]: { keepNames: true } };
|
|
114
|
+
}
|
|
115
|
+
};
|
|
171
116
|
}
|
|
172
|
-
|
|
173
|
-
|
|
117
|
+
//#endregion
|
|
118
|
+
export { addons, core, previewAnnotations, viteFinal };
|
|
119
|
+
|
|
174
120
|
//# sourceMappingURL=preset.js.map
|
package/src/lib/preset.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preset.js","
|
|
1
|
+
{"version":3,"file":"preset.js","names":[],"sources":["../../../../../packages/storybook-angular/src/lib/preset.ts"],"sourcesContent":["import { resolve } from 'node:path';\nimport { core as PresetCore } from '@storybook/angular/preset';\nimport { fileURLToPath } from 'node:url';\nimport type { Plugin, UserConfig } from 'vite';\nimport * as vite from 'vite';\n\nexport const previewAnnotations = async (\n entries: string[] = [],\n options: any,\n): Promise<string[]> => {\n const config = fileURLToPath(\n import.meta.resolve('@storybook/angular/client/config'),\n );\n const annotations = [...entries, config];\n\n if (options.enableProdMode) {\n const previewProdPath = fileURLToPath(\n import.meta.resolve('@storybook/angular/client/preview-prod'),\n );\n annotations.unshift(previewProdPath);\n }\n\n const docsConfig = await options.presets.apply('docs', {}, options);\n const docsEnabled = Object.keys(docsConfig).length > 0;\n if (docsEnabled) {\n const docsConfigPath = fileURLToPath(\n import.meta.resolve('@storybook/angular/client/docs/config'),\n );\n annotations.push(docsConfigPath);\n }\n return annotations;\n};\n\nexport const core = async (config: any, options: any): Promise<any> => {\n const presetCore = await PresetCore(config, options);\n return {\n ...presetCore,\n builder: {\n name: import.meta.resolve('@storybook/builder-vite'),\n options: { ...presetCore.options },\n },\n };\n};\n\nasync function resolveExperimentalZoneless(\n frameworkOptions: any,\n angularBuilderOptions: any,\n) {\n // 1. Explicit framework option (user's .storybook/main.ts)\n if (typeof frameworkOptions?.experimentalZoneless === 'boolean') {\n return frameworkOptions.experimentalZoneless;\n }\n\n // 2. Angular builder options (set by start-storybook/build-storybook)\n if (typeof angularBuilderOptions?.experimentalZoneless === 'boolean') {\n return angularBuilderOptions.experimentalZoneless;\n }\n\n // 3. Auto-detect Angular 21+ (matches @storybook/angular builder behavior)\n try {\n const { VERSION } = await import('@angular/core');\n return !!(VERSION.major && Number(VERSION.major) >= 21);\n } catch {\n return false;\n }\n}\n\nexport const viteFinal = async (config: any, options: any): Promise<any> => {\n // Remove any loaded analogjs plugins from a vite.config.(m)ts file\n config.plugins = (config.plugins ?? [])\n .flat()\n .filter((plugin: any) => !plugin.name.includes('analogjs'));\n\n // Merge custom configuration into the default config\n const { mergeConfig, normalizePath } = await import('vite');\n const { default: angular } = await import('@analogjs/vite-plugin-angular');\n const framework = await options.presets.apply('framework');\n const experimentalZoneless = await resolveExperimentalZoneless(\n framework.options,\n options?.angularBuilderOptions,\n );\n return mergeConfig(config, {\n // Add dependencies to pre-optimization\n optimizeDeps: {\n include: [\n '@storybook/angular/client',\n '@analogjs/storybook-angular',\n '@angular/compiler',\n '@angular/platform-browser',\n '@angular/platform-browser/animations',\n 'tslib',\n ...(experimentalZoneless ? [] : ['zone.js']),\n ],\n },\n plugins: [\n angular({\n jit:\n typeof framework.options?.jit !== 'undefined'\n ? framework.options?.jit\n : true,\n liveReload:\n typeof framework.options?.liveReload !== 'undefined'\n ? framework.options?.liveReload\n : false,\n tsconfig:\n typeof framework.options?.tsconfig !== 'undefined'\n ? framework.options?.tsconfig\n : (options?.tsConfig ?? './.storybook/tsconfig.json'),\n inlineStylesExtension:\n typeof framework.options?.inlineStylesExtension !== 'undefined'\n ? framework.options?.inlineStylesExtension\n : 'css',\n }),\n angularOptionsPlugin(options, { normalizePath, experimentalZoneless }),\n storybookTransformConfigPlugin(),\n ],\n define: {\n STORYBOOK_ANGULAR_OPTIONS: JSON.stringify({\n experimentalZoneless: !!experimentalZoneless,\n }),\n },\n });\n};\n\nfunction angularOptionsPlugin(\n options: any,\n {\n normalizePath,\n experimentalZoneless,\n }: { normalizePath: (path: string) => string; experimentalZoneless: boolean },\n): Plugin {\n let resolvedConfig: UserConfig | undefined;\n return {\n name: 'analogjs-storybook-options-plugin',\n config(userConfig: UserConfig) {\n resolvedConfig = userConfig;\n const loadPaths =\n options?.angularBuilderOptions?.stylePreprocessorOptions?.loadPaths;\n const sassOptions =\n options?.angularBuilderOptions?.stylePreprocessorOptions?.sass;\n\n if (Array.isArray(loadPaths)) {\n const workspaceRoot =\n options.angularBuilderContext?.workspaceRoot ??\n userConfig?.root ??\n process.cwd();\n return {\n css: {\n preprocessorOptions: {\n scss: {\n ...sassOptions,\n loadPaths: loadPaths.map(\n (loadPath) => `${resolve(workspaceRoot, loadPath)}`,\n ),\n },\n },\n },\n };\n }\n\n return;\n },\n async transform(code: string, id: string) {\n if (\n normalizePath(id).endsWith(\n normalizePath(`${options.configDir}/preview.ts`),\n )\n ) {\n const imports = [];\n const styles = options?.angularBuilderOptions?.styles;\n\n if (Array.isArray(styles)) {\n styles.forEach((style) => {\n imports.push(style);\n });\n }\n\n if (!experimentalZoneless) {\n imports.push('zone.js');\n }\n\n // Use vite config root when angularBuilderContext is not available\n // (e.g., when running via Vitest instead of Angular builders)\n const projectRoot = resolvedConfig?.root ?? process.cwd();\n\n return {\n code: `\n ${imports\n .map((extraImport) => {\n if (\n extraImport.startsWith('.') ||\n extraImport.startsWith('src')\n ) {\n // relative to root\n return `import '${resolve(projectRoot, extraImport)}';`;\n }\n\n // absolute import\n return `import '${extraImport}';`;\n })\n .join('\\n')}\n ${code}\n `,\n };\n }\n\n return;\n },\n };\n}\n\nfunction storybookTransformConfigPlugin(): Plugin {\n return {\n name: 'analogjs-storybook-transform-config',\n apply: 'build',\n config() {\n return {\n [vite.rolldownVersion ? 'oxc' : 'esbuild']: {\n // Don't mangle class names during the build\n // This fixes display of compodoc argtypes\n keepNames: true,\n },\n };\n },\n };\n}\n\nexport { addons } from '@storybook/angular/preset';\n//# sourceMappingURL=preset.js.map\n"],"mappings":"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"}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
import StartStorybookBuilder from
|
|
2
|
-
|
|
1
|
+
import StartStorybookBuilder from "@storybook/angular/builders/start-storybook";
|
|
2
|
+
//#region packages/storybook-angular/src/lib/start-storybook/start-storybook.ts
|
|
3
|
+
var start_storybook_default = StartStorybookBuilder;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { start_storybook_default as default };
|
|
6
|
+
|
|
3
7
|
//# sourceMappingURL=start-storybook.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"start-storybook.js","
|
|
1
|
+
{"version":3,"file":"start-storybook.js","names":[],"sources":["../../../../../../packages/storybook-angular/src/lib/start-storybook/start-storybook.ts"],"sourcesContent":["import StartStorybookBuilder from '@storybook/angular/builders/start-storybook';\n\nexport default StartStorybookBuilder;\n"],"mappings":";;AAEA,IAAA,0BAAe"}
|
package/src/lib/testing.js
CHANGED
|
@@ -1,21 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { setProjectAnnotations as
|
|
3
|
-
import * as configAnnotations from
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import "@angular/compiler";
|
|
2
|
+
import { setProjectAnnotations as setProjectAnnotations$1 } from "@storybook/angular/client";
|
|
3
|
+
import * as configAnnotations from "@storybook/angular/client/config";
|
|
4
|
+
//#region packages/storybook-angular/src/lib/testing.ts
|
|
5
|
+
var render = configAnnotations.render;
|
|
6
|
+
async function renderToCanvas(context, element) {
|
|
7
|
+
element.id = context.id;
|
|
8
|
+
await configAnnotations.renderToCanvas(context, element);
|
|
8
9
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
var renderAnnotations = {
|
|
11
|
+
render,
|
|
12
|
+
renderToCanvas
|
|
12
13
|
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
renderAnnotations,
|
|
16
|
-
...(Array.isArray(projectAnnotations)
|
|
17
|
-
? projectAnnotations
|
|
18
|
-
: [projectAnnotations]),
|
|
19
|
-
]);
|
|
14
|
+
function setProjectAnnotations(projectAnnotations) {
|
|
15
|
+
return setProjectAnnotations$1([renderAnnotations, ...Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations]]);
|
|
20
16
|
}
|
|
17
|
+
//#endregion
|
|
18
|
+
export { render, renderToCanvas, setProjectAnnotations };
|
|
19
|
+
|
|
21
20
|
//# sourceMappingURL=testing.js.map
|
package/src/lib/testing.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testing.js","
|
|
1
|
+
{"version":3,"file":"testing.js","names":[],"sources":["../../../../../packages/storybook-angular/src/lib/testing.ts"],"sourcesContent":["import '@angular/compiler';\nimport type { AngularRenderer } from '@storybook/angular';\nimport { setProjectAnnotations as originalSetProjectAnnotations } from '@storybook/angular/client';\nimport {\n NamedOrDefaultProjectAnnotations,\n NormalizedProjectAnnotations,\n RenderContext,\n} from 'storybook/internal/types';\nimport * as configAnnotations from '@storybook/angular/client/config';\n\nexport const render: typeof configAnnotations.render = configAnnotations.render;\n\nexport async function renderToCanvas(\n context: RenderContext<AngularRenderer>,\n element: HTMLElement,\n): Promise<void> {\n element.id = context.id;\n await configAnnotations.renderToCanvas(context, element);\n}\n\nconst renderAnnotations = {\n render,\n renderToCanvas,\n};\n\nexport function setProjectAnnotations(\n projectAnnotations:\n | NamedOrDefaultProjectAnnotations<any>\n | NamedOrDefaultProjectAnnotations<any>[],\n): NormalizedProjectAnnotations<AngularRenderer> {\n return originalSetProjectAnnotations([\n renderAnnotations,\n ...(Array.isArray(projectAnnotations)\n ? projectAnnotations\n : [projectAnnotations]),\n ]) as NormalizedProjectAnnotations<AngularRenderer>;\n}\n"],"mappings":";;;;AAUA,IAAa,SAA0C,kBAAkB;AAEzE,eAAsB,eACpB,SACA,SACe;AACf,SAAQ,KAAK,QAAQ;AACrB,OAAM,kBAAkB,eAAe,SAAS,QAAQ;;AAG1D,IAAM,oBAAoB;CACxB;CACA;CACD;AAED,SAAgB,sBACd,oBAG+C;AAC/C,QAAO,wBAA8B,CACnC,mBACA,GAAI,MAAM,QAAQ,mBAAmB,GACjC,qBACA,CAAC,mBAAmB,CACzB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=standalone-options.js.map
|
package/src/types.js
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=types.js.map
|
package/README.md
DELETED
|
@@ -1,270 +0,0 @@
|
|
|
1
|
-
# @analogjs/storybook-angular
|
|
2
|
-
|
|
3
|
-
Integration package for Storybook using Angular & Vite.
|
|
4
|
-
|
|
5
|
-
> This is a community integration not maintained by the Storybook team. If you have issues,
|
|
6
|
-
> file an issue in our [GitHub repo](https://github.com/analogjs/analog/issues).
|
|
7
|
-
|
|
8
|
-
## Setup
|
|
9
|
-
|
|
10
|
-
If you don't have Storybook setup already, run the following command to initialize Storybook for your project:
|
|
11
|
-
|
|
12
|
-
```sh
|
|
13
|
-
npx storybook@latest init
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
Follow the provided prompts, and commit your changes.
|
|
17
|
-
|
|
18
|
-
## Installing the Storybook package
|
|
19
|
-
|
|
20
|
-
Install the Storybook Plugin for Angular and Vite. Depending on your preferred package manager, run one of the following commands:
|
|
21
|
-
|
|
22
|
-
```shell
|
|
23
|
-
npm install @analogjs/storybook-angular --save-dev
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## Configuring Storybook
|
|
27
|
-
|
|
28
|
-
Update the `.storybook/main.ts` file to use the `StorybookConfig` type. Also update the `framework` to use the `@analogjs/storybook-angular` package.
|
|
29
|
-
|
|
30
|
-
```ts
|
|
31
|
-
import { StorybookConfig } from '@analogjs/storybook-angular';
|
|
32
|
-
|
|
33
|
-
const config: StorybookConfig = {
|
|
34
|
-
// other config, addons, etc.
|
|
35
|
-
framework: {
|
|
36
|
-
name: '@analogjs/storybook-angular',
|
|
37
|
-
options: {},
|
|
38
|
-
},
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export default config;
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
Remove the existing `webpackFinal` config function if present.
|
|
45
|
-
|
|
46
|
-
Next, update the Storybook targets in the `angular.json` or `project.json`
|
|
47
|
-
|
|
48
|
-
```json
|
|
49
|
-
"storybook": {
|
|
50
|
-
"builder": "@analogjs/storybook-angular:start-storybook",
|
|
51
|
-
},
|
|
52
|
-
"build-storybook": {
|
|
53
|
-
"builder": "@analogjs/storybook-angular:build-storybook"
|
|
54
|
-
}
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
Remove any `webpack` specific options and remove the `browserTarget` option.
|
|
58
|
-
|
|
59
|
-
Add the `/storybook-static` folder to the `.gitignore` file.
|
|
60
|
-
|
|
61
|
-
## Setting up CSS
|
|
62
|
-
|
|
63
|
-
To register global styles, add them to the `@analogjs/storybook-angular` builder options in the `angular.json` or `project.json`.
|
|
64
|
-
|
|
65
|
-
```json
|
|
66
|
-
"storybook": {
|
|
67
|
-
"builder": "@analogjs/storybook-angular:start-storybook",
|
|
68
|
-
"options": {
|
|
69
|
-
// ... other options
|
|
70
|
-
"styles": [
|
|
71
|
-
"src/styles.css"
|
|
72
|
-
],
|
|
73
|
-
"stylePreprocessorOptions": {
|
|
74
|
-
"loadPaths": ["libs/my-lib/styles"]
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
"build-storybook": {
|
|
79
|
-
"builder": "@analogjs/storybook-angular:build-storybook",
|
|
80
|
-
"options": {
|
|
81
|
-
// ... other options
|
|
82
|
-
"styles": [
|
|
83
|
-
"src/styles.css"
|
|
84
|
-
],
|
|
85
|
-
"stylePreprocessorOptions": {
|
|
86
|
-
"loadPaths": ["libs/my-lib/styles"]
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
## Enabling Zoneless Change Detection
|
|
93
|
-
|
|
94
|
-
To use zoneless change detection for the Storybook, add the `experimentalZoneless` flag to the `@analogjs/storybook-angular` builder options in the `angular.json`.
|
|
95
|
-
|
|
96
|
-
```json
|
|
97
|
-
"storybook": {
|
|
98
|
-
"builder": "@analogjs/storybook-angular:start-storybook",
|
|
99
|
-
"options": {
|
|
100
|
-
// ... other options
|
|
101
|
-
"experimentalZoneless": true
|
|
102
|
-
}
|
|
103
|
-
},
|
|
104
|
-
"build-storybook": {
|
|
105
|
-
"builder": "@analogjs/storybook-angular:build-storybook",
|
|
106
|
-
"options": {
|
|
107
|
-
// ... other options
|
|
108
|
-
"experimentalZoneless": true
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
For `project.json`
|
|
114
|
-
|
|
115
|
-
```json
|
|
116
|
-
"storybook": {
|
|
117
|
-
"executor": "@analogjs/storybook-angular:start-storybook",
|
|
118
|
-
"options": {
|
|
119
|
-
// ... other options
|
|
120
|
-
"configDir": "path/to/.storybook",
|
|
121
|
-
"experimentalZoneless": true,
|
|
122
|
-
"compodoc": false
|
|
123
|
-
}
|
|
124
|
-
},
|
|
125
|
-
"build-storybook": {
|
|
126
|
-
"executor": "@analogjs/storybook-angular:build-storybook",
|
|
127
|
-
"options": {
|
|
128
|
-
// ... other options
|
|
129
|
-
"configDir": "path/to/.storybook",
|
|
130
|
-
"experimentalZoneless": true,
|
|
131
|
-
"compodoc": false
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
> Zoneless change detection is the default for new projects starting Angular v21.
|
|
137
|
-
|
|
138
|
-
## Setting up Static Assets
|
|
139
|
-
|
|
140
|
-
Static assets are configured in the `.storybook/main.ts` file using the `staticDirs` array.
|
|
141
|
-
|
|
142
|
-
The example below shows how to add the `public` directory from `src/public` relative to the `.storybook/main.ts` file.
|
|
143
|
-
|
|
144
|
-
```ts
|
|
145
|
-
import { StorybookConfig } from '@analogjs/storybook-angular';
|
|
146
|
-
|
|
147
|
-
const config: StorybookConfig = {
|
|
148
|
-
// other config, addons, etc.
|
|
149
|
-
framework: {
|
|
150
|
-
name: '@analogjs/storybook-angular',
|
|
151
|
-
options: {},
|
|
152
|
-
},
|
|
153
|
-
staticDirs: ['../public'],
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
export default config;
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
See the [Storybook docs on images and assets](https://storybook.js.org/docs/configure/integration/images-and-assets) for more information.
|
|
160
|
-
|
|
161
|
-
## Running Storybook
|
|
162
|
-
|
|
163
|
-
Run the command for starting the development server.
|
|
164
|
-
|
|
165
|
-
```sh
|
|
166
|
-
npm run storybook
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
## Building Storybook
|
|
170
|
-
|
|
171
|
-
Run the command for building the storybook.
|
|
172
|
-
|
|
173
|
-
```sh
|
|
174
|
-
npm run build-storybook
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
## Using TypeScript Config Path Aliases
|
|
178
|
-
|
|
179
|
-
If you are using `paths` in your `tsconfig.json`, support for those aliases can be added to the `vite.config.ts`.
|
|
180
|
-
|
|
181
|
-
### With Angular CLI
|
|
182
|
-
|
|
183
|
-
First, install the `vite-tsconfig-paths` package.
|
|
184
|
-
|
|
185
|
-
```shell
|
|
186
|
-
npm install vite-tsconfig-paths --save-dev
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
Next, add the plugin to the `plugins` array in the `.storybook/main.ts`.
|
|
190
|
-
|
|
191
|
-
```ts
|
|
192
|
-
import viteTsConfigPaths from 'vite-tsconfig-paths';
|
|
193
|
-
import { UserConfig, mergeConfig } from 'vite';
|
|
194
|
-
|
|
195
|
-
import type { StorybookConfig } from '@analogjs/storybook-angular';
|
|
196
|
-
|
|
197
|
-
const config: StorybookConfig = {
|
|
198
|
-
// ... other config, addons, etc.
|
|
199
|
-
async viteFinal(config: UserConfig) {
|
|
200
|
-
return mergeConfig(config, {
|
|
201
|
-
plugins: [viteTsConfigPaths()],
|
|
202
|
-
});
|
|
203
|
-
},
|
|
204
|
-
};
|
|
205
|
-
|
|
206
|
-
export default config;
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
### With Nx
|
|
210
|
-
|
|
211
|
-
For Nx workspaces, import and use the `nxViteTsPaths` plugin from the `@nx/vite` package. Add the plugin to the `plugins` array in the `.storybook/main.ts`.
|
|
212
|
-
|
|
213
|
-
```ts
|
|
214
|
-
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
|
|
215
|
-
import { UserConfig, mergeConfig } from 'vite';
|
|
216
|
-
|
|
217
|
-
import type { StorybookConfig } from '@analogjs/storybook-angular';
|
|
218
|
-
|
|
219
|
-
const config: StorybookConfig = {
|
|
220
|
-
// ... other config, addons, etc.
|
|
221
|
-
async viteFinal(config: UserConfig) {
|
|
222
|
-
return mergeConfig(config, {
|
|
223
|
-
plugins: [nxViteTsPaths()],
|
|
224
|
-
});
|
|
225
|
-
},
|
|
226
|
-
};
|
|
227
|
-
|
|
228
|
-
export default config;
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
## Using File Replacements
|
|
232
|
-
|
|
233
|
-
You can also use the `replaceFiles()` plugin from Nx to replace files during your build.
|
|
234
|
-
|
|
235
|
-
Import the plugin and set it up:
|
|
236
|
-
|
|
237
|
-
```ts
|
|
238
|
-
import { replaceFiles } from '@nx/vite/plugins/rollup-replace-files.plugin';
|
|
239
|
-
import { UserConfig, mergeConfig } from 'vite';
|
|
240
|
-
|
|
241
|
-
import type { StorybookConfig } from '@analogjs/storybook-angular';
|
|
242
|
-
|
|
243
|
-
const config: StorybookConfig = {
|
|
244
|
-
// ... other config, addons, etc.
|
|
245
|
-
async viteFinal(config: UserConfig) {
|
|
246
|
-
return mergeConfig(config, {
|
|
247
|
-
plugins: [
|
|
248
|
-
replaceFiles([
|
|
249
|
-
{
|
|
250
|
-
replace: './src/one.ts',
|
|
251
|
-
with: './src/two.ts',
|
|
252
|
-
},
|
|
253
|
-
]),
|
|
254
|
-
],
|
|
255
|
-
});
|
|
256
|
-
},
|
|
257
|
-
};
|
|
258
|
-
|
|
259
|
-
export default config;
|
|
260
|
-
```
|
|
261
|
-
|
|
262
|
-
Adding the replacement files to `files` array in the `tsconfig.app.json` may also be necessary.
|
|
263
|
-
|
|
264
|
-
```json
|
|
265
|
-
{
|
|
266
|
-
"extends": "./tsconfig.json",
|
|
267
|
-
// other config
|
|
268
|
-
"files": ["src/main.ts", "src/main.server.ts", "src/two.ts"]
|
|
269
|
-
}
|
|
270
|
-
```
|
package/src/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/storybook-angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,iBAAiB,EACjB,cAAc,EACd,yBAAyB,EACzB,cAAc,EACd,qBAAqB,GACtB,MAAM,oBAAoB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"standalone-options.js","sourceRoot":"","sources":["../../../../../../packages/storybook-angular/src/lib/utils/standalone-options.ts"],"names":[],"mappings":""}
|
package/src/types.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../packages/storybook-angular/src/types.ts"],"names":[],"mappings":""}
|