Angular: Split @storybook/angular into three packages

code/.eslintrc.js

@@ -51,7 +51,7 @@ module.exports = {
     },
     {
       // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
-      files: ['**/frameworks/angular/template/**/*'],
+      files: ['**/frameworks/angular/template/**/*', '**/renderers/angular-renderer/template/**/*'],
       rules: {
         '@typescript-eslint/no-useless-constructor': 'off',
         '@typescript-eslint/dot-notation': 'off',

code/core/src/common/versions.ts

@@ -78,6 +78,7 @@ export default {
   '@storybook/preset-server-webpack': '8.5.0-beta.2',
   '@storybook/preset-svelte-webpack': '8.5.0-beta.2',
   '@storybook/preset-vue3-webpack': '8.5.0-beta.2',
+  '@storybook/angular-renderer': '8.5.0-beta.2',
   '@storybook/html': '8.5.0-beta.2',
   '@storybook/preact': '8.5.0-beta.2',
   '@storybook/react': '8.5.0-beta.2',

code/frameworks/angular/package.json

@@ -20,6 +20,35 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js"
+    },
+    "./dist/server/framework-preset-angular-cli": {
+      "types": "./dist/server/framework-preset-angular-cli.d.ts",
+      "import": "./dist/server/framework-preset-angular-cli.mjs",
+      "require": "./dist/server/framework-preset-angular-cli.js"
+    },
+    "./dist/server/framework-preset-angular-docs": {
+      "types": "./dist/server/framework-preset-angular-docs.d.ts",
+      "import": "./dist/server/framework-preset-angular-docs.mjs",
+      "require": "./dist/server/framework-preset-angular-docs.js"
+    },
+    "./dist/server/framework-preset-angular-ivy": {
+      "types": "./dist/server/framework-preset-angular-ivy.d.ts",
+      "import": "./dist/server/framework-preset-angular-ivy.mjs",
+      "require": "./dist/server/framework-preset-angular-ivy.js"
+    },
+    "./builders/builder.json": "./src/builders/builders.json",
+    "./package.json": "./package.json"
+  },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -37,6 +66,7 @@
     "prep": "rimraf dist && jiti ../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
+    "@storybook/angular-renderer": "workspace:*",
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
@@ -110,8 +140,18 @@
   },
   "builders": "dist/builders/builders.json",
   "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts",
+      "./src/builders/build-storybook/index.ts",
+      "./src/builders/start-storybook/index.ts",
+      "./src/server/framework-preset-angular-cli.ts",
+      "./src/server/framework-preset-angular-docs.ts",
+      "./src/server/framework-preset-angular-ivy.ts"
+    ],
     "post": "./scripts/postbuild.js",
-    "tsConfig": "tsconfig.build.json"
+    "tsConfig": "tsconfig.build.json",
+    "platform": "node"
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
 }

code/frameworks/angular/scripts/postbuild.js

@@ -9,9 +9,13 @@
 const fs = require('fs');
 const path = require('path');
 
-const filePath = path.join(__dirname, '../dist/client/public-types.d.ts');
-const fileContent = fs.readFileSync(filePath, 'utf8');
-const newContent = fileContent
-  .replaceAll(/(type AngularInputSignal)/g, '// @ts-ignore\n$1')
-  .replaceAll(/(type AngularOutputEmitterRef)/g, '// @ts-ignore\n$1');
-fs.writeFileSync(filePath, newContent, 'utf8');
+[
+  'builders/builders.json',
+  'builders/start-storybook/schema.json',
+  'builders/build-storybook/schema.json',
+].forEach((filePath) => {
+  const srcPath = path.join(__dirname, `../src/${filePath}`);
+  const distPath = path.join(__dirname, `../dist/${filePath}`);
+
+  fs.copyFileSync(srcPath, distPath);
+});

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -24,9 +24,8 @@ import { sync as findUpSync } from 'find-up';
 import { from, of, throwError } from 'rxjs';
 import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
 
-import { errorSummary, printErrorDetails } from '../utils/error-handler';
-import { runCompodoc } from '../utils/run-compodoc';
-import { StandaloneOptions } from '../utils/standalone-options';
+import { errorSummary, printErrorDetails, runCompodoc } from '../utils';
+import { StandaloneOptions } from '@storybook/angular-renderer';
 
 addToGlobalContext('cliVersion', versions.storybook);
 

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -23,9 +23,8 @@ import { sync as findUpSync } from 'find-up';
 import { Observable, from, of } from 'rxjs';
 import { map, mapTo, switchMap } from 'rxjs/operators';
 
