Build: Upgrade `typescript` #30354

ndelangen · 2025-01-23T08:31:53Z

What I did

I want to use module mocking via the pacjage.json imports field.
However to do that I need a higher version of typescript from what we current use.

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.9 MB	77.9 MB	519 B	0.97	0%
initSize	131 MB	131 MB	72.7 kB	3.57	0.1%
diffSize	53 MB	53 MB	72.2 kB	4.96	0.1%
buildSize	7.17 MB	7.17 MB	784 B	-0.7	0%
buildSbAddonsSize	1.85 MB	1.85 MB	0 B	1.4	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.86 MB	1.86 MB	-12 B	-0.82	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	-12 B	-0.74	0%
buildPreviewSize	3.26 MB	3.27 MB	796 B	-0.68	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	15.2s	18.5s	3.3s	0.2	17.9%
generateTime	17.9s	18.7s	801ms	-0.99	4.3%
initTime	11.3s	12.3s	918ms	-0.82	7.5%
buildTime	8.4s	8.8s	315ms	-0.62	3.6%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.9s	5.6s	738ms	0.12	13.1%
devManagerResponsive	3.6s	4.2s	598ms	0.27	14.1%
devManagerHeaderVisible	699ms	849ms	150ms	1.16	17.7%
devManagerIndexVisible	709ms	877ms	168ms	0.99	19.2%
devStoryVisibleUncached	3.9s	3.9s	89ms	1.51	2.2%
devStoryVisible	730ms	878ms	148ms	1.01	16.9%
devAutodocsVisible	644ms	831ms	187ms	1.35	🔺22.5%
devMDXVisible	619ms	662ms	43ms	0.44	6.5%
buildManagerHeaderVisible	677ms	774ms	97ms	0.22	12.5%
buildManagerIndexVisible	768ms	893ms	125ms	0.28	14%
buildStoryVisible	666ms	756ms	90ms	0.22	11.9%
buildAutodocsVisible	683ms	687ms	4ms	-0.09	0.6%
buildMDXVisible	534ms	539ms	5ms	-0.02	0.9%

Greptile Summary

Upgraded TypeScript across the Storybook monorepo from 5.3.2 to 5.7.3 to enable module mocking via package.json imports field, with notable performance impacts in development mode.

Added verbatimModuleSyntax compiler option in code/renderers/svelte/tsconfig.json to support module mocking
Modified type imports in code/renderers/svelte/src/mount.ts from { type X } to type { X } syntax
Changed type assertions in test files from toEqualTypeOf to toMatchTypeOf for more flexible type checking
Performance regression in dev mode with devAutodocsVisible showing 22.5% slowdown
Added explicit any type annotations in several files to satisfy stricter type checking requirements

nx-cloud · 2025-01-23T08:36:33Z

View your CI Pipeline Execution ↗ for commit c605c85.

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 48s	View ↗

☁️ Nx Cloud last updated this comment at 2025-01-30 19:06:14 UTC

code/frameworks/svelte-vite/package.json

storybook-pr-benchmarking · 2025-01-23T09:57:10Z

Package Benchmarks

^{Commit: c605c85, ran on 30 January 2025 at 19:09:39 UTC}

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

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	17	17	0
Self size	2.20 MB	2.26 MB	🚨 +61 KB 🚨
Dependency size	7.92 MB	7.92 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-essentials`

	Before	After	Difference
Dependency count	36	36	0
Self size	12 KB	12 KB	0 B
Dependency size	13.87 MB	13.93 MB	🚨 +61 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-storysource`

	Before	After	Difference
Dependency count	7	7	0
Self size	1.89 MB	1.89 MB	0 B
Dependency size	10.74 MB	10.80 MB	🚨 +63 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-webpack5`

	Before	After	Difference
Dependency count	237	237	0
Self size	80 KB	80 KB	🚨 +5 B 🚨
Dependency size	31.15 MB	31.14 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/angular`

	Before	After	Difference
