Angular: Split @storybook/angular into three packages #29738

DominikPieper · 2024-11-29T05:16:47Z

Split @storybook/angular int @storybook/{anghular, angular-renderer, angular-webpack}

Closes #

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.7 MB	77.7 MB	0 B	1.51	0%
initSize	136 MB	136 MB	12.5 kB	2.45	0%
diffSize	58.4 MB	58.4 MB	12.5 kB	2.14	0%
buildSize	7.23 MB	7.24 MB	11 kB	0.07	0.2%
buildSbAddonsSize	1.86 MB	1.88 MB	15.1 kB	0.23	0.8%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.86 MB	-4.06 kB	-0.38	-0.2%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.92 MB	3.93 MB	11 kB	0.07	0.3%
buildPreviewSize	3.3 MB	3.3 MB	0 B	-0.56	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	21.2s	25.2s	4s	1.3	🔺16.1%
generateTime	21.6s	20.8s	-812ms	0.03	-3.9%
initTime	14.6s	15.1s	471ms	0.55	3.1%
buildTime	10.7s	8.8s	-1s -948ms	-1.04	-22.1%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.9s	5.1s	176ms	-0.48	3.4%
devManagerResponsive	3.7s	3.7s	-28ms	-0.66	-0.8%
devManagerHeaderVisible	598ms	615ms	17ms	-0.69	2.8%
devManagerIndexVisible	624ms	649ms	25ms	-0.69	3.9%
devStoryVisibleUncached	1.8s	1.8s	42ms	-0.04	2.2%
devStoryVisible	625ms	648ms	23ms	-0.71	3.5%
devAutodocsVisible	527ms	391ms	-136ms	-1.81	🔰-34.8%
devMDXVisible	514ms	574ms	60ms	-0.22	10.5%
buildManagerHeaderVisible	665ms	653ms	-12ms	-0.31	-1.8%
buildManagerIndexVisible	760ms	747ms	-13ms	-0.34	-1.7%
buildStoryVisible	614ms	612ms	-2ms	-0.28	-0.3%
buildAutodocsVisible	436ms	495ms	59ms	-0.18	11.9%
buildMDXVisible	473ms	514ms	41ms	-0.01	8%

Greptile Summary

Here's my review of the changes to split @storybook/angular into three separate packages:

This PR splits @storybook/angular into three focused packages (@storybook/angular, @storybook/angular-renderer, and @storybook/preset-angular-webpack) to better organize Angular-specific functionality and improve maintainability.

Moved rendering logic to new @storybook/angular-renderer package including components, decorators, and story utilities
Created @storybook/preset-angular-webpack for webpack configuration and build tooling
Updated version dependencies to support Angular 15-19 with proper peer dependency ranges
Added postbuild script in angular-renderer to handle Angular 17.2+ type compatibility
Consolidated imports and exports between packages while maintaining backwards compatibility through re-exports

The changes look well-structured and maintain existing functionality while improving code organization. The separation of concerns between rendering, webpack configuration, and the main framework package follows good architectural practices.

_{💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!}

nx-cloud · 2024-11-29T08:05:31Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ce735ea. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

storybook-pr-benchmarking · 2024-11-29T08:12:25Z

Package Benchmarks

