create-grist-widget 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-grist-widget",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Scaffold a new Grist custom widget from the grist-widget-sdk Vite template",
   "license": "MIT",
   "type": "module",

package/template/.github/workflows/deploy.yml

@@ -12,8 +12,12 @@ name: Deploy widget to GitHub Pages
 #     v0.0.1 + /latest/ + root right away, discarding any inherited canary
 #     version. On that same first release, the "Reset repo to a clean
 #     first-release state" step below rewrites package.json's version back to
-#     0.0.1 in the repo itself, so the *next* release bumps to 0.0.2 rather
-#     than the inherited number.
+#     0.0.1 in the repo itself (so the *next* release bumps to 0.0.2 rather
+#     than the inherited number) and, since "Use this template" never runs
+#     the CLI's own rename step, also personalizes the four placeholder-
+#     identity spots (package.json's name, README.md's heading, index.html's
+#     <title>, App.tsx's title) to match this repo's real name -- a no-op
+#     wherever that placeholder text is already gone.
 #   - push to dev                    -> dev channel: mutable /<repo>/dev/
 #     with version.json + a self-reload snippet, for live review inside Grist.
 #
@@ -158,7 +162,7 @@ jobs:
       # run sees v0.0.1 already published (firstRelease=false) and no-ops.
       - name: Reset repo to a clean first-release state
         if: steps.plan.outputs.context == 'release' && steps.plan.outputs.firstRelease == 'true'
-        run: node scripts/deploy.mjs reset-branches
+        run: node scripts/deploy.mjs reset-branches --repo "$REPO_NAME"
 
   cleanup:
     # When the `dev` branch is deleted, remove /dev/ so the dev URL retires

package/template/AGENTS.md

@@ -35,8 +35,8 @@ rendering all live in `src/App.tsx` — that's the one file to edit.
    itself only renders once actually embedded in a Grist document. An offline, seeded
    `pnpm dev` loop is planned but not shipped in this template yet — don't describe one as
    if it exists.
-3. **No test command yet.** `package.json` has no `test` script in this template today —
-   don't invent one or assume `pnpm test` works here.
+3. **Widget changes get a test.** `src/App.test.tsx` uses `renderWithGrist` + `presets` from
+   `grist-widget-sdk/emulator/testing` — no browser or real Grist doc needed. Run `pnpm test`.
 4. **Always develop on `dev`, release by merging to `main`.** Commit and push to `dev` for
    every change — it auto-deploys a live preview at `.../dev/` that self-reloads inside an
    open Grist document a few seconds later. Bump `package.json`'s `version` *before*
@@ -51,6 +51,7 @@ rendering all live in `src/App.tsx` — that's the one file to edit.
 | Install | `pnpm install` |
 | Dev server (showcase hub outside Grist) | `pnpm dev` |
 | Build | `pnpm build` |
+| Test | `pnpm test` |
 | Lint | `pnpm lint` |
 | Format | `pnpm format` |
 | Type-check | `pnpm typecheck` |
@@ -61,6 +62,7 @@ rendering all live in `src/App.tsx` — that's the one file to edit.
 | Concept | Path |
 | --- | --- |
 | The widget | `src/App.tsx` |
+| Widget test (the pattern to copy for new tests) | `src/App.test.tsx` |
 | Grist wiring / embed vs. showcase detection | `src/main.tsx` |
 | ui primitives | `src/components/ui/` |
 | Deploy workflow | `.github/workflows/deploy.yml` |
