feat(hub-ui,json-render-ui): session-scoped dock UI state across reloads - #221
Closed
antfubot wants to merge 2 commits into
Closed
feat(hub-ui,json-render-ui): session-scoped dock UI state across reloads#221antfubot wants to merge 2 commits into
antfubot wants to merge 2 commits into
Conversation
`selectedId` used to reset to nothing every time the embedded dock mounted. It now lives on the same localStorage-backed `panelStore` as `open`/mode/geometry, so a dev-server restart or HMR full-reload keeps the dock open on whatever was selected. A restored id that no longer resolves to a selectable entry (removed, or pointing at a group/subTabs anchor) is cleared once on boot without forcing the panel open; `DockEmbedded` then falls back to the first available entry if the panel is open with nothing selected, mirroring `DockStandalone`'s existing boot guard. Adds `packages/hub-ui`'s first vitest suite (registered in the root `vitest.config.ts`) covering the restore/validation behavior via the existing `createMockDocksContext` story helper. Co-authored-by: dvcolomban <90617742+dvcolomban@users.noreply.github.com>
…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. |
Collaborator
Author
|
Splitting this into two independent PRs since the hub-ui and json-render-ui changes touch disjoint files:
Closing this one in favor of those. |
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
1 participant
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
Reloading the page (dev-server restart, an HMR full-reload, etc.) always dropped the embedded dock back to nothing selected, and lost the active spec tab / scroll position inside a
json-renderdock — annoying mid-debugging.What changed
selectedIdnow lives on the same localStorage-backedpanelStoreasopen/mode/geometry (packages/hub-ui/src/client/state/docks.ts's newHubDockPanelStorage), instead of resetting to nothing every timecreateDocksContextruns. A restored id that no longer resolves to a selectable entry (removed, or pointing at a group/subTabsanchor) is cleared once on boot without forcing the panel open;DockEmbedded.vuefalls back to the first available entry if the panel is open with nothing selected, mirroringDockStandalone's existing boot guard.Tabs/Select/Switch/TextInputfall back to a local, uncontrolled value when a spec element has no$bindStatebinding — that fallback is nowsessionStorage-backed via a newuseUncontrolledValuecomposable, keyed by the current dock (a newDOCK_ENTRY_ID_KEYprovide()d byJsonRenderView) plus a signature of the element's own static props.Switch/TextInputpreviously had no working uncontrolled fallback at all (useBoundProp's setter is a no-op without a binding) — both now get one, matchingTabs/Select.JsonRenderViewrestores/persists its own scroll position per dock the same way.packages/hub-ui's first vitest suite (registered in the rootvitest.config.ts), covering the selection restore/validation behavior via the existingcreateMockDocksContextstory helper.Context
Ports vitejs/devtools#527 ("session-scoped dock UI state — restore open/selected dock, tab, and scroll across reloads") by @dvcolomban, adapted to this repo's post-migration shape:
packages/core/src/client/inject/runtime.ts→packages/hub-ui/src/client/embedded/index.tswebcomponents/components/dock/DockEmbedded.vue→packages/hub-ui/src/client/components/dock/DockEmbedded.vuewebcomponents/state/{context,docks}.ts→packages/hub-ui/src/client/state/{context,docks}.tswebcomponents/components/views/ViewJsonRender.vue+ its json-renderSelect/Switch/Tabs/TextInput+dock-entry-id/useUncontrolledValuecomposables → this repo's split json-render package,packages/json-render-ui/src/renderer.ts(JsonRenderView) +packages/json-render-ui/src/components/{Select,Switch,Tabs,TextInput}.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.This PR is coupled to #211 (the vitejs/devtools#525 port, mirroring the dock panel's localStorage state into shared state) via the shared
panelStore/HubDockPanelStorageobject — #211 is still open, so this lands theselectedIdfield first; #211 will need to cover the merged shape when it lands.Closes #213.
Created with the help of an agent.