WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release: WRNexusJS 0.3.0

Browse Source
This commit is contained in:
Clintchiz
2026-07-22 17:29:08 +05:30
parent 13dfa31d19
commit 07d8fb59d6
145 changed files with 9664 additions and 3881 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/GUIDE.md
+10 -10
View File
@@ -310,15 +310,15 @@ identifiers, member/index access, calls, arrays/objects, `+ - * / %`, comparison
### Directives (the `data-*` the runtime understands)
| Directive | Syntax | What it does |
| ----------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-scope` | `data-scope="count: 0, name: 'x'"` | Declares reactive state on a subtree. The compiler emits this automatically when a page/component has state. A binding is owned by its **nearest** `data-scope` ancestor (nesting is safe). |
| `data-on-<event>` | `data-on-click="count++"` | Event handler (the compiled form of `@event`). |
| `data-text` | `data-text="count * 2"` | `textContent` follows the expression. Emitted by state interpolation; you can also hand‑write it. |
| `data-show` | `data-show="open"` | Toggles `display` on truthiness. **Hand‑authored** (no `{}` sugar). |
| `data-for` | `data-for="item in items"` or `data-for="item, i in items"` | Repeats the element per list item. Inside, `item`/`i` are locals; per‑item `data-text`, `data-on-*`, attribute mustaches, and text mustaches are filled. **Hand‑authored.** |
| `data-component` | `data-component="counter"` | Mounts a component (server‑rendered, then hydrated). See §12. |
| `data-slot` | `<div data-slot="header">…</div>` | Fills a named `<slot name="header">` of a component (see §8). |
| Directive | Syntax | What it does |
| ----------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-scope` | `data-scope="count: 0, name: 'x'"` | Declares reactive state on a subtree. The compiler emits this automatically when a page/component has state. A binding is owned by its **nearest** `data-scope` ancestor (nesting is safe). |
| `data-on-<event>` | `data-on-click="count++"` | Event handler (the compiled form of `@event`). |
| `data-text` | `data-text="count * 2"` | `textContent` follows the expression. Emitted by state interpolation; you can also hand‑write it. |
| `data-show` | `data-show="open"` | Toggles `display` on truthiness. **Hand‑authored** (no `{}` sugar). |
| `data-for` | `data-for="item in items"`, optionally `key item.id` or `data-key="item.id"` | Repeats the element per list item. A stable key preserves DOM identity during reorder; unkeyed loops retain legacy full rerendering. Inside, item/index locals work in bindings and handlers. **Hand-authored.** |
| `data-component` | `data-component="counter"` | Mounts a component (server‑rendered, then hydrated). See §12. |
| `data-slot` | `<div data-slot="header">…</div>` | Fills a named `<slot name="header">` of a component (see §8). |
Example — a reactive list you write by hand:
@@ -327,7 +327,7 @@ view {
<div data-scope="items: [{t:'a'},{t:'b'}], open: true">
<button @click="open = !open">toggle</button>
<ul data-show="open">
<li data-for="i in items" data-text="i.t"></li>
<li data-for="i in items key i.id" data-text="i.t"></li>
</ul>
</div>
}