finalized sqlocal, added BkndBrowserApp, updated react example

app/__test__/data/postgres.test.ts

@@ -1,8 +1,8 @@
 import { describe, beforeAll, afterAll, test } from "bun:test";
-import type { PostgresConnection } from "data/connection/postgres";
+import type { PostgresConnection } from "data/connection/postgres/PostgresConnection";
 import { pg, postgresJs } from "bknd";
 import { Pool } from "pg";
-import postgres from 'postgres'
+import postgres from "postgres";
 import { disableConsoleLog, enableConsoleLog, $waitUntil } from "bknd/utils";
 import { $ } from "bun";
 import { connectionTestSuite } from "data/connection/connection-test-suite";

app/build.ts

@@ -267,6 +267,11 @@ async function buildAdapters() {
 
       // specific adatpers
       tsup.build(baseConfig("react-router")),
+      tsup.build(
+         baseConfig("browser", {
+            external: [/^sqlocal\/?.*?/, "wouter"],
+         }),
+      ),
       tsup.build(
          baseConfig("bun", {
             external: [/^bun\:.*/],

app/package.json

@@ -129,6 +129,7 @@
     "react-icons": "5.5.0",
     "react-json-view-lite": "^2.5.0",
     "sql-formatter": "^15.6.10",
+    "sqlocal": "^0.16.0",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.1.16",
     "tailwindcss-animate": "^1.0.7",
@@ -257,6 +258,11 @@
       "import": "./dist/adapter/aws/index.js",
       "require": "./dist/adapter/aws/index.js"
     },
+    "./adapter/browser": {
+      "types": "./dist/types/adapter/browser/index.d.ts",
+      "import": "./dist/adapter/browser/index.js",
+      "require": "./dist/adapter/browser/index.js"
+    },
     "./dist/main.css": "./dist/ui/main.css",
     "./dist/styles.css": "./dist/ui/styles.css",
     "./dist/manifest.json": "./dist/static/.vite/manifest.json",

app/src/adapter/browser/BkndBrowserApp.tsx

@@ -0,0 +1,152 @@
+import {
+   createContext,
+   lazy,
+   Suspense,
+   useContext,
+   useEffect,
+   useState,
+   type ReactNode,
+} from "react";
+import { checksum } from "bknd/utils";
+import { App, registries, sqlocal, type BkndConfig } from "bknd";
+import { Route, Router, Switch } from "wouter";
+import { type Api, ClientProvider } from "bknd/client";
+import { SQLocalKysely } from "sqlocal/kysely";
+import type { ClientConfig, DatabasePath } from "sqlocal";
+import { OpfsStorageAdapter } from "bknd/adapter/browser";
+import type { BkndAdminConfig } from "bknd/ui";
+
+const Admin = lazy(() =>
+   Promise.all([
+      import("bknd/ui"),
+      // @ts-ignore
+      import("bknd/dist/styles.css"),
+   ]).then(([mod]) => ({
+      default: mod.Admin,
+   })),
+);
+
+function safeViewTransition(fn: () => void) {
+   if (document.startViewTransition) {
+      document.startViewTransition(fn);
+   } else {
+      fn();
+   }
+}
+
+export type BrowserBkndConfig<Args = ImportMetaEnv> = Omit<
+   BkndConfig<Args>,
+   "connection" | "app"
+> & {
+   adminConfig?: BkndAdminConfig;
+   connection?: ClientConfig | DatabasePath;
+};
+
+export type BkndBrowserAppProps = {
+   children: ReactNode;
+   loading?: ReactNode;
+   notFound?: ReactNode;
+} & BrowserBkndConfig;
+
+const BkndBrowserAppContext = createContext<{
+   app: App;
+   hash: string;
+}>(undefined!);
+
+export function BkndBrowserApp({
+   children,
+   adminConfig,
+   loading,
+   notFound,
+   ...config
+}: BkndBrowserAppProps) {
+   const [app, setApp] = useState<App | undefined>(undefined);
+   const [api, setApi] = useState<Api | undefined>(undefined);
+   const [hash, setHash] = useState<string>("");
+   const adminRoutePath = (adminConfig?.basepath ?? "") + "/*?";
+
+   async function onBuilt(app: App) {
+      safeViewTransition(async () => {
+         setApp(app);
+         setApi(app.getApi());
+         setHash(await checksum(app.toJSON()));
+      });
+   }
+
+   useEffect(() => {
+      setup({ ...config, adminConfig })
+         .then((app) => onBuilt(app as any))
+         .catch(console.error);
+   }, []);
+
+   if (!app || !api) {
+      return (
+         loading ?? (
+            <Center>
+               <span style={{ opacity: 0.2 }}>Loading...</span>
+            </Center>
+         )
+      );
+   }
+
+   return (
+      <BkndBrowserAppContext.Provider value={{ app, hash }}>
+         <ClientProvider api={api}>
+            <Router key={hash}>
+               <Switch>
+                  {children}
+
+                  <Route path={adminRoutePath}>
+                     <Suspense>
+                        <Admin config={adminConfig} />
+                     </Suspense>
+                  </Route>
+                  <Route path="*">
+                     {notFound ?? (
+                        <Center style={{ fontSize: "48px", fontFamily: "monospace" }}>404</Center>
+                     )}
+                  </Route>
+               </Switch>
+            </Router>
+         </ClientProvider>
+      </BkndBrowserAppContext.Provider>
+   );
+}
+
+export function useApp() {
+   return useContext(BkndBrowserAppContext);
+}
+
+const Center = (props: React.HTMLAttributes<HTMLDivElement>) => (
+   <div
+      {...props}
+      style={{
+         width: "100%",
+         minHeight: "100vh",
+         display: "flex",
+         justifyContent: "center",
+         alignItems: "center",
+         ...(props.style ?? {}),
+      }}
+   />
+);
+
+let initialized = false;
+async function setup(config: BrowserBkndConfig = {}) {
+   if (initialized) return;
+   initialized = true;
+
+   registries.media.register("opfs", OpfsStorageAdapter);
+
+   const app = App.create({
+      ...config,
+      // @ts-ignore
+      connection: sqlocal(new SQLocalKysely(config.connection ?? ":localStorage:")),
+   });
+
+   await config.beforeBuild?.(app);
+   await app.build({ sync: true });
+   await config.onBuilt?.(app);
+
+   return app;
+}

app/src/adapter/browser/OpfsStorageAdapter.ts

@@ -4,7 +4,7 @@ import { parse, s, isFile, isBlob } from "bknd/utils";
 
 export const opfsAdapterConfig = s.object(
    {
-      root: s.string({ default: "" }),
+      root: s.string({ default: "" }).optional(),
    },
    {
       title: "OPFS",

app/src/adapter/browser/index.ts

@@ -0,0 +1,2 @@
+export * from "./OpfsStorageAdapter";
+export * from "./BkndBrowserApp";

app/src/data/connection/Connection.ts

@@ -6,15 +6,12 @@ import {
    type CompiledQuery,
    type DatabaseIntrospector,
    type Dialect,
-   type Expression,
    type Kysely,
    type KyselyPlugin,
    type OnModifyForeignAction,
    type QueryResult,
-   type RawBuilder,
    type SelectQueryBuilder,
    type SelectQueryNode,
-   type Simplify,
    sql,
 } from "kysely";
 import type { jsonArrayFrom, jsonBuildObject, jsonObjectFrom } from "kysely/helpers/sqlite";

app/src/data/connection/postgres/index.ts

@@ -1,5 +0,0 @@
-export { pg, PgPostgresConnection, type PgPostgresConnectionConfig } from "./PgPostgresConnection";
-export { PostgresIntrospector } from "./PostgresIntrospector";
-export { PostgresConnection, type QB, plugins } from "./PostgresConnection";
-export { postgresJs, PostgresJsConnection, type PostgresJsConfig } from "./PostgresJsConnection";
-export { createCustomPostgresConnection } from "./custom";

app/src/data/connection/sqlite/sqlocal/SQLocalConnection.ts

@@ -0,0 +1,48 @@
+import { Kysely, ParseJSONResultsPlugin } from "kysely";
+import { SqliteConnection, SqliteIntrospector, type DB } from "bknd";
+import type { SQLocalKysely } from "sqlocal/kysely";
+
+const plugins = [new ParseJSONResultsPlugin()];
+
+export class SQLocalConnection extends SqliteConnection<SQLocalKysely> {
+   private connected: boolean = false;
+
+   constructor(client: SQLocalKysely) {
+      // @ts-expect-error - config is protected
+      client.config.onConnect = () => {
+         // we need to listen for the connection, it will be awaited in init()
+         this.connected = true;
+      };
+      super({
+         kysely: new Kysely<any>({
+            dialect: {
+               ...client.dialect,
+               createIntrospector: (db: Kysely<DB>) => {
+                  return new SqliteIntrospector(db as any, {
+                     plugins,
+                  });
+               },
+            },
+            plugins,
+         }) as any,
+      });
+      this.client = client;
+   }
+
+   override async init() {
+      if (this.initialized) return;
+      let tries = 0;
+      while (!this.connected && tries < 100) {
+         tries++;
+         await new Promise((resolve) => setTimeout(resolve, 5));
+      }
+      if (!this.connected) {
+         throw new Error("Failed to connect to SQLite database");
+      }
+      this.initialized = true;
+   }
+}
+
+export function sqlocal(instance: InstanceType<typeof SQLocalKysely>): SQLocalConnection {
+   return new SQLocalConnection(instance);
+}

app/src/index.ts

@@ -152,6 +152,9 @@ export { SqliteConnection } from "data/connection/sqlite/SqliteConnection";
 export { SqliteIntrospector } from "data/connection/sqlite/SqliteIntrospector";
 export { SqliteLocalConnection } from "data/connection/sqlite/SqliteLocalConnection";
 
+// data sqlocal
+export { SQLocalConnection, sqlocal } from "data/connection/sqlite/sqlocal/SQLocalConnection";
+
 // data postgres
 export {
    pg,

app/src/plugins/auth/email-otp.plugin.ts

@@ -126,7 +126,7 @@ export function emailOTP({
                         ...entityConfig,
                      },
                      "generated",
-                  ),
+                  ) as any,
                },
                ({ index }, schema) => {
                   const otp = schema[entityName]!;