gofront 0.0.6 → 0.0.8

package/README.md

@@ -101,8 +101,8 @@ Walks the typed AST and emits clean, readable JavaScript. No intermediate repres
 — the codegen writes directly to an output buffer with indentation tracking.
 
 Runtime helpers (`__len`, `__append`, `__s`, `__sprintf`, `__cmul`, `__cdiv`, `__error`,
-`__errorIs`) are tree-shaken: only emitted when actually used. Optional inline source
-maps are supported via VLQ-encoded mappings.
+`__errorIs`, `__timeFmt`, `__timeParse`, `__pathClean`) are tree-shaken: only emitted
+when actually used. Optional inline source maps are supported via VLQ-encoded mappings.
 
 ---
 
@@ -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 |
@@ -405,20 +464,25 @@ signatures into GoFront's internal type representation.
 
 | Package | Functions |
 |---|---|
-| `fmt` | `Sprintf`, `Printf`, `Println`, `Print`, `Errorf`, `Fprintf`, `Fprintln`, `Fprint` — format verbs: `%v`, `%d`, `%s`, `%t`, `%x`, `%o`, `%b`, `%q`, `%e`, `%g`, `%w`, width/precision |
-| `strings` | `Contains`, `HasPrefix`, `HasSuffix`, `Index`, `LastIndex`, `Count`, `Repeat`, `Replace`, `ReplaceAll`, `ToUpper`, `ToLower`, `TrimSpace`, `Trim`, `TrimPrefix`, `TrimSuffix`, `TrimLeft`, `TrimRight`, `Split`, `Join`, `EqualFold`; **`Builder`** type (`WriteString`, `WriteByte`, `WriteRune`, `Write`, `String`, `Len`, `Reset`, `Grow`) |
-| `bytes` | `Contains`, `HasPrefix`, `HasSuffix`, `Index`, `Join`, `Split`, `Replace`, `ToUpper`, `ToLower`, `TrimSpace`, `Equal`, `Count`, `Repeat`; **`Buffer`** type (`WriteString`, `WriteByte`, `Write`, `String`, `Bytes`, `Len`, `Reset`) |
-| `strconv` | `Itoa`, `Atoi`, `FormatBool`, `FormatInt`, `FormatFloat`, `ParseFloat`, `ParseInt`, `ParseBool` |
-| `sort` | `Ints`, `Float64s`, `Strings`, `Slice`, `SliceStable`, `SliceIsSorted` |
-| `math` | `Abs`, `Floor`, `Ceil`, `Round`, `Sqrt`, `Cbrt`, `Pow`, `Log`, `Log2`, `Log10`, trig functions + `Pi`, `E`, `MaxFloat64`, `MaxInt`, `MinInt` |
+| `fmt` | `Sprintf`, `Printf`, `Println`, `Print`, `Errorf`, `Fprintf`, `Fprintln`, `Fprint` — format verbs: `%v`, `%d`, `%s`, `%t`, `%x`, `%o`, `%b`, `%q`, `%e`, `%g`, `%w`, width/precision; **scanning**: `Sscan`, `Sscanln`, `Sscanf` |
+| `strings` | `Contains`, `HasPrefix`, `HasSuffix`, `Index`, `LastIndex`, `Count`, `Repeat`, `Replace`, `ReplaceAll`, `ToUpper`, `ToLower`, `TrimSpace`, `Trim`, `TrimPrefix`, `TrimSuffix`, `TrimLeft`, `TrimRight`, `Split`, `Join`, `EqualFold`, `Fields`, `Cut`, `CutPrefix`, `CutSuffix`, `SplitN`, `SplitAfter`, `SplitAfterN`, `IndexAny`, `LastIndexAny`, `ContainsAny`, `ContainsRune`, `IndexRune`, `IndexByte`, `LastIndexByte`, `Map`, `Title`, `ToTitle`, `TrimFunc`, `TrimLeftFunc`, `TrimRightFunc`, `IndexFunc`, `LastIndexFunc`, `NewReplacer`; **`Builder`** type; **`NewReader`** → reader shim |
+| `bytes` | `Contains`, `HasPrefix`, `HasSuffix`, `Index`, `Join`, `Split`, `Replace`, `ToUpper`, `ToLower`, `TrimSpace`, `Equal`, `Count`, `Repeat`, `ReplaceAll`, `TrimPrefix`, `TrimSuffix`, `TrimLeft`, `TrimRight`, `TrimFunc`, `IndexByte`, `LastIndex`, `LastIndexByte`, `Fields`, `Cut`, `ContainsAny`, `ContainsRune`, `Map`, `SplitN`; **`Buffer`** type; **`NewReader`** → reader shim |
+| `strconv` | `Itoa`, `Atoi`, `FormatBool`, `FormatInt`, `FormatFloat`, `ParseFloat`, `ParseInt`, `ParseBool`, `Quote`, `Unquote`, `AppendInt`, `AppendFloat` |
+| `sort` | `Ints`, `Float64s`, `Strings`, `Slice`, `SliceStable`, `SliceIsSorted`, `Search`, `IntsAreSorted`, `Float64sAreSorted`, `StringsAreSorted` |
+| `math` | `Abs`, `Floor`, `Ceil`, `Round`, `Sqrt`, `Cbrt`, `Pow`, `Log`, `Log2`, `Log10`, `Sin`, `Cos`, `Tan`, `Atan`, `Atan2`, `Asin`, `Acos`, `Exp`, `Exp2`, `Trunc`, `Hypot`, `Signbit`, `Copysign`, `Dim`, `Remainder`, `Min`, `Max`, `Mod`, `Inf`, `IsNaN`, `IsInf`, `NaN` + `Pi`, `E`, `MaxFloat64`, `SmallestNonzeroFloat64`, `MaxInt`, `MinInt` |
+| `math/rand` | `Intn`, `Float64`, `Float32`, `Int`, `Int63`, `Int63n`, `Int31`, `Int31n`, `Seed` (no-op), `Shuffle`, `Perm` |
 | `errors` | `New`, `Is`, `Unwrap` — custom error types via interface satisfaction |
