gofront 0.0.6 → 0.0.7

package/README.md

@@ -184,7 +184,7 @@ The type checker enforces correctness; JavaScript doesn't need to know.
 
 ## Examples — Todo App
 
-There are two example apps — both implement the same todo app to show different aspects
+There are three example apps — all implement the same todo app to show different aspects
 of GoFront.
 
 ### Simple (vanilla DOM)
@@ -202,7 +202,7 @@ example/simple/
     styles.go     ← injectStyles() creates <style> element with all CSS
     main.go       ← createApp() builds DOM shell · setupEvents() · event delegation
     utils/
-      utils.go    ← Plural() · generic Filter/Map — cross-package import demo
+      utils.go    ← Plural() · generic Filter — cross-package import demo
     browser.d.ts  ← minimal external type declarations (sleep)
   index.html      ← bare HTML shell, loads app.js as ES module
   app.js          ← generated output
@@ -212,41 +212,99 @@ example/simple/
 
 Same app rebuilt with [reactive.js](https://github.com/seriva/microtastic), a tiny
 signals-based reactive framework. Demonstrates how GoFront integrates with external JS
-libraries via `.d.ts` type declarations — the GoFront code uses typed `Signal` values,
-`Signals.create()`, `Signals.computed()`, `Signals.batch()`, and `Reactive.bind()`,
-all described in a hand-written `browser.d.ts` shim.
+libraries via `.d.ts` type declarations — the entire reactive API surface is typed via a
+hand-written `browser.d.ts` shim and exercised from GoFront source.
 
 ```
 example/reactive/
   src/
     types.go      ← Todo, Stats, AppElements structs
-    store.go      ← Signal-typed state · Signals.create/computed/batch
-    render.go     ← createAppShell() returns AppElements · ctx.computed/ctx.bind
-    styles.go     ← injectStyles()
-    main.go       ← wires everything together
+    store.go      ← reactive state: Signals.create/computed/computedAsync/batch/update
+    render.go     ← Reactive.Component lifecycle · ctx.bind* · setupStatsBar
+    styles.go     ← per-section cssClass() scoped styles
+    main.go       ← async boot, Reactive.mount loading placeholder, signal.subscribe/once
     utils/
-      utils.go    ← Plural() · generic Filter/Map
-    browser.d.ts  ← Signal interface · Signals/Reactive/ComponentContext namespaces
+      utils.go    ← Plural() · generic Filter
+    browser.d.ts  ← Signal · ComponentContext · Signals/Reactive namespaces · htmlTag
   reactive.js     ← signals framework (from microtastic)
-  index.html      ← loads reactive.js + app.js
+  index.html      ← loads reactive.js, exposes helpers, imports app.js
   app.js          ← generated output
 ```
 
+The reactive example covers the full reactive.js API surface:
+
+| Category | Features used |
+|---|---|
+| HTML helpers | `html` tagged template (via `htmlTag`), `trusted`, `join` |
+| CSS | `cssClass` scoped styles with nested `&` selectors |
+| Signals | `create`, `computed`, `computedAsync`, `batch`, `get`, `peek`, `set`, `update`, `subscribe`, `once` |
+| Reactive namespace | `mount` (loading placeholder), `createComponent`, `scan` |
+| Component context | `bind`, `bindAttr`, `bindBoolAttr`, `bindClass`, `bindText`, `bindStyle`, `bindMultiple`, `computed` |
+| Component lifecycle | `state`, `template`, `styles`, `mount`, `mountTo`, `appendTo`, `refs` (via `data-ref`) |
+| Component instance | `signal`, `effect`, `on` (auto-cleanup event listeners) |
+| Scan attributes | `data-model`, `data-text`, `data-html`, `data-if`, `data-visible`, `data-class-*`, `data-attr-*`, `data-bool-*`, `data-on-*`, `data-ref` |
+
+### gom (stdlib component library + todo app)
+
+Browser-native declarative DOM components inspired by
+[gomponents](https://www.gomponents.com). `gom` is a **built-in stdlib package** — no
+import path needed, available in every GoFront program just like `fmt` or `strings`. It
+uses **methods on named non-struct types** so that plain functions and slices can satisfy
+the `Node` interface without any struct boilerplate.
+
+```
+example/gom/
+  src/
+    types.go  ← Todo struct, filter/priority constants
+    store.go  ← state, mutations, localStorage persistence
+    render.go ← gom node builders (pure node tree, no innerHTML)
+    styles.go ← appStyles() CSS string
+    main.go   ← event setup, submitInput, entry point
+    utils/    ← Filter[T], Plural, HasText
+  app.js      ← generated output
+  index.html  ← HTML shell
+```
+
+Key types and functions (all accessed as `gom.*`, no import needed):
+- `gom.Node` — interface with a single `Mount(parent any)` method
+- `gom.NodeFunc` — `type NodeFunc func(parent any)` with `Mount` method; any function becomes a `Node`
+- `gom.Group` — `type Group []Node` with `Mount` method; composes children in order
+- `gom.El(tag, children...)` — creates an element node
+- `gom.Text(s)` — creates a text node
+- `gom.Attr(name, val)` — generic attribute node; named shortcuts: `gom.Class`, `gom.Href`, `gom.Type`, etc.
+- `gom.If(cond, node)` — conditionally renders a node
+- `gom.Map(slice, fn)` — maps a slice to a `Group` of nodes
+- `gom.Style(css)` — returns a `Node` that injects a `<style>` element; styles are part of the node tree
+- `gom.Mount(selector, n)` — mounts a node into the DOM, replacing the element's content
+- `gom.MountTo(selector, n)` — appends a node without clearing; used to inject styles into `<head>`
+- HTML element helpers: `gom.Div`, `gom.Span`, `gom.Button`, `gom.Input`, `gom.Ul`, `gom.Li`, … (full HTML element set)
+
 ### Features demonstrated
 
-Both apps cover: structs & methods, iota constants, named return values, closures,
-slices, `for range`, `switch`, cross-package imports, multi-file same-package compilation,
-`async`/`await`, `defer`/`recover`, localStorage persistence, DOM APIs, and generic
-utility functions (`Filter[T]`, `Map[T, U]`).
+The simple and reactive examples cover: structs & methods, iota constants, named return
+values, closures, slices, `for range`, `switch`, cross-package imports, multi-file
+same-package compilation, `async`/`await`, `defer`/`recover`, localStorage persistence,
+DOM APIs, and generic utility functions (`Filter[T]`, `Map[T, U]`).
 
 The reactive example additionally demonstrates: external `.d.ts` type imports,
-`declare namespace` patterns for typing JS libraries, and reactive UI updates via signals.
+`declare namespace` patterns for typing JS libraries, the full reactive signal graph
+(source signals → computed signals → async computed → DOM bindings), reactive UI with
+no `querySelector` or `getElementById` in application code, and `Reactive.Component`
+as the primary composition unit (state, template, styles, mount lifecycle, `data-ref`
+element refs, auto-cleanup event listeners).
+
+The gom example additionally demonstrates: **the `gom` built-in stdlib package**,
+styles as nodes (`gom.Style` + `gom.MountTo`), `gom.Map` for list rendering, the
+declarative node-tree pattern (no `innerHTML`, no `querySelector`), and full feature
+parity with the other examples (priority mode, validation, localStorage persistence,
+sync status, drag-and-drop reordering).
 
 ### Build and run
 
 ```sh
 npm run build:simple      # → example/simple/app.js
 npm run build:reactive    # → example/reactive/app.js
+npm run build:gom         # → example/gom/app.js
 # open the respective index.html in a browser
 ```
 
@@ -367,6 +425,7 @@ signatures into GoFront's internal type representation.
 | `error` type | ✓ — interface `{ Error() string }`; custom error types, `errors.Is`/`Unwrap`, `%w` wrapping |
 | Complex numbers (`complex64`, `complex128`, `3i`) | ✓ — `complex()`, `real()`, `imag()` builtins; `__cmul`/`__cdiv` helpers |
 | Type definitions, type aliases (`type A = B`) | ✓ |
+| Methods on named non-struct types | ✓ — `type T func(...)` or `type T []E` with methods; emitted as ES6 wrapper classes; satisfies interfaces |
 | Type conversions, type assertions (plain & comma-ok) | ✓ |
 | Type switch (`switch v := x.(type)`) | ✓ — compiles to `if/else if` with `typeof` / `instanceof` |
 | Sized integers (`int8`–`int64`, `uint8`–`uint64`, `float32`) | ✓ — mapped to `number` at runtime |
@@ -419,6 +478,8 @@ signatures into GoFront's internal type representation.
 | `regexp` | `MustCompile`, `Compile`, `MatchString`, `QuoteMeta`; **`*Regexp`** methods: `MatchString`, `FindString`, `FindStringIndex`, `FindAllString`, `FindStringSubmatch`, `FindAllStringSubmatch`, `ReplaceAllString`, `ReplaceAllLiteralString`, `Split`, `String`. Inline flags (`(?i)`, `(?m)`, `(?s)`) are extracted automatically into the JS `RegExp` constructor. |
 | `unicode` | `IsLetter`, `IsDigit`, `IsSpace`, `IsUpper`, `IsLower`, `IsPunct`, `IsControl`, `IsPrint`, `IsGraphic`, `ToUpper`, `ToLower` |
 | `os` | `Exit`, `Args`, `Getenv` |
+| `io` | `Writer`, `Reader`, `ReadWriter`, `Closer` interface types — used for accepting `*strings.Builder`, `*bytes.Buffer`, or any compatible writer/reader |
+| `gom` | Browser-native declarative DOM component library. **Types**: `Node` (interface), `NodeFunc`, `Group`. **Core**: `El(tag, children...)`, `Text(s)`, `Mount(sel, node)`, `MountTo(sel, node)`. **Attributes**: `Attr`, `Class`, `Href`, `Type`, `Src`, `Placeholder`, `DataAttr`, `Style`, `For`, `Name`, `Value`, `Target`, `Rel`, `Alt`, `Title`, `Draggable`, `Role`, `AriaLabel`, `StyleAttr`; boolean: `Disabled`, `Checked`, `Selected`, `Readonly`. **Logic**: `If(cond, node)`, `Map(slice, fn)`. **Elements**: full HTML element set (`Div`, `Span`, `Button`, `Input`, `Ul`, `Li`, `Table`, `Form`, `Img`, `A`, `H1`–`H6`, …) |
 
 ### Packages & imports
 
@@ -490,7 +551,7 @@ you know exactly what to expect.
 
 See [`docs/ROADMAP.md`](docs/ROADMAP.md) for the full roadmap and release history.
 Design documents for planned features are organised by release under `docs/v*/`
-(e.g. [`docs/v0.0.5/`](docs/v0.0.5/)).
+(e.g. [`docs/v0.0.8/`](docs/v0.0.8/), [`docs/v0.0.9/`](docs/v0.0.9/)).
 
 ---
 
@@ -500,7 +561,7 @@ Design documents for planned features are organised by release under `docs/v*/`
 npm test
 ```
 
-940 tests covering language features, type errors, edge cases, DOM (jsdom), external
+990 tests covering language features, type errors, edge cases, DOM (jsdom), external
 `.d.ts`, npm resolver, multi-file compilation, embedded structs, string formatting, map
 iteration order, integer overflow semantics, unused variable detection, unused import
 detection, semantic difference verification, stdlib shim packages, generics (type params,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gofront",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"author": "Luuk van Venrooij",
 	"license": "MIT",
 	"repository": {
@@ -33,12 +33,15 @@
 	"scripts": {
 		"build:simple": "node src/index.js example/simple/src -o example/simple/app.js",
 		"build:reactive": "node src/index.js example/reactive/src -o example/reactive/app.js",
-		"test": "node test/run.js",
+		"build:gom": "node src/index.js example/gom/src -o example/gom/app.js",
+		"test": "node test/unit/run.js",
 		"format": "biome format --write .",
-		"check": "biome check ."
+		"check": "biome check .",
+		"prepare": "husky"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.4.11",
+		"@biomejs/biome": "^2.4.12",
+		"husky": "^9.1.7",
 		"jsdom": "^29.0.2"
 	}
 }

package/src/codegen/expressions.js

@@ -147,6 +147,15 @@ export const expressionGenMethods = {
 							return "Number.MIN_SAFE_INTEGER";
 					}
 				}
+				// io constants
+				if (expr.expr.kind === "Ident" && expr.expr.name === "io") {
+					switch (expr.field) {
+						case "EOF":
+							return '"EOF"';
+						case "Discard":
+							return "{ WriteString(s) { return s.length; }, Write(b) { return b.length; } }";
+					}
+				}
 				// os constants/vars
 				if (expr.expr.kind === "Ident" && expr.expr.name === "os") {
 					switch (expr.field) {
@@ -184,7 +193,11 @@ export const expressionGenMethods = {
 			}
 
 			case "IndexExpr": {
-				const base = this.genExpr(expr.expr);
+				const exprType = expr.expr._type;
+				const wrapField = this._namedWrapperField(exprType, expr.expr);
+				const base = wrapField
+					? `${this.genExpr(expr.expr)}.${wrapField}`
+					: this.genExpr(expr.expr);
 				const idx = this.genExpr(expr.index);
 				if (expr._mapValueType && !expr._lvalue) {
 					const zero = this.zeroValueForType(expr._mapValueType);
@@ -196,7 +209,6 @@ export const expressionGenMethods = {
 					return `(${base}[${idx}] ?? ${zero})`;
 				}
 				// String indexing returns a byte (charCodeAt), not a JS character
-				const exprType = expr.expr._type;
 				const isStr =
 					(exprType?.kind === "basic" && exprType.name === "string") ||
 					(exprType?.kind === "untyped" && exprType.base === "string");
@@ -212,6 +224,7 @@ export const expressionGenMethods = {
 				const hi = expr.high ? this.genExpr(expr.high) : "";
 				if (!lo && !hi) return `${base}.slice()`;
 				if (!hi) return `${base}.slice(${lo})`;
+				if (!lo) return `${base}.slice(0, ${hi})`;
 				return `${base}.slice(${lo}, ${hi})`;
 			}
 
@@ -284,6 +297,10 @@ export const expressionGenMethods = {
 					this._usesError = true;
 					return `__error(${inner})`;
 				}
+				// Named wrapper type: NodeFunc(fn) → new NodeFunc(fn)
+				if (target && this.namedWrapperNames.has(target)) {
+					return `new ${target}(${inner})`;
+				}
 				switch (target) {
 					case "string": {
 						// Go string(65) → "A" (Unicode code point), not "65"
@@ -339,6 +356,16 @@ export const expressionGenMethods = {
 	},
 
 	genCall(expr) {
+		// Named type constructor call: Greeter(fn), NodeFunc(fn) → new Greeter(fn)
+		if (expr._isTypeConversion) {
+			const name = expr._conversionTargetType?.name;
+			const arg = this.genExpr(expr.args[0]);
+			if (name && this.namedWrapperNames.has(name)) {
+				return `new ${name}(${arg})`;
+			}
+			return arg; // non-wrapper named types: identity
+		}
+
 		// Unwrap InstantiationExpr for function calls: Foo[int](42) → Foo(42)
 		const funcExpr =
 			expr.func.kind === "InstantiationExpr" ? expr.func.expr : expr.func;
@@ -351,6 +378,10 @@ export const expressionGenMethods = {
 					if (expr._constLen != null) return String(expr._constLen);
 					const arg = expr.args[0];
 					const t = arg?._type;
+					const wrapField = this._namedWrapperField(t, arg);
+					if (wrapField) {
+						return `${this.genExpr(arg)}.${wrapField}.length`;
+					}
 					const js = this.genExpr(arg);
 					if (t?.kind === "map") return `Object.keys(${js}).length`;
 					this._usesLen = true;
@@ -472,6 +503,18 @@ export const expressionGenMethods = {
 	},
 
 	genAppend(expr) {
+		const retType = expr._type;
+		const wrapField = this._namedWrapperField(retType, expr.args[0]);
+		if (wrapField) {
+			// Named slice wrapper: append(g, x) → new G(__append(g._items, x))
+			const sliceJS = `${this.genExpr(expr.args[0])}.${wrapField}`;
+			const elems = expr.args
+				.slice(1)
+				.map((a) => (a._spread ? `...${this.genExpr(a)}` : this.genExpr(a)));
+			if (elems.length === 0) return this.genExpr(expr.args[0]);
+			this._usesAppend = true;
+			return `new ${retType.name}(__append(${sliceJS}, ${elems.join(", ")}))`;
+		}
 		const slice = this.genExpr(expr.args[0]);
 		const elems = expr.args
 			.slice(1)
@@ -556,6 +599,34 @@ export const expressionGenMethods = {
 			return `new ${typeName}({ ${this._genStructFields(expr.elems)} })`;
 		}
 
+		// Named wrapper type: Group{a, b} → new Group([a, b])
+		if (typeName && this.namedWrapperNames.has(typeName)) {
+			const namedType = this.checker?.types.get(typeName);
+			const u = namedType?.underlying;
+			if (u?.kind === "map") {
+				const entries = expr.elems
+					.map((e) => {
+						if (e.kind === "KeyValueExpr") {
+							const k =
+								e.key.litKind === "STRING"
+									? JSON.stringify(e.key.value)
+									: `[${this.genExpr(e.key)}]`;
+							return `${k}: ${this.genExpr(e.value)}`;
+						}
+						return this.genExpr(e);
+					})
+					.join(", ");
+				return `new ${typeName}({ ${entries} })`;
+			}
+			// Default: slice
+			const elems = expr.elems
+				.map((e) =>
+					e.kind === "KeyValueExpr" ? this.genExpr(e.value) : this.genExpr(e),
+				)
+				.join(", ");
+			return `new ${typeName}([${elems}])`;
+		}
+
 		// Fallback: named type that's not a struct but has positional elements → treat as struct
 		if (expr.elems.some((e) => e._positionalField)) {
 			if (typeName) {
@@ -617,7 +688,8 @@ export const expressionGenMethods = {
 		if (typeNode.kind === "Ident") return typeNode.name;
 		if (typeNode.kind === "InstantiationExpr")
 			return this.getTypeName(typeNode.expr);
-		if (typeNode.kind === "SelectorExpr") return typeNode.field;
+		if (typeNode.kind === "SelectorExpr")
+			return `${this.getTypeName(typeNode.expr)}.${typeNode.field}`;
 		return null;
 	},
 
@@ -1002,6 +1074,32 @@ export const expressionGenMethods = {
 		return undefined;
 	},
 
+	_genIo(fn, _a, expr) {
+		switch (fn) {
+			case "WriteString": {
+				const writerArg = expr.args[0];
+				const writerType = writerArg._type;
+				const typeName =
+					writerType?.name ??
+					(writerType?.kind === "pointer" ? writerType.base?.name : null);
+				const w = this.genExpr(writerArg);
+				const s = this.genExpr(expr.args[1]);
+				const isPtr = writerType?.kind === "pointer";
+				const base = isPtr ? `${w}.value` : w;
+				if (typeName === "strings.Builder") {
+					return `((b,s) => { b._buf += s; return [s.length, null]; })(${base}, ${s})`;
+				}
+				if (typeName === "bytes.Buffer") {
+					return `((b,s) => { b._buf.push(...new TextEncoder().encode(s)); return [s.length, null]; })(${base}, ${s})`;
+				}
+				// Generic: auto-dereference pointer, then dispatch on concrete writer type.
+				// strings.Builder has { _buf: string }, bytes.Buffer has { _buf: [] }.
+				return `((b,s) => { const w = b?.value ?? b; if (typeof w.WriteString === "function") return [w.WriteString(s), null]; if (typeof w._buf === "string") { w._buf += s; return [s.length, null]; } if (Array.isArray(w._buf)) { w._buf.push(...new TextEncoder().encode(s)); return [s.length, null]; } return [0, "io.WriteString: unsupported writer"]; })(${w}, ${s})`;
+			}
+		}
+		return undefined;
+	},
+
 	_genHtml(fn, a) {
 		switch (fn) {
 			case "EscapeString": {
@@ -1102,11 +1200,162 @@ export const expressionGenMethods = {
 				return this._genMaps(fn, a);
 			case "html":
 				return this._genHtml(fn, a);
+			case "io":
+				return this._genIo(fn, a, expr);
+			case "gom":
+				return this._genGom(fn, expr);
 			default:
 				return undefined;
 		}
 	},
 
+	_genGom(fn, expr) {
+		const a = () =>
+			expr.args.map((e) =>
+				e._spread ? `...${this.genExpr(e)}` : this.genExpr(e),
+			);
+		const elementTags = {
+			Div: "div",
+			Section: "section",
+			Article: "article",
+			Aside: "aside",
+			Header: "header",
+			Footer: "footer",
+			Main: "main",
+			Nav: "nav",
+			Figure: "figure",
+			H1: "h1",
+			H2: "h2",
+			H3: "h3",
+			H4: "h4",
+			H5: "h5",
+			H6: "h6",
+			Span: "span",
+			A: "a",
+			Strong: "strong",
+			Em: "em",
+			Code: "code",
+			Pre: "pre",
+			Small: "small",
+			Mark: "mark",
+			P: "p",
+			Br: "br",
+			Hr: "hr",
+			Ul: "ul",
+			Ol: "ol",
+			Li: "li",
+			Dl: "dl",
+			Dt: "dt",
+			Dd: "dd",
+			Form: "form",
+			Input: "input",
+			Button: "button",
+			Textarea: "textarea",
+			Select: "select",
+			Option: "option",
+			Label: "label",
+			Fieldset: "fieldset",
+			Legend: "legend",
+			Img: "img",
+			Video: "video",
+			Audio: "audio",
+			Canvas: "canvas",
+			Table: "table",
+			Thead: "thead",
+			Tbody: "tbody",
+			Tfoot: "tfoot",
+			Tr: "tr",
+			Th: "th",
+			Td: "td",
+		};
+		if (elementTags[fn]) {
+			const tag = elementTags[fn];
+			const args = a();
+			if (args.length === 0)
+				return `(()=>({Mount(p){const e=document.createElement("${tag}");p.appendChild(e);}}))()`;
+			return (
+				`((...c)=>({Mount(p){const e=document.createElement("${tag}");c.forEach(n=>n?.Mount?.(e));p.appendChild(e);}}))` +
+				`(${args.join(",")})`
+			);
+		}
+		const attrHelpers = {
+			For: "for",
+			Name: "name",
+			Value: "value",
+			Target: "target",
+			Rel: "rel",
+			Alt: "alt",
+			Title: "title",
+			Lang: "lang",
+			Action: "action",
+			Method: "method",
+			AutoComplete: "autocomplete",
+			Draggable: "draggable",
+			Role: "role",
+			StyleAttr: "style",
+		};
+		if (attrHelpers[fn]) {
+			const [v] = a();
+			return `((v)=>({Mount(e){e.setAttribute("${attrHelpers[fn]}",v)}}))(${v})`;
+		}
+		if (fn === "AriaLabel") {
+			const [v] = a();
+			return `((v)=>({Mount(e){e.setAttribute("aria-label",v)}}))(${v})`;
+		}
+		const boolAttrs = {
+			Disabled: "disabled",
+			Checked: "checked",
+			Selected: "selected",
+			Readonly: "readonly",
+		};
+		if (boolAttrs[fn])
+			return `({Mount(e){e.setAttribute("${boolAttrs[fn]}","")}})`;
+
+		const args = a();
+		switch (fn) {
+			case "El": {
+				const [tag, ...children] = args;
+				if (children.length === 0)
+					return `((t)=>({Mount(p){const e=document.createElement(t);p.appendChild(e);}})) (${tag})`;
+				return (
+					`((t,...c)=>({Mount(p){const e=document.createElement(t);c.forEach(n=>n?.Mount?.(e));p.appendChild(e);}}))` +
+					`(${tag},${children.join(",")})`
+				);
+			}
+			case "Text": {
+				const [s] = args;
+				return `((s)=>({Mount(p){p.appendChild(document.createTextNode(s))}}))(${s})`;
+			}
+			case "Attr": {
+				const [name, value] = args;
+				return `((n,v)=>({Mount(e){e.setAttribute(n,v)}}))(${name},${value})`;
+			}
+			case "Class":
+				return `((v)=>({Mount(e){e.className=v}}))(${args[0]})`;
+			case "Type":
+				return `((v)=>({Mount(e){e.type=v}}))(${args[0]})`;
+			case "Href":
+				return `((v)=>({Mount(e){e.href=v}}))(${args[0]})`;
+			case "Src":
+				return `((v)=>({Mount(e){e.src=v}}))(${args[0]})`;
+			case "Placeholder":
+				return `((v)=>({Mount(e){e.placeholder=v}}))(${args[0]})`;
+			case "DataAttr":
+				return `((k,v)=>({Mount(e){e.setAttribute("data-"+k,v)}}))(${args[0]},${args[1]})`;
+			case "If":
+				return `((c,n)=>c?n:{Mount(){}})(${args[0]},${args[1]})`;
+			case "Map":
+				return `((s,f)=>{const c=s.map(f);return{_items:c,Mount(p){c.forEach(n=>n.Mount(p))}}})(${args[0]},${args[1]})`;
+			case "Style":
+				return `((s)=>({Mount(p){const e=document.createElement("style");e.textContent=s;p.appendChild(e);}})) (${args[0]})`;
+			case "Mount":
+				return `((sel,n)=>{const e=document.querySelector(sel);e.innerHTML="";n.Mount(e)})(${args[0]},${args[1]})`;
+			case "MountTo":
+				return `((sel,n)=>{const e=document.querySelector(sel);n.Mount(e)})(${args[0]},${args[1]})`;
+		}
+		return undefined;
+	},
+
 	_genFmt(fn, _a, expr) {
 		const fmtArgs = expr.args.map((e) => this.genExpr(e)).join(", ");
 		switch (fn) {

package/src/codegen/statements.js

@@ -7,6 +7,30 @@ export const statementGenMethods = {
 		for (const stmt of block.stmts) this.genStmt(stmt);
 	},
 
+	// Shared helper for comma-ok map index in both DefineStmt and AssignStmt.
+	// isDefine=true  → emit `let v = m[k]; let ok = k in m;`
+	// isDefine=false → emit `v = k in m ? m[k] : zero; ok = k in m;`
+	_genCommaOkMapIndex(stmt, rhsNode, isDefine) {
+		const mapExpr = this.genExpr(rhsNode.expr);
+		const keyExpr = this.genExpr(rhsNode.index);
+		const [vName, okName] = stmt.lhs.map((e) => e.name ?? this.genExpr(e));
+		const decl = isDefine ? "let " : "";
+		if (vName !== "_") {
+			if (isDefine) {
+				this.line(`let ${vName} = ${mapExpr}[${keyExpr}];`);
+			} else {
+				const zero = rhsNode._mapValueType
+					? this.zeroValueForType(rhsNode._mapValueType)
+					: "undefined";
+				this.line(
+					`${vName} = (${keyExpr}) in ${mapExpr} ? ${mapExpr}[${keyExpr}] : ${zero};`,
+				);
+			}
+		}
+		if (okName !== "_")
+			this.line(`${decl}${okName} = (${keyExpr}) in ${mapExpr};`);
+	},
+
 	genStmt(stmt) {
 		// Record source mapping for the first line this statement produces
 		const srcLine = stmt._line ?? null;
@@ -31,15 +55,7 @@ export const statementGenMethods = {
 					rhsNode?.kind === "IndexExpr" &&
 					rhsNode.expr?._type?.kind === "map"
 				) {
-					const mapExpr = this.genExpr(rhsNode.expr);
-					const keyExpr = this.genExpr(rhsNode.index);
-					const [vName, okName] = stmt.lhs.map(
-						(e) => e.name ?? this.genExpr(e),
-					);
-					if (vName !== "_")
-						this.line(`let ${vName} = ${mapExpr}[${keyExpr}];`);
-					if (okName !== "_")
-						this.line(`let ${okName} = (${keyExpr}) in ${mapExpr};`);
+					this._genCommaOkMapIndex(stmt, rhsNode, true);
 					break;
 				}
 				const rhs = stmt.rhs.map((e) => this.genExpr(e));
@@ -117,22 +133,7 @@ export const statementGenMethods = {
 				}
 				// comma-ok map index: v, ok = m["key"]
 				if (stmt._commaOkMap) {
-					const rhsNode = stmt.rhs[0];
-					const mapExpr = this.genExpr(rhsNode.expr);
-					const keyExpr = this.genExpr(rhsNode.index);
-					const [vName, okName] = stmt.lhs.map(
-						(e) => e.name ?? this.genExpr(e),
-					);
-					if (vName !== "_") {
-						const zero = rhsNode._mapValueType
-							? this.zeroValueForType(rhsNode._mapValueType)
-							: "undefined";
-						this.line(
-							`${vName} = (${keyExpr}) in ${mapExpr} ? ${mapExpr}[${keyExpr}] : ${zero};`,
-						);
-					}
-					if (okName !== "_")
-						this.line(`${okName} = (${keyExpr}) in ${mapExpr};`);
+					this._genCommaOkMapIndex(stmt, stmt.rhs[0], false);
 					break;
 				}
 				// comma-ok type assertion: v, ok = x.(T)
@@ -383,8 +384,11 @@ export const statementGenMethods = {
 		const init = stmt.init;
 		const range = init.rhs[0];
 		const lhs = init.lhs.map((e) => e.name ?? this.genExpr(e));
-		const iteree = this.genExpr(range.expr);
 		const iterType = range.expr._type;
+		const wrapField = this._namedWrapperField(iterType, range.expr);
+		const iteree = wrapField
+			? `${this.genExpr(range.expr)}.${wrapField}`
+			: this.genExpr(range.expr);
 
 		let iterExpr;
 		if (