FE-225: Petrinaut: Setup rolldown-plugin-dts and update @typeScript/native-preview + vite

libs/@hashintel/petrinaut/package.json

@@ -75,17 +75,18 @@
     "@types/d3-scale": "4.0.9",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260216.1",
+    "@typescript/native-preview": "7.0.0-dev.20260309.1",
     "@vitejs/plugin-react": "5.1.4",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "9.39.3",
     "immer": "10.1.3",
     "jsdom": "24.1.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "rolldown": "1.0.0-rc.8",
+    "rolldown-plugin-dts": "0.22.4",
     "storybook": "10.2.13",
-    "vite": "8.0.0-beta.14",
-    "vite-plugin-dts": "4.5.4",
+    "vite": "8.0.0-beta.18",
     "vitest": "4.0.18"
   },
   "peerDependencies": {

libs/@hashintel/petrinaut/src/fontsource.d.ts

@@ -0,0 +1,3 @@
+// tsgo (unlike tsc) requires type declarations for side-effect-only imports.
+// Fontsource packages ship CSS only, so we declare the module manually.
+declare module "@fontsource-variable/jetbrains-mono";

libs/@hashintel/petrinaut/src/petrinaut.tsx

@@ -1,6 +1,8 @@
 import "reactflow/dist/style.css";
 import "./index.css";
 
+import { type FunctionComponent } from "react";
+
 import type {
   Color,
   DifferentialEquation,
@@ -103,11 +105,11 @@ export type PetrinautProps = {
   undoRedo?: UndoRedoContextValue;
 };
 
-export const Petrinaut = ({
+export const Petrinaut: FunctionComponent<PetrinautProps> = ({
   hideNetManagementControls,
   undoRedo,
   ...rest
-}: PetrinautProps) => {
+}) => {
   return (
     <NotificationsProvider>
       <UndoRedoContext value={undoRedo ?? null}>

libs/@hashintel/petrinaut/tsconfig.json

@@ -13,8 +13,6 @@
     "resolveJsonModule": true,
     "noEmit": true,
     "skipLibCheck": true,
-    "declaration": true,
-    "emitDeclarationOnly": true,
     "isolatedModules": true
   },
   "include": ["src", "demo-site", ".storybook"],

libs/@hashintel/petrinaut/vite.config.ts

@@ -1,13 +1,12 @@
 import react from "@vitejs/plugin-react";
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { replacePlugin } from "rolldown/plugins";
+import { dts } from "rolldown-plugin-dts";
 import { defineConfig, esmExternalRequirePlugin } from "vite";
-import dts from "vite-plugin-dts";
 
 /**
  * Library build config
  */
-export default defineConfig({
+export default defineConfig(({ command }) => ({
   build: {
     lib: {
       entry: "src/main.ts",
@@ -45,7 +44,6 @@ export default defineConfig({
       replacePlugin({
         // Consumer Webpack config seem to `define` `typeof window` to `"object"` by default.
         // This causes crashes in Web Workers, since `window` is not defined there.
-        // To prevent this, we do this resolution on our side.
         "typeof window": '"undefined"',
         // TypeScript's internals reference process, process.versions.pnp, etc.
         "typeof process": "'undefined'",
@@ -78,22 +76,13 @@ export default defineConfig({
       },
     }),
 
-    dts({
-      rollupTypes: true,
-      insertTypesEntry: true,
-      exclude: [
-        "**/*.test.*",
-        "**/*.spec.*",
-        "**/*.stories.*",
-        "playground/**",
-        "stories/**",
-        ".storybook/**",
-        "styled-system/**",
-        "demo-site/**",
-      ],
-      copyDtsFiles: false,
-      outDir: "dist",
-    }),
+    command === "build" &&
+      dts({ tsgo: true }).map((plugin) =>
+        // Ensure runs before Vite's native TypeScript transform
+        plugin.name.endsWith("fake-js")
+          ? { ...plugin, enforce: "pre" }
+          : plugin,
+      ),
   ],
 
   experimental: {
@@ -106,4 +95,4 @@ export default defineConfig({
       return filename;
     },
   },
-});
+}));