haori 0.56.0 → 0.57.1

package/README.ja.md

@@ -2,7 +2,7 @@
 
 Haori.js は、HTML 属性を中心にして動的な UI を実現する軽量なライブラリです。JavaScript をほとんど書かずに、データバインディング、条件分岐、繰り返し処理、フォームの双方向バインディング、サーバー通信などを HTML 属性で宣言できます。
 
-バージョン: 0.56.0
+バージョン: 0.57.1
 
 ---
 
@@ -131,7 +131,7 @@ Haori.mount(document.body, {items: [{name: 'りんご'}, {name: 'みかん'}]});
 - `data-click-copy-source` — `data-click-copy` のコピー元要素を明示指定します（既定は `data-click-form` のフォーム、無ければイベント発火元の binding）。
 - `data-click-no-disabled` / `data-click-defer` — 他ライブラリとの併用補助です。`no-disabled` はクリック手続き実行中に `disabled` 属性を付与せず実行します（Bootstrap collapse など disabled 要素を無視するライブラリ・CSS が動作し続けます。多重実行は内部マーカーで防止）。`defer` はクリック手続きを次フレーム（`requestAnimationFrame`／`setTimeout(0)`）で実行し、他ライブラリの同期 click ハンドラを先に完了させます。遅延後は `preventDefault()` できないため、`<a href>` や `type="submit"` への `defer` 併用は避けてください。
 - `data-{event}-click-await` — `data-{event}-click` が起動した手続きの完了を待ってから次の対象をクリックします。複数の更新を**宣言した順に直列で**送り、**いずれかが失敗した時点で後続を止めます**（HTTP エラー・通信の例外・検証エラー・確認ダイアログのキャンセル）。表示順を 2 件更新する並べ替えが JavaScript なしで書けます。止めた場合は呼び出し元の後続アクション（ダイアログ・トースト・リダイレクト）も実行しません。`data-{event}-if` が偽でスキップされた対象は失敗として扱いません。手続きが同期に起動しない対象（`data-click-defer`、クリックが発火しない `disabled` 要素）は待てず、その旨を記録します。
-- `data-{event}-error-click` / `-error-click-await` / `-error-close` / `-error-toast` / `-error-toast-level` / `-error-status` / `-error-no-message` — 取得が失敗したとき（2xx 以外の応答と通信の例外。認証ガードで遷移する 401 / 403 を除く）にだけ、別要素のクリック・ダイアログを閉じる・トーストをこの順に実行します。「取り直しが 404 なら、ダイアログを閉じて検索し直す」が JavaScript なしで書けます。`-error-status="404&410"` で対象のステータスを絞れます（宣言すると通信の例外は対象外）。実行しても手続きは失敗のままで、エラー表示も今までどおり行います（`-error-no-message` で止められます）。応答本文のサーバのメッセージは `_fetch.responseMessage` で参照でき、`data-click-error-toast="{{_fetch.responseMessage}}"` でトーストに出せます。`data-poll-*` と非イベントの `data-fetch` では使えません。
+- `data-{event}-error-click` / `-error-click-await` / `-error-close` / `-error-toast` / `-error-toast-level` / `-error-status` / `-error-no-message` — 取得が失敗したとき（2xx 以外の応答と通信の例外。認証ガードで遷移する 401 / 403 を除く）にだけ、別要素のクリック・ダイアログを閉じる・トーストをこの順に実行します。「取り直しが 404 なら、ダイアログを閉じて検索し直す」が JavaScript なしで書けます。`-error-status="404&410"` で対象のステータスを絞れます（宣言すると通信の例外は対象外）。実行しても手続きは失敗のままで、エラー表示も今までどおり行います（`-error-no-message` で止められます）。応答本文のサーバのメッセージは `_fetch.responseMessage` で参照でき、`data-click-error-toast="{{_fetch.responseMessage}}"` でトーストに出せます。`data-click-error-404-close` のようにステータスを付けた組（`-click` / `-click-await` / `-close` / `-toast` / `-toast-level` / `-no-message`）は、そのステータスの失敗でだけ、ステータスの付かない属性の代わりに使います。`-toast-level` と `-error-toast-level` には式を書けます（例: `{{_fetch.statusCode === 409 ? 'warning' : 'error'}}`）。`data-poll-*` と非イベントの `data-fetch` では使えません。
 - `data-{event}-prevent`（例: `data-click-prevent`）— そのイベントでブラウザのネイティブなデフォルト動作（`type="submit"` ボタンのフォーム送信、`<a href>` の遷移など）を抑止します。`preventDefault()` はクリックの同期区間で呼ぶため `data-click-defer` と併用しても確実に抑止でき、`stopPropagation()` は呼ばないので他ライブラリのイベント伝播には影響しません。これにより `type="submit"` のまま `data-click-fetch` 等を付けても、ページ再読込なしに動作します。
 - `data-{event}-run`（例: `data-click-run`・`data-change-run`）— フェッチを伴わず任意の JavaScript をイベント時に実行します。属性値は `new Function` で実 JS として実行され（`-before-run`/`-after-run` と同方式）、`{{...}}` はレンダリング時に展開、`event` が引数で渡されます。本体が `false` を返すと `event.preventDefault()` を呼びます（`onclick="return false"` の慣習）。**セキュリティ**: 展開後の `{{...}}` は実行コードへ結合されるため、信頼できる値（数値 index・自前採番 ID 等）のみを入れてください。API レスポンスやユーザー入力などの信頼できない文字列を入れると任意コード実行（XSS）になり得ます。信頼できない値は `data-bind` 経由で渡し、呼び出す関数の内部で参照してください。
 

