diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7b3ad52..557f3c4 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -116,7 +116,7 @@ jobs: matrix: package-manager: [npm, pnpm] framework: [react, vue] - vite: ['5.4.21', '7.3.7'] + vite: ['5.4.21', '7.3.7', '8.3.5'] steps: - uses: actions/checkout@v5 - uses: pnpm/action-setup@v4 @@ -157,6 +157,14 @@ jobs: framework: vue package-manager: pnpm version-args: '--vite-version=5.4.21 --scope=list' + - id: react-pnpm-vite8 + framework: react + package-manager: pnpm + version-args: '--vite-version=8.3.5 --scope=table' + - id: vue-npm-vite8 + framework: vue + package-manager: npm + version-args: '--vite-version=8.0.10 --scope=list' - id: next15-npm-webpack framework: next package-manager: npm diff --git a/README.md b/README.md index 02f62a9..9af93cc 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ Click any element in the browser overlay, describe the change in plain English, - 🎯 **Build-time stable IDs** — deterministic `data-ds` attributes injected via AST, stable across HMR and fast refresh - 🧩 **Framework-agnostic** — React 18-19, Vue 3, Next.js 15-16, Nuxt 3+, with an [extensible adapter interface](./packages/domscribe-runtime/CUSTOM_ADAPTERS.md) -- 📦 **Any bundler** — Vite 5-7, Webpack 5, Turbopack +- 📦 **Any bundler** — Vite 5-8, Webpack 5, Turbopack (Vite 8 support is on main and awaits the next release; npm 0.6.1 supports Vite 5-7) - 🔍 **Deep runtime capture** — live props, state, and DOM snapshots via React fiber walking and Vue VNode inspection - 🛡️ **Zero production impact** — all instrumentation stripped in production builds, enforced in CI - 🔒 **PII redaction** — emails, tokens, and sensitive patterns automatically scrubbed before leaving the browser diff --git a/docs/agent-targets-and-replay.md b/docs/agent-targets-and-replay.md index 1cfcf3b..2b42163 100644 --- a/docs/agent-targets-and-replay.md +++ b/docs/agent-targets-and-replay.md @@ -83,7 +83,7 @@ node scripts/verify-instance-replay.mjs --framework=nuxt --package-manager=npm \ The harness installs local tarballs into a temporary consumer, uses the fixture project's existing Playwright dependency and installed Chromium, persists an annotation, closes the browser context, reorders rows in a fresh context, and replays the same four UI steps through the relay. Assertions cover exact mapped source/props, committed editor state after typing/checking, stale handles after unmount and across sessions, ambiguity refusal, application console/page/network failures, production instrumentation removal (including conditional editors), and correct production UI updates. -CI runs eight representative combinations, with at most two replay jobs simultaneously: +CI runs ten representative combinations, with at most two replay jobs simultaneously: | Integration | Consumer versions | Package manager | | --------------------------- | ------------------------- | --------------- | @@ -91,6 +91,8 @@ CI runs eight representative combinations, with at most two replay jobs simultan | React/Vite | React18.3.1 / Vite5.4.21 | pnpm | | Vue/Vite | Vue3.5.44 / Vite7.3.7 | npm | | Vue/Vite | Vue3.5.44 / Vite5.4.21 | pnpm | +| React/Vite | React18.3.1 / Vite8.3.5 | pnpm | +| Vue/Vite | Vue3.5.44 / Vite8.0.10 | npm | | Next App Router / Webpack | Next15.5.28 / React19.3.1 | npm | | Next App Router / Turbopack | Next16.4.3 / React19.3.1 | pnpm | | Nuxt SSR | Nuxt3.21.11 / Vue3.5.44 | npm | @@ -98,7 +100,9 @@ CI runs eight representative combinations, with at most two replay jobs simultan The default remains React18/npm/Vite7. Use `--framework-version` for exact Next15/16 or Nuxt3/4 releases; use `--vite-version` for React/Vue consumers. Mixed or unsupported flags are rejected. Native SSR consumers use their framework integrations and normal hydration, not the Vite SPA integration. Nuxt excludes the runtime from Vite prebundling so its native plugin and consumer queries share one runtime on cold startup. Each run checks actual installed versions, expected framework source, and local runtime resolution. -`--scope=article` keeps the original labeled-card fixture. `--scope=table` and `--scope=list` use sibling business text with no added row label or test ID. They deliberately retain position-keyed action nodes during a customer replacement and verify that old handles/selectors retire, old portable identity does not resolve, the new runtime props belong to the replacement, and only that customer's UI data changes. CI runs the Vue/pnpm/Vite5 case as a list and the Next16/pnpm case as a table. The other six cases retain article coverage. +`--scope=article` keeps the original labeled-card fixture. `--scope=table` and `--scope=list` use sibling business text with no added row label or test ID. They deliberately retain position-keyed action nodes during a customer replacement and verify that old handles/selectors retire, old portable identity does not resolve, the new runtime props belong to the replacement, and only that customer's UI data changes. CI runs Vue/pnpm/Vite5 and Vue/npm/Vite8 as lists, and Next16/pnpm and React/pnpm/Vite8 as tables. The other six cases retain article coverage. + +Vite8 consumers use the compatible official React6.1.2/Vue6.0.6 plugins. Older Vite5–7 fixture paths keep their existing plugins. [Vite8](https://vite.dev/blog/announcing-vite8) requires Node20.19+ or22.12+; qualification here uses Node24.22.1. The installed-package checks separately install only the adapter, framework and Vite through an isolated local registry, without adding transitive packages or dependency overrides. They typecheck a normal Vite configuration and check that virtual browser modules serve one shared runtime. Vite8 peer support and these APIs remain unpublished until the next package release; npm0.6.1 still declares Vite5–7 support. The [real-application acceptance matrix](./real-app-acceptance.md) records separate maintained-application tests and their installation/actionability limits. diff --git a/docs/real-app-acceptance.md b/docs/real-app-acceptance.md index be16185..51cc6da 100644 --- a/docs/real-app-acceptance.md +++ b/docs/real-app-acceptance.md @@ -14,7 +14,11 @@ The website's three functional checks passed on October26 with Next16.4.3/React1 ## Installation and browser-action limits -The upstream TodoMVC frozen npm install succeeded with its Vite8.0.10 lockfile. Adding Domscribe then failed with `ERESOLVE`: Domscribe's Vue integration declares Vite5–7 support. The successful integration test explicitly pinned Vite7.3.7 in the isolated harness. This is a supported-version test with a workaround, **not a clean Vite8 installation success**. Vite8 support needs separate compatibility work and fresh tests before changing peer ranges. +At the start of Sprint1, the upstream TodoMVC frozen npm install succeeded with its Vite8.0.10 lockfile. Adding Domscribe then failed with `ERESOLVE`: the published0.6.1 Vue integration declares Vite5–7 support. The first successful integration test explicitly pinned Vite7.3.7 in the isolated harness. That run is a supported-version test with a workaround, **not a clean Vite8 installation success**. + +Separate Vite8 compatibility work then expanded the source React/Vue/transform peer ranges after qualification. An isolated snapshot experiment was followed by fresh product-source artifacts, ordinary npm installation and frozen `npm ci` on TodoMVC's original Vite8.0.10/Vue3.5.33 setup. The same four source/runtime, fresh-session intended-task replay, edited-identity refusal/recapture and production checks passed with no app page/console/network errors. No Vite downgrade, patched package manifest, force/legacy peer flag, hoisting setting or transitive override was used for that qualification. This remains local-artifact evidence; the compatibility changes need publication before registry users receive them. + +Four separate minimal npm/pnpm × React/Vue Vite8 consumers passed installed-module/shared-runtime checks and Vite TypeScript configuration checks against8.0.10/8.3.5. React18/pnpm/Vite8.3.5 and Vue3/npm/Vite8.0.10 browser consumers each passed nine checks, including live state, exact-source/runtime mapping, fresh-session replay, genuinely recycled action nodes, correct business changes and uninstrumented working production UI. These are representative paths, not the complete Vite8 version/plugin/framework matrix. Node24.22.1 and Chromium156.0.8078.4 were used. An initial TodoMVC replay attempted to click its hover-only delete button without revealing it and stopped with `action_failed`; the app CSS hides this button until the row is hovered. The qualified portable workflow uses the visible checkbox. The edit/delete checks explicitly hover the row through the browser driver before clicking. Domscribe does not record hover steps or turn an invisible target into an actionable one. diff --git a/docs/superpowers/plans/2026-10-26-vite8-compatibility.md b/docs/superpowers/plans/2026-10-26-vite8-compatibility.md new file mode 100644 index 0000000..1384c0e --- /dev/null +++ b/docs/superpowers/plans/2026-10-26-vite8-compatibility.md @@ -0,0 +1,17 @@ +# Vite8 Consumer Compatibility Plan + +Execute inline with test-driven development and one fresh independent whole-branch review. + +Goal: remove a confirmed clean-install blocker for React/Vue Vite8 users, with evidence of current source/runtime/replay functionality and production stripping before expanding peer support. + +RED evidence: upstream Vue TodoMVC ff43b02 frozen npm install succeeds on Vite8.0.10; adding Domscribe fails ERESOLVE because adapter and transform peers allow only5–7. Repository replay CLI also refuses Vite8 before setup. A harness-only snapshot expanding peers passed actual TodoMVC source/runtime, fresh-session intended-task replay, edited-identity retirement and production checks; this is experimental evidence, not product support or an unmodified install. + +- [x] Expand only react/vue/transform Vite peers to include ^8.0.0; no workspace bundler upgrade or lockfile change. +- [x] Extend replay harness to accept exact8 releases and select matching official React6/Vue6 plugins; preserve older-version paths. +- [x] Fresh npm/pnpm minimal consumers via isolated local registry: adapter/framework/Vite only, no transitive-dependency overrides or force/legacy flags. Exercise React and Vue at8.0.10/8.3.5 boundaries. +- [x] Fresh React and Vue Vite8 browser consumers: instrumentation/source/runtime identity, live state, persisted exact-instance replay, correct business entity, safe negatives, zero app errors and functional uninstrumented production. +- [x] Repeat actual upstream TodoMVC with unmodified Vite8 dependency lock and product artifacts (no patched manifests/pin), plus clean frozen reinstall. Record harness plugin/hook only, no app component changes. +- [x] Add representative clean-install and browser CI8 cases, document actual limits/Node requirement and qualification. Existing5/7 and Next/Nuxt coverage remains. +- [ ] Run configured affected checks and meaningful full suite; independently review/fix findings; rebase onto merged parent81 without changing tested tree, push focused PR, latest-head CI then standing-authorized merge. + +Review focus: all transitive peer ranges allow8 without force; React6 optional compiler peers do not mask missing basic dependencies; Vite8 Rolldown virtual modules serve one shared runtime; older5/7 behavior unchanged; TypeScript consumer public declarations remain usable. This is source compatibility, not automatic package publication. Parent81 is still in CI; do not merge a stacked diff before its base is current main. diff --git a/packages/domscribe-react/package.json b/packages/domscribe-react/package.json index 88fc171..8a430d5 100644 --- a/packages/domscribe-react/package.json +++ b/packages/domscribe-react/package.json @@ -26,7 +26,7 @@ }, "peerDependencies": { "react": ">=16.8.0", - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0", + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "webpack": "^5.0.0" }, "peerDependenciesMeta": { diff --git a/packages/domscribe-transform/README.md b/packages/domscribe-transform/README.md index d8ca34d..5bc4274 100644 --- a/packages/domscribe-transform/README.md +++ b/packages/domscribe-transform/README.md @@ -14,10 +14,12 @@ npm install -D @domscribe/transform | Bundler | Plugin | Parser | | --------- | -------------------------------------- | ------------------------ | -| Vite 5-7 | `@domscribe/transform/plugins/vite` | Acorn (JS/JSX) or VueSFC | +| Vite 5-8 | `@domscribe/transform/plugins/vite` | Acorn (JS/JSX) or VueSFC | | Webpack 5 | `@domscribe/transform/plugins/webpack` | Babel (TS/JSX) or VueSFC | | Turbopack | Self-initializing loader | Babel (TS/JSX) | +Vite 8 compatibility is in source and awaits the next release; published npm 0.6.1 declares Vite 5-7 support. + ## Configuration ### Shared Options — Relay diff --git a/packages/domscribe-transform/package.json b/packages/domscribe-transform/package.json index 649c603..a6cfd48 100644 --- a/packages/domscribe-transform/package.json +++ b/packages/domscribe-transform/package.json @@ -29,7 +29,7 @@ }, "peerDependencies": { "html-webpack-plugin": "^5.0.0", - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0", + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "vue": "^3.3.0", "webpack": "^5.0.0" }, diff --git a/packages/domscribe-vue/package.json b/packages/domscribe-vue/package.json index 9cf6b95..c0d23ce 100644 --- a/packages/domscribe-vue/package.json +++ b/packages/domscribe-vue/package.json @@ -24,7 +24,7 @@ "webpack": "^5.112.2" }, "peerDependencies": { - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0", + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "vue": ">=3.3.0", "webpack": "^5.0.0" }, diff --git a/scripts/check-packed-vite.mjs b/scripts/check-packed-vite.mjs index a95e902..4078490 100644 --- a/scripts/check-packed-vite.mjs +++ b/scripts/check-packed-vite.mjs @@ -180,6 +180,23 @@ try { '

