@tailorkit/app 0.1.0-beta.23 → 0.1.0-beta.25

package/dist/chunk-O3M4EOCQ.js

@@ -0,0 +1,437 @@
+import {
+  createClient,
+  reference
+} from "./chunk-LIPODQ7B.js";
+import {
+  appError
+} from "./chunk-IJBQ77AH.js";
+
+// src/views.ts
+import { createContext, h } from "preact";
+import { useContext } from "preact/hooks";
+function defineView(options) {
+  if (!options.slot || !options.view) {
+    throw new Error(
+      "Views without a slot or path must be compiled from a .view.tsx file by the TailorKit app build."
+    );
+  }
+  const path = options.view;
+  const Context2 = createContext(
+    null
+  );
+  const instances = options.instances;
+  if (instances && !instances.resolver) {
+    throw new Error("View instance resolvers must be compiled with the TailorKit app build.");
+  }
+  const View = (props) => {
+    if (props.status !== "ready") {
+      return null;
+    }
+    if (instances && !props.instance) {
+      throw new Error(
+        `View "${path}" requires a selected instance. Pass instanceKey to RenderSlot or instance to RenderSlot.Controlled.`
+      );
+    }
+    return h(
+      Context2.Provider,
+      { value: { context: props.context, instance: props.instance } },
+      h(options.component, { key: props.instance?.key })
+    );
+  };
+  return {
+    component: View,
+    path,
+    slot: options.slot,
+    ...instances?.resolver ? { instances: { resolver: instances.resolver } } : {},
+    useContext: () => {
+      const context = useContext(Context2);
+      if (context === null) {
+        throw new Error(`View context is only available while rendering "${path}".`);
+      }
+      return context.context;
+    },
+    useInstance: () => {
+      const value = useContext(Context2);
+      if (!value?.instance)
+        throw new Error(
+          `View instance is only available while rendering an instance of "${path}".`
+        );
+      return value.instance;
+    }
+  };
+}
+var componentTagPrefix = "tailorkit-";
+var toComponentTagName = (name) => `${componentTagPrefix}${name.replaceAll(/([a-z0-9])([A-Z])/gu, "$1-$2").replaceAll(/[\s_]+/gu, "-").toLowerCase()}`;
+var toCallbackEventName = (name) => `tailorkitcallback${name.replaceAll(/[^A-Za-z0-9_$]/gu, "").toLowerCase()}`;
+var toEventProp = (event) => `on${event}`;
+var createRemoteComponent = (name, options = {}) => {
+  const tagName = toComponentTagName(name);
+  const callbacks = options.callbacks ?? {};
+  return function RemoteComponent({ children, ...props }) {
+    const nextProps = { ...props };
+    const callbackMap = {};
+    for (const [key, inputCount] of Object.entries(callbacks)) {
+      const callback = nextProps[key];
+      Reflect.deleteProperty(nextProps, key);
+      if (typeof callback !== "function") {
+        continue;
+      }
+      const eventName = toCallbackEventName(key);
+      callbackMap[eventName] = { callback: key, inputCount };
+      nextProps[toEventProp(eventName)] = (event) => {
+        callback(...(event.detail ?? []).slice(0, inputCount));
+      };
+    }
+    const serializedProps = Object.fromEntries(
+      Object.entries(nextProps).filter(([, value]) => typeof value !== "function")
+    );
+    nextProps["data-tailorkit-props"] = JSON.stringify(serializedProps);
+    if (Object.keys(callbackMap).length > 0) {
+      nextProps["data-tailorkit-callbacks"] = JSON.stringify(callbackMap);
+    }
+    return h(tagName, nextProps, options.children ? children : void 0);
+  };
+};
+
+// src/preact.ts
+import { atom as atom2, computed } from "nanostores";
+import { useStore } from "@nanostores/preact";
+import { createContext as createContext2, h as h2 } from "preact";
+import { useCallback, useContext as useContext2, useEffect, useLayoutEffect, useMemo, useRef } from "preact/hooks";
+
+// src/client/query-store.ts
+import { atom } from "nanostores";
+var pendingQuery = { data: void 0, error: null, status: "pending" };
+function serializeInput(input) {
+  return JSON.stringify({ input, defined: input !== void 0 }, (_key, value) => {
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      return Object.fromEntries(Object.entries(value).toSorted(([a], [b]) => a.localeCompare(b)));
+    }
+    return value;
+  });
+}
+var QueryStore = class {
+  state = atom(/* @__PURE__ */ new Map());
+  entries = /* @__PURE__ */ new Map();
+  disposed = false;
+  client;
+  ownsClient;
+  errorHandler;
+  constructor(client, ownsClient, errorHandler = () => {
+  }) {
+    this.client = client;
+    this.ownsClient = ownsClient;
+    this.errorHandler = errorHandler;
+  }
+  watch(key, ref, input) {
+    let entry = this.entries.get(key);
+    const first = !entry;
+    if (!entry) {
+      entry = { observers: 0 };
+      this.entries.set(key, entry);
+    }
+    const current = entry;
+    current.observers += 1;
+    const publish = (state) => {
+      if (!this.disposed && this.entries.get(key) === current) {
+        this.state.set(new Map(this.state.get()).set(key, state));
+      }
+    };
+    if (first) {
+      const onError = (error) => {
+        if (this.disposed || this.entries.get(key) !== current) {
+          return;
+        }
+        publish({ data: this.state.get().get(key)?.data, error, status: "error" });
+        this.onError(error);
+      };
+      try {
+        current.stop = this.client.subscribe(
+          ref,
+          input,
+          (data) => publish({ data, error: null, status: "success" }),
+          { onError }
+        );
+      } catch (error) {
+        onError(appError(error));
+      }
+    }
+    let active = true;
+    return () => {
+      if (!active) {
+        return;
+      }
+      active = false;
+      current.observers -= 1;
+      if (current.observers === 0 && this.entries.get(key) === current) {
+        this.entries.delete(key);
+        current.stop?.();
+        const next = new Map(this.state.get());
+        next.delete(key);
+        this.state.set(next);
+      }
+    };
+  }
+  dispose() {
+    this.disposed = true;
+    const entries = [...this.entries.values()];
+    this.entries.clear();
+    for (const entry of entries) {
+      entry.stop?.();
+      entry.stop = void 0;
+    }
+    this.state.set(/* @__PURE__ */ new Map());
+    if (this.ownsClient) {
+      this.client.close();
+    }
+  }
+  onError(error) {
+    if (!this.disposed) {
+      this.errorHandler(error);
+    }
+  }
+};
+
+// src/preact.ts
+var Context = createContext2(null);
+function ClientProvider({ children, client, onError }) {
+  const errorHandler = useRef(onError);
+  errorHandler.current = onError;
+  const store = useMemo(
+    () => new QueryStore(client ?? createClient(), !client, (error) => errorHandler.current?.(error)),
+    [client]
+  );
+  useLayoutEffect(() => () => store.dispose(), [store]);
+  return h2(Context.Provider, { value: store }, children);
+}
+function useQueryStore() {
+  const store = useContext2(Context);
+  if (!store) {
+    throw new Error("TailorKit backend hooks require a ClientProvider at the app root.");
+  }
+  return store;
+}
+function useQuery(ref, ...[input, options]) {
+  const store = useQueryStore();
+  const enabled = options?.enabled ?? true;
+  const name = ref.name;
+  const serialized = serializeInput(input);
+  const key = `${name}\0${serialized}`;
+  const stableInput = useMemo(() => JSON.parse(serialized).input, [serialized]);
+  const stableReference = useMemo(() => reference(name, "query"), [name]);
+  const query = useMemo(
+    () => computed(
+      store.state,
+      (queries) => enabled ? queries.get(key) ?? pendingQuery : pendingQuery
+    ),
+    [store, key, enabled]
+  );
+  const state = useStore(query);
+  useEffect(() => {
+    if (enabled) {
+      return store.watch(key, stableReference, stableInput);
+    }
+  }, [store, key, enabled, stableInput, stableReference]);
+  return {
+    ...state,
+    isPending: state.status === "pending",
+    isLoading: enabled && state.status === "pending",
+    isSuccess: state.status === "success",
+    isError: state.status === "error"
+  };
+}
+var idleCall = { data: void 0, error: null, status: "idle" };
+function useCall(kind, ref, options) {
+  const store = useQueryStore();
+  const name = ref.name;
+  const identity = useMemo(
+    () => ({
+      store,
+      name,
+      kind,
+      state: atom2(idleCall)
+    }),
+    [store, name, kind]
+  );
+  const state = useStore(identity.state);
+  const current = useRef({ identity, sequence: 0, mounted: true });
+  if (current.current.identity !== identity) {
+    current.current = { identity, sequence: current.current.sequence + 1, mounted: true };
+  }
+  const callbacks = useRef(options);
+  callbacks.current = options;
+  useLayoutEffect(() => {
+    current.current.mounted = true;
+    return () => {
+      current.current.mounted = false;
+      current.current.sequence += 1;
+    };
+  }, []);
+  const runAsync = useCallback(
+    async (...[input]) => {
+      const sequence = ++current.current.sequence;
+      const settings = callbacks.current;
+      const args = input;
+      const isCurrent = () => current.current.mounted && current.current.identity === identity && current.current.sequence === sequence;
+      identity.state.set({ ...idleCall, status: "pending" });
+      let data;
+      try {
+        data = kind === "mutation" ? await store.client.mutate(reference(name, "mutation"), args) : await store.client.action(reference(name, "action"), args);
+      } catch (error) {
+        const failure = appError(error);
+        if (isCurrent()) {
+          identity.state.set({ data: void 0, error: failure, status: "error" });
+          settings.onError?.(failure, args);
+        }
+        store.onError(failure);
+        throw failure;
+      }
+      if (isCurrent()) {
+        identity.state.set({ data, error: null, status: "success" });
+        settings.onSuccess?.(data, args);
+      }
+      return data;
+    },
+    [identity, kind, store, name]
+  );
+  const run = useCallback(
+    (...args) => {
+      void runAsync(...args).catch(() => {
+      });
+    },
+    [runAsync]
+  );
+  const reset = useCallback(() => {
+    current.current.sequence += 1;
+    identity.state.set(idleCall);
+  }, [identity]);
+  return {
+    ...state,
+    isPending: state.status === "pending",
+    isSuccess: state.status === "success",
+    isError: state.status === "error",
+    reset,
+    run,
+    runAsync
+  };
+}
+function useMutation(ref, options = {}) {
+  const { run, runAsync, ...state } = useCall("mutation", ref, options);
+  return { ...state, mutate: run, mutateAsync: runAsync };
+}
+function useAction(ref, options = {}) {
+  const { run, runAsync, ...state } = useCall("action", ref, options);
+  return { ...state, execute: run, executeAsync: runAsync };
+}
+
+// src/routing.ts
+import { createContext as createContext3, h as h3, render } from "preact";
+import { useContext as useContext3 } from "preact/hooks";
+function defineRoute(options) {
+  if (typeof options.shellComponent !== "function") {
+    throw new TypeError("defineRoute requires a shellComponent.");
+  }
+  return Object.freeze({ shellComponent: options.shellComponent });
+}
+var Outlet = createContext3(void 0);
+function Route() {
+  const children = useContext3(Outlet);
+  if (children === void 0) {
+    throw new Error("Route must be rendered inside a root or layout.");
+  }
+  return children;
+}
+function Shell({ shell, children }) {
+  return h3(Outlet.Provider, { value: children }, h3(shell, { children }));
+}
+function shellComponent(module, root) {
+  const definition = module.definition;
+  if (!root && typeof definition === "function") {
+    return definition;
+  }
+  if (definition && typeof definition === "object" && "shellComponent" in definition && typeof definition.shellComponent === "function") {
+    return definition.shellComponent;
+  }
+  throw new TypeError(
+    `${module.filename} must default-export ${root ? "defineRoute({ shellComponent })" : "a layout component or defineRoute({ shellComponent })"}.`
+  );
+}
+function createFileClient(options) {
+  const rootShell = options.root ? shellComponent(options.root, true) : void 0;
+  const slotShells = new Map(options.roots.map((root) => [root.slot, shellComponent(root, true)]));
+  const layouts = options.layouts.map((layout) => ({
+    ...layout,
+    shell: shellComponent(layout, false)
+  }));
+  const definitions = /* @__PURE__ */ Object.create(null);
+  for (const module of options.views) {
+    const view = module.definition;
+    if (!view || typeof view.component !== "function" || typeof view.path !== "string" || !view.path.startsWith("/")) {
+      throw new TypeError(`${module.filename} must default-export defineView(...).`);
+    }
+    if (view.slot !== module.slot) {
+      throw new Error(
+        `${module.filename} declares slot "${view.slot}" but is in "${module.slot}".`
+      );
+    }
+    const slot = definitions[module.slot] ??= /* @__PURE__ */ Object.create(null);
+    if (Object.hasOwn(slot, view.path)) {
+      throw new Error(
+        `Duplicate view "${view.path}" in slot "${module.slot}" (${module.filename}).`
+      );
+    }
+    slot[view.path] = view;
+  }
+  const slots = /* @__PURE__ */ Object.create(null);
+  for (const [slot, views] of Object.entries(definitions)) {
+    const slotLayouts = layouts.filter((layout) => layout.slot === slot).toSorted(
+      (a, b) => a.path.split("/").filter(Boolean).length - b.path.split("/").filter(Boolean).length
+    );
+    const paths = /* @__PURE__ */ new Set();
+    for (const layout of slotLayouts) {
+      if (paths.has(layout.path)) {
+        throw new Error(`Duplicate layout "${layout.path}" in slot "${slot}".`);
+      }
+      paths.add(layout.path);
+    }
+    const SlotRoute = (props) => {
+      const view = views[props.view];
+      if (!view) {
+        return null;
+      }
+      let child = h3(Outlet.Provider, { value: null }, h3(view.component, props));
+      const matching = slotLayouts.filter(
+        (layout) => layout.path === "/" || props.view === layout.path || props.view.startsWith(`${layout.path}/`)
+      );
+      for (const layout of matching.toReversed()) {
+        child = h3(Shell, { key: layout.path, shell: layout.shell, children: child });
+      }
+      const shell = slotShells.get(slot);
+      return shell ? h3(Shell, { shell, children: child }) : child;
+    };
+    slots[slot] = Object.fromEntries(
+      Object.entries(views).map(([path, view]) => [path, { ...view, component: SlotRoute }])
+    );
+  }
+  const Root = rootShell ? ({ children }) => h3(Shell, { shell: rootShell, children }) : void 0;
+  return {
+    $meta: { preactVersion: "11.0.0" },
+    $runtime: {
+      h: h3,
+      render: (vnode, parent) => render(vnode && Root ? h3(Root, { children: vnode }) : vnode, parent)
+    },
+    slots
+  };
+}
+
+export {
+  defineView,
+  createRemoteComponent,
+  ClientProvider,
+  useQuery,
+  useMutation,
+  useAction,
+  defineRoute,
+  Route,
+  createFileClient
+};

