@tailorkit/app 0.1.0-beta.14 → 0.1.0-beta.16

package/dist/chunk-3XA36UOQ.js

@@ -0,0 +1,612 @@
+import {
+  AppError,
+  appError
+} from "./chunk-IJBQ77AH.js";
+
+// src/views.ts
+import { createContext, h, render } from "preact";
+import { useContext } from "preact/hooks";
+var preactVersion = "10.29.8";
+var createView = (path, options) => {
+  const Context2 = createContext(null);
+  const View = (props) => {
+    if (props.status !== "ready") {
+      return null;
+    }
+    return h(
+      Context2.Provider,
+      { value: props.context },
+      h(options.component, {})
+    );
+  };
+  return {
+    component: View,
+    path,
+    useContext: () => {
+      const context = useContext(Context2);
+      if (context === null) {
+        throw new Error(`View context is only available while rendering "${path}".`);
+      }
+      return context;
+    }
+  };
+};
+var defineClient = (client) => ({
+  ...client,
+  $meta: { preactVersion },
+  $runtime: {
+    h,
+    render: (vnode, parent) => render(vnode && client.component ? h(client.component, { children: vnode }) : vnode, parent)
+  }
+});
+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 { createStore as createStore2 } from "@tanstack/store";
+import { useSelector } from "@tanstack/preact-store";
+import { createContext as createContext2, h as h2 } from "preact";
+import { useCallback, useContext as useContext2, useEffect, useMemo, useRef } from "preact/hooks";
+
+// src/client/connection.ts
+import { createORPCClient } from "@orpc/client";
+import { RPCLink as FetchLink } from "@orpc/client/fetch";
+import { RPCLink } from "@orpc/client/websocket";
+
+// src/client/session.ts
+var APP_SESSION_RENEWAL_MS = 6e4;
+function sessionRenewalDelay(session) {
+  return Math.max(500, session.expiresAt - Date.now() - APP_SESSION_RENEWAL_MS);
+}
+function createSessionProvider(options) {
+  const base = new URL(options.baseUrl, globalThis.location?.href);
+  if (!base.pathname.endsWith("/")) {
+    base.pathname += "/";
+  }
+  let cached;
+  let pending;
+  return (input) => {
+    if (!input.refresh && cached && cached.expiresAt > Date.now() + APP_SESSION_RENEWAL_MS) {
+      return Promise.resolve(cached);
+    }
+    pending ??= (async () => {
+      const response = await (options.fetch ?? fetch)(new URL("backend/session", base), {
+        method: "POST",
+        credentials: "same-origin",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ appId: options.appId })
+      }).catch(() => {
+        throw new AppError("UNAVAILABLE", "Unable to reach the app session provider");
+      });
+      if (!response.ok) {
+        const code = response.status === 403 ? "FORBIDDEN" : "UNAVAILABLE";
+        throw new AppError(
+          response.status === 401 ? "UNAUTHORIZED" : code,
+          "Unable to authorize the app backend"
+        );
+      }
+      const value = await response.json();
+      if (typeof value.token !== "string" || typeof value.expiresAt !== "number" || typeof value.url !== "string") {
+        throw new AppError("UNAVAILABLE", "Invalid app session");
+      }
+      cached = { token: value.token, expiresAt: value.expiresAt, url: value.url };
+      return cached;
+    })().finally(() => {
+      pending = void 0;
+    });
+    return pending;
+  };
+}
+
+// src/client/reference.ts
+function reference(name, _kind) {
+  return Object.freeze({ name });
+}
+function createApi() {
+  function group(path) {
+    return new Proxy(/* @__PURE__ */ Object.create(null), {
+      get(_target, name) {
+        if (typeof name !== "string" || name === "then") return;
+        if (name === "name" && path) return path;
+        return group(path ? `${path}.${name}` : name);
+      }
+    });
+  }
+  return group("");
+}
+
+// src/client/connection.ts
+function createClient(options = {}) {
+  let closed = false;
+  let socket;
+  let timer;
+  const stops = /* @__PURE__ */ new Set();
+  const requests = /* @__PURE__ */ new Set();
+  const getSession = options.getSession ?? ((request) => {
+    const bridge = globalThis.__tailorkitBackendSession;
+    if (!bridge) {
+      throw new AppError("UNAVAILABLE", "The host JWT bridge is unavailable");
+    }
+    return bridge(request);
+  });
+  const wire = createORPCClient(
+    new RPCLink({
+      connect: async (info) => {
+        if (closed) {
+          throw new AppError("UNAVAILABLE", "App client closed");
+        }
+        const session = await getSession({ refresh: info.totalAttempt > 1 });
+        if (closed) {
+          throw new AppError("UNAVAILABLE", "App client closed");
+        }
+        const url = backendUrl(session, "queries");
+        url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
+        socket = await (options.connect ?? ((url2, protocols) => new WebSocket(url2, protocols)))(
+          url.href,
+          ["tailorkit", `jwt.${session.token}`]
+        );
+        clearTimeout(timer);
+        timer = setTimeout(
+          () => socket?.close(1e3, "Renew authentication"),
+          sessionRenewalDelay(session)
+        );
+        return socket;
+      },
+      reconnect: {
+        enabled: true,
+        delay: (info) => info.attempt === 1 ? 0 : options.retryDelayMs ?? 1e3
+      }
+    })
+  );
+  async function call(kind, input) {
+    if (closed) {
+      throw new AppError("UNAVAILABLE", "App client closed");
+    }
+    const controller = new AbortController();
+    requests.add(controller);
+    try {
+      const invocation = kind === "mutations" ? structuredClone(input) : input;
+      let attempt = 0;
+      let refresh = false;
+      let refreshed = false;
+      while (true) {
+        try {
+          if (closed) {
+            throw new AppError("UNAVAILABLE", "App client closed");
+          }
+          const session = await getSession({ refresh });
+          refresh = false;
+          if (closed) {
+            throw new AppError("UNAVAILABLE", "App client closed");
+          }
+          const url = backendUrl(session, kind);
+          url.pathname = url.pathname.slice(0, -kind.length).replace(/\/$/u, "");
+          const http = createORPCClient(
+            new FetchLink({
+              url: url.pathname,
+              origin: url.origin,
+              headers: { authorization: `Bearer ${session.token}` },
+              fetch: async (url2, init) => {
+                let response;
+                try {
+                  response = await (options.fetch ?? fetch)(url2, { ...init, credentials: "omit" });
+                } catch {
+                  throw new AppError("UNAVAILABLE", "App connection interrupted");
+                }
+                if ([502, 503, 504].includes(response.status)) {
+                  throw new AppError("UNAVAILABLE", "App backend temporarily unavailable");
+                }
+                if (kind === "mutations" && response.body) {
+                  try {
+                    return new Response(await response.arrayBuffer(), {
+                      status: response.status,
+                      headers: response.headers
+                    });
+                  } catch {
+                    throw new AppError("UNAVAILABLE", "App connection interrupted");
+                  }
+                }
+                return response;
+              }
+            })
+          );
+          if (kind === "mutations") {
+            return await http.mutations(invocation, {
+              signal: controller.signal
+            });
+          }
+          return await http[kind](invocation, { signal: controller.signal });
+        } catch (error) {
+          const failure = appError(error);
+          if (kind !== "mutations" || closed || controller.signal.aborted) {
+            throw failure;
+          }
+          if (failure.code === "UNAUTHORIZED" && !refreshed) {
+            refresh = true;
+            refreshed = true;
+            continue;
+          }
+          if (failure.code !== "UNAVAILABLE") {
+            throw failure;
+          }
+          await waitForRetry(
+            controller.signal,
+            Math.min((options.retryDelayMs ?? 1e3) * 2 ** Math.min(attempt++, 5), 3e4)
+          );
+        }
+      }
+    } catch (error) {
+      throw appError(error);
+    } finally {
+      requests.delete(controller);
+    }
+  }
+  return {
+    query: (ref, ...[args]) => call("queries", { name: ref.name, args }),
+    mutate: (ref, ...[args, settings]) => call("mutations", {
+      name: ref.name,
+      args,
+      requestId: settings?.requestId ?? crypto.randomUUID()
+    }),
+    action: (ref, ...[args]) => call("actions", { name: ref.name, args }),
+    subscribe(ref, args, next, settings = {}) {
+      if (closed) {
+        throw new AppError("UNAVAILABLE", "App client closed");
+      }
+      const controller = new AbortController();
+      const stop = () => {
+        controller.abort();
+        stops.delete(stop);
+      };
+      stops.add(stop);
+      const run = async () => {
+        while (!controller.signal.aborted) {
+          try {
+            const stream = await wire.subscribe(
+              { name: ref.name, args },
+              { signal: controller.signal }
+            );
+            for await (const value of stream) {
+              if (controller.signal.aborted || closed) {
+                break;
+              }
+              next(value);
+            }
+          } catch (error) {
+            if (controller.signal.aborted || closed) {
+              break;
+            }
+            const failure = appError(error);
+            if (!(error instanceof Error && error.name === "AbortError")) {
+              settings.onError?.(failure);
+            }
+            if (!["UNAUTHORIZED", "UNAVAILABLE", "INTERNAL_SERVER_ERROR"].includes(failure.code)) {
+              break;
+            }
+          }
+          if (!controller.signal.aborted && !closed) {
+            await waitForRetry(controller.signal, options.retryDelayMs ?? 1e3);
+          }
+        }
+        stop();
+      };
+      void run().catch((error) => {
+        stop();
+        settings.onError?.(appError(error));
+      });
+      return stop;
+    },
+    close() {
+      closed = true;
+      for (const stop of stops) {
+        stop();
+      }
+      for (const request of requests) {
+        request.abort();
+      }
+      clearTimeout(timer);
+      socket?.close();
+    }
+  };
+}
+function backendUrl(session, route) {
+  const url = new URL(session.url);
+  if (url.username || url.password || url.search || url.hash) {
+    throw new AppError("BAD_REQUEST", "Invalid app backend URL");
+  }
+  if (url.protocol === "wss:") {
+    url.protocol = "https:";
+  }
+  if (url.protocol === "ws:") {
+    url.protocol = "http:";
+  }
+  if (url.protocol !== "https:" && !(url.protocol === "http:" && ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname))) {
+    throw new AppError("BAD_REQUEST", "App backends require HTTPS");
+  }
+  if (session.expiresAt <= Date.now() + 1e3) {
+    throw new AppError("UNAUTHORIZED", "App token expired");
+  }
+  url.pathname = `${url.pathname.replace(/\/$/u, "")}/${route}`;
+  return url;
+}
+function waitForRetry(signal, delayMs) {
+  if (signal.aborted) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    const wake = () => {
+      clearTimeout(timer);
+      signal.removeEventListener("abort", wake);
+      resolve();
+    };
+    const timer = setTimeout(wake, delayMs);
+    signal.addEventListener("abort", wake, { once: true });
+  });
+}
+
+// src/client/query-store.ts
+import { createStore } from "@tanstack/store";
+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 = createStore(/* @__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.setState((previous) => new Map(previous).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?.();
+        this.state.setState((previous) => {
+          const next = new Map(previous);
+          next.delete(key);
+          return 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.setState(() => /* @__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]
+  );
+  useEffect(() => () => store.dispose(), [store]);
+  return h2(Context.Provider, { value: store }, children);
+}
+function useStore() {
+  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 = useStore();
+  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 state = useSelector(
+    store.state,
+    (queries) => enabled ? queries.get(key) ?? pendingQuery : pendingQuery
+  );
+  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 = useStore();
+  const name = ref.name;
+  const identity = useMemo(
+    () => ({
+      store,
+      name,
+      kind,
+      state: createStore2(idleCall)
+    }),
+    [store, name, kind]
+  );
+  const state = useSelector(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;
+  useEffect(() => {
+    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.setState(() => ({ ...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.setState(() => ({ data: void 0, error: failure, status: "error" }));
+          settings.onError?.(failure, args);
+        }
+        store.onError(failure);
+        throw failure;
+      }
+      if (isCurrent()) {
+        identity.state.setState(() => ({ 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.setState(() => 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 };
+}
+
+export {
+  createView,
+  defineClient,
+  createRemoteComponent,
+  createSessionProvider,
+  reference,
+  createApi,
+  createClient,
+  ClientProvider,
+  useQuery,
+  useMutation,
+  useAction
+};