chore: upgrade TypeScript 6, Vitest 4, tsdown 0.21, Turbo 2.10 (#322)

.changeset/react-19-alignment.md

@@ -0,0 +1,6 @@
+---
+"@open-slide/core": major
+"@open-slide/cli": major
+---
+
+Require React 19 for the runtime and generated workspaces.

.changeset/typescript-vitest-tsdown-turbo.md

@@ -0,0 +1,6 @@
+---
+"@open-slide/core": patch
+"@open-slide/cli": patch
+---
+
+Build packages with tsdown 0.21 and TypeScript 6 across the monorepo.

.changeset/vite-8-migration.md

@@ -0,0 +1,6 @@
+---
+"@open-slide/core": major
+"@open-slide/cli": major
+---
+
+Migrate the runtime and generated workspaces to Vite 8 with native Rolldown optimizer options.

apps/demo/package.json

@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "@open-slide/core": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1"
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
   }
 }

apps/web/components/mdx.tsx

@@ -6,7 +6,10 @@ import type { MDXComponents } from 'mdx/types';
 export function getMDXComponents(components?: MDXComponents) {
   return {
     ...defaultMdxComponents,
-    img: (props) => <ImageZoom {...props} />,
+    img: (props) => {
+      const { src, ...rest } = props;
+      return <ImageZoom {...rest} src={typeof src === 'string' ? src : undefined} />;
+    },
     TypeTable,
     ...components,
   } satisfies MDXComponents;

apps/web/package.json

@@ -29,7 +29,7 @@
     "@biomejs/biome": "^2.4.14",
     "@tailwindcss/postcss": "^4.2.4",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^25.6.0",
+    "@types/node": "^22.19.21",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.13",

package.json

@@ -29,6 +29,7 @@
     "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.31.0",
     "turbo": "^2.10.5",
-    "vitest": "^2.1.9"
+    "typescript": "6.0.3",
+    "vitest": "^4.1.10"
   }
 }

packages/cli/package.json

@@ -49,9 +49,9 @@
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@types/node": "^22.19.17",
+    "@types/node": "^22.19.21",
     "@types/prompts": "^2.4.9",
-    "tsdown": "^0.9.9",
-    "typescript": "^5.9.3"
+    "tsdown": "^0.21.10",
+    "typescript": "^6.0.3"
   }
 }

packages/cli/template/package.json

@@ -11,12 +11,12 @@
   },
   "dependencies": {
     "@open-slide/core": "^0.0.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "vite": "^5.4.10"
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "vite": "^8.1.4"
   }
 }

packages/cli/tsdown.config.ts

@@ -13,11 +13,12 @@ export default defineConfig({
     cli: 'src/cli.ts',
   },
   format: 'esm',
-  target: 'node18',
+  target: 'node22',
   platform: 'node',
   clean: true,
   dts: false,
   shims: false,
+  fixedExtension: false,
   define: {
     __CORE_VERSION_AT_BUILD__: JSON.stringify(corePkg.version),
   },

packages/core/package.json

@@ -73,7 +73,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/geist": "^5.2.8",
     "@tailwindcss/vite": "^4.3.3",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^6.0.3",
     "chalk": "^5.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -84,8 +84,8 @@
     "html-to-image": "^1.11.13",
     "lucide-react": "^1.25.0",
     "next-themes": "^0.4.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-image-crop": "^11.0.10",
     "react-router-dom": "^7.18.1",
     "shadcn": "^4.12.0",
@@ -94,14 +94,14 @@
     "tailwindcss": "^4.2.2",
     "tw-animate-css": "^1.4.0",
     "use-sync-external-store": "^1.6.0",
-    "vite": "^5.4.10"
+    "vite": "^8.1.4"
   },
   "devDependencies": {
     "@playwright/test": "~1.56.1",
-    "@types/node": "^22.19.17",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "tsdown": "^0.9.9",
-    "typescript": "^5.9.3"
+    "@types/node": "^22.19.21",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsdown": "^0.21.10",
+    "typescript": "^6.0.3"
   }
 }

packages/core/src/app/components/inspector/inspect-overlay.tsx

