gofront 1.6.1 → 1.7.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)
 
@@ -276,17 +272,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
@@ -404,6 +398,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.
 - **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.
@@ -466,17 +461,18 @@ Design documents for planned features are organised by release under `docs/v*/`
 ## 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 (~1,920+ 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
 ```
 
-**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** (~1,920+) 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.7.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"
@@ -31,10 +31,10 @@
 		"src/"
 	],
 	"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",
+		"build": "node src/index.js example/simple/src -o example/simple/app.js && node src/index.js example/preact/src -o example/preact/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/...",
 		"test:e2e": "playwright test",
 		"test:coverage": "c8 --include='src/**' --reporter=text --reporter=lcov node test/unit/run.js",
@@ -47,11 +47,44 @@
 		"@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": {
 		"binaryen": "^132.0.0"
+	},
+	"gofront": {
+		"vendor": {
+			"dest": "example/preact/vendor.js",
+			"packages": [
+				"preact",
+				"preact/hooks"
+			],
+			"globals": {
+				"preact": "preact",
+				"preact/hooks": [
+					"preact/hooks",
+					"preact_hooks"
+				]
+			},
+			"namedExports": {
+				"preact": [
+					"h",
+					"render",
+					"Component"
+				],
+				"preact/hooks": [
+					"useState",
+					"useEffect",
+					"useRef",
+					"useMemo",
+					"useCallback",
+					"useReducer"
+				]
+			}
+		}
 	}
 }