feat(trees): add Vue adapter#652
Conversation
|
@onmax is attempting to deploy a commit to the Pierre Computer Company Team on Vercel. A member of the Team first needs to authorize it. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 85b356f3c2
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| if (this.shouldRenderPreloadedTemplate && this.preloadedData != null) { | ||
| children.push( | ||
| h('template', { | ||
| innerHTML: this.preloadedData.shadowHtml, | ||
| shadowrootmode: 'open', | ||
| }) |
There was a problem hiding this comment.
preloadedData currently always pushes a <template shadowrootmode="open"> vnode during client renders, but declarative shadow DOM only attaches when the HTML parser sees that template in server markup. When this node is created via Vue on the client, hasExistingPreloadedContent() can still detect the template and route to hydrate(), even though no parser-created shadow tree exists, which can cause hydration against non-preloaded DOM (or avoidable mismatch/recovery work). The React adapter avoids this by rendering the preload template only when window is undefined, so Vue should apply the same SSR-only guard.
Useful? React with 👍 / 👎.
1 participant
Description
Adds first-class Vue 3 support for
@pierre/treesthrough the new@pierre/trees/vueentrypoint. The adapter includes a Vue component, composables for selection and search state, SSR handoff throughpreloadedData, and a Vue browser fixture.The Trees docs now include Vue getting started and API pages alongside React and vanilla, plus updates to the integration and SSR guides.
Motivation & Context
Vue users can now adopt Trees without using the React wrapper or dropping down to the vanilla API. The adapter keeps the existing imperative
FileTreemodel as the shared contract, so core renderer behavior stays aligned across integrations.Planning to add support in Reka UI and Nuxt UI upstream as well :)
Type of changes
first discussed with the dev team and they should be aware that this PR is
being opened
You must have first discussed with the dev team and they should be aware
that this PR is being opened
How was AI used in generating this PR
Codex helped implement the Vue adapter, docs, tests, and review fixes under my direction. Also used codex to create a project inside
/tmpand verify everythign works in a brand-new project using@Browser useand tweak things.Related issues
None.
PS: I know this have a high cost for maintenance, but the other route I can think of is moving this code to Reka UI and support there instead. I am also planning to add a PR to add diffs support. Let me know what works for you. Thanks!