haori 0.43.0 → 0.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.ja.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Haori.js は、HTML 属性を中心にして動的な UI を実現する軽量なライブラリです。JavaScript をほとんど書かずに、データバインディング、条件分岐、繰り返し処理、フォームの双方向バインディング、サーバー通信などを HTML 属性で宣言できます。
4
4
 
5
- バージョン: 0.43.0
5
+ バージョン: 0.44.0
6
6
 
7
7
  ---
8
8
 
@@ -99,6 +99,7 @@ Haori.mount(document.body, {items: [{name: 'りんご'}, {name: 'みかん'}]});
99
99
  - `data-if` — 条件に応じて要素を表示 / 非表示
100
100
  - `data-each` — 配列を繰り返し表示(`data-each-key`, `data-each-arg`, `data-each-index` など)
101
101
  - `data-attr-xxx` — ブラウザが先に解釈する属性を安全に更新(`src`, `value` など)
102
+ - `data-value-type` — 入力欄の収集値の型を宣言します(`boolean` / `number` / `string`)。`input` の値は常に文字列のため、真偽値を `type="hidden"` に載せると `"true"` という文字列で送られます。型を宣言すると、収集値・バインドデータ・送信ボディが API の期待する型になります(判定できない値は `null` になるため、未入力を `false` として送りません)。利用者に見せないだけの項目を、真偽値のために「表示しないチェックボックス」で代用する必要がなくなります。`checkbox` / `radio` / `file` と複数選択の `<select>` では無視します(開発モードで警告)。
102
103
  - `data-fetch` — サーバーからデータを取得してバインド
103
104
  - `data-import` — 外部 HTML を読み込んで挿入
104
105
  - `data-url-param` — URL のクエリパラメータをバインディングに取り込む
@@ -111,6 +112,7 @@ Haori.mount(document.body, {items: [{name: 'りんご'}, {name: 'みかん'}]});
111
112
 
112
113
  - `data-derive` / `data-derive-name` — 要素上で派生値を定義し、その要素の子孫にだけ公開します。親子プルダウンのような用途で使えます。
113
114
  - `data-*-bind-merge`(例: `data-click-bind-merge`・`data-fetch-bind-merge`)— 結果をバインド先要素へ反映する際、`data-bind` を全置換せず、既存の値を保持したまま浅くマージします(新しいデータに無いキーは保持)。`selectedId={{items[0].id}}` のような計算値を既存 state に追記したい場合に有用です。
115
+ - `data-fetch-arg` / `data-{event}-bind-arg` — 結果をバインドするキー名を指定します。**そのキーの配下だけを更新するため、バインド先の他のキーは保持されます**(`-bind-merge` は不要で、キー名を指定した場合は無視します)。キー名を指定しないと**バインド先を全置換**するため、別の `data-fetch` が寄せていたキーが消え、そのフェッチは実行シグネチャが変わらないので再取得もされません。共有する state へ寄せる場合はキー名を指定してください。`data-fetch-bind-arg` は `data-fetch-arg` の別名で**非推奨**です(両方ある場合は `data-fetch-arg` を採用)。
114
116
 
115
117
  イベント駆動アクション:
116
118
 
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  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.
4
4
 
5
- Version: 0.43.0
5
+ Version: 0.44.0
6
6
 
7
7
  ---
8
8
 
@@ -99,6 +99,7 @@ Haori.mount(document.body, {items: [{name: 'apple'}, {name: 'orange'}]});
99
99
  - `data-if` — show/hide an element based on a condition
100
100
  - `data-each` — repeat an element for items in an array (`data-each-key`, `data-each-arg`, `data-each-index`)
101
101
  - `data-attr-xxx` — safely update browser-interpreted attributes such as `src` and `value`
102
+ - `data-value-type` — declare the collected type of an input (`boolean` / `number` / `string`). `input.value` is always a string, so a `type="hidden"` field carrying a boolean would otherwise be sent as `"true"`; declaring the type keeps the collected value, the binding data and the request body in the shape the API expects (a value that cannot be judged becomes `null`, so a blank field is never sent as `false`). Values you do not show the user no longer need a hidden checkbox to carry a boolean. Ignored (with a development-mode warning) on `checkbox` / `radio` / `file` and multi-select `<select>`, where the collected value is not a single scalar read from `value`.
102
103
  - `data-fetch` — fetch data from a server and bind the result
103
104
  - `data-import` — load external HTML and insert it
104
105
  - `data-url-param` — import URL query parameters into bindings
@@ -111,6 +112,7 @@ Additional binding helpers:
111
112
 
112
113
  - `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.
113
114
  - `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.
115
+ - `data-fetch-arg` / `data-{event}-bind-arg` — name the key the result is bound under. **Only the keys under that name are replaced, so the target's other keys are preserved**; `-bind-merge` is unnecessary and is ignored when a key name is given. Without a key name the bind **replaces the whole target**, dropping keys another `data-fetch` had merged there — and that fetch will not re-run because its signature has not changed. `data-fetch-bind-arg` is a deprecated alias of `data-fetch-arg` (`data-fetch-arg` wins when both are present).
114
116
 
115
117
  Event-driven actions:
116
118