initial waku

examples/waku/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.env*
+*.tsbuildinfo
+.cache
+.DS_Store
+*.pem

examples/waku/bknd-types.d.ts

@@ -0,0 +1,15 @@
+import type { DB } from "bknd/core";
+import type { Insertable, Selectable, Updateable, Generated } from "kysely";
+
+declare global {
+  type BkndEntity<T extends keyof DB> = Selectable<DB[T]>;
+  type BkndEntityCreate<T extends keyof DB> = Insertable<DB[T]>;
+  type BkndEntityUpdate<T extends keyof DB> = Updateable<DB[T]>;
+}
+
+interface Database {
+}
+
+declare module "bknd/core" {
+  interface DB extends Database {}
+}

examples/waku/bknd.config.ts

@@ -0,0 +1,64 @@
+import { registerLocalMediaAdapter } from "bknd/adapter/node";
+import type { BkndConfig } from "bknd/adapter";
+import { boolean, em, entity, text } from "bknd/data";
+import { secureRandomString } from "bknd/utils";
+
+// since we're running in node, we can register the local media adapter
+const local = registerLocalMediaAdapter();
+
+const schema = em({
+   todos: entity("todos", {
+      title: text(),
+      done: boolean(),
+   }),
+});
+
+// register your schema to get automatic type completion
+type Database = (typeof schema)["DB"];
+declare module "bknd/core" {
+   interface DB extends Database {}
+}
+
+export default {
+   // we can use any libsql config, and if omitted, uses in-memory
+   app: (env) => ({
+      connection: {
+         url: env?.DB_URL ?? "file:data.db",
+      },
+   }),
+   // an initial config is only applied if the database is empty
+   initialConfig: {
+      data: schema.toJSON(),
+      // we're enabling auth ...
+      auth: {
+         enabled: true,
+         jwt: {
+            issuer: "bknd-remix-example",
+            secret: secureRandomString(64),
+         },
+      },
+      // ... and media
+      media: {
+         enabled: true,
+         adapter: local({
+            path: "./public/uploads",
+         }),
+      },
+   },
+   options: {
+      // the seed option is only executed if the database was empty
+      seed: async (ctx) => {
+         // create some entries
+         await ctx.em.mutator("todos").insertMany([
+            { title: "Learn bknd", done: true },
+            { title: "Build something cool", done: false },
+         ]);
+
+         // and create a user
+         await ctx.app.module.auth.createUser({
+            email: "test@bknd.io",
+            password: "12345678",
+         });
+      },
+   },
+} as const satisfies BkndConfig<{ DB_URL?: string }>;

examples/waku/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "waku",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "waku dev",
+    "build": "waku build",
+    "start": "waku start"
+  },
+  "dependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-server-dom-webpack": "19.0.0",
+    "waku": "0.23.3",
+    "bknd": "file:../../app"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "4.1.10",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "postcss": "8.5.6",
+    "tailwindcss": "4.1.10",
+    "typescript": "5.8.3"
+  }
+}

examples/waku/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

examples/waku/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /RSC/

examples/waku/src/bknd/admin/impl.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Admin, type BkndAdminProps } from "bknd/ui";
+
+export const AdminImpl = (props: BkndAdminProps) => {
+   if (typeof window === "undefined") {
+      return null;
+   }
+
+   return (
+      <Admin
+         withProvider
+         config={{
+            basepath: "/admin",
+            logo_return_path: "/../",
+            ...props.config,
+         }}
+         {...props}
+      />
+   );
+};
+
+export default AdminImpl;

examples/waku/src/bknd/admin/index.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import type { BkndAdminProps } from "bknd/ui";
+import { lazy } from "react";
+import { BrowserOnly } from "../../lib/waku/client";
+
+const AdminImpl = import.meta.env.SSR ? undefined : lazy(() => import("./impl"));
+
+export const AdminLoader = (props: BkndAdminProps) => {
+   return (
+      <BrowserOnly fallback={null}>
+         {/* @ts-expect-error */}
+         <AdminImpl {...props} />
+      </BrowserOnly>
+   );
+};
+
+export default AdminLoader;