-| `time` | `Now`, `Since`, `Sleep` + `Millisecond`, `Second`, `Minute`, `Hour` constants |
+| `time` | `Now` → `time.Time`, `Since`, `Sleep`, `Parse`, `Unix`, `Date`; **`time.Time`** methods: `Format`, `String`, `Year`, `Month`, `Day`, `Hour`, `Minute`, `Second`, `Weekday`, `Unix`, `UnixMilli`, `Add`, `Sub`, `Before`, `After`, `Equal`; layout constants: `RFC3339`, `RFC3339Nano`, `DateOnly`, `TimeOnly`, `DateTime`; duration constants: `Millisecond`, `Second`, `Minute`, `Hour`; month/weekday constants |
 | `html` | `EscapeString`, `UnescapeString` |
 | `maps` | `Keys`, `Values`, `Clone`, `Copy`, `Equal`, `EqualFunc`, `Delete`, `DeleteFunc` |
 | `slices` | `Contains`, `Index`, `Equal`, `Compare`, `Sort`, `SortFunc`, `SortStableFunc`, `IsSorted`, `IsSortedFunc`, `Reverse`, `Max`, `Min`, `MaxFunc`, `MinFunc`, `Clone`, `Compact`, `CompactFunc`, `Concat`, `Delete`, `DeleteFunc`, `Insert`, `Replace`, `Grow`, `Clip` |
 | `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` |
+| `unicode/utf8` | `RuneCountInString`, `RuneLen`, `ValidString`, `ValidRune`, `DecodeRuneInString`, `DecodeLastRuneInString`, `FullRuneInString`; constants `RuneError`, `MaxRune`, `UTFMax` |
+| `path` | `Base`, `Dir`, `Ext`, `Join`, `Clean`, `IsAbs`, `Split`, `Match`; `"path/filepath"` is an alias |
 | `os` | `Exit`, `Args`, `Getenv` |
+| `io` | `Writer`, `Reader`, `ReadWriter`, `Closer` interface types; `ReadAll`, `EOF`, `Discard`, `WriteString` |
+| `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,18 +554,25 @@ 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/)).
 
 ---
 
 ## Tests
 
 ```sh
-npm test
+npm run test:unit   # unit tests only (~1076 tests, no browser required)
+npm run test:e2e    # E2E tests (Playwright, headless Chromium)
+npm test            # both
 ```
 
-940 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,
-inference, constraints), and both example apps.
+**Unit tests** (1076) cover 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, and
+generics.
+
+**E2E tests** (74, Playwright) run all three example apps in a real browser and verify
+CRUD, filtering, priority mode, persistence (reload), drag-and-drop reordering, and sync
+status. Per-app suites check app-specific behaviour: scoped styles, stats bar, loading
+placeholder, and `gom.If` conditional rendering.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gofront",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"author": "Luuk van Venrooij",
 	"license": "MIT",
 	"repository": {
@@ -33,12 +33,19 @@
 	"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": "npm run test:unit && npm run test:e2e",
+		"test:unit": "node test/unit/run.js",
+		"test:e2e": "playwright test",
 		"format": "biome format --write .",
-		"check": "biome check ."
+		"check": "biome check . && node src/index.js example/simple/src --check && node src/index.js example/reactive/src --check && node src/index.js example/gom/src --check",
+		"prepare": "husky"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.4.11",
-		"jsdom": "^29.0.2"
+		"@biomejs/biome": "^2.4.12",
+		"@playwright/test": "^1.59.1",
+		"husky": "^9.1.7",
+		"jsdom": "^29.0.2",
+		"serve": "^14.2.6"
 	}
 }