@storybook/angular-vite 0.0.0-canary-test

package/dist/index.js

@@ -0,0 +1,20 @@
+import {
+  __definePreview,
+  applicationConfig,
+  argsToTemplate,
+  componentWrapperDecorator,
+  moduleMetadata,
+  setProjectAnnotations
+} from "./_browser-chunks/chunk-TARB3NLN.js";
+import "./_browser-chunks/chunk-CIJX6X7B.js";
+import "./_browser-chunks/chunk-4WZEHS2U.js";
+import "./_browser-chunks/chunk-6U6AH4EH.js";
+export {
+  __definePreview,
+  applicationConfig,
+  argsToTemplate,
+  componentWrapperDecorator,
+  __definePreview as definePreview,
+  moduleMetadata,
+  setProjectAnnotations
+};

package/dist/node/index.d.ts

@@ -0,0 +1,31 @@
+import { StorybookConfig as StorybookConfig$1, CompatibleString } from 'storybook/internal/types';
+import { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+
+type FrameworkName = CompatibleString<'@storybook/angular-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
+type FrameworkOptions = {
+    builder?: BuilderOptions;
+    jit?: boolean;
+    liveReload?: boolean;
+    inlineStylesExtension?: string;
+    tsconfig?: string;
+    zoneless?: boolean;
+};
+type StorybookConfigFramework = {
+    framework: FrameworkName | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+    };
+    core?: StorybookConfig$1['core'] & {
+        builder?: BuilderName | {
+            name: BuilderName;
+            options: BuilderOptions;
+        };
+    };
+};
+/** The interface for Storybook configuration in `main.ts` files. */
+type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof StorybookConfigFramework> & StorybookConfigVite & StorybookConfigFramework;
+
+declare function defineMain(config: StorybookConfig): StorybookConfig;
+
+export { type StorybookConfig, defineMain };

package/dist/node/index.js

@@ -0,0 +1,19 @@
+import CJS_COMPAT_NODE_URL_w331jboqnti from 'node:url';
+import CJS_COMPAT_NODE_PATH_w331jboqnti from 'node:path';
+import CJS_COMPAT_NODE_MODULE_w331jboqnti from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_w331jboqnti.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_w331jboqnti.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_w331jboqnti.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+
+// src/node/index.ts
+function defineMain(config) {
+  return config;
+}
+export {
+  defineMain
+};

package/dist/preset.js