examples/waku/src/bknd/index.ts

@@ -0,0 +1,22 @@
+import { createFrameworkApp } from "bknd/adapter";
+import config from "../../bknd.config";
+
+export async function getApp() {
+   return await createFrameworkApp(config, process.env, {
+      force: import.meta.env && !import.meta.env.PROD,
+   });
+}
+
+export async function getApi(opts?: {
+   headers?: Headers | any;
+   verify?: boolean;
+}) {
+   const app = await getApp();
+   if (opts?.verify && opts.headers) {
+      const api = app.getApi({ headers: opts.headers });
+      await api.verifyAuth();
+      return api;
+   }
+
+   return app.getApi();
+}

examples/waku/src/components/counter.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useState } from 'react';
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  const handleIncrement = () => setCount((c) => c + 1);
+
+  return (
+    <section className="border-blue-400 -mx-4 mt-4 rounded-sm border border-dashed p-4">
+      <div>Count: {count}</div>
+      <button
+        onClick={handleIncrement}
+        className="rounded-xs bg-black px-2 py-0.5 text-sm text-white"
+      >
+        Increment
+      </button>
+    </section>
+  );
+};

examples/waku/src/components/footer.tsx

@@ -0,0 +1,18 @@
+export const Footer = () => {
+  return (
+    <footer className="p-6 lg:fixed lg:bottom-0 lg:left-0">
+      <div>
+        visit{' '}
+        <a
+          href="https://waku.gg/"
+          target="_blank"
+          rel="noreferrer"
+          className="mt-4 inline-block underline"
+        >
+          waku.gg
+        </a>{' '}
+        to learn more
+      </div>
+    </footer>
+  );
+};

examples/waku/src/components/header.tsx

@@ -0,0 +1,11 @@
+import { Link } from 'waku';
+
+export const Header = () => {
+  return (
+    <header className="flex items-center gap-4 p-6 lg:fixed lg:left-0 lg:top-0">
+      <h2 className="text-lg font-bold tracking-tight">
+        <Link to="/">Waku starter</Link>
+      </h2>
+    </header>
+  );
+};

examples/waku/src/lib/waku/client.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import * as React from "react";
+
+export function BrowserOnly(props: React.SuspenseProps) {
+   const hydrated = useHydrated();
+   if (!hydrated) {
+      return props.fallback;
+   }
+   return <React.Suspense {...props} />;
+}
+
+const noopStore = () => () => {};
+
+const useHydrated = () =>
+   React.useSyncExternalStore(
+      noopStore,
+      () => true,
+      () => false
+   );

examples/waku/src/lib/waku/server.ts

@@ -0,0 +1,26 @@
+"use server";
+
+import { getContext } from "waku/middleware/context";
+import { getApi } from "../../bknd";
+
+export { unstable_rerenderRoute as rerender } from "waku/router/server";
+
+export function context() {
+   return getContext();
+}
+
+export function handlerReq() {
+   return getContext().req;
+}
+
+export function headers() {
+   const context = getContext();
+   return new Headers(context.req.headers);
+}
+
+export async function getUserApi(opts?: { verify?: boolean }) {
+   return await getApi({
+      headers: headers(),
+      verify: !!opts?.verify,
+   });
+}

examples/waku/src/pages.gen.ts

