haori 0.1.1 → 0.1.3

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.
Files changed (54) hide show
  1. package/LICENSE +21 -21
  2. package/README.ja.md +182 -156
  3. package/README.md +184 -158
  4. package/dist/haori.cjs.js +12 -10
  5. package/dist/haori.cjs.js.map +1 -1
  6. package/dist/haori.es.js +1280 -750
  7. package/dist/haori.es.js.map +1 -1
  8. package/dist/haori.iife.js +11 -9
  9. package/dist/haori.iife.js.map +1 -1
  10. package/dist/index.d.ts +10 -2
  11. package/dist/package.json +70 -0
  12. package/dist/src/expression.d.ts +119 -3
  13. package/dist/src/expression.d.ts.map +1 -1
  14. package/dist/src/expression.js +572 -26
  15. package/dist/src/expression.js.map +1 -1
  16. package/dist/src/form.d.ts.map +1 -1
  17. package/dist/src/form.js +17 -3
  18. package/dist/src/form.js.map +1 -1
  19. package/dist/src/fragment.d.ts +9 -1
  20. package/dist/src/fragment.d.ts.map +1 -1
  21. package/dist/src/fragment.js +50 -6
  22. package/dist/src/fragment.js.map +1 -1
  23. package/dist/src/index.d.ts +1 -1
  24. package/dist/src/index.js +1 -1
  25. package/dist/src/procedure.d.ts.map +1 -1
  26. package/dist/src/procedure.js +37 -16
  27. package/dist/src/procedure.js.map +1 -1
  28. package/dist/tests/core.test.js +46 -46
  29. package/dist/tests/data-each-browserlike.test.js +10 -10
  30. package/dist/tests/data-each-fragment-debug.test.js +36 -36
  31. package/dist/tests/data-each-table.test.js +98 -30
  32. package/dist/tests/data-each-table.test.js.map +1 -1
  33. package/dist/tests/data-fetch-tbody-dom.test.js +13 -13
  34. package/dist/tests/data-fetch-tbody-dom.test.js.map +1 -1
  35. package/dist/tests/event.test.js +3 -2
  36. package/dist/tests/event.test.js.map +1 -1
  37. package/dist/tests/expression.test.js +129 -21
  38. package/dist/tests/expression.test.js.map +1 -1
  39. package/dist/tests/form.test.js +276 -275
  40. package/dist/tests/form.test.js.map +1 -1
  41. package/dist/tests/fragment.test.js +51 -1
  42. package/dist/tests/fragment.test.js.map +1 -1
  43. package/dist/tests/helpers/async.d.ts +19 -0
  44. package/dist/tests/helpers/async.d.ts.map +1 -0
  45. package/dist/tests/helpers/async.js +31 -0
  46. package/dist/tests/helpers/async.js.map +1 -0
  47. package/dist/tests/import.test.js +34 -34
  48. package/dist/tests/procedure-action-operations.test.js +100 -12
  49. package/dist/tests/procedure-action-operations.test.js.map +1 -1
  50. package/dist/tests/row-move.test.js +92 -69
  51. package/dist/tests/row-move.test.js.map +1 -1
  52. package/dist/tests/row-operations.test.js +105 -104
  53. package/dist/tests/row-operations.test.js.map +1 -1
  54. package/package.json +70 -70