-import { errorSummary, printErrorDetails } from '../utils/error-handler';
-import { runCompodoc } from '../utils/run-compodoc';
-import { StandaloneOptions } from '../utils/standalone-options';
+import { errorSummary, printErrorDetails, runCompodoc } from '../utils';
+import { StandaloneOptions } from '@storybook/angular-renderer';
 
 addToGlobalContext('cliVersion', versions.storybook);
 

code/frameworks/angular/src/builders/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './error-handler';
+export * from './run-compodoc';

code/frameworks/angular/src/index.ts

@@ -1,4 +1,5 @@
-export * from './client/index';
+// For backwarts compatibility
+export * from '@storybook/angular-renderer';
 export * from './types';
 
 /*

code/frameworks/angular/src/preset.ts

@@ -2,9 +2,6 @@ import { PresetProperty } from 'storybook/internal/types';
 
 import { dirname, join } from 'node:path';
 
-import { StandaloneOptions } from './builders/utils/standalone-options';
-import { StorybookConfig } from './types';
-
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
@@ -14,16 +11,6 @@ export const addons: PresetProperty<'addons'> = [
   require.resolve('./server/framework-preset-angular-docs'),
 ];
 
-export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entries = [], options) => {
-  const annotations = [...entries, require.resolve('./client/config')];
-
-  if ((options as any as StandaloneOptions).enableProdMode) {
-    annotations.unshift(require.resolve('./client/preview-prod'));
-  }
-
-  return annotations;
-};
-
 export const core: PresetProperty<'core'> = async (config, options) => {
   const framework = await options.presets.apply('framework');
 

code/frameworks/angular/src/server/framework-preset-angular-docs.ts

@@ -2,6 +2,8 @@ import { hasDocsOrControls } from 'storybook/internal/docs-tools';
 import { PresetProperty } from 'storybook/internal/types';
 
 export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = [], options) => {
-  if (!hasDocsOrControls(options)) return entry;
-  return [...entry, require.resolve('../client/docs/config')];
+  if (!hasDocsOrControls(options)) {
+    return entry;
+  }
+  return [...entry, require.resolve('@storybook/angular-renderer/client/docs/config')];
 };

code/frameworks/angular/tsconfig.json

@@ -4,5 +4,5 @@
     "noEmit": true,
     "strict": false
   },
-  "include": ["src/**/*", "src/**/*.json", "template/**/*"]
+  "include": ["src/**/*", "src/**/*.json"]
 }

code/frameworks/angular/vitest.config.ts

@@ -6,8 +6,5 @@ export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
     // Add custom config here
-    test: {
-      setupFiles: ['src/test-setup.ts'],
-    },
   })
 );

code/frameworks/react-webpack5/tsconfig.build.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "compileOnSave": false,
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "noEmit": false,
+    "lib": ["es2020", "dom", "dom.iterable"],
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "declaration": true,
+    "outDir": "dist",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "pretty": true,
+    "noErrorTruncation": true,
+    "listEmittedFiles": false,
+    "noUnusedLocals": false,
+    "baseUrl": ".",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    }
+  },
+  "include": ["src/**/*", "src/**/*.json"]
+}

code/frameworks/react-webpack5/tsconfig.json

@@ -1,5 +1,8 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {},
-  "include": ["src/**/*"]
+  "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "strict": false
+  },
+  "include": ["src/**/*", "src/**/*.json"]
 }

code/package.json

@@ -116,6 +116,7 @@
     "@storybook/addon-toolbars": "workspace:*",
     "@storybook/addon-viewport": "workspace:*",
     "@storybook/angular": "workspace:*",
+    "@storybook/angular-renderer": "workspace:*",
     "@storybook/bench": "next",
     "@storybook/blocks": "workspace:*",
     "@storybook/builder-vite": "workspace:*",
@@ -200,6 +201,7 @@
     "happy-dom": "^14.12.0",
     "http-server": "^14.1.1",
     "husky": "^4.3.7",
+    "jiti": "^2.4.1",
     "lint-staged": "^13.2.2",
     "mock-require": "^3.0.3",
     "nx": "20.2.2",
@@ -225,6 +227,9 @@
     "vitest": "^2.1.3",
     "wait-on": "^7.0.1"
   },
+  "devDependencies": {
+    "rimraf": "^6.0.1"
+  },
   "dependenciesMeta": {
     "ejs": {
       "built": false

code/renderers/angular-renderer/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "rules": {
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      { "prefer": "no-type-imports", "disallowTypeAnnotations": false }
+    ]
+  }
+}

code/renderers/angular-renderer/README.md

@@ -0,0 +1 @@
+# Storybook Angular renderer