Merge pull request #36516 from storybookjs/kasper/ts7-vitest-typecheck

Author: kasperpeulen

.agents/guidelines/testing.md

@@ -47,3 +47,11 @@ Use Vitest's global stubbing instead, which is tracked and restorable:
 - Never capture-and-restore by hand (`const original = globalThis.X; ... globalThis.X = original`); `vi.stubGlobal` + `vi.unstubAllGlobals()` does this correctly, including deleting keys that did not previously exist.
 
 This applies to all ambient globals, not just `FEATURES` (e.g. `window`, `document`, `navigator`, `fetch`, `IS_REACT_ACT_ENVIRONMENT`).
+
+## Type tests (`*.test-d.ts`)
+
+Vitest type-checks `*.test-d.ts` files with the TypeScript 7 native compiler, the same one `yarn task check` uses. They are never executed at runtime.
+
+- A package with type tests sets `test.typecheck.enabled: true` in its `vitest.config.ts`; the checker itself comes from `code/vitest.shared.ts`.
+- Run them from the repo root with `yarn vitest run --project <project> test-d`, where `<project>` is the config's `test.name` or else the package name (e.g. `core`, `@storybook/angular`).
+- Assert with `expectTypeOf` and use `// @ts-expect-error` for inputs that must be rejected; an unused directive fails the test.

AGENTS.md

@@ -16,7 +16,7 @@ Storybook is a large TypeScript monorepo. The git root is the repo root, the mai
 - **Formatting**: oxfmt (root `.oxfmtrc.json`)
 - **CI environment**: Linux and Windows
 - **TS execution**: Migrating from `jiti` to native `node` for running `.ts` files. New scripts should use `node ./path/file.ts` with explicit `.ts` import extensions (enabled by `allowImportingTsExtensions` in tsconfig). Legacy scripts still use `jiti` but should be migrated over time.
-- **Type checking**: Per-package checks (`yarn task check`, `scripts/check/check-package.ts`) run on the TypeScript 7 native compiler (the `typescript-native` npm alias); diagnostics are filtered to the checked package. `@storybook/vue3`, `@storybook/docgen-harness` (for its `.vue` fixtures), and `@storybook/svelte` use `vue-tsc` / `svelte-check` (TS 6 based). The workspace `typescript` dependency stays on TS 6 for IDEs and API consumers, so tsconfigs must remain valid for both (e.g. no `baseUrl`).
+- **Type checking**: Per-package checks (`yarn task check`, `scripts/check/check-package.ts`) and Vitest type tests (`*.test-d.ts`) run on the TypeScript 7 native compiler (the `typescript-native` npm alias); check diagnostics are filtered to the checked package. `@storybook/vue3`, `@storybook/docgen-harness` (for its `.vue` fixtures), and `@storybook/svelte` use `vue-tsc` / `svelte-check` (TS 6 based). The workspace `typescript` dependency stays on TS 6 for IDEs and API consumers, so tsconfigs must remain valid for both (e.g. no `baseUrl`).
 
 ## Common Commands
 

CONTRIBUTING.md

@@ -58,6 +58,17 @@ You can use any version manager to install the correct version of Node.js. We re
 
 3. If you're a Windows user, you'll need to enable Windows Subsystem for Linux (WSL). You can follow the instructions [here](https://docs.microsoft.com/en-us/windows/wsl/install).
 
+### Editor setup
+
+CI type-checks the monorepo with TypeScript 7 (`yarn task check` and the `*.test-d.ts` type tests). The workspace `typescript` package stays on TypeScript 6, because some tooling still needs its compiler API, so VS Code uses TypeScript 6 by default and can occasionally report different errors than CI.
+
+To use the TypeScript 7 language server in VS Code instead (optional):
+
+1. Install the [TypeScript 7 extension](https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.native-preview) (`TypeScriptTeam.native-preview`). When it first activates, it sets `"js/ts.experimental.useTsgo": true` in your user settings.
+2. Switch back and forth with the **TypeScript: Enable TypeScript 7 Language Server** and **TypeScript: Disable TypeScript 7 Language Server** commands.
+
+The Vue and Svelte extensions still rely on TypeScript 6 plugins. While TypeScript 7 is on, TypeScript features inside `.vue` files and types of `.svelte` imports in `.ts` files are unavailable, so disable it when working on the Vue or Svelte packages.
+
 ### Running the local development environment
 
 - All commands should be run in a terminal with administrator privileges in Windows environments.

code/core/vitest.config.ts

@@ -31,7 +31,6 @@ export default mergeConfig(
       name: 'core',
       typecheck: {
         enabled: true,
-        ignoreSourceErrors: true,
       },
       server: {
         deps: {

code/frameworks/angular-vite/vitest.config.ts

@@ -9,6 +9,9 @@ export default mergeConfig(
     test: {
       globals: true,
       setupFiles: ['src/test-setup.ts'],
+      typecheck: {
+        enabled: true,
+      },
     },
   })
 );

code/frameworks/angular/vitest.config.ts

@@ -9,6 +9,9 @@ export default mergeConfig(
     test: {
       globals: true,
       setupFiles: ['src/test-setup.ts'],
+      typecheck: {
+        enabled: true,
+      },
     },
   })
 );