@@ -0,0 +1,30 @@
+// deno-fmt-ignore-file
+// biome-ignore format: generated types do not need formatting
+// prettier-ignore
+import type { PathsForPages, GetConfigResponse } from 'waku/router';
+
+// prettier-ignore
+import type { getConfig as File_About_getConfig } from './pages/about';
+// prettier-ignore
+import type { getConfig as File_AdminAdmin_getConfig } from './pages/admin/[...admin]';
+// prettier-ignore
+import type { getConfig as File_Index_getConfig } from './pages/index';
+
+// prettier-ignore
+type Page =
+| ({ path: '/about' } & GetConfigResponse<typeof File_About_getConfig>)
+| ({ path: '/admin/[...admin]' } & GetConfigResponse<typeof File_AdminAdmin_getConfig>)
+| { path: '/admin'; render: 'dynamic' }
+| ({ path: '/' } & GetConfigResponse<typeof File_Index_getConfig>)
+| { path: '/login'; render: 'dynamic' }
+| { path: '/test'; render: 'dynamic' };
+
+// prettier-ignore
+declare module 'waku/router' {
+  interface RouteConfig {
+    paths: PathsForPages<Page>;
+  }
+  interface CreatePagesConfig {
+    pages: Page;
+  }
+}

examples/waku/src/pages/_layout.tsx

@@ -0,0 +1,28 @@
+import "../styles.css";
+
+import type { ReactNode } from "react";
+
+import { ClientProvider } from "bknd/client";
+
+type RootLayoutProps = { children: ReactNode };
+
+export default async function RootLayout({ children }: RootLayoutProps) {
+   const data = await getData();
+
+   return children;
+}
+
+const getData = async () => {
+   const data = {
+      description: "An internet website!",
+      icon: "/images/favicon.png",
+   };
+
+   return data;
+};
+
+export const getConfig = async () => {
+   return {
+      render: "static",
+   } as const;
+};

examples/waku/src/pages/about.tsx

@@ -0,0 +1,32 @@
+import { Link } from 'waku';
+
+export default async function AboutPage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
+      <p>{data.body}</p>
+      <Link to="/" className="mt-4 inline-block underline">
+        Return home
+      </Link>
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    title: 'About',
+    headline: 'About Waku',
+    body: 'The minimal React framework',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  } as const;
+};

examples/waku/src/pages/admin/[...admin].tsx

@@ -0,0 +1,32 @@
+/**
+ * See https://github.com/wakujs/waku/issues/1499
+ */
+
+import { Suspense, lazy } from "react";
+import { getUserApi } from "../../lib/waku/server";
+
+const AdminComponent = lazy(() => import("../../bknd/admin"));
+
+export default async function HomePage() {
+   const api = await getUserApi({ verify: true });
+
+   // @ts-ignore
+   const styles = await import("bknd/dist/styles.css?inline").then((m) => m.default);
+   return (
+      <>
+         <style>{styles}</style>
+         <Suspense fallback={null}>
+            <AdminComponent withProvider={{ user: api.getUser()! }} />
+         </Suspense>
+      </>
+   );
+}
+
+// Enable dynamic server rendering.
+// Static rendering is possible if you want to render at build time.
+// The Hono context will not be available.
+export const getConfig = async () => {
+   return {
+      render: "dynamic",
+   } as const;
+};

examples/waku/src/pages/admin/index.tsx

@@ -0,0 +1,6 @@
+import { unstable_redirect as redirect } from "waku/router/server";
+
+export default async function AdminIndex() {
+   await new Promise((resolve) => setTimeout(resolve, 100));
+   redirect("/admin/data");
+}

examples/waku/src/pages/api/[...api].ts

@@ -0,0 +1,5 @@
+import { getApp } from "../../bknd";
+
+export default async function handler(request: Request) {
+   return (await getApp()).fetch(request);
+}

examples/waku/src/pages/index.tsx