package/README.md CHANGED
@@ -1,158 +1,184 @@
1
- # Haori.js
2
-
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
-
5
- Version: 0.1.0
6
-
7
- ---
8
-
9
- Contents
10
-
11
- - Overview
12
- - Installation
13
- - Quick start
14
- - Common attributes (summary)
15
- - Build & publish
16
- - License & contributing
17
- - Further documentation
18
-
19
- ---
20
-
21
- ## Overview
22
-
23
- - Design principle: HTML-first — declare UI behavior with HTML attributes
24
- - Key features:
25
- - Data binding via `data-bind`
26
- - Conditional rendering via `data-if`
27
- - List rendering via `data-each`
28
- - Two-way form binding (automatic binding based on `name` attributes)
29
- - Server fetches via `data-fetch`
30
- - HTML imports via `data-import`
31
- - Zero runtime dependencies (uses browser-native APIs)
32
-
33
- ## Installation
34
-
35
- Install from npm:
36
-
37
- ```bash
38
- npm install haori
39
- ```
40
-
41
- Via CDN:
42
-
43
- ```html
44
- <script src="https://cdn.jsdelivr.net/npm/haori@0.1.0/dist/haori.iife.js"></script>
45
- ```
46
-
47
- ES Module import:
48
-
49
- ```js
50
- import Haori from 'haori'
51
- ```
52
-
53
- ---
54
-
55
- ## Quick start
56
-
57
- You can use Haori with plain HTML. Minimal example:
58
-
59
- ```html
60
- <!DOCTYPE html>
61
- <html lang="en">
62
- <head>
63
- <meta charset="utf-8">
64
- <title>Haori Sample</title>
65
- <script src="https://cdn.jsdelivr.net/npm/haori@0.1.0/dist/haori.iife.js"></script>
66
- </head>
67
- <body>
68
- <div data-bind='{"name":"Taro"}'>
69
- <p>Hello, {{name}}</p>
70
- </div>
71
- </body>
72
- </html>
73
- ```
74
-
75
- Mounting from JavaScript:
76
-
77
- ```js
78
- import Haori from 'haori'
79
-
80
- Haori.mount(document.body, { items: [ { name: 'apple' }, { name: 'orange' } ] })
81
- ```
82
-
83
- ---
84
-
85
- ## Common attributes (summary)
86
-
87
- - `data-bind` — set binding data for an element (JSON or parameter format)
88
- - `{{ ... }}` — template expressions (evaluated and inserted)
89
- - `data-if` — show/hide an element based on a condition
90
- - `data-each` — repeat an element for items in an array (`data-each-key`, `data-each-arg`, `data-each-index`)
91
- - `data-fetch` — fetch data from a server and bind the result
92
- - `data-import` — load external HTML and insert it
93
- - `data-url-param` — import URL query parameters into bindings
94
-
95
- For detailed usage and many examples, see the official documentation.
96
-
97
- ---
98
-
99
- ## Build & publish (packaging)
100
-
101
- Basic build and publish steps in a development environment:
102
-
103
- 1. Install dependencies
104
-
105
- ```bash
106
- npm install
107
- ```
108
-
109
- 2. Type-check and build
110
-
111
- ```bash
112
- npm run compile
113
- # or
114
- npm run build
115
- ```
116
-
117
- 3. Run tests
118
-
119
- ```bash
120
- npm run test
121
- ```
122
-
123
- 4. Bump version
124
-
125
- ```bash
126
- npm version patch
127
- ```
128
-
129
- 5. Login to npm and publish
130
-
131
- ```bash
132
- npm login
133
- npm publish --access public
134
- ```
135
-
136
- Make sure `package.json` fields `name`, `version`, `description`, `repository` and `license` are correct. Files published to npm are controlled by the `files` field in `package.json` and `.npmignore`.
137
-
138
- ---
139
-
140
- ## License & Contributing
141
-
142
- - License: MIT (see `LICENSE` in this repository)
143
-
144
- Contributions are welcome — please open issues or pull requests on the GitHub repository.
145
-
146
- ---
147
-
148
- ## Further documentation
149
-
150
- For more detailed usage, attribute specs, and internal design, see:
151
-
152
- - `docs/ja/guide.md` — User guide (many examples)
153
- - `docs/ja/specs.md` — Technical specifications (internal design, API)
154
-
155
- ---
156
-
157
- If you would like additional sections (API reference, diagrams, more examples), tell me what to include and I will expand the README.
158
-
1
+ # Haori.js
2
+
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
+
5
+ Version: 0.1.3
6
+
7
+ ---
8
+
9
+ Contents
10
+
11
+ - Overview
12
+ - Installation
13
+ - Quick start
14
+ - Common attributes (summary)
15
+ - Build & publish
16
+ - License & contributing
17
+ - Further documentation
18
+
19
+ ---
20
+
21
+ ## Overview
22
+
23
+ - Design principle: HTML-first — declare UI behavior with HTML attributes
24
+ - Key features:
25
+ - Data binding via `data-bind`
26
+ - Conditional rendering via `data-if`
27
+ - List rendering via `data-each`
28
+ - Two-way form binding (automatic binding based on `name` attributes)
29
+ - Server fetches via `data-fetch`
30
+ - HTML imports via `data-import`
31
+ - Zero runtime dependencies (uses browser-native APIs)
32
+
33
+ ## Installation
34
+
35
+ Install from npm:
36
+
37
+ ```bash
38
+ npm install haori
39
+ ```
40
+
41
+ Via CDN:
42
+
43
+ ```html
44
+ <script src="https://cdn.jsdelivr.net/npm/haori/dist/haori.iife.js"></script>
45
+ ```
46
+
47
+ This CDN URL follows the latest published npm release.
48
+
49
+ ES Module import:
50
+
51
+ ```js
52
+ import Haori from 'haori'
53
+ ```
54
+
55
+ ---
56
+
57
+ ## Quick start
58
+
59
+ You can use Haori with plain HTML. Minimal example:
60
+
61
+ ```html
62
+ <!DOCTYPE html>
63
+ <html lang="en">
64
+ <head>
65
+ <meta charset="utf-8">
66
+ <title>Haori Sample</title>
67
+ <script src="https://cdn.jsdelivr.net/npm/haori/dist/haori.iife.js"></script>
68
+ </head>
69
+ <body>
70
+ <div data-bind='{"name":"Taro"}'>
71
+ <p>Hello, {{name}}</p>
72
+ </div>
73
+ </body>
74
+ </html>
75
+ ```
76
+
77
+ Mounting from JavaScript:
78
+
79
+ ```js
80
+ import Haori from 'haori'
81
+
82
+ Haori.mount(document.body, { items: [ { name: 'apple' }, { name: 'orange' } ] })
83
+ ```
84
+
85
+ ---
86
+
87
+ ## Common attributes (summary)
88
+
89
+ - `data-bind` — set binding data for an element (JSON or parameter format)
90
+ - `{{ ... }}` — template expressions (evaluated and inserted)
91
+ - `data-if` — show/hide an element based on a condition
92
+ - `data-each` — repeat an element for items in an array (`data-each-key`, `data-each-arg`, `data-each-index`)
93
+ - `data-fetch` — fetch data from a server and bind the result
94
+ - `data-import` — load external HTML and insert it
95
+ - `data-url-param` — import URL query parameters into bindings
96
+
97
+ 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.
98
+
99
+ For detailed usage and many examples, see the official documentation.
100
+
101
+ ---
102
+
103
+ ## Build & publish (packaging)
104
+
105
+ Basic local verification and release preparation steps:
106
+
107
+ Quick release memo:
108
+
109
+ 1. Run `npm run test`, `npm run build`, and `npm pack --dry-run`.
110
+ 2. Bump the package version with `npm version patch` or the intended version command.
111
+ 3. Push `main` and tags with `git push origin main` and `git push origin --tags`.
112
+ 4. Publish a GitHub Release from the new version tag.
113
+ 5. Confirm npm, jsDelivr, and the GitHub Release assets reflect the new version.
114
+
115
+ 1. Install dependencies
116
+
117
+ ```bash
118
+ npm install
119
+ ```
120
+
121
+ 2. Type-check and test
122
+
123
+ ```bash
124
+ npm run compile
125
+ npm run test
126
+ ```
127
+
128
+ 3. Build release artifacts
129
+
130
+ ```bash
131
+ npm run build
132
+ ```
133
+
134
+ 4. Bump version
135
+
136
+ ```bash
137
+ npm version patch
138
+ ```
139
+
140
+ 5. Push the version update and tags
141
+
142
+ ```bash
143
+ git push origin main
144
+ git push origin --tags
145
+ ```
146
+
147
+ 6. Publish a GitHub Release from the new tag
148
+
149
+ Publishing to npm is handled by GitHub Actions when a GitHub Release is published. This repository uses release workflows that trigger on `release.published`, build the package, publish it to npm with `NPM_TOKEN` if that package version is not already published, and upload `dist.zip` to the release assets.
150
+
151
+ Required repository setup:
152
+
153
+ - `NPM_TOKEN` must be configured in GitHub Actions repository secrets.
154
+ - The release must be published from the target version tag.
155
+
156
+ Recommended pre-release checks:
157
+
158
+ - `npm run test`
159
+ - `npm run build`
160
+ - `npm pack --dry-run`
161
+
162
+ Make sure `package.json` fields `name`, `version`, `description`, `repository` and `license` are correct. Files published to npm are controlled by the `files` field in `package.json`.
163
+
164
+ ---
165
+
166
+ ## License & Contributing
167
+
168
+ - License: MIT (see `LICENSE` in this repository)
169
+
170
+ Contributions are welcome — please open issues or pull requests on the GitHub repository.
171
+
172
+ ---
173
+
174
+ ## Further documentation
175
+
176
+ For more detailed usage, attribute specs, and internal design, see:
177
+
178
+ - `docs/ja/guide.md` — User guide (many examples)
179
+ - `docs/ja/specs.md` — Technical specifications (internal design, API)
180
+
181
+ ---
182
+
183
+ If you would like additional sections (API reference, diagrams, more examples), tell me what to include and I will expand the README.
184
+