Keep element state when the runtime moves a node (`moveBefore()` and not detaching what is re-inserted)
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 5/5
- 预计耗时
- 一周以上
- 新手友好度
- 35/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- javascript, typescript
- 领域
- frontend
调研方向
Start by reading the keyed reconcile and insert paths, then trace the swap path that uses replaceChild and how removals are ordered against inserts when nodes migrate between parents. Benchmark moveBefore() against insertBefore on those hot paths and measure the cost of deferring removals; performance is the decision gate. Done means deciding the scope and fallback behavior, then validating the behavior and performance against the stated acceptance scenario.
由索引模型根据 Issue 内容生成。
描述
Summary
When a DOM node changes position, @solidjs/web moves it with
insertBefore / replaceChild, and in some cases removes it first and
inserts it afterwards. The browser treats each of these as a removal and an
insertion, so state that lives on the element's connection to the document is
reset: focus, CSS animations and transitions, iframes (they reload), popover
and fullscreen state, and so on.
Element.moveBefore() moves a connected node without that reset. Adopting it
would let Solid 2.0's "one element, several positions" behaviour keep that
state too. This issue is to track it. It needs performance vetting before
any decision.
Where it shows up
- Keyed lists. A focused row that is reordered loses focus.
- An element referenced from more than one position (the
migrating-elementexample; a card created once and referenced from
whichever list holds it). The node keeps its identity, listeners, value and
selection, but loses focus, and an<iframe>or a running CSS animation
would restart. - In an app this reads as: an editor that stays open with its draft intact
but has to be clicked again after someone else moves its card, and a
keyboard "move this item" shortcut that works once and then has nothing
focused.
What was measured
Chromium 152, dev build, origin/next at 2322d6407. One board-level
mapArray creates each card element; three lists' <For>s reference the
elements of the cards they hold; a store write moves a card. DOM calls on the
card element were logged by patching the prototypes.
| Case | Calls the runtime made |
|---|---|
| Card moves to a list that updates before the one it leaves | one insertBefore on the connected node |
| Card moves to a list that updates after the one it leaves | remove(), then insertBefore on the detached node |
| Reorder toward the front of a list | one insertBefore on the connected node |
| Reorder toward the end of a list | replaceChild, then insertBefore on the detached node |
With a focused <input> inside the moved element:
| Same element, value, selection | Focus | |
|---|---|---|
| As shipped | kept in every case | lost in every case |
Connected-node insertBefore routed through moveBefore() (patched in the page) |
kept | kept in the single-insert cases only |
A raw-DOM baseline agrees: moveBefore() on a focused input keeps focus, and
appendChild loses it.
So there are two separate parts:
- Use
moveBefore()when the node being inserted is connected (same
document, and the other preconditions the method has). - Do not detach a node that the same flush re-inserts. Today about half
of the moves above detach first, and no move API can help a node that is
already disconnected when it is inserted.
Part 2 is the larger change. It touches the reconcile's swap path
(replaceChild then re-insert) and the ordering of one position's removal
against another position's insert when a node migrates between parents.
Open questions
- Performance.
moveBefore()on the hot paths (keyed reconcile, the
insert path) againstinsertBefore, in the usual benchmarks, plus the cost
of the feature check and of any deferral of removals for part 2. This is
the gate. - Support. Not in every browser yet (Chromium and Firefox have it,
Safari does not, as far as we know at the time of writing; versions to be
confirmed against MDN). Feature-detect and fall back; a browser without it
behaves as today. - Preconditions.
moveBefore()throws whereinsertBeforedoes not (a
disconnected node, a different document, some shadow-root cases). Each
call site needs the check or a fallback. - Custom elements. With
moveBefore()an element gets
connectedMoveCallbackif it defines one; otherwise the disconnected and
connected callbacks still run. Worth stating in the docs. - Scope. Reorders within one parent only, or migration between parents as
well (which is where part 2 matters most). - Semantics to document. What survives a move today (identity,
listeners, value, selection, canvas bitmap) and what would be added (focus,
animations, iframes, popover and fullscreen state).
Not measured
Firefox and Safari. <iframe>, <video>, CSS animations and popovers (the
migrating-element README's open question about media). Focus was set from
script, and moveBefore() was simulated by patching insertBefore in the
page, not by changing the runtime.
Acceptance test this would unblock
In a board example that is in progress: open a card's title editor in one tab and type half a
word; move that card to another list from a second tab. Today the editor
stays open with the draft and selection intact, and focus is gone. With this
work the next keystroke lands in the editor. The example also carries a
one-line refocus after keyboard moves that could then be deleted.
- 主要语言
- TypeScript
- 星标
- 36.2k
- 派生
- 1.1k
- 平均合并
- 10 小时 34 分钟
- 30 天内合并 PR
- 364
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
solidjs/solid 的其他 Issue
-
`lazy()`: remounting an already-loaded component renders empty (or the Suspense fallback) since 1.9.14可能已有人在做 @itisrmk 于 6 天前认领。 未关闭1.x
难度 2/5 1-3 小时 新手友好度 62/100
维护者通常 1 天内回复
-
[2.0] Event handlers fired synchronously from an effect (focus(), showModal()) inherit the effect's strict-read window可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭
难度 4/5 3-5 天 新手友好度 44/100
维护者通常 1 天内回复
-
enhancement
难度 5/5 一周以上 新手友好度 35/100
维护者通常 1 天内回复
-
`createRoot`'s dispose function keeps `fn` alive, so `<For>`/`<Index>` rows retain removed list items可能已有人在做 @boombang 于 8 天前认领。 未关闭1.x
难度 4/5 1-2 天 新手友好度 45/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 45/100
维护者通常 1 天内回复
相似的 Issue
-
难度 1/5 1-3 小时 新手友好度 82/100
source-cooperative/docs.source.coop#41 · 1 条评论 ·
-
难度 2/5 1-3 小时 新手友好度 76/100
Nimblesite/SharpLsp#468 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 85/100
solidjs-community/solid-primitives#1082 ·
维护者通常 1 天内回复
-
enhancement
难度 2/5 1-3 小时 新手友好度 64/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复