Skip to content

feat: add production playground for testing the real user install path#413

Merged
antfu merged 2 commits into
mainfrom
feat/production-playground
Jul 15, 2026
Merged

feat: add production playground for testing the real user install path#413
antfu merged 2 commits into
mainfrom
feat/production-playground

Conversation

@antfubot

Copy link
Copy Markdown
Collaborator

Description

Adds playgrounds/production: a standalone pnpm workspace that installs Vite DevTools from the local built dist, so the tools can be exercised the way a real user consumes them — from the packaged artifacts, with no monorepo aliases, src imports, or workspace: links.

Where packages/core/playground aliases everything to source for fast iteration, this playground does the opposite: it packs the published packages into tarballs and installs them, exercising the real npm install path and the shipped dist.

How it works

  • scripts/pack-local.mjs builds the monorepo and runs pnpm pack on the five published packages (@vitejs/devtools, -kit, -rolldown, -vite, -vitest). pnpm pack rewrites each package's workspace:*/catalog:* protocols into concrete versions, producing exactly what npm would serve. Tarballs land in .tarballs/ under stable names.
  • pnpm-workspace.yaml makes it its own workspace root (isolated from the monorepo) and uses overrides to point every @vitejs/devtools-* package at those tarballs. Everything else (devframe, @devframes/*, vite, vue) resolves from the public registry — just like a real install.
  • vite.config.ts is a plain user config importing DevTools from @vitejs/devtools, plus a minimal Vue app so the panels have real build/module data.

Usage

cd playgrounds/production
pnpm run setup   # build monorepo + pack + install from tarballs
pnpm dev         # embedded DevTools panel
pnpm build       # production build

Verified locally

  • Build → pack → pnpm install all succeed; @vitejs/devtools links to the local tarball, registry deps resolve normally.
  • pnpm build completes with the DevTools() plugin loaded from dist.
  • Dev server serves the real DevTools client at /__devtools/ (HTTP 200, <title>Vite DevTools</title>).

Linked Issues

Additional context

Generated artifacts (.tarballs/, node_modules, dist, lockfile) are gitignored.

This PR was created with the help of an agent.

Adds playgrounds/production, a standalone pnpm workspace that installs Vite
DevTools from the local built dist tarballs instead of aliasing to source, so
the tools can be exercised the way a real user consumes them.

A pack-local script builds the monorepo and runs pnpm pack on the five
published packages, resolving workspace:/catalog: protocols into concrete
versions. pnpm-workspace.yaml overrides point every @vitejs/devtools-* package
at those tarballs; all other dependencies resolve from the public registry.
@pkg-pr-new

pkg-pr-new Bot commented Jul 15, 2026

Copy link
Copy Markdown

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/vitejs/devtools/@vitejs/devtools@413

@vitejs/devtools-kit

npm i https://pkg.pr.new/vitejs/devtools/@vitejs/devtools-kit@413

@vitejs/devtools-oxc

npm i https://pkg.pr.new/vitejs/devtools/@vitejs/devtools-oxc@413

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/vitejs/devtools/@vitejs/devtools-rolldown@413

@vitejs/devtools-vite

npm i https://pkg.pr.new/vitejs/devtools/@vitejs/devtools-vite@413

@vitejs/devtools-vitest

npm i https://pkg.pr.new/vitejs/devtools/@vitejs/devtools-vitest@413

commit: 03012b6

@antfu antfu merged commit 22e9047 into main Jul 15, 2026
7 of 8 checks passed
@antfu antfu deleted the feat/production-playground branch July 15, 2026 07:52
antfubot added a commit that referenced this pull request Jul 15, 2026
Resolve pnpm-lock.yaml by taking main's lock (incl. the devframe 0.6.2 bump
from #411) and re-running pnpm install to reconcile the kit/core dependency
changes. context.ts and plugins/index.ts auto-merged cleanly, keeping both the
integration-owned built-in docks (#411) and the install-launcher shell.

Exclude the standalone production playground (#413) from the repo-wide ESLint
run: it is its own workspace mirroring a real user install, so it intentionally
uses plain dependency specifiers rather than the repo catalog.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants