@wcstack/state 4.12.0 → 4.14.0

package/README.ja.md

@@ -193,9 +193,9 @@
 <script type="importmap">
 {
   "imports": {
-    "@wcstack/state/core": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.12.0/dist/split/core.js",
-    "@wcstack/state/features/temporal": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.12.0/dist/split/features/temporal.js",
-    "@wcstack/state/features/scopes": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.12.0/dist/split/features/scopes.js"
+    "@wcstack/state/core": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.14.0/dist/split/core.js",
+    "@wcstack/state/features/temporal": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.14.0/dist/split/features/temporal.js",
+    "@wcstack/state/features/scopes": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.14.0/dist/split/features/scopes.js"
   }
 }
 </script>
@@ -269,7 +269,7 @@ already defined by another copy of @wcstack/state that does not name its version
 ページが名指したアドオンを、同じビルドから読み込みます。
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@wcstack/state@4.12.0/dist/split/auto.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@wcstack/state@4.14.0/dist/split/auto.js"></script>
 <wcs-state features="scopes diagnostics">
   <script type="module">
     export default {
@@ -814,6 +814,8 @@ export default {
 
 つまり、**行オブジェクトの参照さえ保たれていれば、行の追加・削除・並べ替えに明示的なキー属性（React の `key` や Vue の `:key`）は不要です**。非破壊の配列メソッド（`toSorted` / `toReversed` / `filter` / `with` / `toSpliced`）はいずれも要素の参照を保つため、ソートやフィルタは構造的に keyed に動作し、「キーの付け方を間違える」種類のバグが原理的に発生しません。
 
+**並べ替えで動かした行は、取り外しでリセットされるもの —— フォーカス、iframe の中のページ、実行中の CSS アニメーションやトランジション —— を保ちます**。ブラウザに [`moveBefore()`](https://developer.mozilla.org/ja/docs/Web/API/Element/moveBefore) があるとき（Chromium 133 以降、Firefox 144 以降）で、4.14 からです。差分はできるだけ少ない行だけを動かし、その場に残した行はどのブラウザでもそれを保ちます。`moveBefore()` の無いブラウザ —— Safari —— では、動かした行はそれを失います（4.13 まではどのブラウザでもそうでした）。動かした行の中のカスタム要素には、今までどおり `disconnectedCallback` と `connectedCallback` が呼ばれます。そのクラスが `connectedMoveCallback` を定義していれば、ブラウザは代わりにそれを呼びます。
+
 例外は、**新しく生成されたオブジェクトとして届くデータ**です。`fetch(...).json()`、ストレージからの `JSON.parse`、WebSocket / SSE の全件スナップショット、Worker の `postMessage` などがこれにあたります。これらの行は参照で照合できないため、全行が破棄・再構築されます。次の [`$listKeys`](#listkeys--再取得された行の同一性) を参照してください。
 
 **`for:` は出力フィルタを取りません。** `for: items|take(2)` は、フィルタが何であれ `[wcs/binding-syntax] #121` で初期化を失敗させます。`for: items` の行は `items.<index>` なので、フィルタ後の配列の行は別の要素を指してしまい、その行を通した書き込みが間違った要素に届きます。絞り込んだリストを返す getter を宣言し、それをループしてください:

package/README.md

@@ -194,9 +194,9 @@ leaves features out, it can compose them instead:
 <script type="importmap">
 {
   "imports": {
-    "@wcstack/state/core": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.12.0/dist/split/core.js",
-    "@wcstack/state/features/temporal": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.12.0/dist/split/features/temporal.js",
-    "@wcstack/state/features/scopes": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.12.0/dist/split/features/scopes.js"
+    "@wcstack/state/core": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.14.0/dist/split/core.js",
+    "@wcstack/state/features/temporal": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.14.0/dist/split/features/temporal.js",
+    "@wcstack/state/features/scopes": "https://cdn.jsdelivr.net/npm/@wcstack/state@4.14.0/dist/split/features/scopes.js"
   }
 }
 </script>
@@ -272,7 +272,7 @@ receptacle the owning add-on fills on install).
 core, and the add-ons the page names from the same build.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@wcstack/state@4.12.0/dist/split/auto.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@wcstack/state@4.14.0/dist/split/auto.js"></script>
 <wcs-state features="scopes diagnostics">
   <script type="module">
     export default {
@@ -823,6 +823,8 @@ The `for:` directive uses a **value-based diff algorithm** — each array elemen
 
 This means **no explicit `key` attribute is needed for adding, removing, or reordering rows** (like React's `key` or Vue's `:key`) — as long as row objects keep their references. Non-destructive array methods (`toSorted`, `toReversed`, `filter`, `with`, `toSpliced`) all preserve element references, so sorting and filtering are keyed by construction, and the whole class of "wrong key" bugs cannot occur.
 
+**A row a reorder moves keeps what a removal would reset** — focus, an iframe's page, a running CSS animation or transition — where the browser has [`moveBefore()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/moveBefore) (Chromium 133+, Firefox 144+), since 4.14. The differ moves as few rows as it can, and a row it leaves in place keeps that state in any browser; in a browser without `moveBefore()` — Safari — a row it moves loses it, as every browser did up to 4.13. A custom element in a moved row still gets `disconnectedCallback` and `connectedCallback`, unless its class defines `connectedMoveCallback`, which the browser then calls instead.
+
 The exception is data that arrives as **freshly created objects** — `fetch(...).json()`, `JSON.parse` from storage, a WebSocket/SSE full snapshot, or a Worker `postMessage`. Those rows never match by reference, so every row is torn down and rebuilt. See [`$listKeys`](#listkeys--identity-for-refetched-rows) below.
 
 **`for:` takes no output filters.** `for: items|take(2)` fails initialization with `[wcs/binding-syntax] #121`, whatever the filter. A row of `for: items` is `items.<index>`, so the rows of a filtered array would name other elements, and writes through them would land on the wrong ones. Declare a getter that returns the filtered list, and loop over it: