chore: upgrade Vue to 3.6.0-rc.1#137
Conversation
Bump Vue packages to 3.6.0-rc.1 and vue-jsx-vapor to 3.2.19. Update bun.lock and package.json accordingly. Adjust demos to remove defineVaporComponent imports and adapt component props/usage. Update WASI CDN version for compiler-rs and add a guard when iterating node.children in devtools.
There was a problem hiding this comment.
Pull request overview
This PR upgrades the Vue Vapor stack to align with Vue 3.6.0-rc.1 and updates PocketJS’s Vue Vapor demo components to use plain functional component syntax (direct props access) instead of defineVaporComponent, alongside a small DevTools robustness fix for Vue Vapor tree serialization.
Changes:
- Bump
vue,@vue/compiler-vapor, andvue-jsx-vaporto versions compatible with Vue3.6.0-rc.1. - Refactor multiple Vue Vapor demos to functional components that read from
propsinstead ofattrs. - Prevent a
node.childrenundefined crash during DevTools tree snapshotting for Vue Vapor.
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
src/devtools.ts |
Adds a defensive guard to avoid crashing when children is missing during tree serialization/counting. |
site/playground/vue-vapor-wasi.ts |
Updates the CDN version for the browser WASI shim to match the upgraded vue-jsx-vapor compiler package. |
package.json |
Upgrades Vue/Vapor-related dependency versions to 3.6.0-rc.1 / 3.2.19. |
bun.lock |
Lockfile updates reflecting the upgraded Vue/Vapor dependency graph. |
demos/stats/app.vue-vapor.tsx |
Switches demo subcomponents to functional components; one small simplification needed for frame prop usage. |
demos/settings/app.vue-vapor.tsx |
Switches to functional components, but currently introduces a double-invocation bug in Toggle’s onToggle handling. |
demos/library/app.vue-vapor.tsx |
Converts demo subcomponents to functional components using direct props. |
demos/hero/app.vue-vapor.tsx |
Converts Stat to a functional component and removes defineVaporComponent usage. |
demos/hero-vue-vapor/app.tsx |
Simplifies the app export to a functional component style consistent with Vue Vapor usage. |
demos/gallery/app.vue-vapor.tsx |
Converts Loading, TileGrid, and Page to functional components using direct props. |
demos/cards/app.vue-vapor.tsx |
Converts Detail to a functional component using direct props. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const themeName = () => propValue(attrs.themeName as ThemeName | (() => ThemeName)); | ||
| const onToggle = () => callbackProp(attrs.onToggle as (() => void) | (() => () => void)); | ||
| const themeName = () => propValue(props.themeName as ThemeName | (() => ThemeName)); | ||
| const onToggle = () => callbackProp(props.onToggle as (() => void) | (() => () => void)); |
| const Systems = defineVaporComponent((_props: { frame: number }, { attrs }) => { | ||
| const frame = () => (typeof attrs.frame === "function" ? (attrs.frame as () => number)() : (attrs.frame as number)); | ||
| const Systems = (props: { frame: number }) => { | ||
| const frame = () => (typeof props.frame === "function" ? (props.frame as () => number)() : (props.frame as number)); |
…lve props With vue-jsx-vapor 3.2.19 functional components, props reach the component already resolved (the attrs proxy invokes the compiler's getters), so the propValue/callbackProp indirection is dead weight — and callbackProp's eager zero-arg probe actually INVOKED the resolved handler, firing Settings' onToggle twice per press (verified in the deterministic sim: one CIRCLE press produced two parent callback invocations, canceling the toggle). Access props directly everywhere, call callbacks exactly once, and drop the now-impossible function branches from the prop types. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Verified both Copilot findings empirically and pushed a follow-up commit (53ce906) addressing them. How it was verified: built a minimal probe app using the exact
The fix drops the now-dead Thanks for the upgrade — the functional-component form is a real simplification. 🙏 |
node.childrenerror in devtools.ts for Vue Vapor support.