Merge pull request #204 from bknd-io/feat/waku

feat/waku

app/package.json

@@ -60,8 +60,7 @@
     "bcryptjs": "^3.0.2",
     "dayjs": "^1.11.13",
     "fast-xml-parser": "^5.0.8",
-    "hono": "^4.7.11",
-    "json-schema-form-react": "^0.0.2",
+    "hono": "4.8.3",
     "json-schema-library": "10.0.0-rc7",
     "json-schema-to-ts": "^3.1.1",
     "kysely": "^0.27.6",
@@ -100,7 +99,7 @@
     "dotenv": "^16.4.7",
     "jotai": "^2.12.2",
     "jsdom": "^26.0.0",
-    "jsonv-ts": "^0.2.2",
+    "jsonv-ts": "^0.2.3",
     "kysely-d1": "^0.3.0",
     "kysely-generic-sqlite": "^1.2.1",
     "libsql-stateless-easy": "^1.8.0",

app/src/adapter/index.ts

@@ -70,7 +70,7 @@ export async function createAdapterApp<Config extends BkndConfig = BkndConfig, A
             connection = config.connection;
          } else {
             const sqlite = (await import("bknd/adapter/sqlite")).sqlite;
-            const conf = config.connection ?? { url: ":memory:" };
+            const conf = appConfig.connection ?? { url: ":memory:" };
             connection = sqlite(conf);
             $console.info(`Using ${connection.name} connection`, conf.url);
          }

app/src/auth/authenticate/Authenticator.ts

@@ -217,7 +217,7 @@ export class Authenticator<Strategies extends Record<string, Strategy> = Record<
 
       await addFlashMessage(c, String(error), "error");
 
-      const referer = this.getSafeUrl(c, opts?.redirect ?? c.req.header("Referer") ?? "/");
+      const referer = this.getSafeUrl(c, c.req.header("Referer") ?? "/");
       return c.redirect(referer);
    }
 

app/src/modules/ModuleApi.ts

@@ -1,5 +1,5 @@
 import type { PrimaryFieldType } from "core";
-import { $console } from "core/utils";
+import { $console, isPlainObject } from "core/utils";
 import { isDebug } from "core/env";
 import { encodeSearch } from "core/utils/reqres";
 import type { ApiFetcher } from "Api";
