haori 0.10.0 → 0.10.1
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 +6 -2
- package/README.md +6 -2
- package/dist/haori.cjs.js +8 -8
- package/dist/haori.cjs.js.map +1 -1
- package/dist/haori.es.js +139 -110
- package/dist/haori.es.js.map +1 -1
- package/dist/haori.iife.js +6 -6
- package/dist/haori.iife.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/package.json +1 -1
- package/dist/src/expression.d.ts +9 -0
- package/dist/src/expression.d.ts.map +1 -1
- package/dist/src/expression.js +39 -1
- package/dist/src/expression.js.map +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.js +1 -1
- package/dist/tests/derive-each-render-wait.test.d.ts +2 -0
- package/dist/tests/derive-each-render-wait.test.d.ts.map +1 -0
- package/dist/tests/derive-each-render-wait.test.js +90 -0
- package/dist/tests/derive-each-render-wait.test.js.map +1 -0
- package/dist/tests/expression-disallowed-keyword-hint.test.d.ts +2 -0
- package/dist/tests/expression-disallowed-keyword-hint.test.d.ts.map +1 -0
- package/dist/tests/expression-disallowed-keyword-hint.test.js +45 -0
- package/dist/tests/expression-disallowed-keyword-hint.test.js.map +1 -0
- package/dist/tests/scheduled-evaluate-wait.test.d.ts +2 -0
- package/dist/tests/scheduled-evaluate-wait.test.d.ts.map +1 -0
- package/dist/tests/scheduled-evaluate-wait.test.js +68 -0
- package/dist/tests/scheduled-evaluate-wait.test.js.map +1 -0
- package/package.json +1 -1
package/README.ja.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Haori.js は、HTML 属性を中心にして動的な UI を実現する軽量なライブラリです。JavaScript をほとんど書かずに、データバインディング、条件分岐、繰り返し処理、フォームの双方向バインディング、サーバー通信などを HTML 属性で宣言できます。
|
|
4
4
|
|
|
5
|
-
バージョン: 0.
|
|
5
|
+
バージョン: 0.10.0
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -109,6 +109,8 @@ Haori.mount(document.body, {items: [{name: 'りんご'}, {name: 'みかん'}]});
|
|
|
109
109
|
イベント駆動アクション:
|
|
110
110
|
|
|
111
111
|
- `data-click-*`・`data-change-*`・`data-load-*`・`data-intersect-*` は、それぞれクリック・フォーム変更・要素ロード・ビューポート交差を契機に処理(fetch、bind、copy、ダイアログ操作など)を宣言します。`data-load-*` は `data-if` 要素が非表示→表示へ遷移した(`haori:show`)タイミングでも発火するため、ネイティブの `load` が発生しない `<button>` などでも利用できます。
|
|
112
|
+
- `data-click-copy-source` — `data-click-copy` のコピー元要素を明示指定します(既定は `data-click-form` のフォーム、無ければイベント発火元の binding)。
|
|
113
|
+
- `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` 併用は避けてください。
|
|
112
114
|
|
|
113
115
|
ライフサイクルイベント:
|
|
114
116
|
|
|
@@ -116,7 +118,9 @@ Haori.mount(document.body, {items: [{name: 'りんご'}, {name: 'みかん'}]});
|
|
|
116
118
|
- `haori:bindcomplete` — `data-*-bind` / `data-*-bind-arg` によるバインドと、対象要素配下の再評価が完了した後に対象要素で発火します(`detail.bindArg`)。
|
|
117
119
|
- `haori:show` / `haori:hide` — `data-if` 要素の表示・非表示時に発火します。
|
|
118
120
|
|
|
119
|
-
テンプレート式では、プロパティアクセス、動的インデックスを含むブラケットアクセス、optional chaining、三項演算子、配列 `map` / `filter` のアロー関数、spread を伴う呼び出しなどの安全な構文を利用できます。一方で、グローバルオブジェクト、`eval` や `arguments`、`constructor`、`__proto__`、`prototype`、`Reflect`
|
|
121
|
+
テンプレート式では、プロパティアクセス、動的インデックスを含むブラケットアクセス、optional chaining、三項演算子、配列 `map` / `filter` のアロー関数、spread を伴う呼び出しなどの安全な構文を利用できます。一方で、グローバルオブジェクト、`eval` や `arguments`、`constructor`、`__proto__`、`prototype`、`Reflect`、`Object` などの脱出経路は使用できません。`Object` がブロックされるため、`Object.assign` の代わりにスプレッド構文 `{...a, ...b}` を使ってください。ブロックされた識別子を式で参照すると、コンソールに `blocked identifier(s): …` という警告が出力されます。
|
|
122
|
+
|
|
123
|
+
テスト・デバッグ補助: `waitForRenders()`(`Haori.waitForRenders()` でも可)は、初期化・進行中のフェッチ・キューに積まれた描画タスクがすべて落ち着くまで待機します(E2E テストで描画完了を待つのに便利)。`Haori.Core.dumpScope(element)` は要素に解決されるスコープ(`resolved`)と各キーの由来(`sources`)を返します。開発モードでは falsy な `data-if` がその式と参照スコープを自動でログ出力します。
|
|
120
124
|
|
|
121
125
|
`data-fetch` と `data-import` は、バインディング更新時に評価結果が変化した場合のみ自動で再評価されます。`data-fetch` は評価後の URL、HTTP メソッド、ヘッダー、body を含む実行シグネチャで比較し、`data-import` は評価後 URL で比較します。これらの属性値に未解決参照が 1 つでも含まれる場合、その時点では実行されず、後続のバインディング更新で参照が解決したときに初めて実行対象になります。
|
|
122
126
|
|
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.
|
|
5
|
+
Version: 0.10.0
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -109,6 +109,8 @@ Additional binding helpers:
|
|
|
109
109
|
Event-driven actions:
|
|
110
110
|
|
|
111
111
|
- `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.
|
|
112
|
+
- `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).
|
|
113
|
+
- `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.
|
|
112
114
|
|
|
113
115
|
Lifecycle events:
|
|
114
116
|
|
|
@@ -116,7 +118,9 @@ Lifecycle events:
|
|
|
116
118
|
- `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`).
|
|
117
119
|
- `haori:show` / `haori:hide` — fired when a `data-if` element becomes shown or hidden.
|
|
118
120
|
|
|
119
|
-
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 `
|
|
121
|
+
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`, `Reflect`, or `Object` is blocked. Because `Object` is blocked, use spread syntax `{...a, ...b}` instead of `Object.assign`; when a blocked identifier is referenced in an expression, a `blocked identifier(s): …` warning is logged to the console.
|
|
122
|
+
|
|
123
|
+
Helpers for tests and debugging: `waitForRenders()` (also `Haori.waitForRenders()`) resolves once initialization, in-flight fetches, and queued render tasks have all settled — useful for E2E tests. `Haori.Core.dumpScope(element)` returns the scope resolved for an element (`resolved`) and where each key comes from (`sources`); in dev mode a falsy `data-if` also logs its expression and referenced scope automatically.
|
|
120
124
|
|
|
121
125
|
`data-fetch` and `data-import` are automatically re-evaluated only when their evaluated values change after a binding update. `data-fetch` compares a request signature composed of the resolved URL, HTTP method, headers, and body, while `data-import` compares only the resolved URL. If either attribute contains even one unresolved reference, it is treated as invalid for that evaluation cycle, is not executed, and becomes executable only after a later binding update resolves the reference.
|
|
122
126
|
|