Merge branch 'vite-configs'

examples/react-counter/vite.config.ts

@@ -11,22 +11,4 @@ export default defineConfig({
     format: "es",
     plugins: () => [wasm()],
   },
-
-  optimizeDeps: {
-    // This is necessary because otherwise `vite dev` includes two separate
-    // versions of the JS wrapper. This causes problems because the JS
-    // wrapper has a module level variable to track JS side heap
-    // allocations, and initializing this twice causes horrible breakage
-    exclude: [
-      "@automerge/automerge-wasm",
-      "@automerge/automerge-wasm/bundler/bindgen_bg.wasm",
-      "@syntect/wasm",
-    ],
-  },
-
-  server: {
-    fs: {
-      strict: false,
-    },
-  },
 })

examples/react-todo/vite.config.ts

@@ -1,31 +1,12 @@
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import wasm from "vite-plugin-wasm"
-import topLevelAwait from "vite-plugin-top-level-await"
 
 export default defineConfig({
-  plugins: [wasm(), topLevelAwait(), react()],
+  plugins: [wasm(), react()],
 
   worker: {
     format: "es",
-    plugins: () => [wasm(), topLevelAwait()],
-  },
-
-  optimizeDeps: {
-    // This is necessary because otherwise `vite dev` includes two separate
-    // versions of the JS wrapper. This causes problems because the JS
-    // wrapper has a module level variable to track JS side heap
-    // allocations, and initializing this twice causes horrible breakage
-    exclude: [
-      "@automerge/automerge-wasm",
-      "@automerge/automerge-wasm/bundler/bindgen_bg.wasm",
-      "@syntect/wasm",
-    ],
-  },
-
-  server: {
-    fs: {
-      strict: false,
-    },
+    plugins: () => [wasm()],
   },
 })

examples/react-use-awareness/vite.config.js

@@ -1,11 +1,10 @@
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react-swc"
 import wasm from "vite-plugin-wasm"
-import topLevelAwait from "vite-plugin-top-level-await"
 
 export default defineConfig({
-  plugins: [react(), wasm(), topLevelAwait()],
+  plugins: [react(), wasm()],
   worker: {
-    plugins: () => [wasm(), topLevelAwait()],
+    plugins: () => [wasm()],
   },
 })

examples/svelte-counter/vite.config.ts

@@ -1,32 +1,13 @@
 import { defineConfig } from "vite"
 import { svelte } from "@sveltejs/vite-plugin-svelte"
 import wasm from "vite-plugin-wasm"
-import topLevelAwait from "vite-plugin-top-level-await"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [wasm(), topLevelAwait(), svelte()],
+  plugins: [wasm(), svelte()],
 
   worker: {
     format: "es",
-    plugins: () => [wasm(), topLevelAwait()],
-  },
-
-  optimizeDeps: {
-    // This is necessary because otherwise `vite dev` includes two separate
-    // versions of the JS wrapper. This causes problems because the JS
-    // wrapper has a module level variable to track JS side heap
-    // allocations, and initializing this twice causes horrible breakage
-    exclude: [
-      "@automerge/automerge-wasm",
-      "@automerge/automerge-wasm/bundler/bindgen_bg.wasm",
-      "@syntect/wasm",
-    ],
-  },
-
-  server: {
-    fs: {
-      strict: false,
-    },
+    plugins: () => [wasm()],
   },
 })

package.json

@@ -68,8 +68,7 @@
     "typedoc": "^0.25.7",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.2"
   }
-}
+}

packages/automerge-repo-react-hooks/vite.config.ts

@@ -3,37 +3,42 @@ import react from "@vitejs/plugin-react"
 import { resolve } from "path"
 import dts from "vite-plugin-dts"
 import wasm from "vite-plugin-wasm"
-import topLevelAwait from "vite-plugin-top-level-await"
 import { visualizer } from "rollup-plugin-visualizer"
 
 export default defineConfig({
   plugins: [
     react(),
     wasm(),
-    topLevelAwait(),
-    dts({
-      insertTypesEntry: true,
-    }),
+    dts({ insertTypesEntry: true }),
     process.env.VISUALIZE && visualizer(),
   ],
   build: {
     lib: {
       entry: resolve(__dirname, "src/index.ts"),
       formats: ["es"],
       fileName: "index",
+      entry: resolve(__dirname, "src/index.ts"),
+      formats: ["es"],
+      fileName: "index",
     },
     rollupOptions: {
+      external: ["react", "react/jsx-runtime", "react-dom", "tailwindcss"],
       external: ["react", "react/jsx-runtime", "react-dom", "tailwindcss"],
       output: {
         globals: {
           react: "React",
           "react/jsx-runtime": "react/jsx-runtime",
           "react-dom": "ReactDOM",
         },
+      },
+          react: "React",
+          "react/jsx-runtime": "react/jsx-runtime",
+          "react-dom": "ReactDOM",
+        },
       },
     },
   },
   worker: {
-    plugins: [wasm(), topLevelAwait()],
+    plugins: () => [wasm()],
   },
 })

