create-oke 0.11.1 → 0.12.0

package/templates/standard/web/src/App.css

@@ -0,0 +1,78 @@
+.page {
+  max-width: 40rem;
+  margin: 0 auto;
+  padding: 2rem 1.25rem 4rem;
+}
+
+.head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.head h1 {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.ok,
+.down {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.ok {
+  color: #047857;
+}
+
+.down {
+  color: #b45309;
+}
+
+.compose {
+  display: grid;
+  gap: 0.5rem;
+  margin: 1.5rem 0;
+}
+
+.compose input,
+.compose textarea,
+.compose button,
+.list button {
+  font: inherit;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.375rem;
+  background: #fff;
+}
+
+.compose button,
+.list button {
+  cursor: pointer;
+  width: fit-content;
+}
+
+.err {
+  color: #b91c1c;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.list li {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  border-top: 1px solid #e2e8f0;
+}
+
+.list p {
+  margin: 0.25rem 0 0;
+}

package/templates/standard/web/src/App.tsx

@@ -0,0 +1,100 @@
+import { useCallback, useEffect, useState, type FormEvent, type JSX } from "react";
+import { isOk } from "okengine/client";
+import { api, type Note } from "./client.ts";
+import "./App.css";
+
+/**
+ * Notes SPA — health + list + create + archive against the oke app.
+ */
+export function App(): JSX.Element {
+  const [health, setHealth] = useState<"unknown" | "ok" | "down">("unknown");
+  const [notes, setNotes] = useState<readonly Note[]>([]);
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [message, setMessage] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    const live = await api.main.health({});
+    setHealth(isOk(live) && live.data.ok ? "ok" : "down");
+    const listed = await api.notes.list({});
+    if (isOk(listed) && Array.isArray(listed.data)) {
+      setNotes(listed.data as readonly Note[]);
+      setMessage(null);
+      return;
+    }
+    setMessage(listed.error?.code ?? "notes.list failed");
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  async function onCreate(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    const created = await api.notes.create({ title, body });
+    if (!isOk(created)) {
+      setMessage(created.error.code);
+      return;
+    }
+    setTitle("");
+    setBody("");
+    await refresh();
+  }
+
+  async function onArchive(id: string): Promise<void> {
+    const archived = await api.notes.archive({ id });
+    if (!isOk(archived)) {
+      setMessage(archived.error.code);
+      return;
+    }
+    await refresh();
+  }
+
+  return (
+    <main className="page">
+      <header className="head">
+        <h1>Notes</h1>
+        <p className={health === "ok" ? "ok" : "down"}>
+          {health === "unknown" ? "checking…" : health === "ok" ? "app up" : "app down — start oke dev"}
+        </p>
+      </header>
+
+      <form className="compose" onSubmit={(event) => void onCreate(event)}>
+        <input
+          name="title"
+          placeholder="Title"
+          value={title}
+          onChange={(event) => setTitle(event.target.value)}
+          required
+          maxLength={200}
+        />
+        <textarea
+          name="body"
+          placeholder="Body"
+          value={body}
+          onChange={(event) => setBody(event.target.value)}
+          required
+          maxLength={10_000}
+          rows={4}
+        />
+        <button type="submit">Create</button>
+      </form>
+
+      {message ? <p className="err">{message}</p> : null}
+
+      <ul className="list">
+        {notes.map((note) => (
+          <li key={note.id}>
+            <div>
+              <strong>{note.title}</strong>
+              <p>{note.body}</p>
+            </div>
+            <button type="button" onClick={() => void onArchive(note.id)}>
+              Archive
+            </button>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

package/templates/standard/web/src/client.ts

@@ -0,0 +1,38 @@
+/**
+ * Browser client — Vite proxies these paths to `oke dev` (:6530).
+ *
+ * `$routes` is passed at runtime so HTTP triggers use REST, not `/_oke` RPC.
+ * Do not import `src/app.ts` here — that graph is Bun/server-only.
+ */
+
+import { createClient } from "okengine/client";
+
+/** One note from `notes.list` / `notes.create`. */
+export type Note = {
+  readonly id: string;
+  readonly title: string;
+  readonly body: string;
+  readonly archivedAt: number | null;
+  readonly createdAt: number;
+};
+
+const $routes = {
+  main: {
+    health: { method: "GET", path: "/health" },
+  },
+  notes: {
+    list: { method: "GET", path: "/notes" },
+    create: { method: "POST", path: "/notes" },
+    get: { method: "GET", path: "/notes/:id" },
+    archive: { method: "POST", path: "/notes/:id/archive" },
+  },
+} as const;
+
+type AppRoutes = { readonly $routes: typeof $routes };
+
+/**
+ * Typed caller for starter Flows. `VITE_API_URL` is empty in dev (proxy).
+ */
+export const api = createClient<AppRoutes>(import.meta.env.VITE_API_URL ?? "", {
+  $routes,
+});

package/templates/standard/web/src/index.css

@@ -0,0 +1,18 @@
+:root {
+  color: #0f172a;
+  background: #f8fafc;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  line-height: 1.5;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+#root {
+  min-height: 100vh;
+}

package/templates/standard/web/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+import "./index.css";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("web: #root missing");
+
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/standard/web/src/vite-env.d.ts

@@ -0,0 +1,17 @@
+interface ViteTypeOptions {
+  // By adding this line, you can make the type of ImportMetaEnv strict
+  // to disallow unknown keys.
+  // strictImportMetaEnv: unknown
+}
+
+interface ImportMetaEnv {
+  /**
+   * App origin for `createClient`. Unset / empty = same origin so Vite's
+   * `server.proxy` forwards `/notes` · `/health` · `/_oke` to `oke dev`.
+   */
+  readonly VITE_API_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/standard/web/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true
+  },
+  "include": ["src"]
+}

package/templates/standard/web/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/templates/standard/web/tsconfig.node.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["bun"],
+    "skipLibCheck": true,
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/standard/web/vite.config.ts

@@ -0,0 +1,32 @@
+/**
+ * Vite 8 SPA for the Notes starter.
+ *
+ * `index.html` is the documented entry (not backend-integration HTML).
+ * The oke app stays on :6530. `server.proxy` keeps `createClient("")`
+ * same-origin — leave CORS at Vite's localhost default. `preview.proxy` inherits
+ * this map. Do not proxy `/` — `main.root` is `GET /` and would steal the SPA.
+ */
+
+import react from "@vitejs/plugin-react";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig, type ProxyOptions } from "vite";
+
+const root = dirname(fileURLToPath(import.meta.url));
+
+/** Local oke app (`oke dev`). */
+const APP_ORIGIN = "http://127.0.0.1:6530";
+
+const proxy: Record<string, ProxyOptions> = {
+  "/health": { target: APP_ORIGIN, changeOrigin: true },
+  "/notes": { target: APP_ORIGIN, changeOrigin: true },
+  "/_oke": { target: APP_ORIGIN, changeOrigin: true },
+};
+
+export default defineConfig({
+  root,
+  plugins: [react()],
+  // Load `VITE_*` from the app root (same place as `.env.example`).
+  envDir: resolve(root, ".."),
+  server: { proxy },
+});