@@ -0,0 +1,235 @@
+import CJS_COMPAT_NODE_URL_w331jboqnti from 'node:url';
+import CJS_COMPAT_NODE_PATH_w331jboqnti from 'node:path';
+import CJS_COMPAT_NODE_MODULE_w331jboqnti from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_w331jboqnti.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_w331jboqnti.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_w331jboqnti.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+
+// src/preset.ts
+import { findConfigFile } from "storybook/internal/common";
+import {
+  babelParser,
+  extractMockCalls,
+  findMockRedirect,
+  getAutomockCode,
+  getRealPath
+} from "storybook/internal/mocking-utils";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+var addons = [], previewAnnotations = async (entries = [], options) => {
+  let config = fileURLToPath(import.meta.resolve("@storybook/angular-vite/client/config")), annotations = [...entries, config];
+  if (options.enableProdMode) {
+    let previewProdPath = fileURLToPath(
+      import.meta.resolve("@storybook/angular-vite/client/preview-prod")
+    );
+    annotations.unshift(previewProdPath);
+  }
+  let docsConfig = await options.presets.apply("docs", {}, options);
+  if (Object.keys(docsConfig).length > 0) {
+    let docsConfigPath = fileURLToPath(
+      import.meta.resolve("@storybook/angular-vite/client/docs/config")
+    );
+    annotations.push(docsConfigPath);
+  }
+  return annotations;
+}, core = async (config, options) => {
+  let framework = await options.presets.apply("framework");
+  return {
+    ...config,
+    builder: {
+      name: import.meta.resolve("@storybook/builder-vite"),
+      options: typeof framework == "string" ? {} : framework.options.builder || {}
+    }
+  };
+};
+function resolveZoneless(frameworkOptions, angularBuilderOptions) {
+  return frameworkOptions?.zoneless ?? angularBuilderOptions?.zoneless ?? !0;
+}
+var viteFinal = async (config, options) => {
+  config.plugins = (config.plugins ?? []).flat().filter((plugin) => !plugin.name.includes("analogjs")).map((plugin) => plugin?.name === "plugin-csf" && plugin.enforce === "pre" ? { ...plugin, enforce: void 0 } : plugin);
+  let { mergeConfig, normalizePath } = await import("vite"), { default: angular } = await import("@analogjs/vite-plugin-angular"), framework = await options.presets.apply("framework"), zoneless = resolveZoneless(framework.options, options?.angularBuilderOptions), angularPlugins = angular({
+    jit: typeof framework.options?.jit < "u" ? framework.options?.jit : !0,
+    liveReload: typeof framework.options?.liveReload < "u" ? framework.options?.liveReload : !1,
+    tsconfig: typeof framework.options?.tsconfig < "u" ? framework.options?.tsconfig : options?.tsConfig ?? "./.storybook/tsconfig.json",
+    inlineStylesExtension: typeof framework.options?.inlineStylesExtension < "u" ? framework.options?.inlineStylesExtension : "css"
+  }), pluginsToInject = (Array.isArray(angularPlugins) ? angularPlugins : [angularPlugins]).filter(Boolean).map((plugin) => plugin?.name === "@analogjs/vite-plugin-angular" && !plugin.enforce ? { ...plugin, enforce: "pre" } : plugin);
+  return mergeConfig(config, {
+    // Add dependencies to pre-optimization
+    optimizeDeps: {
+      include: [
+        "@storybook/angular-vite/client",
+        "@storybook/angular-vite",
+        "@angular/compiler",
+        "@angular/platform-browser",
+        "@angular/platform-browser/animations",
+        "@angular/common/http",
+        "tslib",
+        ...zoneless ? [] : ["zone.js"]
+      ]
+    },
+    build: {
+      rolldownOptions: {
+        output: {
+          // Preserve original class/function names through the production
+          // bundle. Compodoc-derived argTypes are looked up by class name at
+          // runtime (`findComponentByName(component.name, …)`), and the
+          // angular-vite `cleanArgsDecorator` strips any arg whose argType
+          // lacks an `action` or `control` flag. If the bundler renames
+          // `ButtonComponent` → `f` the lookup fails, no Output argTypes
+          // are emitted, and `onClick`/other handlers get stripped from args
+          // before the renderer sees them — manifesting as missing action
+          // bindings and unbound @Input() values (e.g. core-argmapping).
+          // Rolldown's oxc minifier renames by default, so the production
+          // bundle needs this explicit opt-in.
+          keepNames: !0,
+          // Rolldown's lazy-init wrapper splits @angular/platform-browser and
+          // @angular/common/http into separate chunks. The platform-browser
+          // chunk extends a class imported from the http xhr chunk but the
+          // generated wrapper never invokes the dependent init thunk, leaving
+          // the imported class undefined at evaluation time. Merging them keeps
+          // the inheritance contiguous in a single chunk.
+          manualChunks(id) {
+            if (id.includes("@angular/platform-browser") || id.includes("@angular/common"))
+              return "angular-platform";
+          }
+        }
+      }
+    },
+    plugins: [
+      ...pluginsToInject,
+      angularViteRedirectReapplyPlugin(options),
+      angularOptionsPlugin(options, { normalizePath, zoneless }),
+      storybookOxcPlugin()
+    ],
+    define: {
+      STORYBOOK_ANGULAR_OPTIONS: JSON.stringify({
+        zoneless: !!zoneless
+      })
+    }
+  });
+};
+function angularOptionsPlugin(options, { normalizePath, zoneless }) {
+  let resolvedConfig;
+  return {
+    name: "storybook-angular-vite-options-plugin",
+    config(userConfig) {
+      resolvedConfig = userConfig;
+      let loadPaths = options?.angularBuilderOptions?.stylePreprocessorOptions?.loadPaths, sassOptions = options?.angularBuilderOptions?.stylePreprocessorOptions?.sass;
+      if (Array.isArray(loadPaths)) {
+        let workspaceRoot = options.angularBuilderContext?.workspaceRoot ?? userConfig?.root ?? process.cwd();
+        return {
+          css: {
+            preprocessorOptions: {
+              scss: {
+                ...sassOptions,
+                loadPaths: loadPaths.map((loadPath) => `${resolve(workspaceRoot, loadPath)}`)
+              }
+            }
+          }
+        };
+      }
+    },
+    async transform(code, id) {
+      if (normalizePath(id).endsWith(normalizePath(`${options.configDir}/preview.ts`))) {
+        let imports = [], styles = options?.angularBuilderOptions?.styles;
+        Array.isArray(styles) && styles.forEach((style) => {
+          imports.push(style);
+        }), zoneless || imports.push("zone.js");
+        let projectRoot = resolvedConfig?.root ?? process.cwd();
+        return {
+          code: `
+            ${imports.map((extraImport) => extraImport.startsWith(".") || extraImport.startsWith("src") ? `import '${normalizePath(resolve(projectRoot, extraImport))}';` : `import '${extraImport}';`).join(`
+`)}
+            ${code}
+          `
+        };
+      }
+    }
+  };
+}
+function angularViteRedirectReapplyPlugin(options) {
+  let viteConfig = {}, redirects = [], automocks = [];
+  return {
+    name: "storybook-angular-vite-redirect-reapply",
+    configResolved(c) {
+      viteConfig = c;
+    },
+    buildStart() {
+      if (!options?.configDir)
+        return;
+      let previewConfigPath = findConfigFile("preview", options.configDir);
+      if (previewConfigPath)
+        try {
+          let calls = extractMockCalls(
+            { previewConfigPath, configDir: options.configDir },
+            babelParser,
+            viteConfig.root ?? process.cwd(),
+            findMockRedirect
+          );
+          redirects = calls.filter(
+            (call) => !!call.redirectPath
+          ).map((call) => ({
+            absolutePath: call.absolutePath,
+            redirectPath: call.redirectPath
+          })), automocks = calls.filter((call) => !call.redirectPath && !!call.absolutePath).map((call) => ({ absolutePath: call.absolutePath, spy: !!call.spy }));
+        } catch {
+          redirects = [], automocks = [];
+        }
+    },
+    async transform(code, id) {
+      if (redirects.length === 0 && automocks.length === 0)
+        return null;
+      let preserveSymlinks = !!viteConfig.resolve?.preserveSymlinks, idNorm = getRealPath(id, preserveSymlinks);
+      for (let r of redirects)
+        if (getRealPath(r.absolutePath, preserveSymlinks) === idNorm)
+          return this.addWatchFile(r.redirectPath), {
+            code: readFileSync(r.redirectPath, "utf-8"),
+            map: { mappings: "" }
+          };
+      for (let a of automocks)
+        if (getRealPath(a.absolutePath, preserveSymlinks) === idNorm) {
+          if (code.includes("__vitest_current_es_module__"))
+            return null;
+          try {
+            let automocked = getAutomockCode(code, a.spy, babelParser);
+            return {
+              code: automocked.toString(),
+              map: automocked.generateMap()
+            };
+          } catch {
+            return null;
+          }
+        }
+      return null;
+    }
+  };
+}
+function storybookOxcPlugin() {
+  return {
+    name: "storybook-angular-vite-oxc-config",
+    config() {
+      return {
+        oxc: {
+          jsx: { runtime: "automatic" }
+        }
+      };
+    }
+  };
+}
+var typescript = async (config) => ({
+  ...config,
+  skipCompiler: !0
+});
+export {
+  addons,
+  core,
+  previewAnnotations,
+  typescript,
+  viteFinal
+};

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@storybook/angular-vite",
+  "version": "0.0.0-canary-test",
+  "description": "Storybook for Angular: Develop, document, and test UI components in isolation",
+  "keywords": [
+    "storybook",
+    "storybook-framework",
+    "angular",
+    "component",
+    "components"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/angular-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "code": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./builders/build-storybook": "./dist/builders/build-storybook/index.js",
+    "./builders/start-storybook": "./dist/builders/start-storybook/index.js",
+    "./client": "./dist/client/index.js",
+    "./client/config": "./dist/client/config.js",
+    "./client/docs/config": "./dist/client/docs/config.js",
+    "./client/preview-prod": "./dist/client/preview-prod.js",
+    "./node": {
+      "types": "./dist/node/index.d.ts",
+      "code": "./src/node/index.ts",
+      "default": "./dist/node/index.js"
+    },
+    "./package.json": "./package.json",
+    "./preset": "./dist/preset.js"
+  },
+  "files": [
+    "builders.json",
+    "build-schema.json",
+    "start-schema.json",
+    "dist/**/*",
+    "template/cli/**/*",
+    "README.md",
+    "*.js",
+    "*.mjs",
+    "*.d.ts",
+    "!src/**/*"
+  ],
+  "dependencies": {
+    "@storybook/builder-vite": "workspace:*",
+    "@storybook/global": "^5.0.0",
+    "telejson": "8.0.0",
+    "ts-dedent": "^2.0.0",
+    "vite": ">=8.0.0"
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^2.5.2",
+    "@angular-devkit/architect": "^0.2102.12",
+    "@angular-devkit/build-angular": "^21.2.12",
+    "@angular-devkit/core": "^21.2.12",
+    "@angular/animations": "^21.2.14",
+    "@angular/common": "^21.2.14",
+    "@angular/compiler": "^21.2.14",
+    "@angular/compiler-cli": "^21.2.14",
+    "@angular/core": "^21.2.14",
+    "@angular/forms": "^21.2.14",
+    "@angular/platform-browser": "^21.2.14",
+    "@angular/platform-browser-dynamic": "^21.2.14",
+    "@types/node": "^22.19.1",
+    "empathic": "^2.0.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.9.3",
+    "zone.js": "^0.16.2"
+  },
+  "peerDependencies": {
+    "@analogjs/vite-plugin-angular": ">=2.0.0",
+    "@angular-devkit/architect": ">=0.2100.0 < 0.2200.0",
+    "@angular-devkit/core": ">=21.0.0 < 22.0.0",
+    "@angular/animations": ">=21.0.0 < 22.0.0",
+    "@angular/build": ">=21.0.0 < 22.0.0",
+    "@angular/cli": ">=21.0.0 < 22.0.0",
+    "@angular/common": ">=21.0.0 < 22.0.0",
+    "@angular/compiler": ">=21.0.0 < 22.0.0",
+    "@angular/compiler-cli": ">=21.0.0 < 22.0.0",
+    "@angular/core": ">=21.0.0 < 22.0.0",
+    "@angular/platform-browser": ">=21.0.0 < 22.0.0",
+    "@angular/platform-browser-dynamic": ">=21.0.0 < 22.0.0",
+    "rxjs": "^7.4.0",
+    "storybook": "workspace:^",
+    "typescript": "^5.9.0",
+    "vite": ">=8.0.0",
+    "zone.js": ">=0.16.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/cli": {
+      "optional": true
+    },
+    "zone.js": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "builders": "builders.json"
+}