^{Commit: d2f0499, ran on 19 December 2024 at 10:12:04 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/angular`

	Before	After	Difference
Dependency count	261	286	🚨 +25 🚨
Self size	362 KB	106 KB	🎉 -257 KB 🎉
Dependency size	33.56 MB	48.38 MB	🚨 +14.82 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/angular-renderer`

	Before	After	Difference
Dependency count	0	38	🚨 +38 🚨
Self size	0 B	442 KB	🚨 +442 KB 🚨
Dependency size	0 B	14.60 MB	🚨 +14.60 MB 🚨
Bundle Size Analyzer	Link	Link

greptile-apps

_{250 file(s) reviewed, 145 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-12-10T15:36:50Z

code/core/src/common/versions.ts

@@ -71,13 +71,15 @@ export default {
  '@storybook/react-dom-shim': '8.5.0-alpha.19',
  '@storybook/source-loader': '8.5.0-alpha.19',
  '@storybook/test': '8.5.0-alpha.19',
+  '@storybook/preset-angular-webpack': '8.5.0-alpha.18',


logic: version mismatch with other packages (alpha.18 vs alpha.19) could cause compatibility issues

greptile-apps · 2024-12-10T15:36:51Z

code/core/src/common/versions.ts

  '@storybook/preset-create-react-app': '8.5.0-alpha.19',
  '@storybook/preset-html-webpack': '8.5.0-alpha.19',
  '@storybook/preset-preact-webpack': '8.5.0-alpha.19',
  '@storybook/preset-react-webpack': '8.5.0-alpha.19',
  '@storybook/preset-server-webpack': '8.5.0-alpha.19',
  '@storybook/preset-svelte-webpack': '8.5.0-alpha.19',
  '@storybook/preset-vue3-webpack': '8.5.0-alpha.19',
+  '@storybook/angular-renderer': '8.5.0-alpha.11',


logic: version significantly behind other packages (alpha.11 vs alpha.19) may lead to compatibility problems

greptile-apps · 2024-12-10T15:37:00Z

code/frameworks/angular/scripts/postbuild.js

+[
+  '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);
+});


logic: original type compatibility fix for Angular <17.2 was removed - this could break builds for users on older Angular versions

greptile-apps · 2024-12-10T15:37:28Z

code/frameworks/angular/src/index.ts

@@ -1,4 +1,6 @@
-export * from './client/index';
+// For backwarts compatibility


syntax: 'backwarts' is misspelled

greptile-apps · 2024-12-10T15:37:53Z

code/frameworks/angular/tsconfig.json

@@ -4,5 +4,5 @@
    "noEmit": true,
    "strict": false


style: strict: false disables TypeScript's strict checks. Consider enabling strict mode for better type safety.

greptile-apps · 2024-12-10T16:07:23Z

...enderers/angular-renderer/template/stories_angular-cli-prerelease/signal/button.component.ts

+  size = input('medium', {
+    transform: (val: 'small' | 'medium') => val,
+  });


style: size transform function is redundant since it just returns the input value without transformation

greptile-apps · 2024-12-10T16:07:33Z

code/renderers/angular-renderer/template/stories_angular-cli-prerelease/signal/button.css

+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;


style: box-shadow shorthand could be simplified to inset 0 0 0 1px rgba(0, 0, 0, 0.15)

greptile-apps · 2024-12-10T16:07:58Z

code/renderers/angular-renderer/tsconfig.json

+  "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "strict": false


style: Consider enabling strict mode for better type safety. This helps catch potential type-related bugs early in development.

greptile-apps · 2024-12-10T16:07:58Z

code/renderers/angular-renderer/tsconfig.json

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


style: Including JSON files and templates in TypeScript compilation may cause unnecessary processing. Consider moving non-TypeScript files to a separate copy step in the build process.

greptile-apps · 2024-12-10T16:08:01Z

code/renderers/angular-renderer/tsconfig.build.json

+    "target": "ES2020",
+    "module": "CommonJS",


style: ES2020 target with CommonJS modules may limit tree-shaking opportunities. Consider using ESM modules instead

…angular-webpack}

DominikPieper force-pushed the refactor_angular_into_multiple branch from 7419999 to 7bef214 Compare November 29, 2024 05:18

DominikPieper marked this pull request as draft November 29, 2024 05:31

valentinpalkovic self-assigned this Nov 29, 2024

valentinpalkovic added angular ci:daily Run the CI jobs that normally run in the daily job. feature request ci:normal and removed ci:daily Run the CI jobs that normally run in the daily job. labels Nov 29, 2024

yannbf changed the title ~~WIP: Split @storybook/angular into three~~ Angular: Split @storybook/angular into three packages Nov 29, 2024

DominikPieper force-pushed the refactor_angular_into_multiple branch 4 times, most recently from ed72b53 to e31f283 Compare December 6, 2024 09:18

DominikPieper force-pushed the refactor_angular_into_multiple branch 7 times, most recently from ed1b20e to 503e1bf Compare December 10, 2024 15:32

DominikPieper marked this pull request as ready for review December 10, 2024 15:36

DominikPieper force-pushed the refactor_angular_into_multiple branch from 503e1bf to c3cfdb1 Compare December 10, 2024 16:00

greptile-apps bot reviewed Dec 10, 2024

View reviewed changes

DominikPieper force-pushed the refactor_angular_into_multiple branch 3 times, most recently from 50eb68b to ce735ea Compare December 11, 2024 08:43

DominikPieper force-pushed the refactor_angular_into_multiple branch 3 times, most recently from 3c2ff04 to d68932f Compare December 12, 2024 08:02

DominikPieper force-pushed the refactor_angular_into_multiple branch 3 times, most recently from bab0d62 to be85e78 Compare December 19, 2024 08:48

DominikPieper added 8 commits December 19, 2024 10:10

Split @storybook/angular int @storybook/{anghular, angular-renderer, …

127918c

…angular-webpack}

Add lock file

ef902bf

change webpack to webpackFinal

d846f5b

Use absolute path for export addons

5dbeff9

Split into three

800c431

fix linting

1abaeeb

align version numbers

f783b1e

reintegrate webpack preset

d2f0499

DominikPieper force-pushed the refactor_angular_into_multiple branch from be85e78 to d2f0499 Compare December 19, 2024 09:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular: Split @storybook/angular into three packages #29738

Angular: Split @storybook/angular into three packages #29738

DominikPieper commented Nov 29, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Nov 29, 2024 •

edited

Loading

storybook-pr-benchmarking bot commented Nov 29, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Dec 10, 2024

greptile-apps bot Dec 10, 2024

greptile-apps bot Dec 10, 2024

greptile-apps bot Dec 10, 2024

greptile-apps bot Dec 10, 2024

greptile-apps bot Dec 10, 2024

greptile-apps bot Dec 10, 2024

greptile-apps bot Dec 10, 2024

greptile-apps bot Dec 10, 2024

greptile-apps bot Dec 10, 2024

		@@ -1,4 +1,6 @@
		export * from './client/index';
		// For backwarts compatibility

Angular: Split @storybook/angular into three packages #29738

Are you sure you want to change the base?

Angular: Split @storybook/angular into three packages #29738

Conversation

DominikPieper commented Nov 29, 2024 • edited by storybook-pr-benchmarking bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

nx-cloud bot commented Nov 29, 2024 • edited Loading

☁️ Nx Cloud Report

storybook-pr-benchmarking bot commented Nov 29, 2024 • edited Loading

Package Benchmarks

@storybook/angular

@storybook/angular-renderer

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Dec 10, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 10, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 10, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 10, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 10, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 10, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 10, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 10, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 10, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 10, 2024

Choose a reason for hiding this comment

DominikPieper commented Nov 29, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Nov 29, 2024 •

edited

Loading

storybook-pr-benchmarking bot commented Nov 29, 2024 •

edited

Loading

`@storybook/angular`

`@storybook/angular-renderer`