code/package.json

@@ -105,7 +105,7 @@
     "esbuild-loader": "^4.3.0",
     "happy-dom": "^17.6.3",
     "http-server": "^14.1.1",
-    "knip": "^5.70.2",
+    "knip": "^6.38.0",
     "mock-require": "^3.0.3",
     "oxlint": "1.72.0",
     "prettier": "^3.7.1",
@@ -119,6 +119,7 @@
     "storybook-addon-pseudo-states": "workspace:*",
     "ts-dedent": "^2.0.0",
     "typescript": "^6.0.3",
+    "typescript-native": "npm:typescript@^7.0.2",
     "uuid": "^11.1.0",
     "vite": "^7.0.4",
     "vite-plugin-inspect": "^11.0.0",

code/tsconfig.json

@@ -5,7 +5,6 @@
     "customConditions": ["code"],
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "ignoreDeprecations": "6.0",
     "incremental": false,
     "isolatedModules": true,
     "jsx": "preserve",

code/vitest.shared.ts

@@ -1,8 +1,11 @@
-import { resolve } from 'node:path';
+import { createRequire } from 'node:module';
+import { dirname, join, resolve } from 'node:path';
 
 import type { Plugin } from 'vite';
 import { defineConfig } from 'vitest/config';
 
+const require = createRequire(import.meta.url);
+
 /**
  * Loads .md/.html imports as text, matching the esbuild `loader` option in
  * scripts/build/utils/generate-bundle.ts. Used by the MCP packages, which
@@ -26,5 +29,11 @@ export const vitestCommonConfig = defineConfig({
     globals: false,
     testTimeout: 10000,
     environment: 'node',
+    // `enabled` is set per project with `*.test-d.ts` files: Vitest warns once per enabling project.
+    typecheck: {
+      checker: join(dirname(require.resolve('typescript-native/package.json')), 'bin', 'tsc'),
+      // Diagnostics outside the type test files are `yarn task check`'s job.
+      ignoreSourceErrors: true,
+    },
   },
 });

scripts/build/build-package.ts

@@ -21,8 +21,7 @@ import { buildEntries, hasPrebuild, isBuildEntries } from './entry-configs.ts';
 import { measure } from './utils/entry-utils.ts';
 import { generateBundle } from './utils/generate-bundle.ts';
 import { generatePackageJsonFile } from './utils/generate-package-json.ts';
-import { generateTypesFiles } from './utils/generate-types.ts';
-import { generateTypesFiles as generateTypesFilesRolldown } from './utils/generate-types-rolldown.ts';
+import { generateTypesFiles } from './utils/generate-types-rolldown.ts';
 
 const {
   values: {
@@ -52,6 +51,11 @@ if (dtsResolver !== 'tsc' && dtsResolver !== 'oxc' && dtsResolver !== 'hybrid')
 }
 const resolvedDtsResolver: 'tsc' | 'oxc' | 'hybrid' = dtsResolver;
 
+if (dtsBundler !== 'rolldown-tsgo' && dtsBundler !== 'rolldown') {
+  throw new Error(`Invalid --dts-bundler: ${dtsBundler} (expected 'rolldown-tsgo' or 'rolldown')`);
+}
+const resolvedDtsBundler: 'rolldown-tsgo' | 'rolldown' = dtsBundler;
+
 async function run() {
   const DIR_ROOT = join(import.meta.dirname, '..', '..');
   const DIR_CWD = cwd ? join(DIR_ROOT, cwd) : process.cwd();
@@ -99,24 +103,10 @@ async function run() {
     measure(async () => generateBundle({ cwd: DIR_CWD, entry, name, isWatch })),
     measure(async () => {
       if (isProduction) {
-        switch (entry.dtsBundler ?? dtsBundler) {
-          case 'rolldown':
-            await generateTypesFilesRolldown(DIR_CWD, entry, {
-              tsgo: false,
-              resolver: resolvedDtsResolver,
-            });
-            break;
-          case 'rolldown-tsgo':
-            await generateTypesFilesRolldown(DIR_CWD, entry, {
-              tsgo: true,
-              resolver: resolvedDtsResolver,
-            });
-            break;
-          case 'rollup':
-          default:
-            await generateTypesFiles(DIR_CWD, entry);
-            break;
-        }
+        await generateTypesFiles(DIR_CWD, entry, {
+          tsgo: (entry.dtsBundler ?? resolvedDtsBundler) === 'rolldown-tsgo',
+          resolver: resolvedDtsResolver,
+        });
       }
     }),
   ]);