@@ -95,7 +95,11 @@ export abstract class ModuleApi<Options extends BaseModuleApiOptions = BaseModul
       let body: any = _init?.body;
       if (_init && "body" in _init && ["POST", "PATCH", "PUT"].includes(method)) {
          const requestContentType = (headers.get("Content-Type") as string) ?? undefined;
-         if (!requestContentType || requestContentType.startsWith("application/json")) {
+         if (
+            !requestContentType ||
+            requestContentType.startsWith("application/json") ||
+            isPlainObject(body) // @todo: not entirely sure about this
+         ) {
             body = JSON.stringify(_init.body);
             headers.set("Content-Type", "application/json");
          }

app/src/ui/components/display/ErrorBoundary.tsx

@@ -34,11 +34,13 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 
    private renderFallback() {
       if (this.props.fallback) {
-         return typeof this.props.fallback === "function"
-            ? this.props.fallback({ error: this.state.error!, resetError: this.resetError })
-            : this.props.fallback;
+         return typeof this.props.fallback === "function" ? (
+            this.props.fallback({ error: this.state.error!, resetError: this.resetError })
+         ) : (
+            <BaseError>{this.props.fallback}</BaseError>
+         );
       }
-      return <BaseError>Error</BaseError>;
+      return <BaseError>Error1</BaseError>;
    }
 
    override render() {

app/src/ui/components/form/native-form/NativeForm.tsx

@@ -6,7 +6,6 @@ import {
    useRef,
    useState,
 } from "react";
-import { useEvent } from "ui/hooks/use-event";
 import {
    type CleanOptions,
    type InputElement,

app/src/ui/elements/auth/AuthForm.tsx

@@ -1,20 +1,11 @@
 import type { AppAuthOAuthStrategy, AppAuthSchema } from "auth/auth-schema";
 import clsx from "clsx";
-import { Form } from "json-schema-form-react";
+import { NativeForm } from "ui/components/form/native-form/NativeForm";
 import { transform } from "lodash-es";
 import type { ComponentPropsWithoutRef } from "react";
 import { Button } from "ui/components/buttons/Button";
 import { Group, Input, Password, Label } from "ui/components/form/Formy/components";
 import { SocialLink } from "./SocialLink";
-import type { Validator } from "json-schema-form-react";
-import { s } from "bknd/core";
-import type { ErrorDetail } from "jsonv-ts";
-
-class JsonvTsValidator implements Validator<ErrorDetail> {
-   async validate(schema: s.Schema, data: any) {
-      return schema.validate(data).errors;
-   }
-}
 
 export type LoginFormProps = Omit<ComponentPropsWithoutRef<"form">, "onSubmit" | "action"> & {
    className?: string;
@@ -25,16 +16,6 @@ export type LoginFormProps = Omit<ComponentPropsWithoutRef<"form">, "onSubmit" |
    buttonLabel?: string;
 };
 
-const validator = new JsonvTsValidator();
-const schema = s.strictObject({
-   email: s.string({
-      pattern: "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$",
-   }),
-   password: s.string({
-      minLength: 8, // @todo: this should be configurable
-   }),
-});
-
 export function AuthForm({
    formData,
    className,
@@ -79,24 +60,20 @@ export function AuthForm({
                <Or />
             </>
          )}
-         <Form
+         <NativeForm
             method={method}
             action={password.action}
             {...(props as any)}
-            schema={schema}
-            validator={validator}
-            validationMode="change"
+            validateOn="change"
             className={clsx("flex flex-col gap-3 w-full", className)}
          >
-            {({ errors, submitting }) => (
-               <>
             <Group>
                <Label htmlFor="email">Email address</Label>
-                     <Input type="email" name="email" />
+               <Input type="email" name="email" required />
             </Group>
             <Group>
                <Label htmlFor="password">Password</Label>
-                     <Password name="password" />
+               <Password name="password" required minLength={8} />
             </Group>
 
             <Button
@@ -104,13 +81,10 @@ export function AuthForm({
                variant="primary"
                size="large"
                className="w-full mt-2 justify-center"
-                     disabled={errors.length > 0 || submitting}
             >
                {buttonLabel}
             </Button>
-               </>
-            )}
-         </Form>
+         </NativeForm>
       </div>
    );
 }

app/src/ui/routes/data/forms/entity.fields.form.tsx

@@ -23,6 +23,7 @@ import { MantineSelect } from "ui/components/form/hook-form-mantine/MantineSelec
 import type { TPrimaryFieldFormat } from "data/fields/PrimaryField";
 import { s, stringIdentifier } from "bknd/core";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import ErrorBoundary from "ui/components/display/ErrorBoundary";
 
 const fieldsSchemaObject = originalFieldsSchemaObject;
 const fieldsSchema = s.anyOf(Object.values(fieldsSchemaObject));
@@ -453,12 +454,9 @@ function EntityField({
                   </Tabs.Panel>
                   <Tabs.Panel value="specific">
                      <div className="flex flex-col gap-2 pt-3 pb-1">
-                        <JsonSchemaForm
-                           key={type}
-                           schema={specificFieldSchema(type as any)}
-                           formData={specificData}
-                           uiSchema={dataFieldsUiSchema.config}
-                           className="legacy hide-required-mark fieldset-alternative mute-root"
+                        <ErrorBoundary fallback={`Error rendering JSON Schema for ${type}`}>
+                           <SpecificForm
+                              field={field}
                               onChange={(value) => {
                                  setValue(`${prefix}.config`, {
                                     ...getValues([`fields.${index}.config`])[0],
@@ -466,6 +464,7 @@ function EntityField({
                                  });
                               }}
                            />
+                        </ErrorBoundary>
                      </div>
                   </Tabs.Panel>
                   <Tabs.Panel value="code">
@@ -490,3 +489,25 @@ function EntityField({
       </div>
    );
 }
+
+const SpecificForm = ({
+   field,
+   onChange,
+}: {
+   field: FieldArrayWithId<TFieldsFormSchema, "fields", "id">;
+   onChange: (value: any) => void;
+}) => {
+   const type = field.field.type;
+   const specificData = omit(field.field.config, commonProps);
+
+   return (
+      <JsonSchemaForm
+         key={type}
+         schema={specificFieldSchema(type as any)?.toJSON()}
+         formData={specificData}
+         uiSchema={dataFieldsUiSchema.config}
+         className="legacy hide-required-mark fieldset-alternative mute-root"
+         onChange={onChange}
+      />
+   );
+};

bun.lock

@@ -15,7 +15,7 @@
     },
     "app": {
       "name": "bknd",
-      "version": "0.15.0",
+      "version": "0.16.0-rc.0",
       "bin": "./dist/cli/index.js",
       "dependencies": {
         "@cfworker/json-schema": "^4.1.1",
@@ -32,8 +32,7 @@
         "bcryptjs": "^3.0.2",
         "dayjs": "^1.11.13",
         "fast-xml-parser": "^5.0.8",
-        "hono": "^4.7.11",
-        "json-schema-form-react": "^0.0.2",
+        "hono": "4.8.3",
         "json-schema-library": "10.0.0-rc7",
         "json-schema-to-ts": "^3.1.1",
         "kysely": "^0.27.6",
@@ -72,7 +71,7 @@
         "dotenv": "^16.4.7",
         "jotai": "^2.12.2",
         "jsdom": "^26.0.0",
-        "jsonv-ts": "^0.2.2",
+        "jsonv-ts": "^0.2.3",
         "kysely-d1": "^0.3.0",
         "kysely-generic-sqlite": "^1.2.1",
         "libsql-stateless-easy": "^1.8.0",
@@ -124,7 +123,6 @@
       "version": "0.5.1",
       "devDependencies": {
         "@types/bun": "latest",
-        "bknd": "workspace:*",
         "tsdx": "^0.14.1",
         "typescript": "^5.0.0",
       },
@@ -2208,7 +2206,7 @@
 
     "headers-polyfill": ["headers-polyfill@4.0.3", "", {}, "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ=="],
 
-    "hono": ["hono@4.7.11", "", {}, "sha512-rv0JMwC0KALbbmwJDEnxvQCeJh+xbS3KEWW5PC9cMJ08Ur9xgatI0HmtgYZfOdOSOeYsp5LO2cOhdI8cLEbDEQ=="],
+    "hono": ["hono@4.8.3", "", {}, "sha512-jYZ6ZtfWjzBdh8H/0CIFfCBHaFL75k+KMzaM177hrWWm2TWL39YMYaJgB74uK/niRc866NMlH9B8uCvIo284WQ=="],
 
     "hosted-git-info": ["hosted-git-info@2.8.9", "", {}, "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="],
 
@@ -2478,8 +2476,6 @@
 
     "json-schema-compare": ["json-schema-compare@0.2.2", "", { "dependencies": { "lodash": "^4.17.4" } }, "sha512-c4WYmDKyJXhs7WWvAWm3uIYnfyWFoIp+JEoX34rctVvEkMYCPGhXtvmFFXiffBbxfZsvQ0RNnV5H7GvDF5HCqQ=="],
 
-    "json-schema-form-react": ["json-schema-form-react@0.0.2", "", { "peerDependencies": { "react": ">=18", "react-dom": ">=18" } }, "sha512-AoLuYpmKmFitc5eZPXKnPmVpel1VVhMTKBz/U5/esLrd74P3uxN2JNVKI/AI2lwLq6K0u9PBqX2pmpVGcTwzaw=="],
-
     "json-schema-library": ["json-schema-library@10.0.0-rc7", "", { "dependencies": { "@sagold/json-pointer": "^6.0.1", "@sagold/json-query": "^6.2.0", "deepmerge": "^4.3.1", "fast-copy": "^3.0.2", "fast-deep-equal": "^3.1.3", "smtp-address-parser": "1.0.10", "valid-url": "^1.0.9" } }, "sha512-q9DMhftVyO8Xa8cfupS5Kx5Uv1A9OJvyRn8DVDMATQv8bITq18cdZimWilwjHIuf2Mzphy67bSJU9gEFno7BLw=="],
 
     "json-schema-merge-allof": ["json-schema-merge-allof@0.8.1", "", { "dependencies": { "compute-lcm": "^1.1.2", "json-schema-compare": "^0.2.2", "lodash": "^4.17.20" } }, "sha512-CTUKmIlPJbsWfzRRnOXz+0MjIqvnleIXwFTzz+t9T86HnYX/Rozria6ZVGLktAU9e+NygNljveP+yxqtQp/Q4w=="],
@@ -2500,7 +2496,7 @@
 
     "jsonpointer": ["jsonpointer@5.0.1", "", {}, "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="],
 
-    "jsonv-ts": ["jsonv-ts@0.2.2", "", { "optionalDependencies": { "hono": "4.7.11" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-g4kUDYYPBb32Nfbv3R55Se6G4CAv4UOXOPJIEPqw8XX+0SSy44T/AREkwFfGz9GwYuX9UxcvOILbgac2nshL4A=="],
+    "jsonv-ts": ["jsonv-ts@0.2.3", "", { "optionalDependencies": { "hono": "*" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-WvRQ/Eu9DNgohr/WbfzMS1kmvAJVDJWOYcImwRMee2RXNfRGcXgP8PDk0k1gaeb4OPzvJnFrbFNY2tZq3BvXEQ=="],
 
     "jsonwebtoken": ["jsonwebtoken@9.0.2", "", { "dependencies": { "jws": "^3.2.2", "lodash.includes": "^4.3.0", "lodash.isboolean": "^3.0.3", "lodash.isinteger": "^4.0.4", "lodash.isnumber": "^3.0.3", "lodash.isplainobject": "^4.0.6", "lodash.isstring": "^4.0.1", "lodash.once": "^4.0.0", "ms": "^2.1.1", "semver": "^7.5.4" } }, "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ=="],
 

examples/waku/.gitignore

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

examples/waku/bknd.config.ts

@@ -0,0 +1,62 @@
+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
+   connection: {
+      url: process.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-waku-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.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("./_components/AdminLoader"));
+
+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/_components/AdminImpl.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/pages/admin/_components/AdminLoader.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("./AdminImpl"));
+
+export const AdminLoader = (props: BkndAdminProps) => {
+   return (
+      <BrowserOnly fallback={null}>
+         {/* @ts-expect-error */}
+         <AdminImpl {...props} />
+      </BrowserOnly>
+   );
+};
+
+export default AdminLoader;

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,70 @@
+import { Link } from "waku";
+
+import { Counter } from "../components/counter";
+import { rerender, getUserApi } from "../lib/waku/server";
+
+async function toggleTodo(todo: any, path: string) {
+   "use server";
+   const api = await getUserApi();
+   await api.data.updateOne("todos", todo.id, {
+      done: !todo.done,
+   });
+   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,18 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "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"
+  }
+}