test+docs: full-app browser integration test and the isomorphic counter example

The integration test runs the counter through the real browser path in happy-dom: start(), store events, raf-batched morph, DOM click handlers, emit coalescing. examples/counter is the Phase 2 exit criterion: one app module mounted zero-build in a browser via import map and string-rendered by node examples/counter/render.js. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd
2026-09-08 16:56:54 +02:00
parent c696e00d4f
commit 870aa79668
5 changed files with 152 additions and 5 deletions
@@ -0,0 +1,35 @@
+// The classic choo counter. This one module is the whole app, and both
+// sides consume it: the browser mounts it (import map resolves
+// @choojs/html to the DOM renderer), Node stringifies it (same specifier
+// resolves to the string renderer). That's the isomorphic contract.
+
+import choo from '@choojs/core'
+import html from '@choojs/html'
+
+export default function createApp () {
+  const app = choo()
+  app.use(countStore)
+  app.route('/', mainView)
+  return app
+}
+
+function mainView (state, emit) {
+  return html`
+    <body>
+      <h1>count is ${state.count}</h1>
+      <button onclick=${onclick}>Increment</button>
+    </body>
+  `
+
+  function onclick () {
+    emit('increment', 1)
+  }
+}
+
+function countStore (state, emitter) {
+  state.count = state.count || 0
+  emitter.on('increment', function (count) {
+    state.count += count
+    emitter.emit('render')
+  })
+}
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>choo v8 counter — zero build</title>
+  <!--
+    No bundler, no compiler, no node_modules in the browser: an import map
+    and native ES modules. Serve this directory from the repo root, e.g.
+      npx serve .
+    then open /examples/counter/
+  -->
+  <script type="importmap">
+  {
+    "imports": {
+      "@choojs/core": "../../packages/core/index.js",
+      "@choojs/core/timing": "../../packages/core/lib/timing.js",
+      "@choojs/html": "../../packages/html/browser.js",
+      "@choojs/html/raw": "../../packages/html/raw.js",
+      "@choojs/html/morph": "../../packages/html/morph.js"
+    }
+  }
+  </script>
+</head>
+<body>
+  <script type="module">
+    import createApp from './app.js'
+    createApp().mount('body')
+  </script>
+</body>
+</html>
@@ -0,0 +1,5 @@
+// Server-side render of the exact same app module the browser mounts:
+//   node examples/counter/render.js
+import createApp from './app.js'
+
+process.stdout.write(createApp().toString('/') + '\n')