packages/automerge-repo/README.md

@@ -123,7 +123,7 @@ yarn create vite
 
 cd hello-automerge-repo
 yarn
-yarn add @automerge/automerge @automerge/automerge-repo-react-hooks @automerge/automerge-repo-network-broadcastchannel @automerge/automerge-repo-storage-indexeddb vite-plugin-wasm vite-plugin-top-level-await
+yarn add @automerge/automerge @automerge/automerge-repo-react-hooks @automerge/automerge-repo-network-broadcastchannel @automerge/automerge-repo-storage-indexeddb vite-plugin-wasm
 ```
 
 Edit the `vite.config.ts`. (This is all need to work around packaging hiccups due to WASM. We look
@@ -134,32 +134,13 @@ forward to the day that we can delete this step entirely.)
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import wasm from "vite-plugin-wasm"
-import topLevelAwait from "vite-plugin-top-level-await"
 
 export default defineConfig({
-  plugins: [wasm(), topLevelAwait(), react()],
+  plugins: [wasm(), react()],
 
   worker: {
     format: "es",
-    plugins: [wasm(), topLevelAwait()],
-  },
-
-  optimizeDeps: {
-    // This is necessary because otherwise `vite dev` includes two separate
-    // versions of the JS wrapper. This causes problems because the JS
-    // wrapper has a module level variable to track JS side heap
-    // allocations, and initializing this twice causes horrible breakage
-    exclude: [
-      "@automerge/automerge-wasm",
-      "@automerge/automerge-wasm/bundler/bindgen_bg.wasm",
-      "@syntect/wasm",
-    ],
-  },
-
-  server: {
-    fs: {
-      strict: false,
-    },
+    plugins: () => [wasm()],
   },
 })
 ```

packages/create-vite-app/package.json

@@ -14,9 +14,13 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "tsc",
-    "postbuild": "node postbuild.js"
+    "postbuild": "node postbuild.js",
+    "test": "node test.js"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "execa": "^8.0.1"
   }
-}
+}

packages/create-vite-app/template/package.json

@@ -30,7 +30,6 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "typescript": "^5.2.2",
     "vite": "^5.1.6",
-    "vite-plugin-top-level-await": "^1",
     "vite-plugin-wasm": "^3"
   }
-}
+}

packages/create-vite-app/template/vite.config.ts

@@ -1,15 +1,12 @@
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import wasm from "vite-plugin-wasm"
-import topLevelAwait from "vite-plugin-top-level-await"
 
 export default defineConfig({
   // customize this to your repo name for github pages deploy
   base: "/",
 
-  build: {
-    target: "esnext",
-  },
+  build: { target: "esnext" },
 
   plugins: [wasm(), react()],
 

packages/create-vite-app/test.js

@@ -0,0 +1,72 @@
+import { execa } from "execa"
+import { $ } from "execa"
+import path from "path"
+import os from "os"
+import fs from "fs"
+import { exit } from "node:process"
+
+// This script is used to test the create-vite-app script from local code in a temporary directory
+// see https://github.com/automerge/automerge-repo/pull/322#issuecomment-2012354463 for context
+
+// build
+
+const { stdout } = await execa("pnpm", ["run", "build"])
+
+console.log("building create-vite-app...")
+await $`pnpm build`
+
+// pack
+
+const { stdout: tarballFile } = await $`pnpm pack`
+console.log("creating tarball...")
+const tarballPath = path.join(process.cwd(), tarballFile)
+
+// create a temp dir and test the create-vite-app script by creating an app
+
+const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "test-create-"))
+
+const $$ = $({ cwd: tempDir })
+
+console.log("creating test app...")
+await $$`pnpm init`
+await $$`pnpm install ${tarballPath}`
+await $$`./node_modules/@automerge/create-vite-app/dist/index.js test-app`
+
+// run the app in dev mode
+
+const cwd = path.join(tempDir, "test-app")
+const $$$ = $({ cwd })
+
+console.log("installing test app...")
+await $$$`pnpm install`
+
+console.log("running test app in dev mode...")
+
+// `vite` is a long running command, so we abuse the `timeout` to kill it after a short time.
+// This throws an error that we catch in order to capture its output.
+const output = await $$$({ timeout: 1000 })`pnpm dev`.catch(result => {
+  // should look something like
+  //
+  // VITE v5.2.6  ready in 415 ms
+  //
+  // ➜  Local:   http://localhost:5173/
+  // ➜  Network: use --host to expose
+  // ➜  press h + enter to show help
+  return result.stdout
+})
+
+const success = output.includes("VITE") && output.includes("ready")
+
+// cleanup
+await $`git clean *.tgz -f`
+
+if (success) {
+  console.log("✅ create-vite-app test passed")
+  exit(0)
+} else {
+  console.log()
+  console.log(output)
+  console.log()
+  console.log("❌ create-vite-app test failed")
+  exit(1)
+}