package/README.md

@@ -2,7 +2,7 @@
 
 Haori.js is a lightweight, HTML-first UI library that enables dynamic user interfaces primarily through HTML attributes. It lets you declare data bindings, conditional rendering, list rendering, form two-way binding, server fetches, and HTML imports without writing much JavaScript.
 
-Version: 0.56.0
+Version: 0.57.1
 
 ---
 
@@ -131,7 +131,7 @@ Event-driven actions:
 - `data-click-copy-source` — explicitly set the copy source element for `data-click-copy` (defaults to the form given by `data-click-form`, otherwise the event element's binding).
 - `data-click-no-disabled` / `data-click-defer` — coexistence helpers for other libraries. `no-disabled` runs the click procedure without adding the `disabled` attribute (so libraries/CSS that ignore disabled elements, e.g. Bootstrap collapse, keep working; double execution is still prevented internally). `defer` runs the click procedure on the next frame (`requestAnimationFrame`/`setTimeout(0)`) so other libraries' synchronous click handlers complete first. Avoid `defer` on `<a href>` / `type="submit"` because the deferred procedure cannot `preventDefault()` the default action.
 - `data-{event}-click-await` — wait for the procedure started by `data-{event}-click` before clicking the next target, so several updates are sent **serially in declaration order** and **the rest is stopped as soon as one fails** (HTTP error, network exception, validation error, or a cancelled confirmation). Row reordering that has to persist two display orders no longer needs JavaScript. When it stops, the calling procedure also skips its remaining actions (dialog, toast, redirect). A target skipped by a false `data-{event}-if` is not a failure. Targets whose procedure does not start synchronously (`data-click-defer`, or a `disabled` element that fires no click) cannot be waited for; that is logged.
-- `data-{event}-error-click` / `-error-click-await` / `-error-close` / `-error-toast` / `-error-toast-level` / `-error-status` / `-error-no-message` — run a click on another element, a dialog close and a toast, in that order, only when the fetch fails (a non-2xx response or a network exception, except 401 / 403 handled by the auth guard redirect). "If the reload returns 404, close the dialog and search again" no longer needs JavaScript. `-error-status="404&410"` narrows the statuses (once declared, network exceptions are excluded). The procedure still ends as a failure and the error display works as before, unless `-error-no-message` turns it off. The server's message in the response body is available as `_fetch.responseMessage`, so `data-click-error-toast="{{_fetch.responseMessage}}"` shows it in a toast. Not available on `data-poll-*` or the non-event `data-fetch`.
+- `data-{event}-error-click` / `-error-click-await` / `-error-close` / `-error-toast` / `-error-toast-level` / `-error-status` / `-error-no-message` — run a click on another element, a dialog close and a toast, in that order, only when the fetch fails (a non-2xx response or a network exception, except 401 / 403 handled by the auth guard redirect). "If the reload returns 404, close the dialog and search again" no longer needs JavaScript. `-error-status="404&410"` narrows the statuses (once declared, network exceptions are excluded). The procedure still ends as a failure and the error display works as before, unless `-error-no-message` turns it off. The server's message in the response body is available as `_fetch.responseMessage`, so `data-click-error-toast="{{_fetch.responseMessage}}"` shows it in a toast. A group with a status in its name, such as `data-click-error-404-close` (`-click` / `-click-await` / `-close` / `-toast` / `-toast-level` / `-no-message`), replaces the attributes without a status only for failures with that status. `-toast-level` and `-error-toast-level` accept expressions (for example `{{_fetch.statusCode === 409 ? 'warning' : 'error'}}`). Not available on `data-poll-*` or the non-event `data-fetch`.
 - `data-{event}-prevent` (e.g. `data-click-prevent`) — suppress the browser's native default action for the event (form submission for a `type="submit"` button, navigation for `<a href>`). `preventDefault()` is called synchronously during the click, so it works even together with `data-click-defer`, and `stopPropagation()` is never called (other libraries' event propagation is unaffected). This lets you keep `type="submit"` and still attach `data-click-fetch` etc. without the page reloading.
 - `data-{event}-run` (e.g. `data-click-run`, `data-change-run`) — run arbitrary JavaScript on the event without a fetch. The value is executed as real JS via `new Function` (like `-before-run`/`-after-run`), with `{{...}}` expanded at render time and `event` passed as an argument. Returning `false` calls `event.preventDefault()` (the `onclick="return false"` convention). **Security:** the expanded `{{...}}` is concatenated into executable code, so only interpolate trusted values (numeric indexes, IDs you control) — never untrusted strings (API/user input), which would run as code (XSS). Pass untrusted values via `data-bind` and read them inside the called function instead.