gofront 1.6.1 → 1.8.0

package/README.md

@@ -136,45 +136,41 @@ example/simple/
   app.js          ← generated output
 ```
 
-### Reactive (signals + d.ts imports)
+### Preact (components, hooks + d.ts tuples)
 
-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 entire reactive API surface is typed via a
-hand-written `browser.d.ts` shim and exercised from GoFront source.
+Same app rebuilt with [Preact](https://preactjs.com), using function components and hooks (`useState`, `useEffect`). Demonstrates how GoFront integrates with external JS libraries via `.d.ts` type declarations — TypeScript tuple return signatures (`[T, (v: T) => void]`) map directly to Go multi-value returns, allowing idiomatic Go hook destructuring:
 
-> **Note:** Microtastic is now archived. This example is kept as a reference for
-> `.d.ts` interop with third-party signal libraries. For new projects, use the native
-> `.templ` or `gom` approaches shown below.
+```go
+func TodoItem(p TodoItemProps) VNode {
+    editing, setEditing := useState(false)
+    return h("li", map[string]any{"class": itemClass(p.Todo, editing)}, ...)
+}
+```
 
 ```
-example/reactive/
+example/preact/
   src/
-    types.go      ← Todo, Stats, AppElements structs
-    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
+    types.go      ← Todo, Stats, and props structs
+    components.go ← TodoItem, Header, InputRow, Footer, StatsBar Preact components
+    main.go       ← App root component, async storage load, save, drag-and-drop
     utils/
       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, exposes helpers, imports app.js
+    preact.d.ts   ← VNode · h · render · useState · useEffect · useRef · sleep
+  vendor.js       ← bundled Preact & Preact hooks
+  index.html      ← loads vendor.js, imports app.js
   app.js          ← generated output
 ```
 
-The reactive example covers the full reactive.js API surface:
+The preact example covers:
 
 | 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` |
+| Hyperscript | `h(type, props, ...children)` with variadic and array children |
+| Function components | Pure function components with Go struct props |
+| Hooks | `useState` with tuple destructuring (`state, setState := useState(init)`), `useEffect` |
+| Tuples | Multi-value returns from TypeScript `.d.ts` tuple types |
+| Vendoring | Bundled subpath packages (`preact/hooks`) with named global exports |
+| Typed persistence | `encoding/json` `Marshal`/`Unmarshal` of `[]Todo` to `localStorage`, driven by struct tags |
 
 ### templ (template files + direct DOM codegen)
 
@@ -232,6 +228,7 @@ Key syntax features:
 - `@Component(args)` — call another templ component and mount it as a child
 - `if cond { } else if cond { } else { }` — conditional rendering (arbitrary depth)
 - `for _, v := range slice { }` — loop rendering inside template bodies
+- Go expressions in template bodies are type-checked like the rest of the package
 - `switch expr { case v: ... default: ... }` — switch rendering inside template bodies
 - `@templ.Raw(htmlStr)` — inject raw/trusted HTML (uses `insertAdjacentHTML`)
 - `ref="name"` — capture the element at mount time into an optional `refs map[string]any`
@@ -276,17 +273,15 @@ Key types and functions (all accessed as `gom.*`, no import needed):
 
 ### Features demonstrated
 
-The simple and reactive examples cover: structs & methods, iota constants, named return
+The simple and preact 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]`).
+DOM APIs, and generic utility functions (`Filter[T]`).
 
-The reactive example additionally demonstrates: external `.d.ts` type imports,
-`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 preact example additionally demonstrates: external `.d.ts` type imports,
+TypeScript tuple return mapping to Go multi-value returns (`state, setState := useState(...)`),
+Preact function components with field-only struct props, hooks-driven reactive rendering,
+and npm dependency vendoring (`preact`, `preact/hooks`).
 
 The gom example additionally demonstrates: **the `gom` built-in stdlib package**,
 styles as nodes (`gom.Style` + `gom.MountTo`), `gom.Map` for list rendering, the
@@ -335,11 +330,17 @@ example/hybrid/
 
 ### Build and run
 
+The examples are not committed pre-built. Build them once, then serve an example's
+directory and open it in a browser:
+
 ```sh
 npm run build             # compile all example applications
-# open the respective index.html in a browser
+npx serve example/simple  # then open the printed address
 ```
 
+`example/preact/vendor.js` is the exception: it is committed, and
+`node src/index.js prep example/preact` regenerates it.
+
 ---
 
 ## The Hybrid Architecture: JS + WasmGC