Dependency count	266	266	0
Self size	366 KB	367 KB	🚨 +904 B 🚨
Dependency size	33.73 MB	33.71 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/ember`

	Before	After	Difference
Dependency count	256	256	0
Self size	22 KB	22 KB	🎉 -33 B 🎉
Dependency size	31.18 MB	31.17 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/html-webpack5`

	Before	After	Difference
Dependency count	247	247	0
Self size	6 KB	6 KB	0 B
Dependency size	31.70 MB	31.68 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/preact-webpack5`

	Before	After	Difference
Dependency count	245	245	0
Self size	6 KB	6 KB	0 B
Dependency size	31.27 MB	31.26 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	323	323	0
Self size	6 KB	6 KB	0 B
Dependency size	42.48 MB	42.47 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	255	255	0
Self size	14 KB	14 KB	0 B
Dependency size	32.68 MB	32.66 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/svelte-webpack5`

	Before	After	Difference
Dependency count	310	310	0
Self size	6 KB	6 KB	0 B
Dependency size	39.27 MB	39.25 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/vue3-webpack5`

	Before	After	Difference
Dependency count	495	495	0
Self size	6 KB	6 KB	0 B
Dependency size	55.68 MB	55.67 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/web-components-webpack5`

	Before	After	Difference
Dependency count	245	245	0
Self size	5 KB	5 KB	0 B
Dependency size	31.32 MB	31.31 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	388	388	0
Self size	503 KB	503 KB	🎉 -310 B 🎉
Dependency size	75.28 MB	75.35 MB	🚨 +75 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	277	277	0
Self size	612 KB	617 KB	🚨 +6 KB 🚨
Dependency size	65.36 MB	65.43 MB	🚨 +70 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/source-loader`

	Before	After	Difference
Dependency count	5	5	0
Self size	41 KB	41 KB	0 B
Dependency size	10.68 MB	10.75 MB	🚨 +63 KB 🚨
Bundle Size Analyzer	Link	Link

…torybook into norbert/typescript-upgrade

greptile-apps

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

greptile-apps · 2025-01-30T20:04:16Z

code/addons/highlight/package.json

    "@types/webpack-env": "^1.16.0",
-    "typescript": "^5.3.2"
+    "typescript": "^5.7.3"


style: Consider adding a ~ instead of ^ to prevent auto-updating to TypeScript 5.8+ when it releases, which could introduce breaking changes

greptile-apps · 2025-01-30T20:04:54Z

code/addons/interactions/src/mocks/index.ts

@@ -141,7 +141,7 @@ export const getInteractions = (finalStatus: CallStates) =>
    .filter((call) => call.interceptable)
    .map((call) => ({
      ...call,
-      childCallIds: [],
+      childCallIds: [] as any[],


style: consider using a more specific type than any[] for childCallIds, such as Call['id'][] to maintain type safety

Suggested change

childCallIds: [] as any[],

childCallIds: [] as Call['id'][],

greptile-apps · 2025-01-30T20:08:16Z

code/frameworks/experimental-nextjs-vite/package.json

  "devDependencies": {
    "@types/node": "^22.0.0",
    "next": "^15.0.3",
-    "typescript": "^5.3.2"
+    "typescript": "^5.7.3"
  },


style: Consider adding an explicit minimum TypeScript version requirement in peerDependencies since this upgrade enables new functionality that may not work with older versions

greptile-apps · 2025-01-30T20:09:59Z

code/frameworks/svelte-vite/package.json

@@ -57,10 +57,10 @@
    "typescript": "^4.9.4 || ^5.0.0"


style: dependency version range for typescript should be updated to match devDependency version ^5.7.3 for consistency

greptile-apps · 2025-01-30T20:10:49Z

code/frameworks/vue3-vite/package.json

+    "typescript": "^5.7.3",
    "vue-component-meta": "^2.0.0",
    "vue-docgen-api": "^4.75.1"
  },
  "devDependencies": {
    "@types/find-package-json": "^1.2.6",
    "@types/node": "^22.0.0",
-    "typescript": "^5.3.2",
+    "typescript": "^5.7.3",
    "vite": "^4.0.0"


style: TypeScript is listed in both dependencies and devDependencies. Consider removing it from one location to avoid potential version conflicts and duplicate installations.

Suggested change

"typescript": "^5.7.3",

"vue-component-meta": "^2.0.0",

"vue-docgen-api": "^4.75.1"

},

"devDependencies": {

"@types/find-package-json": "^1.2.6",

"@types/node": "^22.0.0",

"typescript": "^5.3.2",

"typescript": "^5.7.3",

"vite": "^4.0.0"

"magic-string": "^0.30.0",

"vue-component-meta": "^2.0.0",

"vue-docgen-api": "^4.75.1"

},

"devDependencies": {

"@types/find-package-json": "^1.2.6",

"@types/node": "^22.0.0",

"typescript": "^5.7.3",

"vite": "^4.0.0"

greptile-apps · 2025-01-30T20:18:26Z

scripts/release/publish.ts

@@ -89,7 +89,7 @@ const isCurrentVersionPublished = async ({
      `Unexpected status code when checking the current version on npm: ${response.status}`
    );
  }
-  const data = await response.json();
+  const data: any = await response.json();


style: Consider creating an interface for the npm registry response instead of using 'any'. This would provide better type safety.

greptile-apps · 2025-01-30T20:18:47Z

scripts/sandbox/utils/git.ts

@@ -10,11 +10,11 @@ const getTheLastCommitHashThatUpdatedTheSandboxRepo = async (branch: string) =>
  const repo = 'sandboxes';

  try {
-    const branchData = await (
+    const branchData: any = await (


style: Using 'any' type here bypasses type safety. Consider creating an interface for the GitHub API branch response structure.

greptile-apps · 2025-01-30T20:18:48Z

scripts/sandbox/utils/git.ts

      await fetch(`https://api.github.com/repos/${owner}/${repo}/branches/${branch}`)
    ).json();
    const latestCommitSha = branchData.commit.sha;
