create-blokd 0.1.0-beta.2 → 0.1.0-beta.8

package/templates/marketing/src/routes/contact.tsx

@@ -0,0 +1,19 @@
+export const meta = () => ({
+  title: "Contact | Blokd App",
+  description: "Contact information for a marketing site."
+});
+
+export const runtime = "none";
+
+export const budget = {
+  client: "0kb"
+};
+
+export default function Contact() {
+  return (
+    <section>
+      <h1>Contact</h1>
+      <p>Email hello@example.com to start a project.</p>
+    </section>
+  );
+}

package/templates/marketing/src/routes/index.tsx

@@ -0,0 +1,24 @@
+export const meta = () => ({
+  title: "Blokd Marketing",
+  description: "A static marketing site built with Blokd."
+});
+
+export const runtime = "none";
+
+export const budget = {
+  client: "0kb"
+};
+
+export default function Home() {
+  return (
+    <section>
+      <h1>Blokd Marketing</h1>
+
+      <p>
+        A server-rendered marketing starter with no client framework runtime.
+      </p>
+
+      <p><a href="/pricing">View pricing</a></p>
+    </section>
+  );
+}

package/templates/marketing/src/routes/pricing.tsx

@@ -0,0 +1,24 @@
+export const meta = () => ({
+  title: "Pricing | Blokd App",
+  description: "Static pricing page."
+});
+
+export const runtime = "none";
+
+export const budget = {
+  client: "0kb"
+};
+
+export default function Pricing() {
+  return (
+    <section>
+      <h1>Pricing</h1>
+      <p>Simple static pricing tiers with no client JavaScript.</p>
+      <ul>
+        <li>Starter: $99</li>
+        <li>Growth: $299</li>
+        <li>Scale: custom</li>
+      </ul>
+    </section>
+  );
+}

package/templates/marketing/src/server.ts

@@ -0,0 +1,19 @@
+import { Hono } from "hono";
+import { createPages } from "blokd/hono";
+import routes from "virtual:blokd/routes";
+
+const app = new Hono();
+
+app.get("/api/health", c => {
+  return c.json({ ok: true });
+});
+
+app.route(
+  "/",
+  createPages({
+    routes,
+    entryClient: "/src/entry-client.ts"
+  })
+);
+
+export default app;

package/templates/marketing/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "blokd",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["node"],
+    "strict": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/marketing/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import { blokd } from "blokd/vite";
+
+export default defineConfig({
+  plugins: [
+    blokd({
+      routesDir: "src/routes",
+      clientEntry: "/src/entry-client.ts"
+    })
+  ]
+});

package/templates/minimal/package.json

@@ -5,12 +5,12 @@
   "type": "module",
   "packageManager": "pnpm@11.0.0",
   "scripts": {
-    "dev": "vite --host 0.0.0.0",
+    "dev": "node scripts/dev.mjs",
     "build": "vite build",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "blokd": "0.1.0-beta.2",
+    "blokd": "0.2.0-beta.0",
     "hono": ">=4.5 <5"
   },
   "devDependencies": {
@@ -18,4 +18,4 @@
     "typescript": ">=5.5 <6",
     "vite": ">=6 <9"
   }
-}
+}

package/templates/minimal/scripts/dev.mjs

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+
+import { createServer } from "node:http";
+import { Readable } from "node:stream";
+import { createServer as createViteServer } from "vite";
+
+const host = process.env.HOST ?? "0.0.0.0";
+const port = Number(process.env.PORT ?? 5173);
+
+let handleRequest = (_req, res) => {
+  res.statusCode = 503;
+  res.end("Dev server is starting");
+};
+
+const httpServer = createServer((req, res) => {
+  handleRequest(req, res);
+});
+
+const vite = await createViteServer({
+  appType: "custom",
+  server: {
+    middlewareMode: true,
+    hmr: {
+      server: httpServer
+    }
+  }
+});
+
+handleRequest = async (req, res) => {
+  vite.middlewares(req, res, async () => {
+    try {
+      const mod = await vite.ssrLoadModule("/src/server.ts");
+      const app = mod.default;
+
+      if (!app || typeof app.fetch !== "function") {
+        throw new Error("src/server.ts must default-export a Hono app.");
+      }
+
+      const request = toWebRequest(req);
+      const response = await app.fetch(request);
+
+      await writeWebResponse(res, response);
+    } catch (error) {
+      vite.ssrFixStacktrace(error);
+
+      res.statusCode = 500;
+      res.setHeader("content-type", "text/plain; charset=utf-8");
+      res.end(error instanceof Error ? error.stack ?? error.message : String(error));
+    }
+  });
+};
+
+httpServer.listen(port, host, () => {
+  const displayHost = host === "0.0.0.0" ? "localhost" : host;
+
+  console.log("");
+  console.log(`  Blokd dev server`);
+  console.log(`  Local:   http://${displayHost}:${port}/`);
+  console.log("");
+});
+
+function toWebRequest(req) {
+  const protocol = req.headers["x-forwarded-proto"] ?? "http";
+  const hostHeader = req.headers.host ?? `${host}:${port}`;
+  const url = `${protocol}://${hostHeader}${req.url ?? "/"}`;
+
+  const headers = new Headers();
+
+  for (const [key, value] of Object.entries(req.headers)) {
+    if (Array.isArray(value)) {
+      for (const item of value) headers.append(key, item);
+    } else if (value !== undefined) {
+      headers.set(key, value);
+    }
+  }
+
+  const init = {
+    method: req.method ?? "GET",
+    headers
+  };
+
+  if (init.method !== "GET" && init.method !== "HEAD") {
+    init.body = Readable.toWeb(req);
+    init.duplex = "half";
+  }
+
+  return new Request(url, init);
+}
+
+async function writeWebResponse(res, response) {
+  res.statusCode = response.status;
+  res.statusMessage = response.statusText;
+
+  response.headers.forEach((value, key) => {
+    res.setHeader(key, value);
+  });
+
+  if (!response.body) {
+    res.end();
+    return;
+  }
+
+  const stream = Readable.fromWeb(response.body);
+  stream.pipe(res);
+}