@@ -0,0 +1,72 @@
+import { Link } from "waku";
+
+import { Counter } from "../components/counter";
+import { getUserApi, rerender } from "../lib/waku/server";
+
+async function toggleTodo(todo: any, path: string) {
+   "use server";
+   console.log("toggleTodo", todo, path);
+   const api = await getUserApi();
+   await api.data.updateOne("todos", todo.id, {
+      done: !todo.done,
+   });
+   console.log("rerender");
+   rerender(path);
+}
+
+export default async function HomePage({ path }: any) {
+   const api = await getUserApi({ verify: true });
+   const todos = await api.data.readMany("todos");
+   const user = api.getUser();
+   const data = await getData();
+
+   return (
+      <div>
+         <title>{data.title}</title>
+         <h1 className="text-4xl font-bold tracking-tight">{data.headline}</h1>
+         <p>{data.body}</p>
+         <ul>
+            {todos?.map((todo) => (
+               <li key={todo.id} className="flex items-center gap-2">
+                  {todo.title} {todo.done ? "✅" : "❌"}
+                  <form action={toggleTodo.bind(null, todo, path)}>
+                     <button type="submit">Toggle</button>
+                  </form>
+               </li>
+            ))}
+         </ul>
+         <Counter />
+         <Link to="/about" className="mt-4 inline-block underline">
+            About page
+         </Link>
+         {user ? (
+            <a href="/api/auth/logout" className="mt-4 inline-block underline">
+               Logout ({user.email})
+            </a>
+         ) : (
+            <Link to="/login" className="mt-4 inline-block underline">
+               Login
+            </Link>
+         )}
+         <Link to="/admin" className="mt-4 inline-block underline">
+            Admin
+         </Link>
+      </div>
+   );
+}
+
+const getData = async () => {
+   const data = {
+      title: "Waku",
+      headline: "Waku",
+      body: "Hello world!",
+   };
+
+   return data;
+};
+
+export const getConfig = async () => {
+   return {
+      render: "dynamic",
+   } as const;
+};

examples/waku/src/pages/login.tsx

@@ -0,0 +1,9 @@
+export default function LoginPage() {
+   return (
+      <form method="POST" action="/api/auth/password/login">
+         <input type="email" name="email" placeholder="Email" />
+         <input type="password" name="password" placeholder="Password" />
+         <button type="submit">Login</button>
+      </form>
+   );
+}

examples/waku/src/pages/test.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function Test() {
+   useEffect(() => {
+      bridge();
+   }, []);
+   return null;
+}
+
+async function bridge() {
+   const aud = new URLSearchParams(location.search).get("aud") || "";
+   // 1. Verify the user still has an auth cookie
+   const me = await fetch("/api/auth/me", { credentials: "include" });
+   console.log("sso-bridge:me", me);
+   if (!me.ok) {
+      console.log("sso-bridge:no session");
+      parent.postMessage({ type: "NOSESSION" }, aud);
+   } else {
+      console.log("sso-bridge:session");
+
+      // 2. Get short-lived JWT (internal endpoint, same origin)
+      const res = await fetch("/api/issue-jwt", {
+         credentials: "include",
+         headers: { "Content-Type": "application/json" },
+         method: "POST",
+         body: JSON.stringify({
+            aud,
+         }),
+      });
+      console.log("sso-bridge:res", res);
+      const { jwt, exp } = (await res.json()) as any; // exp = unix timestamp seconds
+      console.log("sso-bridge:jwt", { jwt, exp });
+
+      // 3. Send token up
+      parent.postMessage({ type: "JWT", jwt, exp }, aud);
+
+      // 4. Listen for refresh requests
+      window.addEventListener("message", async (ev) => {
+         console.log("sso-bridge:message", ev);
+         if (ev.origin !== aud) return;
+         if (ev.data !== "REFRESH") return;
+         console.log("sso-bridge:message:refresh");
+
+         const r = await fetch("/api/issue-jwt", {
+            credentials: "include",
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ aud: ev.origin }),
+         });
+         console.log("sso-bridge:message:r", r);
+         const { jwt, exp } = (await r.json()) as any;
+         console.log("sso-bridge:message:jwt", { jwt, exp });
+         parent.postMessage({ type: "JWT", jwt, exp }, ev.origin);
+      });
+   }
+}

examples/waku/src/styles.css

@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
+layer(base);
+@import 'tailwindcss';

examples/waku/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "noEmit": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx"
+  }
+}