@@ -107,7 +107,7 @@ function Frame({
   showImageActions = false,
 }: {
   anchor: HTMLElement | null;
-  overlayRef: React.RefObject<HTMLDivElement>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
   variant: FrameVariant;
   showImageActions?: boolean;
 }) {

packages/core/src/app/lib/use-click-page-navigation.ts

@@ -7,7 +7,7 @@ const NAV_PASSTHROUGH =
   'a, button, input, textarea, select, label, summary, iframe, video, audio, embed, object, [role="button"], [role="link"], [contenteditable="true"], [data-osd-interactive], [data-osd-chrome]';
 
 type UseClickPageNavigationOptions<T extends HTMLElement> = {
-  ref: RefObject<T>;
+  ref: RefObject<T | null>;
   enabled?: boolean;
   /** Fraction of the width on each side that navigates; the center is inert. */
   edgeRatio?: number;

packages/core/src/app/lib/use-wheel-page-navigation.ts

@@ -5,7 +5,7 @@ const WHEEL_NAV_COOLDOWN_MS = 100;
 const WHEEL_GESTURE_IDLE_MS = 80;
 
 type UseWheelPageNavigationOptions<T extends HTMLElement> = {
-  ref: RefObject<T>;
+  ref: RefObject<T | null>;
   enabled?: boolean;
   canPrev: boolean;
   canNext: boolean;

packages/core/src/app/routes/slide.tsx

@@ -1005,7 +1005,7 @@ function SlideViewportNavigation({
   canPrev,
   canNext,
 }: {
-  targetRef: RefObject<HTMLElement>;
+  targetRef: RefObject<HTMLElement | null>;
   onPrev: () => void;
   onNext: () => void;
   canPrev: boolean;

packages/core/src/vite/config.test.ts

@@ -0,0 +1,43 @@
+import fs from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { createViteConfig } from './config.ts';
+
+type VirtualExternalsPlugin = {
+  name: string;
+  resolveId?: (id: string) => { id: string; external: true } | undefined;
+};
+
+describe('createViteConfig', () => {
+  it('uses native optimizeDeps.rolldownOptions and excludes virtual modules', async () => {
+    const root = await fs.mkdtemp(path.join(os.tmpdir(), 'open-slide-vite-config-'));
+    try {
+      await fs.mkdir(path.join(root, 'slides'), { recursive: true });
+      const config = await createViteConfig({ userCwd: root });
+      const optimizeDeps = config.optimizeDeps;
+
+      expect(optimizeDeps).toBeDefined();
+      expect(optimizeDeps).not.toHaveProperty('esbuildOptions');
+
+      const plugins = optimizeDeps?.rolldownOptions?.plugins;
+      expect(Array.isArray(plugins)).toBe(true);
+
+      const plugin = (plugins as VirtualExternalsPlugin[]).find(
+        (entry) => entry?.name === 'open-slide:virtual-externals',
+      );
+      expect(plugin).toBeDefined();
+      expect(plugin?.resolveId?.('virtual:open-slide/slides')).toEqual({
+        id: 'virtual:open-slide/slides',
+        external: true,
+      });
+      expect(plugin?.resolveId?.('virtual:open-slide/config')).toEqual({
+        id: 'virtual:open-slide/config',
+        external: true,
+      });
+      expect(plugin?.resolveId?.('react')).toBeUndefined();
+    } finally {
+      await fs.rm(root, { recursive: true, force: true });
+    }
+  });
+});

packages/core/src/vite/config.ts

@@ -96,16 +96,15 @@ export async function createViteConfig(opts: CreateViteConfigOptions): Promise<I
       ],
       // The app source ships inside node_modules/@open-slide/core/src/app, so
       // Vite's dep scanner traverses it as if it were a third-party dep and
-      // tries to bundle our virtual imports with esbuild. Mark them external.
-      esbuildOptions: {
+      // tries to bundle our virtual imports. Mark them external for Rolldown.
+      rolldownOptions: {
         plugins: [
           {
             name: 'open-slide:virtual-externals',
-            setup(build) {
-              build.onResolve({ filter: /^virtual:open-slide\// }, (args) => ({
-                path: args.path,
-                external: true,
-              }));
+            resolveId(id: string) {
+              if (id.startsWith('virtual:open-slide/')) {
+                return { id, external: true };
+              }
             },
           },
         ],

packages/core/tsconfig.json

@@ -15,7 +15,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/app/*"]
     },

packages/core/tsdown.config.ts

@@ -8,10 +8,13 @@ export default defineConfig({
     'locale/index': 'src/locale/index.ts',
   },
   format: 'esm',
-  target: 'node18',
+  target: 'node22',
   platform: 'node',
   clean: true,
   dts: true,
   shims: false,
-  external: ['vite', 'react', 'react-dom', 'react-router-dom'],
+  fixedExtension: false,
+  deps: {
+    neverBundle: ['vite', 'react', 'react-dom', 'react-router-dom'],
+  },
 });