Replace Rollup with Vite

Author: appsforartists

.gitignore

@@ -1,5 +1,5 @@
 **/dist/*
-**/site/bundles/
+**/site/*
 *.js.map
 *.pyc
 .DS_Store

package.json

@@ -24,16 +24,9 @@
     "@rollup/plugin-node-resolve": "11.2.1",
     "@rollup/plugin-replace": "4.0.0",
     "@squoosh/cli": "0.6.3",
-    "concurrently": "7.1.0",
-    "dhost": "0.3.5",
-    "rollup": "2.75.7",
-    "rollup-plugin-commonjs": "10.0.1",
-    "rollup-plugin-esm-import-to-url": "2.1.0",
-    "rollup-plugin-livereload": "2",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-replace": "2.2.0",
     "tslib": "2.1.0",
     "typescript": "5.1.6",
+    "vite": "^4.5.0",
     "wireit": "0.7.1"
   },
   "packageManager": "yarn@3.2.1"

packages/core/package.json

@@ -2,6 +2,7 @@
   "name": "trapeze",
   "version": "1.2.0",
   "description": "A Preact library for paginated experiences, like slide decks and surveys.",
+  "typescript": "./src/preact.tsx",
   "module": "./dist/preact.js",
   "types": "./dist/preact.d.ts",
   "scripts": {

packages/demos/package.json

@@ -3,16 +3,25 @@
   "name": "trapeze-demos",
   "version": "0.0.0",
   "scripts": {
-    "start": "yarn run -TB concurrently \"yarn run build:tsc --watch\" \"rollup --config ./rollup.config.js --watch\" \"dhost site --bind-all\"",
+    "start": "yarn run -TB wireit",
     "build": "yarn run -TB wireit",
     "build:tsc": "yarn run -TB wireit",
-    "build:bundle": "yarn run -TB wireit"
+    "build:gen-html": "yarn run -TB wireit",
+    "build:site": "yarn run -TB wireit"
   },
   "wireit": {
+    "start": {
+      "service": true,
+      "command": "vite serve",
+      "files": [
+        "vite.config.js"
+      ]
+    },
     "build": {
       "dependencies": [
         "build:tsc",
-        "build:bundle"
+        "build:gen-html",
+        "build:site"
       ]
     },
     "build:tsc": {
@@ -24,7 +33,7 @@
         "../../tsconfig.common.json"
       ],
       "output": [
-        "dist/**",
+        "dist/**/*.js",
         ".tsbuildinfo"
       ],
       "packageLocks": [
@@ -34,22 +43,33 @@
         "../core:build"
       ]
     },
-    "build:bundle": {
-      "command": "rollup --config ./rollup.config.js",
+    "build:gen-html": {
+      "command": "sed 's/mount.tsx/mount.js/' src/index.html > dist/index.html",
+      "files": [
+        "src/index.html"
+      ],
+      "output": [
+        "dist/index.html"
+      ]
+    },
+    "build:site": {
+      "command": "vite build",
       "clean": true,
       "files": [
+        "dist/**/index.html",
         "dist/**/*.js",
-        "rollup.config.js"
+        "vite.config.js"
       ],
       "output": [
-        "site/mount.js",
+        "site/**/*",
         ".tsbuildinfo"
       ],
       "packageLocks": [
         "yarn.lock"
       ],
       "dependencies": [
-        "build:tsc"
+        "build:tsc",
+        "build:gen-html"
       ]
     }
   },

packages/demos/rollup.config.js

@@ -48,7 +48,7 @@
   </body>
   <script
     type = 'module'
-    src = '/bundles/mount.js'
+    src = 'mount.tsx'
   ></script>
 </html>
 

packages/demos/site/index.html renamed to packages/demos/src/index.html

@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite'
+
+// Before vite, we used wireit + tsc for building.  Because tsc checks all the
+// types before generating JS, the delay between editing a file and seeing a
+// change in-browser got to be too long.  vite short-circuits type checking,
+// effectively stripping the types and presenting the result in the browser as
+// quickly as possible.
+//
+// The config below provides vite with raw TypeScript for fast iteration cycles
+// when running the dev server, but with tsc-checked JavaScript otherwise.
+//
+// This is my first try using vite.  We may later find that there's a better way
+// to incorporate type-checking (maybe wireit + tsc isn't needed anymore).  For
+// now, this gets us the speed of vite's dev cycles without changing how our
+// packages are generated.
+
+export default defineConfig(
+  ({ command }) => ({
+    // This allows us to colocate the HTML file with its scripts without getting
+    // the folder name baked into the HTML path.
+    root: command === 'serve'
+      ? 'src'
+      : 'dist',
+
+    resolve: {
+      mainFields: command === 'serve'
+        ? ['typescript', 'browser', 'module']
+        : ['browser', 'module'],
+    },
+    build: {
+      // ./dist/../site == ./site
+      outDir: '../site',
+    },
+  })
+);