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

package/templates/forms/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/forms/src/blokd-env.d.ts

@@ -0,0 +1,4 @@
+declare module "virtual:blokd/routes" {
+  const routes: import("blokd/hono").RouteEntry[];
+  export default routes;
+}

package/templates/forms/src/entry-client.ts

@@ -0,0 +1,3 @@
+import { startResumability } from "blokd/client";
+
+startResumability();

package/templates/forms/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/forms/src/resumables/demo.ts

@@ -0,0 +1,9 @@
+import { defineAction } from "blokd/resume";
+
+type MessageState = {
+  text: string;
+};
+
+export const show = defineAction<MessageState>(({ state, el }) => {
+  el.text(state.text);
+});

package/templates/forms/src/routes/_404.tsx

@@ -0,0 +1,11 @@
+export default function NotFound() {
+  return (
+    <section>
+      <h1>Page not found</h1>
+      <p>The page you requested does not exist.</p>
+      <p>
+        <a href="/">Return home</a>
+      </p>
+    </section>
+  );
+}

package/templates/forms/src/routes/_error.tsx

@@ -0,0 +1,17 @@
+type ErrorPageProps = {
+  error?: {
+    message?: string;
+  };
+};
+
+export default function ErrorPage(props: ErrorPageProps) {
+  return (
+    <section>
+      <h1>Something went wrong</h1>
+      <p>
+        {props.error?.message ??
+          "The application encountered an unexpected error."}
+      </p>
+    </section>
+  );
+}

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

@@ -0,0 +1,36 @@
+type LayoutProps = {
+  children?: unknown;
+  meta?: {
+    title?: string;
+    description?: string;
+  };
+};
+
+export default function Layout(props: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <title>{props.meta?.title ?? "Blokd App"}</title>
+        <meta
+          name="description"
+          content={props.meta?.description ?? "A minimal Blokd application."}
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+
+      <body>
+        <header>
+          <nav>
+            <a href="/">Home</a>
+            {" · "}
+            <a href="/contact">Contact</a>
+            {" · "}
+            <a href="/newsletter">Newsletter</a>
+          </nav>
+        </header>
+
+        <main>{props.children}</main>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,23 @@
+export const meta = () => ({
+  title: "About | Blokd App",
+  description: "About this minimal Blokd application."
+});
+
+export const runtime = "none";
+
+export const budget = {
+  client: "0kb"
+};
+
+export default function About() {
+  return (
+    <section>
+      <h1>About</h1>
+
+      <p>
+        This route has no event handlers or islands, so Blokd can treat it as a
+        static/server-rendered route.
+      </p>
+    </section>
+  );
+}

package/templates/forms/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/forms/src/routes/index.tsx

@@ -0,0 +1,28 @@
+export const meta = () => ({
+  title: "Forms | Blokd App",
+  description: "Native form examples in Blokd."
+});
+
+export const runtime = "none";
+
+export const budget = {
+  client: "0kb"
+};
+
+export default function Home() {
+  return (
+    <section>
+      <h1>Forms</h1>
+
+      <p>
+        This starter demonstrates native forms and route actions without client
+        JavaScript.
+      </p>
+
+      <ul>
+        <li><a href="/contact">Contact form</a></li>
+        <li><a href="/newsletter">Newsletter form</a></li>
+      </ul>
+    </section>
+  );
+}

package/templates/forms/src/routes/newsletter.tsx

@@ -0,0 +1,50 @@
+type NewsletterData = {
+  ok?: boolean;
+  email?: string;
+  error?: string;
+};
+
+type NewsletterProps = {
+  data?: NewsletterData;
+};
+
+export const meta = () => ({
+  title: "Newsletter | Blokd App",
+  description: "A native newsletter form."
+});
+
+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 Newsletter(props: NewsletterProps) {
+  return (
+    <section>
+      <h1>Newsletter</h1>
+
+      {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/forms/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/forms/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/forms/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/marketing/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Blokd App</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <p>This file is used by Vite during development.</p>
+  </body>
+</html>

package/templates/marketing/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "blokd-marketing-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "packageManager": "pnpm@11.0.0",
+  "scripts": {
+    "dev": "node scripts/dev.mjs",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "blokd": "0.2.0-beta.0",
+    "hono": ">=4.5 <5"
+  },
+  "devDependencies": {
+    "@types/node": ">=20 <23",
+    "typescript": ">=5.5 <6",
+    "vite": ">=6 <9"
+  }
+}

package/templates/marketing/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/marketing/src/blokd-env.d.ts

@@ -0,0 +1,4 @@
+declare module "virtual:blokd/routes" {
+  const routes: import("blokd/hono").RouteEntry[];
+  export default routes;
+}

package/templates/marketing/src/entry-client.ts

@@ -0,0 +1,3 @@
+import { startResumability } from "blokd/client";
+
+startResumability();

package/templates/marketing/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/marketing/src/resumables/demo.ts

@@ -0,0 +1,9 @@
+import { defineAction } from "blokd/resume";
+
+type MessageState = {
+  text: string;
+};
+
+export const show = defineAction<MessageState>(({ state, el }) => {
+  el.text(state.text);
+});

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

@@ -0,0 +1,11 @@
+export default function NotFound() {
+  return (
+    <section>
+      <h1>Page not found</h1>
+      <p>The page you requested does not exist.</p>
+      <p>
+        <a href="/">Return home</a>
+      </p>
+    </section>
+  );
+}

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

@@ -0,0 +1,17 @@
+type ErrorPageProps = {
+  error?: {
+    message?: string;
+  };
+};
+
+export default function ErrorPage(props: ErrorPageProps) {
+  return (
+    <section>
+      <h1>Something went wrong</h1>
+      <p>
+        {props.error?.message ??
+          "The application encountered an unexpected error."}
+      </p>
+    </section>
+  );
+}

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

@@ -0,0 +1,38 @@
+type LayoutProps = {
+  children?: unknown;
+  meta?: {
+    title?: string;
+    description?: string;
+  };
+};
+
+export default function Layout(props: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <title>{props.meta?.title ?? "Blokd App"}</title>
+        <meta
+          name="description"
+          content={props.meta?.description ?? "A minimal Blokd application."}
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+
+      <body>
+        <header>
+          <nav>
+            <a href="/">Home</a>
+            {" · "}
+            <a href="/about">About</a>
+            {" · "}
+            <a href="/pricing">Pricing</a>
+            {" · "}
+            <a href="/contact">Contact</a>
+          </nav>
+        </header>
+
+        <main>{props.children}</main>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,23 @@
+export const meta = () => ({
+  title: "About | Blokd App",
+  description: "About this minimal Blokd application."
+});
+
+export const runtime = "none";
+
+export const budget = {
+  client: "0kb"
+};
+
+export default function About() {
+  return (
+    <section>
+      <h1>About</h1>
+
+      <p>
+        This route has no event handlers or islands, so Blokd can treat it as a
+        static/server-rendered route.
+      </p>
+    </section>
+  );
+}