feat(json-render-ui): session-persist uncontrolled state and scroll position - #224
Closed
antfubot wants to merge 1 commit into
Closed
feat(json-render-ui): session-persist uncontrolled state and scroll position#224antfubot wants to merge 1 commit into
antfubot wants to merge 1 commit into
Conversation
…osition `Tabs`/`Select`/`Switch`/`TextInput` fall back to a local, uncontrolled value when a spec element has no `$bindState` binding on it — that fallback used to be lost on every reload (and, for `Switch`/`TextInput`, didn't exist at all: an unbound `value` had no working fallback since `useBoundProp`'s setter is a no-op without a binding). `useSessionStorage` now backs all four, keyed by the current dock (via a new `DOCK_ENTRY_ID_KEY` `provide()`d by `JsonRenderView`) plus a signature of the element's own static props, so it survives a reload without bleeding into a different element of the same kind. `JsonRenderView` also restores/persists its own scroll position per dock, the same way. Context: ports vitejs/devtools#527's `sessionStorage`-keyed uncontrolled- value and scroll restoration to this package's registry component shape (no `ctx.element` here, so the key is a caller-supplied signature instead of an element id). Co-authored-by: dvcolomban <90617742+dvcolomban@users.noreply.github.com>
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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.
Why
A
json-renderdock lost the active spec tab / selected option / scroll position on every reload (dev-server restart, an HMR full-reload, etc.) — annoying mid-debugging.Switch/TextInputalso had no working uncontrolled fallback at all (useBoundProp's setter is a no-op without a$bindStatebinding), so an unbound value silently didn't respond to interaction.What changed
Tabs/Select/Switch/TextInput's uncontrolled fallback (used when a spec element has no$bindStatebinding) is nowsessionStorage-backed via a newuseUncontrolledValuecomposable, keyed by the current dock (a newDOCK_ENTRY_ID_KEYprovide()d byJsonRenderView) plus a caller-supplied signature of the element's own static props.Switch/TextInputgain the controlled/uncontrolled splitTabs/Selectalready had, so an unbound value now actually works (and persists).JsonRenderViewrestores/persists its own scroll position per dock the same way.Context
Ports the json-render half of vitejs/devtools#527 ("session-scoped dock UI state — restore open/selected dock, tab, and scroll across reloads") by @dvcolomban, adapted to this repo's split json-render package:
webcomponents/components/views/ViewJsonRender.vue→packages/json-render-ui/src/renderer.ts(JsonRenderView)webcomponents/json-render/components/{Select,Switch,Tabs,TextInput}.ts→packages/json-render-ui/src/components/{Select,Switch,Tabs,TextInput}.tswebcomponents/json-render/composables/{dock-entry-id,useUncontrolledValue}.ts→ newpackages/json-render-ui/src/composables/Upstream's registry components receive a
ctx.elementcarrying an id; this package'sBaseComponentProps(from@json-render/vue) carries onlyprops/children/emit/on/bindings, with no element identity —useUncontrolledValuehere derives its key from a caller-supplied(kind, signature)pair (the component name + its own static props) instead.The dock-selection half (
selectedIdpersisted on the panel store) is split out to a separate PR againstpackages/hub-ui, since the two are independent file sets: #223.Part of #213 (closes once the companion hub-ui PR also merges).
Created with the help of an agent.