-    const commitData = await (
+    const commitData: any = await (


style: Using 'any' type here bypasses type safety. Consider creating an interface for the GitHub API commit response structure.

greptile-apps · 2025-01-30T20:18:59Z

scripts/tsconfig.json

-    "target": "es2022",
-    "module": "ES2022",
+    "target": "ESNext",
+    "module": "Preserve",


style: Setting module to 'Preserve' may affect how modules are processed. Ensure this doesn't break existing module resolution behavior.

Suggested change

"module": "Preserve",

"module": "ESNext",

greptile-apps · 2025-01-30T20:19:05Z

scripts/utils/githubClient.ts

@@ -13,7 +13,7 @@ export const githubClient = (apiKey: string) => {
      }),
    });

-    const result = await res.json();
+    const result: any = await res.json();


style: Consider defining a proper type for the GraphQL response instead of using 'any'. Could use a generic type parameter based on the expected query result.

upgrade typescript

d2257ae

ndelangen changed the title ~~Buikd: Upgrade typescript~~ Build: Upgrade typescript Jan 23, 2025

ndelangen changed the title ~~Build: Upgrade typescript~~ Build: Upgrade typescript Jan 23, 2025

ndelangen requested review from kasperpeulen and JReinhold January 23, 2025 08:32

ndelangen self-assigned this Jan 23, 2025

ndelangen added build Internal-facing build tooling & test updates ci:normal labels Jan 23, 2025

ndelangen requested a review from valentinpalkovic January 23, 2025 08:34

valentinpalkovic reviewed Jan 23, 2025

View reviewed changes

code/frameworks/svelte-vite/package.json Outdated Show resolved Hide resolved

ndelangen added ci:normal and removed ci:normal labels Jan 23, 2025