package/dist/client-connection.js

@@ -0,0 +1,14 @@
+import {
+  createClient,
+  createSessionProvider,
+  reference
+} from "./chunk-LIPODQ7B.js";
+import {
+  AppError
+} from "./chunk-IJBQ77AH.js";
+export {
+  AppError,
+  createClient,
+  createSessionProvider,
+  reference
+};

package/dist/client.d.ts

@@ -1,5 +1,7 @@
 export * from "./views";
 export * from "./preact";
+export { defineRoute, Route, createFileClient } from "./routing";
+export type { RouteDefinition, ShellProps } from "./routing";
 export { createClient, createSessionProvider, reference } from "./client/connection";
 export { createApi } from "./client/reference";
 export type { Client, Session, Reference, References } from "./client/connection";

package/dist/client.js

@@ -1,16 +1,20 @@
 import {
   ClientProvider,
-  createApi,
-  createClient,
+  Route,
+  createFileClient,
   createRemoteComponent,
-  createSessionProvider,
-  defineClient,
+  defineRoute,
   defineView,
-  reference,
   useAction,
   useMutation,
   useQuery
-} from "./chunk-LQJEPSUZ.js";
+} from "./chunk-O3M4EOCQ.js";
+import {
+  createApi,
+  createClient,
+  createSessionProvider,
+  reference
+} from "./chunk-LIPODQ7B.js";
 import {
   AppError,
   appError
@@ -18,12 +22,14 @@ import {
 export {
   AppError,
   ClientProvider,
+  Route,
   appError,
   createApi,
   createClient,
+  createFileClient,
   createRemoteComponent,
   createSessionProvider,
-  defineClient,
+  defineRoute,
   defineView,
   reference,
   useAction,

package/dist/config/config.d.ts

@@ -4,9 +4,6 @@ declare const tailorkitConfigSchema: z.ZodObject<{
     build: z.ZodOptional<z.ZodObject<{
         outDir: z.ZodDefault<z.ZodString>;
     }, z.core.$strip>>;
-    client: z.ZodOptional<z.ZodObject<{
-        entry: z.ZodDefault<z.ZodString>;
-    }, z.core.$strict>>;
     host: z.ZodString;
     logos: z.ZodOptional<z.ZodObject<{
         dark: z.ZodOptional<z.ZodString>;
@@ -42,17 +39,6 @@ export interface TailorKitConfig extends z.input<typeof tailorkitConfigSchema> {
          */
         outDir?: string;
     };
-    /**
-     * Browser client build settings. Omit to use the default client entry point.
-     * @default undefined
-     */
-    client?: {
-        /**
-         * Source entry point for the app's browser bundle.
-         * @default "src/client.ts"
-         */
-        entry?: string;
-    };
     /**
      * URL of the TailorKit host used for authentication, deployment, remote preview,
      * and fetching the host schema for generated types. Required; has no default.
@@ -88,9 +74,9 @@ export interface TailorKitConfig extends z.input<typeof tailorkitConfigSchema> {
         entry?: string;
         /**
          * Directory containing Drizzle migrations, used for generation and bundling.
-         * When omitted, uses `./migrations` and allows that directory to be absent.
+         * When omitted, uses `./src/db/migrations` and allows that directory to be absent.
          * An explicitly configured directory must exist when building the backend.
-         * @default "./migrations"
+         * @default "./src/db/migrations"
          */
         migrations?: string;
     };

package/dist/config-loader.js

@@ -1,7 +1,7 @@
 import {
   loadTailorKitConfig
-} from "./chunk-DEU6RITM.js";
-import "./chunk-GVB2PAK7.js";
+} from "./chunk-L5ECQGR7.js";
+import "./chunk-DA2TE2FW.js";
 export {
   loadTailorKitConfig
 };

package/dist/config.js

@@ -1,7 +1,7 @@
 import {
   defineConfig,
   defineTailorKitConfig
-} from "./chunk-GVB2PAK7.js";
+} from "./chunk-DA2TE2FW.js";
 export {
   defineConfig,
   defineTailorKitConfig

package/dist/database/definition.d.ts

@@ -0,0 +1,8 @@
+import type { AnyRelations } from "drizzle-orm/relations";
+export interface DatabaseDefinition<R extends AnyRelations = AnyRelations> {
+    readonly relations: R;
+}
+/** Configure the installation database with Drizzle relations, which also contain its tables. */
+export declare function defineDatabase<const R extends AnyRelations>(definition: DatabaseDefinition<R>): Readonly<{
+    relations: R;
+}>;

package/dist/database/types.d.ts

@@ -1,7 +1,8 @@
+import type { AnyRelations, EmptyRelations } from "drizzle-orm/relations";
 import type { BaseSQLiteDatabase } from "drizzle-orm/sqlite-core";
-type Database = BaseSQLiteDatabase<"sync", {
+type Database<R extends AnyRelations> = BaseSQLiteDatabase<"sync", {
     changes: number;
-}>;
-export type QueryDatabase = Pick<Database, "select" | "selectDistinct">;
-export type MutationDatabase = QueryDatabase & Pick<Database, "insert" | "update" | "delete">;
+}, Record<string, never>, R>;
+export type QueryDatabase<R extends AnyRelations = EmptyRelations> = Pick<Database<R>, "select" | "selectDistinct" | "query">;
+export type MutationDatabase<R extends AnyRelations = EmptyRelations> = QueryDatabase<R> & Pick<Database<R>, "insert" | "update" | "delete">;
 export {};

package/dist/index.js

@@ -1,22 +1,27 @@
 import {
   ClientProvider,
-  createApi,
-  createClient,
+  Route,
+  createFileClient,
   createRemoteComponent,
-  createSessionProvider,
-  defineClient,
+  defineRoute,
   defineView,
-  reference,
   useAction,
   useMutation,
   useQuery
-} from "./chunk-LQJEPSUZ.js";
+} from "./chunk-O3M4EOCQ.js";
+import {
+  createApi,
+  createClient,
+  createSessionProvider,
+  reference
+} from "./chunk-LIPODQ7B.js";
 import {
   action,
   and,
   asc,
   boolean,
   count,
+  defineDatabase,
   defineServer,
   desc,
   eq,
@@ -37,7 +42,7 @@ import {
   text,
   tk,
   withInstanceResolvers
-} from "./chunk-7NOEYJOB.js";
+} from "./chunk-ANTVMHDZ.js";
 import {
   AppError,
   appError
@@ -45,6 +50,7 @@ import {
 export {
   AppError,
   ClientProvider,
+  Route,
   action,
   and,
   appError,
@@ -53,9 +59,11 @@ export {
   count,
   createApi,
   createClient,
+  createFileClient,
   createRemoteComponent,
   createSessionProvider,
-  defineClient,
+  defineDatabase,
+  defineRoute,
   defineServer,
   defineView,
   desc,

package/dist/routing.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentChildren, ComponentType } from "preact";
+import type { TailorKitClientWithMeta } from "./views";
+export interface ShellProps {
+    children?: ComponentChildren;
+}
+export interface RouteDefinition {
+    readonly shellComponent: ComponentType<ShellProps>;
+}
+/** Define the shell in an app or slot root.tsx. */
+export declare function defineRoute(options: RouteDefinition): RouteDefinition;
+/** Render the next layout or selected view inside a root shell or layout. */
+export declare function Route(): string | number | bigint | boolean | object | import("preact").ComponentChild[] | import("preact").VNode<any> | null;
+export interface RouteModule {
+    filename: string;
+    definition: unknown;
+}
+export interface FileViewModule extends RouteModule {
+    slot: string;
+}
+export interface FileLayoutModule extends RouteModule {
+    slot: string;
+    path: string;
+}
+/** The app builder generates this registration; apps only export their files.
+ * @internal
+ */
+export declare function createFileClient(options: {
+    root?: RouteModule;
+    roots: (RouteModule & {
+        slot: string;
+    })[];
+    layouts: FileLayoutModule[];
+    views: FileViewModule[];
+}): TailorKitClientWithMeta;