gofront 0.0.5 → 0.0.7

package/README.md

@@ -1,13 +1,13 @@
 ## About
 
-I love Go for the backend — simple, type-safe, no nonsense. I like JavaScript for the
-frontend — runs everywhere, no setup. What I don't like is JavaScript's loose typing. And
-I don't like TypeScript either. I know, controversial. It's fine, I just don't enjoy it.
+Go for the backend: simple, type-safe, no nonsense. JavaScript for the frontend: runs
+everywhere, no setup. The problem is JavaScript's loose typing — and TypeScript never
+quite felt like home either.
 
-So I built GoFront. Go syntax, type safety, compiles to plain ES modules. Same language
+So I built GoFront. Go syntax and type safety, compiling to plain ES modules. One language
 front and back, no runtime, no framework, no tsconfig.json.
 
-Is this useful? Probably not, but it was fun to build:D
+Probably not useful. Definitely fun to build.
 
 ```go
 package main
@@ -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
 ```
 
@@ -258,16 +316,18 @@ npm run build:reactive    # → example/reactive/app.js
 gofront <file.go>                compile single file → stdout
 gofront <dir>                    compile all *.go in directory → stdout
 gofront <input> -o out.js        write output to file (prints elapsed compile time e.g. "15ms")
-gofront <input> --check          type-check only
-gofront <input> --watch          watch for changes and recompile
-gofront <input> --source-map     append inline source map to output
-gofront <input> --minify         minify output (built-in minifier)
-gofront <input> --minify --mangle  minify and rename local identifiers
-gofront <file.go> --ast          dump AST (debug)
-gofront <file.go> --tokens       dump tokens (debug)
-gofront init [dir]               scaffold a new project
-gofront --version / -v           print version
-gofront --help / -h              print this help
+gofront <input> --check                    type-check only
+gofront <input> --watch                    watch for changes and recompile
+gofront <input> -o out.js --serve          watch + serve with live reload (default port 3000)
+gofront <input> -o out.js --serve --port 8080  use a custom port
+gofront <input> --source-map               append inline source map (single file or directory; multi-file packages emit per-file mappings)
+gofront <input> --minify                   minify output (built-in minifier)
+gofront <input> --minify --mangle          minify and rename local identifiers
+gofront <file.go> --ast                    dump AST (debug)
+gofront <file.go> --tokens                 dump tokens (debug)
+gofront init [dir]                         scaffold a new project
+gofront --version / -v                     print version
+gofront --help / -h                        print this help
 ```
 
 ---
@@ -365,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 |
@@ -403,16 +464,22 @@ signatures into GoFront's internal type representation.
 
 | Package | Functions |
 |---|---|
-| `fmt` | `Sprintf`, `Printf`, `Println`, `Print`, `Errorf` — 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` |
-| `bytes` | `Contains`, `HasPrefix`, `HasSuffix`, `Index`, `Join`, `Split`, `Replace`, `ToUpper`, `ToLower`, `TrimSpace`, `Equal`, `Count`, `Repeat` |
+| `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` |
 | `errors` | `New`, `Is`, `Unwrap` — custom error types via interface satisfaction |
 | `time` | `Now`, `Since`, `Sleep` + `Millisecond`, `Second`, `Minute`, `Hour` 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` |
 | `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
 
@@ -484,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/)).
 
 ---
 
@@ -494,7 +561,7 @@ Design documents for planned features are organised by release under `docs/v*/`
 npm test
 ```
 
-869 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.5",
+	"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"
 	}
 }