@@ -404,6 +405,7 @@ The compiler analyzes both sides of the boundary and synthesizes a facade into `
 - **Slices & Arrays:** Slices and arrays copy element-wise in both directions; TypedArrays (`Float32Array`, `Int32Array`, etc.) are natively accepted.
 - **Closures & Interfaces:** Function values, callbacks, and named non-empty interfaces cross the boundary transparently.
 - **Shared Linear-Memory Buffers:** `gofront/shared` (`shared.NewFloat32`, etc.) exposes zero-copy TypedArray views over linear memory for bulk per-frame data.
+- **WASM SIMD (`gofront/simd`, experimental):** 4-wide float vector type (`simd.F32x4`) compiling directly to native `v128` instructions with zero GC overhead, including `simd.LoadF32x4`/`StoreF32x4` for direct linear-memory access (about 1.6× faster than a scalar loop on a particle-integration benchmark).
 - **WASM Loader:** The generated JS bundle automatically fetches `app.wasm` relative to `app.js` (`import.meta.url`, customizable via `globalThis.__GOFRONT_WASM_URL` or `globalThis.__GOFRONT_WASM_BYTES`).
 - **WAT Inspection:** Passing `--emit-wat` writes human-readable `app.wat` alongside the binary module.
 - **Binaryen Optimization:** Passing `--release` or `--wasm-opt` optimizes `app.wasm` via Binaryen (`-O3` + GUFA), achieving ~23% smaller binaries and generating `app.wasm.map` source maps.
@@ -452,31 +454,25 @@ For detailed command flags, project configuration (`gofront.json`), multi-file p
 * [Go to JS Mapping](docs/compilation-mapping.md) — what each construct compiles to
 * [Go Compatibility Differences](docs/go-compatibility.md) — where GoFront deliberately differs from Go
 * [Compiler Architecture & Internals](docs/architecture.md) — pipeline stages and source layout
-
----
-
-## Roadmap
-
-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.8/`](docs/v0.0.8/), [`docs/v1.2.0/`](docs/v1.2.0/), [`docs/v1.3.0/`](docs/v1.3.0/), [`docs/v1.6.0/`](docs/v1.6.0/)).
+* [Changelog](CHANGELOG.md) — release history and upgrade notes
 
 ---
 
 ## Tests
 
 ```sh
-npm test                  # unit, zero-alloc perf, and example tests (~1,800+ tests, no browser required)
+npm test                  # unit, zero-alloc perf, and example tests (~2,900 tests, no browser required)
 npm run test:e2e          # E2E browser tests (Playwright, headless Chromium)
-npm run bench             # Möller–Trumbore raycast benchmark comparing pure JS vs hybrid WASM
+npm run bench             # Raycast, JSON, and SIMD particle benchmarks (pure JS vs hybrid WASM)
 ```
 
-**Unit tests** (~1,800+) 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,
+**Unit tests** (~2,900) cover language features, type errors, edge cases, DOM (jsdom),
+external `.d.ts`, npm resolver, TypeScript tuple return signatures, multi-file compilation,
+embedded structs, string formatting, compile-time `encoding/json` serialization with struct tags,
+map iteration order, integer overflow semantics, unused variable detection,
 unused import detection, semantic difference verification, stdlib shim packages, generics,
 the `testing` framework itself, the WasmGC backend and JS↔WASM boundary, `gofront/shared`
-linear-memory buffers, Binaryen optimization, and `.templ` file compilation (element rendering,
+linear-memory buffers, `gofront/simd` vector arithmetic, Binaryen optimization, and `.templ` file compilation (element rendering,
 interpolation, boolean attrs, component calls, scoped `css` declarations with class hashing,
 `if/else/else-if` chains, `for range`, `switch/case/default`, `@templ.Raw()` raw HTML injection,
 SVG namespace handling, mixed `.go`+`.templ` packages).

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "gofront",
-	"version": "1.6.1",
+	"version": "1.8.0",
 	"author": "Luuk van Venrooij",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/seriva/gofront.git"
+		"url": "git+https://github.com/seriva/gofront.git"
 	},
 	"bugs": {
 		"url": "https://github.com/seriva/gofront/issues"
@@ -28,27 +28,31 @@
 	},
 	"type": "module",
 	"files": [
-		"src/"
+		"src/",
+		"stdlib/"
 	],
 	"bin": {
-		"gofront": "./src/index.js"
+		"gofront": "src/index.js"
 	},
 	"scripts": {
-		"build": "node src/index.js example/simple/src -o example/simple/app.js && node src/index.js example/reactive/src -o example/reactive/app.js && node src/index.js example/gom/src -o example/gom/app.js && node src/index.js example/templ/src -o example/templ/app.js && node src/index.js example/webgl/src -o example/webgl/app.js && node src/index.js example/hybrid/src -o example/hybrid/app.js",
-		"test": "node test/unit/run.js && node test/e2e/perf/zero-alloc.js && node src/index.js test --dom example/...",
+		"build": "node scripts/build-examples.js",
+		"test": "node test/unit/run.js && node test/perf/zero-alloc.js && node test/perf/bce-mathx.js && node src/index.js test --dom example/...",
 		"test:e2e": "playwright test",
 		"test:coverage": "c8 --include='src/**' --reporter=text --reporter=lcov node test/unit/run.js",
-		"bench": "node --expose-gc test/e2e/perf/raycast-bench.js",
+		"bench": "node --expose-gc test/perf/raycast-bench.js && node test/perf/json-bench.js && node --expose-gc test/perf/particle-bench.js",
+		"check:layers": "node scripts/check-layers.js",
 		"format": "biome format --write .",
-		"check": "biome check . && sentrux check && sentrux gate && node src/index.js check example/...",
+		"check": "biome check . && node scripts/check-layers.js && sentrux check && sentrux gate && node src/index.js check example/...",
 		"prepare": "lefthook install"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.5.15",
 		"@playwright/test": "^1.63.0",
 		"c8": "^12.0.0",
+		"esbuild": "^0.28.2",
 		"jsdom": "^30.1.2",
 		"lefthook": "^2.1.17",
+		"preact": "^11.0.1",
 		"serve": "^14.2.6"
 	},
 	"optionalDependencies": {