ndelangen added 2 commits January 23, 2025 10:07

reset the public use of typescript to broader version range

5c2ac4a

fixes

1c4015a

ndelangen added 4 commits January 23, 2025 11:54

attempt fixes

eb293ac

related upgrades

1fdd771

fix mismatching peerDep on vite in svelte

c60a752

bump versions in lockfile

0afec40

kasperpeulen approved these changes Jan 23, 2025

View reviewed changes

ndelangen and others added 9 commits January 30, 2025 11:13

Merge branch 'next' into norbert/typescript-upgrade

c5674a8

fix lockfiles

c4c3c91

make types checks less strict

a5ef270

use verbatimModuleSyntax in svelte renderer

2543eb1

Merge branch 'norbert/typescript-upgrade' of github.com:storybookjs/s…

e12c1d4

…torybook into norbert/typescript-upgrade

fix

84fe244

fix svelte type test

08832a8

Merge branch 'norbert/typescript-upgrade' of github.com:storybookjs/s…

86f6f30

…torybook into norbert/typescript-upgrade

improve

581e837

fix svelte type imports

c605c85

ndelangen marked this pull request as ready for review January 30, 2025 20:02

ndelangen merged commit 3f0a7c5 into next Jan 30, 2025
58 checks passed

ndelangen deleted the norbert/typescript-upgrade branch January 30, 2025 20:02

greptile-apps bot reviewed Jan 30, 2025

View reviewed changes

github-actions bot mentioned this pull request Feb 1, 2025

Release: Prerelease 8.6.0-alpha.4 #30439

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build: Upgrade `typescript` #30354

Build: Upgrade `typescript` #30354

ndelangen commented Jan 23, 2025 •

edited by greptile-apps bot

Loading

nx-cloud bot commented Jan 23, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Jan 23, 2025 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Jan 30, 2025

greptile-apps bot Jan 30, 2025

greptile-apps bot Jan 30, 2025

greptile-apps bot Jan 30, 2025

greptile-apps bot Jan 30, 2025

greptile-apps bot Jan 30, 2025

greptile-apps bot Jan 30, 2025

greptile-apps bot Jan 30, 2025

greptile-apps bot Jan 30, 2025

greptile-apps bot Jan 30, 2025

Build: Upgrade typescript #30354

Build: Upgrade typescript #30354

Conversation

ndelangen commented Jan 23, 2025 • edited by greptile-apps 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 Jan 23, 2025 • edited Loading

storybook-pr-benchmarking bot commented Jan 23, 2025 • edited Loading

Package Benchmarks

@storybook/addon-docs

@storybook/addon-essentials

@storybook/addon-storysource

@storybook/builder-webpack5

@storybook/angular

@storybook/ember

@storybook/html-webpack5

@storybook/preact-webpack5

@storybook/react-webpack5

@storybook/server-webpack5

@storybook/svelte-webpack5

@storybook/vue3-webpack5

@storybook/web-components-webpack5

@storybook/cli

@storybook/codemod

@storybook/source-loader

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 30, 2025

Choose a reason for hiding this comment

Build: Upgrade `typescript` #30354

Build: Upgrade `typescript` #30354

ndelangen commented Jan 23, 2025 •

edited by greptile-apps bot

Loading

nx-cloud bot commented Jan 23, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Jan 23, 2025 •

edited

Loading

`@storybook/addon-docs`

`@storybook/addon-essentials`

`@storybook/addon-storysource`

`@storybook/builder-webpack5`

`@storybook/angular`

`@storybook/ember`

`@storybook/html-webpack5`

`@storybook/preact-webpack5`

`@storybook/react-webpack5`

`@storybook/server-webpack5`

`@storybook/svelte-webpack5`

`@storybook/vue3-webpack5`

`@storybook/web-components-webpack5`

`@storybook/cli`

`@storybook/codemod`

`@storybook/source-loader`