package/templates/minimal/src/resumables/counter.ts

@@ -0,0 +1,10 @@
+import { defineAction } from "blokd/resume";
+
+type CounterState = {
+  count: number;
+};
+
+export const increment = defineAction<CounterState>(({ state, el }) => {
+  state.count += 1;
+  el.text(`Count: ${state.count}`);
+});

package/templates/minimal/src/resumables/demo.ts

@@ -1,4 +1,9 @@
-export function sayHello(event: Event, ctx: any) {
-  const button = event.currentTarget as HTMLButtonElement;
-  button.textContent = ctx.state.message;
-}
+import { defineAction } from "blokd/resume";
+
+type MessageState = {
+  text: string;
+};
+
+export const show = defineAction<MessageState>(({ state, el }) => {
+  el.text(state.text);
+});

package/templates/minimal/src/routes/_layout.tsx

@@ -24,6 +24,8 @@ export default function Layout(props: LayoutProps) {
             <a href="/">Home</a>
             {" · "}
             <a href="/about">About</a>
+            {" · "}
+            <a href="/contact">Contact</a>
           </nav>
         </header>
 
@@ -31,4 +33,4 @@ export default function Layout(props: LayoutProps) {
       </body>
     </html>
   );
-}
+}

package/templates/minimal/src/routes/about.tsx

@@ -3,6 +3,12 @@ export const meta = () => ({
   description: "About this minimal Blokd application."
 });
 
+export const runtime = "none";
+
+export const budget = {
+  client: "0kb"
+};
+
 export default function About() {
   return (
     <section>
@@ -14,4 +20,4 @@ export default function About() {
       </p>
     </section>
   );
-}
+}

package/templates/minimal/src/routes/contact.tsx

@@ -0,0 +1,58 @@
+type ContactData = {
+  ok?: boolean;
+  email?: string;
+  error?: string;
+};
+
+type ContactProps = {
+  data?: ContactData;
+};
+
+export const meta = () => ({
+  title: "Contact | Blokd App",
+  description: "A native form route in a minimal Blokd application."
+});
+
+export const runtime = "none";
+
+export const budget = {
+  client: "0kb"
+};
+
+export async function action({ request }: { request: Request }) {
+  const form = await request.formData();
+  const email = String(form.get("email") ?? "").trim();
+
+  if (!email.includes("@")) {
+    return {
+      ok: false,
+      error: "Enter a valid email."
+    };
+  }
+
+  return {
+    ok: true,
+    email
+  };
+}
+
+export default function Contact(props: ContactProps) {
+  return (
+    <section>
+      <h1>Contact</h1>
+
+      <p>This form submits with native browser POST and no client JavaScript.</p>
+
+      {props.data?.error ? <p role="alert">{props.data.error}</p> : null}
+      {props.data?.ok ? <p>{`Subscribed ${props.data.email}`}</p> : null}
+
+      <form method="post">
+        <label>
+          Email
+          <input name="email" type="email" required />
+        </label>
+        <button>Subscribe</button>
+      </form>
+    </section>
+  );
+}

package/templates/minimal/src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { signal, Island, resumable } from "blokd";
+import { Island, on } from "blokd";
 
 export const meta = () => ({
   title: "Blokd App",
@@ -6,29 +6,32 @@ export const meta = () => ({
 });
 
 export default function Home() {
-  const [count, setCount] = signal(0);
-
   return (
     <section>
       <h1>Blokd App</h1>
 
       <p>
-        This page demonstrates Solid-familiar signals and a resumable island.
+        This page demonstrates resumable islands. Blokd does not hydrate the
+        whole component tree; client behavior is attached explicitly.
       </p>
 
-      <button onClick={() => setCount(c => c + 1)}>
-        Count: {count()}
-      </button>
+      <Island name="counter" state={{ count: 0 }}>
+        <button
+          type="button"
+          onClick={on("/src/resumables/counter.ts#increment")}
+        >
+          Count: 0
+        </button>
+      </Island>
 
-      <Island name="demo-island" state={{ message: "Hello from Blokd" }}>
+      <Island name="demo-island" state={{ text: "Hello from Blokd" }}>
         <button
           type="button"
-          data-output
-          onClick={resumable("/src/resumables/demo.ts#sayHello")}
+          onClick={on("/src/resumables/demo.ts#show")}
         >
           Run resumable handler
         </button>
       </Island>
     </section>
   );
-}
+}