@preprio/toolkit 0.5.0-rc.2 → 0.5.0-rc.4

package/dist/nextjs/live.d.cts

@@ -0,0 +1,52 @@
+/** Executes a registered query. `query` is opaque — string or DocumentNode. */
+interface LiveFetcher {
+    (query: unknown, variables?: Record<string, unknown>): Promise<unknown>;
+}
+
+interface LivePreviewConfig {
+    /**
+     * Pass your preview flag; never `true` on a production deployment.
+     * Defaults to false: nothing starts and `useLive` is a passthrough.
+     */
+    enabled?: boolean;
+    /** Runs registered queries against Prepr GraphQL in preview mode. */
+    fetcher?: LiveFetcher;
+    /** Exact editor origins, replacing the `*.prepr.io` default. */
+    allowedEditorOrigins?: string[];
+    /** Your preview token uses GraphQL strict mode; see the toolbar option. */
+    strictMode?: boolean;
+}
+interface PreprRefreshProps {
+    /** Pass your preview flag; never `true` on a production deployment. */
+    enabled?: boolean;
+    /** Your preview token uses GraphQL strict mode; see the toolbar option. */
+    strictMode?: boolean;
+}
+interface UseLiveOptions {
+    /** Query (string or DocumentNode) passed as-is to the fetcher. */
+    query?: unknown;
+    variables?: Record<string, unknown>;
+}
+/**
+ * Turn live preview on for `useLive`. Call once on the client with your
+ * preview flag as `enabled`. Without a fetcher, saves do not refetch. Not
+ * needed when `PreprRefresh` is enabled.
+ */
+declare function initLivePreview(config?: LivePreviewConfig): void;
+/**
+ * Register a query result for live preview. Field changes re-render
+ * instantly; saves refetch `{ query, variables }` when given. A passthrough
+ * until live preview is enabled and outside the editor iframe. The data must
+ * select `_id` on every level that should update.
+ */
+declare function useLive<T>(data: T, opts?: UseLiveOptions): T;
+/**
+ * Keeps server components in step with the Prepr editor: unsaved changes
+ * re-render the route, where `normalizeQuery` applies them; a save refreshes
+ * it. Mount once in the root layout with your preview flag as `enabled`.
+ * Use this or `useLive` with a `query`, not both: a save would refetch and
+ * refresh.
+ */
+declare function PreprRefresh({ enabled, strictMode: strict, }: PreprRefreshProps): null;
+
+export { type LivePreviewConfig, PreprRefresh, type PreprRefreshProps, type UseLiveOptions, initLivePreview, useLive };

package/dist/nextjs/live.d.ts

@@ -0,0 +1,52 @@
+/** Executes a registered query. `query` is opaque — string or DocumentNode. */
+interface LiveFetcher {
+    (query: unknown, variables?: Record<string, unknown>): Promise<unknown>;
+}
+
+interface LivePreviewConfig {
+    /**
+     * Pass your preview flag; never `true` on a production deployment.
+     * Defaults to false: nothing starts and `useLive` is a passthrough.
+     */
+    enabled?: boolean;
+    /** Runs registered queries against Prepr GraphQL in preview mode. */
+    fetcher?: LiveFetcher;
+    /** Exact editor origins, replacing the `*.prepr.io` default. */
+    allowedEditorOrigins?: string[];
+    /** Your preview token uses GraphQL strict mode; see the toolbar option. */
+    strictMode?: boolean;
+}
+interface PreprRefreshProps {
+    /** Pass your preview flag; never `true` on a production deployment. */
+    enabled?: boolean;
+    /** Your preview token uses GraphQL strict mode; see the toolbar option. */
+    strictMode?: boolean;
+}
+interface UseLiveOptions {
+    /** Query (string or DocumentNode) passed as-is to the fetcher. */
+    query?: unknown;
+    variables?: Record<string, unknown>;
+}
+/**
+ * Turn live preview on for `useLive`. Call once on the client with your
+ * preview flag as `enabled`. Without a fetcher, saves do not refetch. Not
+ * needed when `PreprRefresh` is enabled.
+ */
+declare function initLivePreview(config?: LivePreviewConfig): void;
+/**
+ * Register a query result for live preview. Field changes re-render
+ * instantly; saves refetch `{ query, variables }` when given. A passthrough
+ * until live preview is enabled and outside the editor iframe. The data must
+ * select `_id` on every level that should update.
+ */
+declare function useLive<T>(data: T, opts?: UseLiveOptions): T;
+/**
+ * Keeps server components in step with the Prepr editor: unsaved changes
+ * re-render the route, where `normalizeQuery` applies them; a save refreshes
+ * it. Mount once in the root layout with your preview flag as `enabled`.
+ * Use this or `useLive` with a `query`, not both: a save would refetch and
+ * refresh.
+ */
+declare function PreprRefresh({ enabled, strictMode: strict, }: PreprRefreshProps): null;
+
+export { type LivePreviewConfig, PreprRefresh, type PreprRefreshProps, type UseLiveOptions, initLivePreview, useLive };

