examples: add Arrow.js SSR example

examples/vite-ssr-arrow/.gitignore

@@ -0,0 +1,2 @@
+.vercel
+.env*.local

examples/vite-ssr-arrow/nitro.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "nitro";
+
+export default defineConfig({
+  traceDeps: ["jsdom"],
+});

examples/vite-ssr-arrow/package.json

@@ -0,0 +1,17 @@
+{
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview",
+    "dev": "vite dev"
+  },
+  "devDependencies": {
+    "@arrow-js/core": "latest",
+    "@arrow-js/framework": "latest",
+    "@arrow-js/hydrate": "latest",
+    "@arrow-js/ssr": "latest",
+    "jsdom": "latest",
+    "nitro": "latest",
+    "vite": "latest"
+  }
+}

examples/vite-ssr-arrow/src/app.ts

@@ -0,0 +1,141 @@
+import { html, reactive, component, watch } from "@arrow-js/core";
+import type { Props } from "@arrow-js/core";
+
+type Todo = { id: number; text: string; done: boolean };
+type Filter = "all" | "active" | "done";
+
+const TodoItem = component(
+  (
+    props: Props<{
+      todo: Todo;
+      onToggle: (id: number) => void;
+      onRemove: (id: number) => void;
+    }>
+  ) => {
+    return html`
+      <li class="${() => (props.todo.done ? "todo done" : "todo")}">
+        <button
+          class="toggle"
+          @click="${() => props.onToggle(props.todo.id)}"
+        >
+          ${() => (props.todo.done ? "\u2713" : "")}
+        </button>
+        <span>${() => props.todo.text}</span>
+        <button
+          class="remove"
+          @click="${() => props.onRemove(props.todo.id)}"
+        >
+          \u00d7
+        </button>
+      </li>
+    `;
+  }
+);
+
+const Filters = component((props: Props<{ filter: Filter }>) => {
+  const filters: Filter[] = ["all", "active", "done"];
+  return html`
+    <nav class="filters">
+      ${filters.map(
+        (f) => html`
+          <button
+            class="${() => (props.filter === f ? "active" : "")}"
+            @click="${() => {
+              props.filter = f;
+            }}"
+          >
+            ${f}
+          </button>
+        `
+      )}
+    </nav>
+  `;
+});
+
+export function App() {
+  const state = reactive({
+    todos: [
+      { id: 1, text: "Learn reactive state", done: true },
+      { id: 2, text: "Build a component", done: false },
+      { id: 3, text: "Render a keyed list", done: false },
+    ] as Todo[],
+    input: "",
+    filter: "all" as Filter,
+    nextId: 4,
+  });
+
+  const filtered = () => {
+    if (state.filter === "active") return state.todos.filter((t) => !t.done);
+    if (state.filter === "done") return state.todos.filter((t) => t.done);
+    return state.todos;
+  };
+
+  const remaining = () => state.todos.filter((t) => !t.done).length;
+
+  const addTodo = () => {
+    const text = state.input.trim();
+    if (!text) return;
+    state.todos.push({ id: state.nextId, text, done: false });
+    state.nextId++;
+    state.input = "";
+  };
+
+  const onToggle = (id: number) => {
+    const todo = state.todos.find((t) => t.id === id);
+    if (todo) todo.done = !todo.done;
+  };
+
+  const onRemove = (id: number) => {
+    const i = state.todos.findIndex((t) => t.id === id);
+    if (i >= 0) state.todos.splice(i, 1);
+  };
+
+  watch(() => {
+    console.log(
+      `[Arrow.js] ${remaining()} of ${state.todos.length} todos remaining`
+    );
+  });
+
+  return html`
+    <div class="app">
+      <h1>Nitro + Arrow.js</h1>
+      <p class="subtitle">A ~3KB reactive UI with SSR</p>
+
+      <div class="input-row">
+        <input
+          type="text"
+          placeholder="What needs to be done?"
+          .value="${() => state.input}"
+          @input="${(e: Event) => {
+            state.input = (e.target as HTMLInputElement).value;
+          }}"
+          @keydown="${(e: Event) => {
+            if ((e as KeyboardEvent).key === "Enter") addTodo();
+          }}"
+        />
+        <button class="add" @click="${addTodo}">Add</button>
+      </div>
+
+      ${Filters(state)}
+
+      <ul class="todo-list">
+        ${() =>
+          filtered().map((todo) =>
+            TodoItem({ todo, onToggle, onRemove }).key(todo.id)
+          )}
+      </ul>
+
+      <footer class="footer">
+        <span>${() => remaining()} items left</span>
+        <button
+          class="clear"
+          @click="${() => {
+            state.todos = state.todos.filter((t) => !t.done);
+          }}"
+        >
+          Clear done
+        </button>
+      </footer>
+    </div>
+  `;
+}

