haori 0.7.0 → 0.9.0

package/README.ja.md

@@ -2,7 +2,7 @@
 
 Haori.js は、HTML 属性を中心にして動的な UI を実現する軽量なライブラリです。JavaScript をほとんど書かずに、データバインディング、条件分岐、繰り返し処理、フォームの双方向バインディング、サーバー通信などを HTML 属性で宣言できます。
 
-バージョン: 0.6.2
+バージョン: 0.8.0
 
 ---
 
@@ -24,12 +24,14 @@ Haori.js は、HTML 属性を中心にして動的な UI を実現する軽量
 - 内部状態を正とし、表示状態は DOM へ非同期で追随する
 - 主な特徴:
   - データバインディング（`data-bind`）
-  - 条件表示（`data-if`）
+  - 条件表示（`data-if`、JavaScript の falsy 準拠: `false`・`null`・`undefined`・`NaN`・`0`・`''` は非表示）
   - 繰り返し表示（`data-each`）
   - フォーム双方向バインディング（`name` 属性による自動バインド）
   - `value="true"` を付けたチェックボックスの boolean 対応（チェック時 `true`、未チェック時 `false`）
+  - イベント駆動アクション（`data-click-*`・`data-change-*`・`data-load-*`・`data-intersect-*`）
   - サーバー通信（`data-fetch`）
   - HTML インポート（`data-import`）
+  - ライフサイクルイベント（`haori:eachupdate`・`haori:bindcomplete`・`haori:show` / `haori:hide` など）
   - ゼロ依存（ブラウザネイティブのみ）
 
 必要に応じて `data-runtime` と `Env.runtime` を使い、組込利用とデモ表示で挙動を切り替えられます。
@@ -102,6 +104,17 @@ Haori.mount(document.body, {items: [{name: 'りんご'}, {name: 'みかん'}]});
 追加のバインディング補助:
 
 - `data-derive` / `data-derive-name` — 要素上で派生値を定義し、その要素の子孫にだけ公開します。親子プルダウンのような用途で使えます。設計の整理は `docs/ja/data-derive-confirmation-draft.md` を参照してください。
+- `data-*-bind-merge`（例: `data-click-bind-merge`・`data-fetch-bind-merge`）— 結果をバインド先要素へ反映する際、`data-bind` を全置換せず、既存の値を保持したまま浅くマージします（新しいデータに無いキーは保持）。`selectedId={{items[0].id}}` のような計算値を既存 state に追記したい場合に有用です。
+
+イベント駆動アクション:
+
+- `data-click-*`・`data-change-*`・`data-load-*`・`data-intersect-*` は、それぞれクリック・フォーム変更・要素ロード・ビューポート交差を契機に処理（fetch、bind、copy、ダイアログ操作など）を宣言します。`data-load-*` は `data-if` 要素が非表示→表示へ遷移した（`haori:show`）タイミングでも発火するため、ネイティブの `load` が発生しない `<button>` などでも利用できます。
+
+ライフサイクルイベント:
+
+- `haori:eachupdate` — `data-each` のリスト差分完了時に `data-each` 要素で発火します。発火時点で追加・削除・並べ替えされた全行が DOM に反映され、各行の内容（`{{...}}`）も描画済みのため、描画完了の検知に利用できます（`detail`: `added`・`removed`・`order`・`total`）。
+- `haori:bindcomplete` — `data-*-bind` / `data-*-bind-arg` によるバインドと、対象要素配下の再評価が完了した後に対象要素で発火します（`detail.bindArg`）。
+- `haori:show` / `haori:hide` — `data-if` 要素の表示・非表示時に発火します。
 
 テンプレート式では、プロパティアクセス、動的インデックスを含むブラケットアクセス、optional chaining、三項演算子、配列 `map` / `filter` のアロー関数、spread を伴う呼び出しなどの安全な構文を利用できます。一方で、グローバルオブジェクト、`eval` や `arguments`、`constructor`、`__proto__`、`prototype`、`Reflect` などの脱出経路は使用できません。
 

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.6.2
+Version: 0.8.0
 
 ---
 
@@ -24,12 +24,14 @@ Contents
 - Keep internal state authoritative; let the rendered DOM follow asynchronously
 - Key features:
   - Data binding via `data-bind`
-  - Conditional rendering via `data-if`
+  - Conditional rendering via `data-if` (JavaScript falsy semantics: `false`, `null`, `undefined`, `NaN`, `0`, and `''` are hidden)
   - List rendering via `data-each`
   - Two-way form binding (automatic binding based on `name` attributes)
   - Boolean checkbox support with `value="true"` (`true` when checked, `false` when unchecked)
+  - Event-driven actions via `data-click-*`, `data-change-*`, `data-load-*`, `data-intersect-*`
   - Server fetches via `data-fetch`
   - HTML imports via `data-import`
+  - Lifecycle events such as `haori:eachupdate`, `haori:bindcomplete`, `haori:show` / `haori:hide`
   - Zero runtime dependencies (uses browser-native APIs)
 
 Runtime mode can be distinguished with `data-runtime` and `Env.runtime` when you need different behavior for embedded use and browser demos.
@@ -102,6 +104,17 @@ Haori.mount(document.body, {items: [{name: 'apple'}, {name: 'orange'}]});
 Additional binding helpers:
 
 - `data-derive` / `data-derive-name` — define a derived value on an element and expose it to descendants only. This is useful for cases such as parent-child selects; see `docs/ja/data-derive-confirmation-draft.md` for the design background.
+- `data-*-bind-merge` (e.g. `data-click-bind-merge`, `data-fetch-bind-merge`) — when binding a result to a target element, shallow-merge it into the target's existing `data-bind` (keys not present in the new data are preserved) instead of replacing the whole binding. Useful for patching a single computed key (such as `selectedId={{items[0].id}}`) into existing state.
+
+Event-driven actions:
+
+- `data-click-*`, `data-change-*`, `data-load-*`, `data-intersect-*` declare actions (fetch, bind, copy, dialog control, etc.) triggered by click, form change, element load, and viewport intersection respectively. `data-load-*` also fires when a `data-if` element transitions from hidden to shown (the `haori:show` timing), so it works on elements like `<button>` that never receive a native `load` event.
+
+Lifecycle events:
+
+- `haori:eachupdate` — fired on the `data-each` element after a list diff completes; all added/removed/reordered rows are in the DOM and their content (`{{...}}`) is rendered by the time it fires, so it can be used to detect render completion (`detail`: `added`, `removed`, `order`, `total`).
+- `haori:bindcomplete` — fired on the target element after a `data-*-bind` / `data-*-bind-arg` bind and the subsequent re-evaluation of its subtree complete (`detail.bindArg`).
+- `haori:show` / `haori:hide` — fired when a `data-if` element becomes shown or hidden.
 
 Template expressions support safe JavaScript-like syntax such as property access, bracket access with dynamic indexes, optional chaining, ternary expressions, and method chains including array `map`/`filter` with arrow functions and spread calls. Access to global objects, `eval` or `arguments`, and prototype escape paths such as `constructor`, `__proto__`, `prototype`, or `Reflect` is blocked.