package/preset.js

@@ -0,0 +1 @@
+export * from './dist/preset.js';

package/start-schema.json

@@ -0,0 +1,227 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "title": "Start Storybook",
+  "description": "Serve up storybook in development mode.",
+  "type": "object",
+  "properties": {
+    "browserTarget": {
+      "type": "string",
+      "description": "Build target to be served in project-name:builder:config format. Should generally target on the builder: '@angular-devkit/build-angular:browser'. Useful for Storybook to use options (styles, assets, ...).",
+      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
+    },
+    "tsConfig": {
+      "type": "string",
+      "description": "The full path for the TypeScript configuration file, relative to the current workspace."
+    },
+    "preserveSymlinks": {
+      "type": "boolean",
+      "description": "Do not use the real path when resolving modules. If true, symlinks are resolved to their real path, if false, symlinks are resolved to their symlinked path.",
+      "default": false
+    },
+    "port": {
+      "type": "number",
+      "description": "Port to listen on.",
+      "default": 9009
+    },
+    "host": {
+      "type": "string",
+      "description": "Host to listen on.",
+      "default": "localhost"
+    },
+    "configDir": {
+      "type": "string",
+      "description": "Directory where to load Storybook configurations from.",
+      "default": ".storybook"
+    },
+    "https": {
+      "type": "boolean",
+      "description": "Serve Storybook over HTTPS. Note: You must provide your own certificate information.",
+      "default": false
+    },
+    "sslCa": {
+      "type": "string",
+      "description": "Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)."
+    },
+    "sslCert": {
+      "type": "string",
+      "description": "Provide an SSL certificate. (Required with --https)."
+    },
+    "sslKey": {
+      "type": "string",
+      "description": "SSL key to use for serving HTTPS."
+    },
+    "smokeTest": {
+      "type": "boolean",
+      "description": "Exit after successful start.",
+      "default": false
+    },
+    "ci": {
+      "type": "boolean",
+      "description": "CI mode (skip interactive prompts, don't open browser).",
+      "default": false
+    },
+    "open": {
+      "type": "boolean",
+      "description": "Whether to open Storybook automatically in the browser.",
+      "default": true
+    },
+    "quiet": {
+      "type": "boolean",
+      "description": "Suppress verbose build output.",
+      "default": false
+    },
+    "enableProdMode": {
+      "type": "boolean",
+      "description": "Disable Angular's development mode, which turns off assertions and other checks within the framework.",
+      "default": false
+    },
+    "docs": {
+      "type": "boolean",
+      "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/writing-docs/build-documentation#preview-storybooks-documentation.",
+      "default": false
+    },
+    "compodoc": {
+      "type": "boolean",
+      "description": "Execute compodoc before.",
+      "default": true
+    },
+    "compodocArgs": {
+      "type": "array",
+      "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
+      "default": ["-e", "json"],
+      "items": {
+        "type": "string"
+      }
+    },
+    "styles": {
+      "type": "array",
+      "description": "Global styles to be included in the build.",
+      "items": {
+        "$ref": "#/definitions/styleElement"
+      }
+    },
+    "stylePreprocessorOptions": {
+      "description": "Options to pass to style preprocessors.",
+      "type": "object",
+      "properties": {
+        "includePaths": {
+          "description": "Paths to include. Paths will be resolved to workspace root.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        }
+      },
+      "additionalProperties": false
+    },
+    "assets": {
+      "type": "array",
+      "description": "List of static application assets.",
+      "default": [],
+      "items": {
+        "$ref": "#/definitions/assetPattern"
+      }
+    },
+    "initialPath": {
+      "type": "string",
+      "description": "URL path to be appended when visiting Storybook for the first time"
+    },
+    "statsJson": {
+      "type": ["boolean", "string"],
+      "description": "Write stats JSON to disk",
+      "default": false
+    },
+    "previewUrl": {
+      "type": "string",
+      "description": "Disables the default storybook preview and lets you use your own"
+    },
+    "loglevel": {
+      "type": "string",
+      "description": "Controls level of logging during build. Can be one of: [trace, debug, info (default), warn, error, silent].",
+      "pattern": "(trace|debug|info|warn|error|silent)"
+    },
+    "logfile": {
+      "type": "string",
+      "description": "If provided, the log output will be written to the specified file path."
+    },
+    "sourceMap": {
+      "type": ["boolean", "object"],
+      "description": "Configure sourcemaps. See: https://angular.io/guide/workspace-config#source-map-configuration",
+      "default": false
+    },
+    "experimentalZoneless": {
+      "type": "boolean",
+      "description": "Experimental: Use zoneless change detection."
+    }
+  },
+  "additionalProperties": false,
+  "definitions": {
+    "assetPattern": {
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "followSymlinks": {
+              "type": "boolean",
+              "default": false,
+              "description": "Allow glob patterns to follow symlink directories. This allows subdirectories of the symlink to be searched."
+            },
+            "glob": {
+              "type": "string",
+              "description": "The pattern to match."
+            },
+            "input": {
+              "type": "string",
+              "description": "The input directory path in which to apply 'glob'. Defaults to the project root."
+            },
+            "ignore": {
+              "description": "An array of globs to ignore.",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "output": {
+              "type": "string",
+              "description": "Absolute path within the output."
+            }
+          },
+          "additionalProperties": false,
+          "required": ["glob", "input", "output"]
+        },
+        {
+          "type": "string"
+        }
+      ]
+    },
+    "styleElement": {
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "input": {
+              "type": "string",
+              "description": "The file to include."
+            },
+            "bundleName": {
+              "type": "string",
+              "pattern": "^[\\w\\-.]*$",
+              "description": "The bundle name for this extra entry point."
+            },
+            "inject": {
+              "type": "boolean",
+              "description": "If the bundle will be referenced in the HTML file.",
+              "default": true
+            }
+          },
+          "additionalProperties": false,
+          "required": ["input"]
+        },
+        {
+          "type": "string",
+          "description": "The file to include."
+        }
+      ]
+    }
+  }
+}