examples/vite-ssr-arrow/src/entry-client.ts

@@ -0,0 +1,13 @@
+import { render } from "@arrow-js/framework";
+import { App } from "./app.ts";
+
+// TODO: hydrate() adopts DOM nodes but loses reactivity due to
+// JSDOM vs browser whitespace serialization differences causing
+// text node misalignment in the adoption map.
+// import { hydrate, readPayload } from "@arrow-js/hydrate";
+// const payload = readPayload();
+// await hydrate(root, App(), payload);
+
+const root = document.getElementById("app")!;
+
+await render(root, App());

examples/vite-ssr-arrow/src/entry-server.ts

@@ -0,0 +1,42 @@
+import "./styles.css";
+import { renderToString, serializePayload } from "@arrow-js/ssr";
+import { App } from "./app.ts";
+
+import clientAssets from "./entry-client?assets=client";
+import serverAssets from "./entry-server?assets=ssr";
+
+export default {
+  async fetch(_req: Request) {
+    const assets = clientAssets.merge(serverAssets);
+    const view = App();
+    const result = await renderToString(view);
+
+    const head = [
+      `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`,
+      ...assets.css.map(
+        (attr: Record<string, string>) =>
+          `<link rel="stylesheet" href="${attr.href}" />`
+      ),
+      ...assets.js.map(
+        (attr: Record<string, string>) =>
+          `<link rel="modulepreload" href="${attr.href}" />`
+      ),
+      `<script type="module" src="${assets.entry}"></script>`,
+    ].join("\n    ");
+
+    const html = `<!doctype html>
+<html lang="en">
+  <head>
+    ${head}
+  </head>
+  <body>
+    <div id="app">${result.html}</div>
+    ${serializePayload(result.payload)}
+  </body>
+</html>`;
+
+    return new Response(html, {
+      headers: { "Content-Type": "text/html;charset=utf-8" },
+    });
+  },
+};

examples/vite-ssr-arrow/src/styles.css

@@ -0,0 +1,159 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  background: #1a1a2e;
+  color: #eee;
+  display: flex;
+  justify-content: center;
+  padding: 2rem 1rem;
+}
+
+.app {
+  max-width: 480px;
+  width: 100%;
+}
+
+h1 {
+  font-size: 1.8rem;
+  color: #e2b340;
+}
+
+.subtitle {
+  color: #888;
+  margin-bottom: 1.5rem;
+}
+
+.input-row {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.input-row input {
+  flex: 1;
+  padding: 0.6rem 0.8rem;
+  border: 1px solid #333;
+  border-radius: 6px;
+  background: #16213e;
+  color: #eee;
+  font-size: 0.95rem;
+}
+
+.input-row input:focus {
+  outline: none;
+  border-color: #e2b340;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  padding: 0.5rem 0.8rem;
+  background: #16213e;
+  color: #ccc;
+  transition: background 0.15s;
+}
+
+button:hover {
+  background: #1a2744;
+}
+
+button.add {
+  background: #e2b340;
+  color: #1a1a2e;
+  font-weight: 600;
+}
+
+button.add:hover {
+  background: #f0c850;
+}
+
+.filters {
+  display: flex;
+  gap: 0.4rem;
+  margin-bottom: 1rem;
+}
+
+.filters button.active {
+  background: #e2b340;
+  color: #1a1a2e;
+}
+
+.todo-list {
+  list-style: none;
+  padding: 0;
+}
+
+.todo {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 0;
+  border-bottom: 1px solid #222;
+}
+
+.todo.done span {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+.todo span {
+  flex: 1;
+}
+
+.todo .toggle {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid #444;
+  background: transparent;
+  color: #4caf50;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.todo.done .toggle {
+  border-color: #4caf50;
+}
+
+.todo .remove {
+  background: transparent;
+  color: #e74c3c;
+  font-size: 1.1rem;
+  opacity: 0;
+  transition: opacity 0.15s;
+  padding: 0.2rem 0.5rem;
+}
+
+.todo:hover .remove {
+  opacity: 1;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1rem;
+  padding-top: 0.8rem;
+  border-top: 1px solid #222;
+  color: #888;
+  font-size: 0.85rem;
+}
+
+button.clear {
+  color: #e74c3c;
+  background: transparent;
+  font-size: 0.8rem;
+}
+
+button.clear:hover {
+  background: rgba(231, 76, 60, 0.1);
+}

examples/vite-ssr-arrow/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "nitro/tsconfig",
+  "compilerOptions": {},
+}