package/dist/nextjs/live.js

@@ -0,0 +1,265 @@
+"use client";
+import {
+  createScopedLogger
+} from "../chunk-S3VT4UWM.js";
+
+// src/nextjs/live.ts
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+// src/core/live-preview/test-reset.ts
+var resets = /* @__PURE__ */ new Set();
+function onTestReset(reset) {
+  resets.add(reset);
+}
+
+// src/nextjs/live.ts
+import { syncPreprLiveLog } from "./live-action.js";
+var debug = createScopedLogger("live-preview:next");
+var LOG_SYNC_DEBOUNCE_MS = 150;
+var starting = null;
+var store = null;
+var bridge = null;
+var allowedEditorOrigins;
+var strictMode = false;
+var startListeners = /* @__PURE__ */ new Set();
+function isFramed() {
+  return typeof window !== "undefined" && window.self !== window.top;
+}
+function startLive() {
+  starting ?? (starting = import("../live-preview-H4643QYF.js").then(
+    ({ createLiveBridge, createLiveStore }) => {
+      const skipped = new Set(quarantined());
+      const started = createLiveStore({
+        accept: (patch) => !skipped.has(patchKey(patch))
+      });
+      watchClientRenders(started);
+      bridge = createLiveBridge(started, {
+        allowedEditorOrigins: () => allowedEditorOrigins,
+        strictMode: () => strictMode
+      });
+      bridge.start();
+      store = started;
+      startListeners.forEach((listener) => listener(started));
+      startListeners.clear();
+      return started;
+    }
+  ));
+  return starting;
+}
+function whenLive(listener) {
+  if (store) {
+    listener(store);
+    return () => {
+    };
+  }
+  startListeners.add(listener);
+  return () => startListeners.delete(listener);
+}
+function initLivePreview(config = {}) {
+  if (!config.enabled || !isFramed()) return;
+  if (config.strictMode) strictMode = true;
+  if (config.allowedEditorOrigins) {
+    allowedEditorOrigins = [...config.allowedEditorOrigins];
+  }
+  const { fetcher } = config;
+  void startLive().then((started) => {
+    if (fetcher) started.setFetcher(fetcher);
+  });
+}
+function useLive(data, opts) {
+  const [live, setLive] = useState(data);
+  useEffect(() => {
+    if (!isFramed()) return;
+    let unregister = null;
+    const stopWaiting = whenLive((started) => {
+      const registration = started.register(data, opts);
+      setLive(registration.getSnapshot());
+      const unsubscribe = registration.subscribe(
+        () => setLive(registration.getSnapshot())
+      );
+      unregister = () => {
+        unsubscribe();
+        registration.unregister();
+      };
+    });
+    return () => {
+      stopWaiting();
+      unregister?.();
+    };
+  }, [data]);
+  return isFramed() ? live : data;
+}
+function PreprRefresh({
+  enabled = false,
+  strictMode: strict = false
+}) {
+  const router = useRouter();
+  useEffect(() => {
+    if (!enabled || !isFramed()) return;
+    if (strict) strictMode = true;
+    const sync = createLogSync();
+    let unsubscribe = null;
+    let active = true;
+    void startLive().then((started) => {
+      if (!active) return;
+      const offLog = started.onLogChange((log) => {
+        if (log.length) sync.schedule(log);
+        else sync.reset();
+      });
+      const offInvalidate = started.onInvalidate(() => router.refresh());
+      unsubscribe = () => {
+        offLog();
+        offInvalidate();
+      };
+    });
+    return () => {
+      active = false;
+      unsubscribe?.();
+      sync.cancel();
+    };
+  }, [enabled, strict, router]);
+  return null;
+}
+var STEGA_CHARS = /[\u200b-\u200d\u2060-\u2064\ufeff]/;
+var RENDER_SETTLE_MS = 1e3;
+var RENDER_POLL_MS = 100;
+function showsPreprContent() {
+  return document.querySelector("[data-prepr-encoded]") !== null || // Visible text only: inline scripts carry the route's data, edit links
+  // included, even when the route rendered its error page.
+  STEGA_CHARS.test(document.body?.innerText ?? "");
+}
+function watchUntilSettled(onBreak) {
+  const interval = setInterval(() => {
+    if (showsPreprContent()) return;
+    clearInterval(interval);
+    onBreak();
+  }, RENDER_POLL_MS);
+  return () => clearInterval(interval);
+}
+var QUARANTINE_KEY = "__prepr_live_quarantine";
+var MAX_QUARANTINED = 50;
+function quarantined() {
+  try {
+    const stored = JSON.parse(
+      sessionStorage.getItem(QUARANTINE_KEY) ?? "[]"
+    );
+    return Array.isArray(stored) ? stored.filter((key) => typeof key === "string") : [];
+  } catch {
+    return [];
+  }
+}
+function setQuarantined(keys) {
+  try {
+    if (keys.length) {
+      sessionStorage.setItem(
+        QUARANTINE_KEY,
+        JSON.stringify(keys.slice(-MAX_QUARANTINED))
+      );
+    } else {
+      sessionStorage.removeItem(QUARANTINE_KEY);
+    }
+  } catch {
+  }
+}
+var patchKey = (patch) => JSON.stringify(patch);
+var CLIENT_RENDER_MS = 300;
+var recovering = false;
+function recoverFrom(log, lastGood) {
+  if (recovering) return;
+  recovering = true;
+  debug.warn("a live change broke the page; reloading without it");
+  const good = new Set(lastGood.map(patchKey));
+  const broken = log.map(patchKey).filter((key) => !good.has(key));
+  setQuarantined([...quarantined(), ...broken]);
+  window.location.reload();
+}
+function watchClientRenders(watched) {
+  let timer = null;
+  let lastGood = [];
+  watched.onLogChange((log) => {
+    if (timer) clearTimeout(timer);
+    timer = null;
+    if (!log.length) {
+      lastGood = [];
+      setQuarantined([]);
+      return;
+    }
+    if (!showsPreprContent()) return;
+    timer = setTimeout(() => {
+      timer = null;
+      if (showsPreprContent()) lastGood = log;
+      else recoverFrom(log, lastGood);
+    }, CLIENT_RENDER_MS);
+  });
+}
+function createLogSync() {
+  let timer = null;
+  let inFlight = false;
+  let pending = null;
+  let cancelled = false;
+  let lastGood = [];
+  const send = async (incoming) => {
+    const skipped = new Set(quarantined());
+    const log = skipped.size ? incoming.filter((patch) => !skipped.has(patchKey(patch))) : incoming;
+    if (!log.length) return;
+    inFlight = true;
+    const stopWatching = showsPreprContent() ? watchUntilSettled(() => recoverFrom(log, lastGood)) : () => {
+    };
+    let failed = false;
+    try {
+      await syncPreprLiveLog(log);
+    } catch (error) {
+      failed = true;
+      debug.log("sending unsaved changes failed", error);
+    }
+    await new Promise((resolve) => setTimeout(resolve, RENDER_SETTLE_MS));
+    stopWatching();
+    inFlight = false;
+    if (recovering) return;
+    if (!failed) lastGood = log;
+    if (pending && !cancelled) {
+      const next = pending;
+      pending = null;
+      void send(next);
+    }
+  };
+  return {
+    schedule(log) {
+      cancelled = false;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        timer = null;
+        if (inFlight) pending = log;
+        else void send(log);
+      }, LOG_SYNC_DEBOUNCE_MS);
+    },
+    cancel() {
+      cancelled = true;
+      pending = null;
+      if (timer) clearTimeout(timer);
+      timer = null;
+    },
+    /** After a save: the stored content is what renders now. */
+    reset() {
+      this.cancel();
+      lastGood = [];
+      setQuarantined([]);
+    }
+  };
+}
+onTestReset(() => {
+  bridge?.stop();
+  bridge = null;
+  store = null;
+  starting = null;
+  recovering = false;
+  startListeners.clear();
+  allowedEditorOrigins = void 0;
+  strictMode = false;
+});
+export {
+  PreprRefresh,
+  initLivePreview,
+  useLive
+};

package/dist/nuxt/index.cjs

@@ -35,7 +35,7 @@ __export(nuxt_exports, {
 module.exports = __toCommonJS(nuxt_exports);
 
 // src/version.ts
-var VERSION = "0.5.0-rc.2";
+var VERSION = "0.5.0-rc.4";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/nuxt/index.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.5.0-rc.2";
+var VERSION = "0.5.0-rc.4";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";