chore: migrate from rollup to rolldown

christopherthielen · christopherthielen · commit 2a5b9a448458 · 2026-01-02T19:16:53.000-10:00
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "start": "npm run bundle && http-server . -o example",
     "clean": "shx rm -rf lib lib-esm _bundles",
     "compile": "tsc --outdir lib && tsc -m es6 --outdir lib-esm",
-    "bundle": "rollup -c",
+    "bundle": "rolldown -c rolldown.config.mjs",
     "build": "npm run clean && npm run compile && npm run bundle",
     "prepublishOnly": "npm run build",
     "release": "release"
@@ -38,8 +38,6 @@
     "preact": "^10.28.1"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-typescript": "^6.0.0",
     "@types/d3-hierarchy": "^1.1.5",
     "@types/d3-interpolate": "^1.3.0",
     "@uirouter/core": "^6.0.6",
@@ -48,8 +46,8 @@
     "husky": "^4.3.0",
     "prettier": "^2.1.2",
     "pretty-quick": "^3.0.2",
-    "rollup": "^2.27.1",
-    "rollup-plugin-postcss": "^3.1.8",
+    "rolldown": "^1.0.0-beta.58",
+    "rollup-plugin-styles": "^4.0.0",
     "serve": "^11.3.2",
     "shx": "^0.3.2",
     "tslib": "^2.0.1",
diff --git a/rolldown.config.mjs b/rolldown.config.mjs
@@ -0,0 +1,33 @@
+import { defineConfig } from 'rolldown';
+import styles from 'rollup-plugin-styles';
+
+export default defineConfig({
+  input: 'src/visualizer.ts',
+  // Tell rolldown to let plugins handle CSS instead of its built-in extraction
+  moduleTypes: {
+    '.css': 'js',
+  },
+  plugins: [
+    // Inject CSS into the document <head> at runtime
+    styles({ mode: 'inject' }),
+  ],
+  resolve: {
+    alias: {
+      // Redirect react jsx-runtime to preact's jsx-runtime
+      'react/jsx-runtime': 'preact/jsx-runtime',
+    },
+  },
+  output: [
+    {
+      file: '_bundles/ui-router-visualizer.js',
+      format: 'umd',
+      name: '@uirouter/visualizer',
+      sourcemap: true,
+    },
+    {
+      file: '_bundles/ui-router-visualizer.esm.js',
+      format: 'esm',
+      sourcemap: true,
+    },
+  ],
+});
diff --git a/rollup.config.js b/rollup.config.js
diff --git a/src/statevis/StateVisualizer.tsx b/src/statevis/StateVisualizer.tsx
@@ -160,7 +160,9 @@ export class StateVisualizer extends Component<IProps, IState> {
       >
         <StateVisWindow
           minimized={this.state.minimized}
-          ref={(windowRef) => (this.windowEl = (windowRef && windowRef.el) || this.windowEl)}
+          ref={(windowRef) => {
+            this.windowEl = (windowRef && windowRef.el) || this.windowEl;
+          }}
           onResize={({ width, height }) => this.setState({ width, height })}
         >
           <div
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,12 +3,13 @@
   "compilerOptions": {
     "jsx": "react",
     "jsxFactory": "h",
-    "lib": ["es6", "dom"],
+    "lib": ["ES2018", "dom"],
     "rootDir": ".",
     "sourceRoot": "src",
     "moduleResolution": "node",
     "target": "es5",
     "sourceMap": true,
-    "inlineSources": true
+    "inlineSources": true,
+    "skipLibCheck": true
   }
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -160,7 +160,9 @@ export class StateVisualizer extends Component<IProps, IState> {`
`160`	`160`	`>`
`161`	`161`	`<StateVisWindow`
`162`	`162`	`minimized={this.state.minimized}`
`163`		`- ref={(windowRef) => (this.windowEl = (windowRef && windowRef.el) \|\| this.windowEl)}`
	`163`	`+ ref={(windowRef) => {`
	`164`	`+ this.windowEl = (windowRef && windowRef.el) \|\| this.windowEl;`
	`165`	`+ }}`
`164`	`166`	`onResize={({ width, height }) => this.setState({ width, height })}`
`165`	`167`	`>`
`166`	`168`	`<div`