Installed package regression

', ); run(manager, ['install', '--ignore-scripts'], consumer); + const typedConfig = join(consumer, 'vite.config.mts'); + writeFileSync( + typedConfig, + `import { defineConfig } from 'vite';\nimport { domscribe } from '@domscribe/${framework}/vite';\nexport default defineConfig({plugins:[domscribe({relay:{autoStart:false}})]});\n`, + ); + run(process.execPath, [ + require.resolve('typescript/bin/tsc'), + '--noEmit', + '--skipLibCheck', + '--module', + 'NodeNext', + '--moduleResolution', + 'NodeNext', + '--target', + 'ES2022', + typedConfig, + ]); run(process.execPath, [ join(workspace, 'scripts/check-installed-vite.mjs'), consumer, diff --git a/scripts/fixtures/replay-project.mjs b/scripts/fixtures/replay-project.mjs index 90c451f..9d3fbd2 100644 --- a/scripts/fixtures/replay-project.mjs +++ b/scripts/fixtures/replay-project.mjs @@ -31,7 +31,14 @@ export function replayProject(framework, version, viteVersion) { else Object.assign(dependencies, { vite: viteVersion, - [`@vitejs/plugin-${ui}`]: ui === 'react' ? '4.7.0' : '6.0.4', + [`@vitejs/plugin-${ui}`]: + ui === 'react' + ? viteVersion.startsWith('8.') + ? '6.1.2' + : '4.7.0' + : viteVersion.startsWith('8.') + ? '6.0.6' + : '6.0.4', }); const next15 = framework === 'next' && frameworkVersion.startsWith('15.'); const cli = diff --git a/scripts/verify-instance-replay.mjs b/scripts/verify-instance-replay.mjs index 6ae6847..0838da6 100644 --- a/scripts/verify-instance-replay.mjs +++ b/scripts/verify-instance-replay.mjs @@ -50,8 +50,8 @@ assert( 'package-manager must be npm or pnpm', ); assert( - /^[567]\.\d+\.\d+$/.test(viteVersion), - 'vite-version must be an exact Vite 5/6/7 release', + /^[5678]\.\d+\.\d+$/.test(viteVersion), + 'vite-version must be an exact Vite 5/6/7/8 release', ); const reportDirectory = values['report-dir'] ? path.resolve(values['report-dir'])