@tailorkit/react 0.1.0-beta.13 → 0.1.0-beta.14

package/dist/hooks/use-view.d.ts

@@ -2,7 +2,7 @@ import type { StandardJSONSchemaV1 } from "@standard-schema/spec";
 import type { ViewDefinition } from "@tailorkit/core/schema";
 import type { RegisteredViews } from "../tailor-kit";
 export type ViewName<TViews extends Record<string, ViewDefinition>> = keyof TViews & string;
-export type ViewContext<TView> = TView extends ViewDefinition<infer TContext> ? TContext extends StandardJSONSchemaV1 ? StandardJSONSchemaV1.InferOutput<TContext> : Record<string, never> : never;
+export type ViewContext<TView> = TView extends StandardJSONSchemaV1 ? StandardJSONSchemaV1.InferOutput<TView> : Record<string, never>;
 interface ReadyViewOptions<TViews extends Record<string, ViewDefinition>, TView extends ViewName<TViews>> {
     context: ViewContext<TViews[TView]>;
     view: TView;

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/app-view.tsx
-import { useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useRef as useRef3, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { isViewAncestor as isViewAncestor2 } from "@tailorkit/core/views";
 
 // src/view-registry.ts
@@ -63,8 +63,234 @@ function createViewRegistry() {
   };
 }
 
+// src/preview-manager.ts
+import {
+  createPreviewWebSocketClient,
+  previewMetadataSchema
+} from "@tailorkit/client-platform/preview";
+var empty = { revision: 0, source: null };
+function viewerTokenExpiresAt(metadata) {
+  const expiresAt = Number(metadata.token.split(".", 1)[0]);
+  return Number.isSafeInteger(expiresAt) ? expiresAt : 0;
+}
+function bytesFromBase64(value) {
+  const raw = atob(value);
+  const bytes = new Uint8Array(raw.length);
+  for (let index = 0; index < raw.length; index++) {
+    bytes[index] = raw.codePointAt(index) ?? 0;
+  }
+  return bytes;
+}
+async function verify(candidate) {
+  let source = null;
+  for (const [fileIndex, file] of candidate.manifest.files.entries()) {
+    const parts = candidate.files[fileIndex];
+    if (!parts || parts.length !== file.chunks || parts.some((part) => part === null)) {
+      return null;
+    }
+    const bytes = new Uint8Array(file.size);
+    let offset = 0;
+    for (const part of parts) {
+      if (!part) {
+        return null;
+      }
+      bytes.set(part, offset);
+      offset += part.length;
+    }
+    if (offset !== file.size) {
+      return null;
+    }
+    const digest = [...new Uint8Array(await crypto.subtle.digest("SHA-256", bytes))].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+    if (digest !== file.sha256) {
+      return null;
+    }
+    if (file.path === "client.js") {
+      source = new TextDecoder().decode(bytes);
+    }
+  }
+  return source;
+}
+function createPreviewManager(baseUrl, onEnded) {
+  const entries = /* @__PURE__ */ new Map();
+  const notify = (entry) => {
+    for (const listener of entry.listeners) {
+      listener();
+    }
+  };
+  const close = (entry) => {
+    if (entry.reconnect) {
+      clearTimeout(entry.reconnect);
+    }
+    entry.reconnect = null;
+    const socket = entry.socket;
+    entry.socket = null;
+    socket?.close();
+    entry.connecting = false;
+    entry.candidate = null;
+  };
+  const end = (entry) => {
+    close(entry);
+    entry.metadata = null;
+    entry.snapshot = empty;
+    notify(entry);
+    onEnded();
+  };
+  const handleEvent = async (entry, event) => {
+    if (event.type === "ended") {
+      end(entry);
+      return;
+    }
+    if (event.revision <= entry.snapshot.revision) {
+      return;
+    }
+    if (event.type === "begin") {
+      entry.candidate = {
+        revision: event.revision,
+        manifest: event.manifest,
+        files: event.manifest.files.map((file) => Array.from({ length: file.chunks }, () => null))
+      };
+      return;
+    }
+    const candidate = entry.candidate;
+    if (!candidate || candidate.revision !== event.revision) {
+      return;
+    }
+    if (event.type === "chunk") {
+      const file = candidate.manifest.files[event.fileIndex];
+      const slots = candidate.files[event.fileIndex];
+      if (!file || !slots || event.chunkIndex < 0 || event.chunkIndex >= slots.length || slots[event.chunkIndex]) {
+        entry.candidate = null;
+        return;
+      }
+      const bytes = bytesFromBase64(event.base64);
+      if (bytes.length !== Math.min(256 * 1024, file.size - event.chunkIndex * 256 * 1024)) {
+        entry.candidate = null;
+        return;
+      }
+      slots[event.chunkIndex] = bytes;
+      return;
+    }
+    if (event.type === "complete") {
+      const source = await verify(candidate);
+      if (source !== null && entry.candidate === candidate && candidate.revision > entry.snapshot.revision) {
+        entry.snapshot = { revision: candidate.revision, source };
+        notify(entry);
+      }
+      if (entry.candidate === candidate) {
+        entry.candidate = null;
+      }
+    }
+  };
+  const connect = async (entry) => {
+    if (!entry.listeners.size || !entry.app.preview || entry.socket || entry.connecting) {
+      return;
+    }
+    entry.connecting = true;
+    const appMetadata = entry.app.preview;
+    let metadata = entry.metadata && viewerTokenExpiresAt(entry.metadata) > Math.max(Date.now(), viewerTokenExpiresAt(appMetadata)) ? entry.metadata : appMetadata;
+    try {
+      const refresh = new URL("preview/metadata", baseUrl);
+      refresh.searchParams.set("sessionId", metadata.sessionId);
+      const response = await fetch(refresh, { credentials: "same-origin" });
+      if (response.ok) {
+        metadata = previewMetadataSchema.parse(await response.json());
+        entry.metadata = metadata;
+      } else if (response.status === 404) {
+        end(entry);
+        return;
+      }
+    } catch {
+    }
+    if (!entry.listeners.size) {
+      entry.connecting = false;
+      return;
+    }
+    const socket = new WebSocket(metadata.websocketUrl, metadata.token);
+    entry.socket = socket;
+    entry.connecting = false;
+    socket.addEventListener("open", () => {
+      entry.delay = 1e3;
+      const client = createPreviewWebSocketClient(socket);
+      void (async () => {
+        try {
+          const stream = await client.subscribe();
+          for await (const event of stream) {
+            await handleEvent(entry, event);
+          }
+        } catch {
+        } finally {
+          socket.close();
+        }
+      })();
+    });
+    socket.addEventListener("error", () => socket.close());
+    socket.addEventListener("close", () => {
+      if (entry.socket !== socket) {
+        return;
+      }
+      entry.socket = null;
+      entry.candidate = null;
+      if (entry.listeners.size) {
+        entry.reconnect = setTimeout(() => {
+          entry.reconnect = null;
+          void connect(entry);
+        }, entry.delay);
+        entry.delay = Math.min(entry.delay * 2, 3e4);
+      }
+    });
+  };
+  return {
+    getSnapshot: (sessionId) => entries.get(sessionId)?.snapshot ?? empty,
+    updateApp: (app) => {
+      const sessionId = app.preview?.sessionId;
+      const entry = sessionId && entries.get(sessionId);
+      if (entry) {
+        entry.app = app;
+      }
+    },
+    subscribe: (app, listener) => {
+      const sessionId = app.preview?.sessionId;
+      if (!sessionId) {
+        return () => {
+        };
+      }
+      let entry = entries.get(sessionId);
+      if (!entry) {
+        entry = {
+          app,
+          metadata: null,
+          candidate: null,
+          listeners: /* @__PURE__ */ new Set(),
+          snapshot: empty,
+          socket: null,
+          connecting: false,
+          reconnect: null,
+          delay: 1e3
+        };
+        entries.set(sessionId, entry);
+      }
+      entry.app = app;
+      entry.listeners.add(listener);
+      void connect(entry);
+      return () => {
+        entry?.listeners.delete(listener);
+        if (entry && !entry.listeners.size) {
+          close(entry);
+          entries.delete(sessionId);
+        }
+      };
+    },
+    dispose: () => {
+      for (const entry of entries.values()) {
+        close(entry);
+      }
+      entries.clear();
+    }
+  };
+}
+
 // src/store.ts
-function createTailorKitStore(baseUrlInput, initialApps, previewSessionId) {
+function createTailorKitStore(baseUrlInput, initialApps) {
   const baseUrl = toBaseUrl(baseUrlInput);
   const listeners = /* @__PURE__ */ new Set();
   let providedApps = initialApps;
@@ -118,9 +344,6 @@ function createTailorKitStore(baseUrlInput, initialApps, previewSessionId) {
       emit();
       const requestId = ++fetchAppsRequestId;
       const appsUrl = new URL("apps", baseUrl);
-      if (previewSessionId) {
-        appsUrl.searchParams.set("previewSessionId", previewSessionId);
-      }
       fetchAppsPromise = fetch(appsUrl).then(async (response) => {
         if (!response.ok) {
           throw new Error(`Unable to fetch TailorKit apps from ${baseUrl.toString()}.`);
@@ -185,7 +408,12 @@ function createTailorKitStore(baseUrlInput, initialApps, previewSessionId) {
       };
     }
   };
-  return store;
+  return {
+    ...store,
+    previews: createPreviewManager(baseUrl, () => {
+      void store.fetchApps({ force: true });
+    })
+  };
 }
 function toBaseUrl(value) {
   const url = value instanceof URL ? new URL(value) : new URL(value);
@@ -562,6 +790,7 @@ var RemoteErrorBoundary = class extends Component {
 };
 function RemoteViewHost({
   appUrl,
+  sourceText,
   components: components2,
   createIframe,
   props
@@ -609,6 +838,7 @@ function RemoteViewHost({
   useEffect(() => {
     const host = createIframeUiHost(appUrl, {
       createIframe,
+      sourceText,
       onError: (error2) => {
         console.error("TailorKit remote app failed", error2);
         setError(error2);
@@ -634,7 +864,7 @@ function RemoteViewHost({
       hostRef.current = null;
       host.destroy();
     };
-  }, [appUrl, createIframe, store]);
+  }, [appUrl, createIframe, sourceText, store]);
   if (status === "error" && error) {
     return createElement("div", null, formatError(error));
   }
@@ -734,6 +964,29 @@ var AppView = ({
     return currentView === null ? void 0 : { slot, ...currentView };
   }, [context, currentView, view, status, slot]);
   const meta = useSyncExternalStore2(store.subscribe, store.getMetaSnapshot, store.getMetaSnapshot);
+  const previewSessionId = app.preview?.sessionId ?? "";
+  const appRef = useRef3(app);
+  appRef.current = app;
+  const subscribePreview = useCallback2(
+    (listener) => {
+      const currentApp = appRef.current;
+      return currentApp.preview?.sessionId === previewSessionId ? store.previews.subscribe(currentApp, listener) : () => {
+      };
+    },
+    [store, previewSessionId]
+  );
+  const getPreviewSnapshot = useCallback2(
+    () => store.previews.getSnapshot(previewSessionId),
+    [store, previewSessionId]
+  );
+  const previewSnapshot = useSyncExternalStore2(
+    subscribePreview,
+    getPreviewSnapshot,
+    getPreviewSnapshot
+  );
+  useEffect2(() => {
+    store.previews.updateApp(app);
+  }, [store, app]);
   const runtimeProps = useMemo3(
     () => props === void 0 ? void 0 : {
       ...props,
@@ -750,7 +1003,7 @@ var AppView = ({
   useEffect2(() => {
     void store.fetchMeta();
   }, [store]);
-  if (props === void 0 || appUrl === null || meta.schema === null) {
+  if (props === void 0 || appUrl === null && previewSnapshot.source === null || meta.schema === null) {
     return fallback;
   }
   const viewId = `tailorkit-view-${reactId.replaceAll(":", "")}`;
@@ -759,11 +1012,13 @@ var AppView = ({
     /* @__PURE__ */ jsx3(
       RemoteViewHost,
       {
-        appUrl: appUrl.toString(),
+        appUrl: (appUrl ?? new URL(`preview/${previewSessionId}/client.js`, store.baseUrl)).toString(),
+        sourceText: previewSnapshot.source ?? void 0,
         components: wrappedComponents,
         createIframe,
         props: runtimeProps
-      }
+      },
+      previewSnapshot.revision || appUrl?.toString()
     )
   ] }) });
 };
@@ -810,7 +1065,6 @@ function createReactTailorKitClient(options) {
   return {
     baseUrl: options.baseUrl,
     components: wrappedComponents,
-    previewSessionId: options.previewSessionId,
     theme
   };
 }
@@ -895,17 +1149,16 @@ function isEventHandler(key) {
 import { jsx as jsx4 } from "react/jsx-runtime";
 function Root({ apps: appsProp, children, render, client, ...props }) {
   const baseUrl = toBaseUrl(client.baseUrl).toString();
-  const [previousStore, setStore] = useState2(
-    () => createTailorKitStore(baseUrl, appsProp, client.previewSessionId)
-  );
+  const [previousStore, setStore] = useState2(() => createTailorKitStore(baseUrl, appsProp));
   let store = previousStore;
   if (previousStore.baseUrl.toString() !== baseUrl) {
-    store = createTailorKitStore(baseUrl, appsProp, client.previewSessionId);
+    store = createTailorKitStore(baseUrl, appsProp);
     setStore(store);
   }
   useEffect3(() => {
     store.setProvidedApps(appsProp);
   }, [store, appsProp]);
+  useEffect3(() => () => store.previews.dispose(), [store]);
   const context = useMemo5(
     () => ({
       store,
@@ -922,7 +1175,7 @@ function Root({ apps: appsProp, children, render, client, ...props }) {
 }
 
 // src/hooks/use-apps.ts
-import { useCallback as useCallback2, useEffect as useEffect4, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useSyncExternalStore as useSyncExternalStore3 } from "react";
 function useApps() {
   return useAppsStore(useTailorRootContext("useApps").store);
 }
@@ -935,7 +1188,7 @@ function useAppsStore(store) {
   useEffect4(() => {
     void store.fetchApps();
   }, [store]);
-  const refetch = useCallback2(() => store.fetchApps({ force: true }), [store]);
+  const refetch = useCallback3(() => store.fetchApps({ force: true }), [store]);
   return toUseAppsResult(snapshot, refetch);
 }
 function toUseAppsResult(snapshot, refetch) {

package/dist/preview-manager.d.ts

@@ -0,0 +1,11 @@
+import type { TailorKitApp } from "./tailor-kit";
+export interface PreviewSnapshot {
+    revision: number;
+    source: string | null;
+}
+export declare function createPreviewManager(baseUrl: URL, onEnded: () => void): {
+    getSnapshot: (sessionId: string) => PreviewSnapshot;
+    updateApp: (app: TailorKitApp) => void;
+    subscribe: (app: TailorKitApp, listener: () => void) => (() => void);
+    dispose: () => void;
+};

package/dist/remote-view.d.ts

@@ -1,11 +1,12 @@
 import type { ReactNode } from "react";
 interface RemoteViewHostProps {
     appUrl: string | URL;
+    sourceText?: string;
     components: Record<string, unknown>;
     createIframe?: () => HTMLIFrameElement;
     props?: Record<string, unknown>;
 }
-export declare function RemoteViewHost({ appUrl, components, createIframe, props, }: RemoteViewHostProps): ReactNode;
+export declare function RemoteViewHost({ appUrl, sourceText, components, createIframe, props, }: RemoteViewHostProps): ReactNode;
 interface RemoteViewProps {
     nodeId: string;
 }

package/dist/store.d.ts

@@ -12,7 +12,7 @@ interface TailorKitMetaSnapshot {
     status: "error" | "idle" | "loading" | "ready";
 }
 export type TailorKitStore = ReturnType<typeof createTailorKitStore>;
-export declare function createTailorKitStore(baseUrlInput: string | URL, initialApps?: TailorKitApp[], previewSessionId?: string): {
+export declare function createTailorKitStore(baseUrlInput: string | URL, initialApps?: TailorKitApp[]): {
     baseUrl: URL;
     views: {
         getSnapshot: () => import("@tailorkit/core/views").ActiveView | null;
@@ -28,6 +28,12 @@ export declare function createTailorKitStore(baseUrlInput: string | URL, initial
     getAppsSnapshot: () => TailorKitAppsSnapshot;
     getMetaSnapshot: () => TailorKitMetaSnapshot;
     subscribe: (listener: () => void) => (() => void);
+    previews: {
+        getSnapshot: (sessionId: string) => import("./preview-manager").PreviewSnapshot;
+        updateApp: (app: TailorKitApp) => void;
+        subscribe: (app: TailorKitApp, listener: () => void) => (() => void);
+        dispose: () => void;
+    };
 };
 export declare function toBaseUrl(value: string | URL): URL;
 export {};

package/dist/tailor-kit.d.ts

@@ -30,7 +30,9 @@ export interface TailorKitApp {
     name?: string;
     preview?: {
         sessionId: string;
-        status: "connected" | "offline";
+        expiresAt: string;
+        websocketUrl: string;
+        token: string;
     };
 }
 interface AppViewBaseProps {
@@ -70,11 +72,6 @@ export interface TailorKitInstance<TViews extends Record<string, ViewDefinition>
     readonly $slots?: TSlots;
     readonly $views?: TViews;
     readonly baseUrl: string | URL;
-    /**
-     * A host-selected, scope-authorized local-development preview session.
-     * The host handler resolves this server-side before returning app URLs.
-     */
-    readonly previewSessionId?: string;
     readonly components: Record<string, unknown>;
     readonly theme: TailorKitTheme;
 }
@@ -87,7 +84,7 @@ interface TailorKitServerShape {
     $internal: {
         schema: {
             components: Record<string, unknown>;
-            views: Record<string, unknown>;
+            contexts: Record<string, unknown>;
         };
     };
 }
@@ -95,13 +92,12 @@ type ServerComponentMap<TTailor extends TailorKitServerShape> = TTailor["$intern
 type ServerComponents<TTailor extends TailorKitServerShape> = {
     [TName in keyof ServerComponentMap<TTailor>]: ServerComponentMap<TTailor>[TName] extends AnyComponentDefinition ? ServerComponentMap<TTailor>[TName] : never;
 };
-type ServerViewMap<TTailor extends TailorKitServerShape> = TTailor["$internal"]["schema"]["views"];
+type ServerViewMap<TTailor extends TailorKitServerShape> = TTailor["$internal"]["schema"]["contexts"];
 type ServerViews<TTailor extends TailorKitServerShape> = {
     [TName in keyof ServerViewMap<TTailor>]: ServerViewMap<TTailor>[TName] extends ViewDefinition ? ServerViewMap<TTailor>[TName] : never;
 };
 export declare function createTailorKitClient<TTailor extends TailorKitServerShape>(options: {
     baseUrl: string | URL;
-    previewSessionId?: string;
     components?: CompleteComponentRenderers<ServerComponents<TTailor>>;
     theme?: TailorKitTheme;
 }): TailorKitInstance<ServerViews<TTailor>, TTailor extends {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailorkit/react",
-  "version": "0.1.0-beta.13",
+  "version": "0.1.0-beta.14",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -23,8 +23,9 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.9",
     "@standard-schema/spec": "^1.1.0",
-    "@tailorkit/core": "0.1.0-beta.13",
-    "@tailorkit/sandbox": "0.1.0-beta.13"
+    "@tailorkit/client-platform": "0.1.0-beta.14",
+    "@tailorkit/core": "0.1.0-beta.14",
+    "@tailorkit/sandbox": "0.1.0-beta.14"
   },
   "devDependencies": {
     "@tailorkit/config": "0.0.0",