@@ -85,6 +87,6 @@ Full detail, including the two live URLs (`/latest/` and `/v<version>/`): `READM
 ## Anti-patterns
 
 - Calling `window.grist.*` inside widget code instead of the SDK's hooks
-- Describing a `pnpm test` command or a seeded offline `pnpm dev` preview — neither exists
-  in this template yet
+- Describing a seeded offline `pnpm dev` preview — that doesn't exist in this template yet
+  (only a seeded offline `pnpm test`, via `renderWithGrist`, does)
 - Merging `dev` into `main` without bumping `package.json`'s `version` first

package/template/README.md

@@ -8,12 +8,12 @@ Opened outside a Grist iframe, `main.tsx` picks between two components purely by
 
 When actually embedded, `GristStatusChip` (`src/components/grist-status-chip.tsx`) shows a small pill with live handshake status — connecting, retrying with a countdown, connected, or unavailable — using `useAmbientGristHandshake()` from `grist-widget-sdk/advanced`. It must be mounted *inside* `GristWidgetProvider` (see `src/main.tsx`): it only observes that provider's own handshake manager and never mounts a second one, so it's purely observational and can never duplicate or race the real handshake (see the [handshake API reference](https://gristwidgets.com/docs/sdk/api/handshake)).
 
-`src/App.tsx` uses `useGrist<TaskRow, TaskMapped>()` for the selected row (`w.record`, `w.mode`) and remounts the UI with `key={rowKey}` when the row changes — same pattern as `widgets/create-email-draft`. See `src/grist-types.example.ts` for typing patterns.
+`src/App.tsx` uses `useGrist<TaskRow, TaskMapped>()` for the selected row (`w.record`, `w.mode`) and remounts the UI with `key={rowKey}` when the row changes — same pattern as `widgets/create-email-draft`. It ships with two mapped columns (`title`, `done`) and an editable form that saves back via `w.table.update(...)`/`w.mapBack(...)` — the smallest real starting point, not a placeholder. See `src/grist-types.example.ts` for typing patterns.
 
 - **ESLint** blocks direct `grist` global usage in `src/` — use the SDK only.
-- Uncomment `GRIST_OPTIONS.columns` in `App.tsx` to enable column mapping; `main.tsx` sets `GristBoundary gate="canRender"` when columns are declared. Mapping alerts use `GristSdkAlerts`.
+- Edit `GRIST_OPTIONS.columns` in `App.tsx` to change the required columns (or remove the array entirely to read raw, unmapped records instead); `main.tsx` sets `GristBoundary gate="canRender"` whenever columns are declared. Mapping alerts use `GristSdkAlerts`.
 
-To add widget tests later, see [Testing](https://gristwidgets.com/docs/sdk/guide/testing) (`renderWithGrist` from `grist-widget-sdk/emulator/testing`).
+Run `pnpm test` — see `src/App.test.tsx` for the pattern (`renderWithGrist` + `presets` from `grist-widget-sdk/emulator/testing`, no browser or real Grist doc needed). Full guide: [Testing](https://gristwidgets.com/docs/sdk/guide/testing).
 
 **Monorepo dev:** this template resolves `grist-widget-sdk` from `packages/core/dist` (like the other widgets), not from SDK source. After changing the SDK, run `pnpm prebuild` or `pnpm --filter grist-widget-sdk build` before `pnpm dev`.
 
@@ -40,8 +40,9 @@ This template has no live-preview deploy of its own inside this monorepo —
 that used to exist (a `/template/` showcase on this repo's own GitHub
 Pages) but has been retired. The only live preview of this template's
 current source is external: `template-canary.yml` scaffolds it via the
-*published* `create-grist-widget` package and pushes to the `dev` and
-`canary/latest` branches of
+*published* `create-grist-widget` package and pushes to the `dev` branch
+(pre-release preview) and directly to `main` (stable `@latest`, promotion is
+automatic) of
 [`grist-widget-template`](https://github.com/ArthurBlanchon/grist-widget-template)
 after every release — see https://gristwidgets.com/docs/contributing/releasing for the full
 mechanism. There is no live preview of *unreleased* changes to this

package/template/package.json

@@ -9,7 +9,8 @@
     "lint": "eslint .",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
     "typecheck": "tsc -b",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
     "@fontsource-variable/geist": "^5.2.8",
@@ -28,6 +29,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@testing-library/jest-dom": "^6",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -36,12 +39,14 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^16.5.0",
+    "jsdom": "^29.0.2",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "shadcn": "^4.16.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.57.1",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vitest": "^4.1.4"
   },
   "packageManager": "pnpm@11.1.3"
 }

package/template/scripts/deploy.mjs

@@ -39,11 +39,13 @@
 //     Regenerates versions.json (release runs only) and commits + pushes the
 //     gh-pages tree with a rebase-and-retry loop.
 //
-//   reset-branches [--repo-dir <dir>]
+//   reset-branches [--repo-dir <dir>] [--repo <name>]
 //     On a repo's first genuine release only (caller gates on plan()'s
-//     firstRelease): resets package.json's version to 0.0.1, prunes every
-//     branch except main/dev/gh-pages, and
-//     force-resets dev to main's current tip.
+//     firstRelease): renames the four placeholder-identity spots (only if
+//     --repo is given and they still carry the template's own placeholder
+//     text -- a no-op for a CLI scaffold that already renamed itself), resets
+//     package.json's version to 0.0.1, prunes every branch except
+//     main/dev/gh-pages, and force-resets dev to main's current tip.
 
 import {
   existsSync,
@@ -348,10 +350,56 @@ export function finalize({ siteDir, updateVersions, push, commitMessage, remoteB
   throw lastErr
 }
 
+/**
+ * Derive an npm-safe package name and a human title from a real GitHub repo
+ * name -- which allows characters (uppercase, underscores, periods) npm
+ * package names don't. Mirrors the title-casing
+ * `packages/create-grist-widget/bin/create-grist-widget.mjs` already applies
+ * to its own CLI-provided `rawName`, so a repo named e.g. `Ask-Genial_Widget`
+ * produces the same shape of package name / title a CLI user typing
+ * `ask-genial-widget` would have gotten.
+ */
+export function deriveIdentity(repoName) {
+  const packageName =
+    (repoName || "")
+      .toLowerCase()
+      .replace(/[^a-z0-9-]+/g, "-")
+      .replace(/^-+|-+$/g, "") || "grist-widget"
+  const title = packageName
+    .split("-")
+    .filter(Boolean)
+    .map((w) => w[0].toUpperCase() + w.slice(1))
+    .join(" ")
+  return { packageName, title }
+}
+
+/**
+ * The same four placeholder-identity edits
+ * `packages/create-grist-widget/bin/create-grist-widget.mjs` applies at
+ * scaffold time, parameterized by a derived identity instead of CLI input.
+ * Each substitution is a plain string replace, so it's naturally a no-op
+ * wherever the placeholder text is already gone -- a CLI-scaffolded repo
+ * (whose name may legitimately differ from its GitHub repo name) is never
+ * touched by this.
+ */
+function identityEdits({ packageName, title }) {
+  return [
+    ["package.json", [["grist-widget-template-vite", packageName]]],
+    ["README.md", [["grist-widget-template-vite", packageName]]],
+    ["index.html", [["<title>Grist Widget</title>", `<title>${title}</title>`]]],
+    ["src/App.tsx", [['title: "Grist Widget Template",', `title: "${title}",`]]],
+  ]
+}
+
 /**
  * Establish the state every widget repo should start from, on its first
  * genuine release only (gated by the caller on `plan()`'s `firstRelease`):
  *
+ *   0. If `repo` is given, rewrite the four placeholder-identity spots (see
+ *      `identityEdits`) to match the real repo name -- the piece "Use this
+ *      template" skips entirely, since it copies the repo verbatim and never
+ *      runs the CLI's own rename step. Folded into the same commit as the
+ *      version reset below, not a separate one.
  *   1. Reset package.json's version to 0.0.1. The first release already
  *      published v0.0.1 (forced by plan() regardless of package.json), but a
  *      repo copied via GitHub's "Use this template" still carries the source
@@ -372,27 +420,55 @@ export function finalize({ siteDir, updateVersions, push, commitMessage, remoteB
  * a genuine release already published (firstRelease=false) and skips both
  * the release and this reset, so there's no loop.
  */
-export function resetBranchesIfFirstRelease(repoDir, keep = ["main", "dev", "gh-pages"]) {
+export function resetBranchesIfFirstRelease(repoDir, repo, keep = ["main", "dev", "gh-pages"]) {
+  const changedFiles = new Set()
+  const renamedFiles = []
+
+  if (repo) {
+    for (const [file, subs] of identityEdits(deriveIdentity(repo))) {
+      const p = join(repoDir, file)
+      if (!existsSync(p)) continue
+      const before = readFileSync(p, "utf8")
+      const after = subs.reduce((text, [search, replace]) => text.split(search).join(replace), before)
+      if (after !== before) {
+        writeFileSync(p, after)
+        changedFiles.add(file)
+        renamedFiles.push(file)
+      }
+    }
+  }
+  const identityReset = renamedFiles.length > 0
+
   let versionReset = false
   const pkgPath = join(repoDir, "package.json")
   if (existsSync(pkgPath)) {
+    // Re-read after any identity edit above, so a rewritten `name` survives
+    // this JSON round-trip instead of being clobbered by it.
     const pkg = JSON.parse(readFileSync(pkgPath, "utf8"))
     if (pkg.version !== "0.0.1") {
       pkg.version = "0.0.1"
       writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n")
-      git(["add", "package.json"], repoDir)
-      git(
-        [
-          "-c", "user.name=github-actions[bot]",
-          "-c", "user.email=41898282+github-actions[bot]@users.noreply.github.com",
-          "commit", "-m", "chore: reset version to 0.0.1 for a clean first release",
-        ],
-        repoDir,
-      )
-      git(["push", "origin", "HEAD:refs/heads/main"], repoDir)
+      changedFiles.add("package.json")
       versionReset = true
     }
   }
+
+  if (changedFiles.size > 0) {
+    const parts = []
+    if (identityReset) parts.push("personalize scaffold")
+    if (versionReset) parts.push("reset version to 0.0.1")
+    git(["add", ...changedFiles], repoDir)
+    git(
+      [
+        "-c", "user.name=github-actions[bot]",
+        "-c", "user.email=41898282+github-actions[bot]@users.noreply.github.com",
+        "commit", "-m", `chore: ${parts.join(" + ")} for a clean first release`,
+      ],
+      repoDir,
+    )
+    git(["push", "origin", "HEAD:refs/heads/main"], repoDir)
+  }
+
   const raw = git(["ls-remote", "--heads", "origin"], repoDir)
   const branches = raw
     ? raw.split("\n").map((line) => line.split("refs/heads/")[1]).filter(Boolean)
@@ -404,7 +480,7 @@ export function resetBranchesIfFirstRelease(repoDir, keep = ["main", "dev", "gh-
     deletedBranches.push(b)
   }
   git(["push", "--force", "origin", "HEAD:refs/heads/dev"], repoDir)
-  return { deletedBranches, devReset: true, versionReset }
+  return { deletedBranches, devReset: true, versionReset, identityReset, renamedFiles }
 }
 
 // ----------------------------------------------------------------------------
@@ -467,7 +543,7 @@ function main() {
       break
     }
     case "reset-branches": {
-      const res = resetBranchesIfFirstRelease(args["repo-dir"] || ".")
+      const res = resetBranchesIfFirstRelease(args["repo-dir"] || ".", args.repo)
       console.log("reset-branches:", JSON.stringify(res))
       break
     }

package/template/src/App.test.tsx

@@ -0,0 +1,81 @@
+/**
+ * Mirrors `main.tsx`'s real wiring (`GristWidgetProvider` -> `GristBoundary`
+ * -> the widget) without importing `main.tsx` itself, so this test exercises
+ * the same gate logic the embedded widget actually runs under. See
+ * `packages/core/tests/sdk/template-app.test.tsx` in the SDK repo for the
+ * same pattern applied to a bare shell.
+ */
+import "@testing-library/jest-dom/vitest"
+import { afterEach, describe, expect, it } from "vitest"
+import { GristBoundary, GristWidgetProvider } from "grist-widget-sdk"
+import {
+  act,
+  actionsOf,
+  cleanup,
+  fireEvent,
+  presets,
+  renderWithGrist,
+  screen,
+  waitFor,
+} from "grist-widget-sdk/emulator/testing"
+
+import App, { GRIST_OPTIONS } from "./App"
+
+// Not using vitest's `globals: true` (see vite.config.ts), so
+// @testing-library/react's automatic afterEach cleanup never registers
+// itself — do it explicitly, or the second test in this file finds two
+// "Title" inputs left over from the first render.
+afterEach(() => cleanup())
+
+function Wrapped() {
+  return (
+    <GristWidgetProvider options={GRIST_OPTIONS}>
+      <GristBoundary gate={GRIST_OPTIONS.columns?.length ? "canRender" : "ready"}>
+        <App />
+      </GristBoundary>
+    </GristWidgetProvider>
+  )
+}
+
+describe("App", () => {
+  it("shows the selected row's mapped title and done state", async () => {
+    const { emulator } = renderWithGrist(<Wrapped />, {
+      emulator: { document: presets.todoList() },
+    })
+    // `columns` in GRIST_OPTIONS names the widget's own logical fields — a
+    // real Grist host maps them to real column ids via the config panel;
+    // the emulator needs the same mapping told to it explicitly (name
+    // matching alone doesn't auto-map, here or in real Grist).
+    emulator.setColumnMappings({ title: "title", done: "done" })
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("Title")).toHaveValue("Buy milk")
+      expect(screen.getByLabelText("Mark as done")).not.toBeChecked()
+    })
+  })
+
+  it("saves an edited title back to Grist", async () => {
+    const { emulator } = renderWithGrist(<Wrapped />, {
+      emulator: { document: presets.todoList() },
+    })
+    emulator.setColumnMappings({ title: "title", done: "done" })
+
+    await waitFor(() => expect(screen.getByLabelText("Title")).toHaveValue("Buy milk"))
+
+    fireEvent.change(screen.getByLabelText("Title"), {
+      target: { value: "Buy oat milk" },
+    })
+    await act(async () => {
+      fireEvent.click(screen.getByText("Save"))
+    })
+
+    await waitFor(() => {
+      expect(actionsOf(emulator)).toContainEqual([
+        "UpdateRecord",
+        "Tasks",
+        1,
+        { title: "Buy oat milk", done: false },
+      ])
+    })
+  })
+})

package/template/src/App.tsx

@@ -1,4 +1,7 @@
+import { useState, type FormEvent } from "react"
+
 import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
 import {
   useGrist,
   useWidgetMetadata,
@@ -9,18 +12,21 @@ import {
 import type { TaskMapped, TaskRow } from "./grist-types.example"
 
 export const GRIST_OPTIONS: UseGristOptions = {
-  requiredAccess: "read table",
-  // Uncomment to require column mapping in the widget config panel:
-  // columns: [{ name: "title", type: "Text" }, { name: "done", type: "Bool" }],
+  requiredAccess: "full",
+  columns: [
+    { name: "title", type: "Text" },
+    { name: "done", type: "Bool" },
+  ],
 }
 
 export const WIDGET_METADATA = {
   title: "Grist Widget Template",
-  description:
-    "Starter template for building Grist widgets with React and Vite.",
+  description: "Edit the selected row's title and mark it done.",
 } as const
 
-function GristSelectionDebug({ w }: { w: UseGristResult }) {
+type TemplateGrist = UseGristResult<TaskRow, TaskMapped>
+
+function GristSelectionDebug({ w }: { w: TemplateGrist }) {
   return (
     <details className="rounded-md border border-dashed border-muted-foreground/40 bg-muted/30 p-3 text-xs">
       <summary className="cursor-pointer font-medium text-muted-foreground">
@@ -45,7 +51,88 @@ function GristSelectionDebug({ w }: { w: UseGristResult }) {
   )
 }
 
-function TemplateBody({ w }: { w: UseGristResult }) {
+type Draft = { title: string; done: boolean }
+
+function readDraft(mapped: TaskMapped | null): Draft {
+  return { title: mapped?.title ?? "", done: mapped?.done ?? false }
+}
+
+function RowEditor({ w }: { w: TemplateGrist }) {
+  const [draft, setDraft] = useState<Draft>(() => readDraft(w.mappedRecord))
+  const [saveError, setSaveError] = useState<string | null>(null)
+
+  async function save(e: FormEvent) {
+    e.preventDefault()
+    if (!w.record) return
+    setSaveError(null)
+    try {
+      await w.table.update({
+        id: w.record.id,
+        fields: w.mapBack({ title: draft.title, done: draft.done }),
+      })
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : String(err))
+    }
+  }
+
+  return (
+    <form onSubmit={save} className="flex flex-col gap-4 p-6 text-sm">
+      <header>
+        <h1 className="font-medium">Row #{String(w.record!.id)}</h1>
+        <p className="text-muted-foreground">
+          Edit the fields, then save back to Grist via{" "}
+          <code className="rounded bg-muted px-1 text-xs">table.update</code>.
+        </p>
+      </header>
+
+      <label className="flex flex-col gap-1">
+        <span className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+          Title
+        </span>
+        <Input
+          required
+          value={draft.title}
+          onChange={(e) => setDraft((d) => ({ ...d, title: e.target.value }))}
+        />
+      </label>
+
+      <label className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          className="size-4 rounded border-input"
+          checked={draft.done}
+          onChange={(e) => setDraft((d) => ({ ...d, done: e.target.checked }))}
+        />
+        <span>Mark as done</span>
+      </label>
+
+      {saveError ? (
+        <p className="text-xs text-destructive">{saveError}</p>
+      ) : null}
+
+      <div className="flex items-center gap-2">
+        <Button type="submit" disabled={w.actionStatus === "running"}>
+          {w.actionStatus === "running" ? "Saving…" : "Save"}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => setDraft(readDraft(w.mappedRecord))}
+          disabled={w.actionStatus === "running"}
+        >
+          Reset
+        </Button>
+        {w.actionStatus === "error" && w.actionError ? (
+          <span className="text-xs text-destructive">{w.actionError}</span>
+        ) : null}
+      </div>
+
+      <GristSelectionDebug w={w} />
+    </form>
+  )
+}
+
+function TemplateBody({ w }: { w: TemplateGrist }) {
   if (w.mode === "empty") {
     return (
       <div className="flex flex-col gap-4 p-6 text-sm">
@@ -64,22 +151,19 @@ function TemplateBody({ w }: { w: UseGristResult }) {
     )
   }
 
-  return (
-    <div className="flex min-h-svh p-6">
-      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
-        <div>
-          <h1 className="font-medium">Widget connected to Grist</h1>
-          <p>Record id: {String(w.record?.id ?? "")}</p>
-          <p>You can now render values from the selected record.</p>
-          <Button className="mt-2">Button</Button>
-        </div>
+  if (!w.columnMappingStatus.ok) {
+    return (
+      <div className="flex flex-col gap-4 p-6 text-sm">
+        <p>
+          Open the widget configuration panel and map the two required
+          columns: Title, Done.
+        </p>
         <GristSelectionDebug w={w} />
-        <div className="font-mono text-xs text-muted-foreground">
-          (Press <kbd>d</kbd> to toggle dark mode)
-        </div>
       </div>
-    </div>
-  )
+    )
+  }
+
+  return <RowEditor key={String(w.record!.id)} w={w} />
 }
 
 /**

package/template/vite.config.ts

@@ -2,7 +2,11 @@ import { readFileSync } from "fs"
 import path from "path"
 import tailwindcss from "@tailwindcss/vite"
 import react from "@vitejs/plugin-react"
-import { defineConfig } from "vite"
+// `vitest/config`'s defineConfig is a superset of vite's own -- same build
+// config still works, and it adds the `test` field below. Importing it here
+// (rather than a separate vitest.config.ts) means `pnpm test` reuses this
+// file's `@` alias and plugins instead of duplicating them.
+import { defineConfig } from "vitest/config"
 
 // Read here (Node context) rather than importing package.json into src/ --
 // keeps the whole file out of the bundle, exposing only the one field the
@@ -20,4 +24,7 @@ export default defineConfig({
   define: {
     __CREATE_GRIST_WIDGET_VERSION__: JSON.stringify(pkg.createGristWidgetVersion ?? null),
   },
+  test: {
+    environment: "jsdom",
+  },
 })