Repository navigation
refactor(vue3): build CollectionView on nativescript-vue's useItemTemplates - #105
Conversation
|
@rigor789 thanks Igor for this PR. but i wonder about the PR description. was this tested? you are saying this patched was applied the same way on the vue3 ListView component and it worked? |
|
I tested with this change locally on ListView: nativescript-vue/nativescript-vue@feb5b37 And yes that fixed it, however I do wonder if perhaps this should be a utility exported from nativescript-vue, what do you think? |
|
@rigor789 yes if we already use it in both ListView/CollectionView. And we might add it to ui-pager for example |
4f85878 to
8cf62f5
Compare
rigor789
changed the title
|
@farfromrefug done: nativescript-vue/nativescript-vue#1170 adds |
…plates The cell machinery now lives in nativescript-vue (useItemTemplates, nativescript-vue/nativescript-vue#1170) and is shared with ListView. Cells become part of the component's own tree instead of being rendered into private roots, which fixes: - templates forwarded through a slot (rendered as a Fragment) crashing on the first itemLoading - inject() inside a cell not seeing values provided by the surrounding component - components inside cells never being unmounted when the native view disposes them Requires nativescript-vue >= 3.2.0.
The items watcher declared its arguments as (oldVal, newVal) while Vue passes the new value first, so it type-checked the new array and pushed the old one to the native view. Replacing the array is already handled by the render, so the watcher only needs to refresh the native view when a plain array is mutated in place; ObservableArray notifies it itself.
The lockfile already resolves nativescript-vue3 to 3.1.2, but the recorded tools commit still pins 3.0.1, so a fresh checkout resolves the old version and the Vue 3 component does not build.
4751a9d to
1d534be
Compare
|
@rigor789 thanks Igor! |
Follow-up to the discussion below: the cell machinery now lives in nativescript-vue as
useItemTemplates()(nativescript-vue#1170), shared with the built-in ListView, so this PR swaps the Vue 3 component onto it instead of copying the Fragment-unwrapping fix here. Two commits, reviewable separately:refactor(vue3): build CollectionView on useItemTemplates. Cells become keyed children of the component's own tree (the native element is registered with
NO_CHILDREN, so Vue patches them but the native view places them) instead of being rendered into private roots with a hand-copiedappContext. That fixes:itemLoading, the original subject of this PRinject()inside a cell not seeing values provided by the surrounding page componentitemDisposingnow unmounts the cellThe
_batchUpdatewrapper around cell updates is kept.alias/itemIdGeneratorand the(item, index, items)selector signature are unchanged.fix(vue3): refresh on in-place array mutations. The
itemswatcher declared its arguments as(oldVal, newVal)while Vue passes the new value first, so it type-checked the new array and pushed the old one to the native view. Replacing the array is already handled by the render; the watcher now refreshes the native view when a plain array is mutated in place, and leavesObservableArrayalone since it notifies the view itself.Requires nativescript-vue >= 3.1.2. master's lockfile and
demo-vue3already resolve it, but the recordedtoolscommit still pinsnativescript-vue3to 3.0.1, so the last commit moves that pointer to the plugin-seed-tools#4 merge. If the submodule update action lands the same pointer first, that commit becomes a no-op and can be dropped. The Vue 3 sources type-check against the published 3.1.2; not run on device from this branch.tscdoes report one error inindex-common.ts(Builder.parseMultipleTemplatesnow takes two arguments in@nativescript/core9.0.20), which is already on master and unrelated to this PR.