feat(playgrounds): add ecosystem dogfooding playground for plan 04#1022
Merged
Conversation
Implement plans/vite-devtools-integration/04-ecosystem-playgrounds.md as a single combined playground (playgrounds-ecosystem/modules/) covering five popular Nuxt modules — nuxt-og-image, @nuxt/scripts, @nuxt/content, @nuxt/fonts, @nuxt/image — linked to the local @nuxt/devtools for verification. @nuxthub/core was dropped as out of scope, and @nuxtjs/tailwindcss was dropped after a real version conflict with nuxt-og-image's optional Tailwind peer surfaced during design. The playground is its own sealed pnpm workspace (own pnpm-workspace.yaml + lockfile), not part of the root install, main CI, lint, or typecheck surface. An optional workflow_dispatch-only GitHub Actions workflow gives a manual "does the module combo still build" smoke check. playgrounds-ecosystem/REPORTS.md records real findings from actually running the playground against the local devtools: three of the five modules (nuxt-og-image, @nuxt/scripts, @nuxt/fonts) register a working DevTools tab (all three currently only reachable via the SideNav's overflow menu — a discoverability gap worth feeding into plan 03); @nuxt/content 3.15.0 and @nuxt/image 2.0.0 ship no DevTools tab at all in the versions tested. plans/vite-devtools-integration/04-ecosystem-playgrounds.md and the workstream README are updated to reflect what was actually decided/built, since this deviated from the plan's original "one playground per of 7 modules" shape. Co-authored-by: opencode <noreply@opencode.ai>
Deploying nuxt-devtools with
|
| Latest commit: |
b72121c
|
| Status: | ⚡️ Build in progress... |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Contributor
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds an isolated Nuxt ecosystem playground combining three Nuxt modules with local or published DevTools. It includes a demo page for fonts and script-loaded confetti, dedicated workspace and TypeScript configuration, root tooling exclusions, and a manually triggered GitHub Actions build check. Documentation and reports describe setup, authorization, module tab behavior, compatibility findings, diagnostics, and follow-up items. Estimated code review effort: 3 (Moderate) | ~25 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
playgrounds-ecosystem/modules/package.jsonESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (2)
.github/workflows/ecosystem-playground.yml (1)
15-15: 🔒 Security & Privacy | 🔵 Trivial | 💤 Low valueSet
persist-credentials: falsefor checkout.To prevent credential persistence through GitHub Actions artifacts and minimize the risk of token exposure in subsequent steps, it is recommended to disable credential persistence for the checkout action since this workflow does not require pushing commits back to the repository.
🔒️ Proposed fix
- - uses: actions/checkout@v4 + - uses: actions/checkout@v4 + with: + persist-credentials: false🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.github/workflows/ecosystem-playground.yml at line 15, Update the actions/checkout@v4 step in the workflow to set persist-credentials to false, preserving the existing checkout behavior while disabling credential persistence for subsequent steps.Source: Linters/SAST tools
playgrounds-ecosystem/modules/pages/index.vue (1)
49-82: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove duplicated
font-familydeclaration.The HTML comment mentions that
@nuxt/fontsauto-detects the font usage fromassets/main.css. Since.fonts-demoalready has thefont-familydefined globally inassets/main.css, you can safely remove the duplicatefont-familydeclaration in this scoped style block.♻️ Proposed refactor
.fonts-demo { - font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@playgrounds-ecosystem/modules/pages/index.vue` around lines 49 - 82, Remove the duplicate font-family declaration from the scoped .fonts-demo style rule in the page component, preserving its font-size and relying on the existing global declaration in assets/main.css.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In @.github/workflows/ecosystem-playground.yml:
- Line 15: Update the actions/checkout@v4 step in the workflow to set
persist-credentials to false, preserving the existing checkout behavior while
disabling credential persistence for subsequent steps.
In `@playgrounds-ecosystem/modules/pages/index.vue`:
- Around line 49-82: Remove the duplicate font-family declaration from the
scoped .fonts-demo style rule in the page component, preserving its font-size
and relying on the existing global declaration in assets/main.css.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 94f1b979-19c1-4b88-bbdb-a4a3eb0b270f
⛔ Files ignored due to path filters (2)
playgrounds-ecosystem/modules/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlplaygrounds-ecosystem/modules/public/sample.pngis excluded by!**/*.png
📒 Files selected for processing (16)
.github/workflows/ecosystem-playground.ymleslint.config.mjsplans/vite-devtools-integration/04-ecosystem-playgrounds.mdplans/vite-devtools-integration/README.mdplaygrounds-ecosystem/README.mdplaygrounds-ecosystem/REPORTS.mdplaygrounds-ecosystem/modules/app.vueplaygrounds-ecosystem/modules/assets/main.cssplaygrounds-ecosystem/modules/content.config.tsplaygrounds-ecosystem/modules/content/index.mdplaygrounds-ecosystem/modules/nuxt.config.tsplaygrounds-ecosystem/modules/package.jsonplaygrounds-ecosystem/modules/pages/index.vueplaygrounds-ecosystem/modules/pnpm-workspace.yamlplaygrounds-ecosystem/modules/tsconfig.jsontsconfig.json
…layground Both were built into the playground and dogfooded first, but neither registers a Nuxt DevTools tab in the versions tested (3.15.0 / 2.0.0) — there was nothing to dogfood against, so remove them rather than keep them as dead weight. The finding stays in REPORTS.md as the evidence for dropping them and as raw material for an upstream question to each module. The playground now covers three modules — nuxt-og-image, @nuxt/scripts, @nuxt/fonts — all three of which do have a working DevTools tab. Docs (plan 04, the workstream README, and the playground's own README/REPORTS) are updated to match. Co-authored-by: opencode <noreply@opencode.ai>
…pm registry modules/package.json now depends on @nuxt/devtools via link:../../packages/devtools (a plain symlink, workspace-membership- independent) instead of a plain npm version range. Both NUXT_DEVTOOLS_LOCAL branches in nuxt.config.ts now always test this repo's own code: '../../local' spawns a live nuxi dev subprocess for the devtools client (HMR); the plain '@nuxt/devtools' import resolves through the link to whatever's currently in packages/devtools/dist — a stub (pnpm run prepare) or a full static build (pnpm run build). Verified both: `nuxt build` succeeds against the stub, and `nuxt dev` (without NUXT_DEVTOOLS_LOCAL) against a full build renders the real DevTools UI with no console errors. The workflow_dispatch smoke workflow now installs and stubs the root workspace before installing/building the ecosystem one, since that link target needs to exist. Docs (plan 04, playground README/REPORTS) updated to match — this repo's own build is the only thing ever under test here now. Co-authored-by: opencode <noreply@opencode.ai>
…n 00 Rebased feat/ecosystem-playgrounds onto main after #1021 (devframe-native hosts + nostics deprecation foundation) and #1023 (client RPC registration fix) merged, and re-ran the full dogfooding pass. No git conflicts during the rebase. Findings added to REPORTS.md: - The earlier DF0022 "RPC function not registered" console errors (refresh/callHook/onTerminalData/onTerminalExit/navigateTo) no longer reproduce — fixed by #1023. - Plan 00's deprecation diagnostics are live and already flagging real ecosystem usage: NDT_DEP_0003 (extendServerRpc deprecated) fires from both @nuxt/fonts and nuxt-og-image's nuxtseo-shared dependency. NDT_DEP_0004 (startSubprocess deprecated) fires from this repo's own local.ts dev helper, not from any ecosystem module. - @nuxt/scripts's legacy addCustomTab still works but didn't trigger a matching deprecation diagnostic — flagged as a follow-up. Everything else held: all three modules still load, all three tabs are still reachable (still only via the SideNav overflow menu), builds still succeed against both the stubbed and fully-built local @nuxt/devtools. Co-authored-by: opencode <noreply@opencode.ai>
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
plans/vite-devtools-integration/04-ecosystem-playgrounds.md (1)
213-215: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winDo not describe caret ranges as pinned versions.
^ranges constrain compatible updates but do not pin exact versions. Reword this to distinguish declared dependency ranges from the exact versions recorded inREPORTS.md.Proposed wording
-- **Version drift.** Each module is pinned via a direct caret range in +- **Version drift.** Each module uses a direct caret range in `playgrounds-ecosystem/modules/package.json`; exact resolved versions are recorded at the top of `REPORTS.md`.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plans/vite-devtools-integration/04-ecosystem-playgrounds.md` around lines 213 - 215, Reword the “Version drift” statement in the ecosystem playground documentation to describe package.json entries as direct caret dependency ranges, not pinned versions, and explicitly distinguish them from the exact resolved versions recorded in REPORTS.md.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@plans/vite-devtools-integration/04-ecosystem-playgrounds.md`:
- Around line 213-215: Reword the “Version drift” statement in the ecosystem
playground documentation to describe package.json entries as direct caret
dependency ranges, not pinned versions, and explicitly distinguish them from the
exact resolved versions recorded in REPORTS.md.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1393e685-f85e-41e7-a9d5-37b8f7dd5d1d
⛔ Files ignored due to path filters (1)
playgrounds-ecosystem/modules/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
.github/workflows/ecosystem-playground.ymlplans/vite-devtools-integration/04-ecosystem-playgrounds.mdplaygrounds-ecosystem/README.mdplaygrounds-ecosystem/REPORTS.mdplaygrounds-ecosystem/modules/nuxt.config.tsplaygrounds-ecosystem/modules/package.json
🚧 Files skipped from review as they are similar to previous changes (4)
- playgrounds-ecosystem/modules/package.json
- .github/workflows/ecosystem-playground.yml
- playgrounds-ecosystem/modules/nuxt.config.ts
- playgrounds-ecosystem/README.md
…ounds # Conflicts: # plans/vite-devtools-integration/04-ecosystem-playgrounds.md # plans/vite-devtools-integration/README.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements
plans/vite-devtools-integration/04-ecosystem-playgrounds.md.What's here
playgrounds-ecosystem/modules/— one combined playground (not one per module) coveringnuxt-og-image,@nuxt/scripts,@nuxt/content,@nuxt/fonts,@nuxt/image, wired to the local@nuxt/devtoolsvia the sameNUXT_DEVTOOLS_LOCALconvention asplaygrounds/*.@nuxthub/corewas dropped (out of scope).@nuxtjs/tailwindcsswas dropped after a real version conflict surfaced before implementation: it hard-depends on Tailwind v3 whilenuxt-og-imagelists Tailwind v4 as an optional peer.playgrounds-ecosystem/modules/pnpm-workspace.yaml+ its own committed lockfile) — confirmed by direct testing that without this, a nestedpnpm installsilently writes into the parent's lockfile. It's excluded from the rootpnpm-workspace.yamlpackages:globs,eslint.config.mjsignores, andtsconfig.jsonexcludes, and is not part ofpostinstall(unlikedocs/, which is auto-installed — this is deliberately more opt-in than that).playgrounds-ecosystem/REPORTS.md— a compatibility report from an actual run: installed the workspace, started the dev server against the local devtools, and drove a real Chromium instance through the Vite DevTools authorization flow and into the embedded client. Findings:nuxt-og-image,@nuxt/scripts,@nuxt/fontsall register a working DevTools custom tab — but all three are only reachable via the SideNav's overflow ("⋯") menu, a discoverability gap worth feeding into Plan 03.@nuxt/content3.15.0 and@nuxt/image2.0.0 register no DevTools tab at all in the versions tested — this plan's original assumption doesn't hold for those two majors..github/workflows/ecosystem-playground.yml— an optionalworkflow_dispatch-only smoke check (pnpm install+nuxt buildfor the module combo). Not part of the default CI path. Builds against the published@nuxt/devtoolsdeliberately: Nuxt DevTools no-ops entirely outsidedevmode, so a build can't exercise the local-devtools path anyway.plans/vite-devtools-integration/04-ecosystem-playgrounds.mdand the workstreamREADME.mdare updated to reflect what was actually decided/built (this deviated from the plan's original "one playground per each of 7 modules" shape after a grilling session).Verification
pnpm -C playgrounds-ecosystem/modules installthennuxt build(both with and withoutNUXT_DEVTOOLS_LOCAL=true) succeed.pnpm lint,pnpm typecheck,pnpm test:unitall pass unaffected.REPORTS.mdfor the full walkthrough and evidence.This PR was created with the help of an agent.