@preprio/toolkit 0.4.3 → 0.5.0-rc.10

package/dist/nuxt/live.d.cts

@@ -0,0 +1,43 @@
+import { Ref, ComputedRef } from 'vue';
+
+/**
+ * What `normalizeQuery` accepts as the query: GraphQL source text, a parsed
+ * `DocumentNode` (from `graphql-tag`, Apollo or GraphQL Code Generator), or a
+ * string-like object such as codegen's `TypedDocumentString`.
+ */
+type QueryInput = string | {
+    kind: 'Document';
+} | {
+    toString(): string;
+};
+
+interface UseNormalizedQueryOptions {
+    /**
+     * Pass your preview flag; never `true` on a production deployment.
+     * Defaults to false: the data is returned unchanged.
+     */
+    enabled?: boolean;
+    /** Called when the editor saves, e.g. `refresh` from `useAsyncData`. */
+    onSave?: () => void;
+    /** Exact editor origins, replacing the `*.prepr.io` default. */
+    allowedEditorOrigins?: string[];
+    /** See the toolbar's `strictMode`. */
+    strictMode?: boolean;
+}
+/**
+ * Show the Prepr editor's unsaved changes in a Nuxt page, applied in the
+ * browser while the editor types:
+ *
+ * ```ts
+ * const page = useNormalizedQuery(GetPageDocument, data, {
+ *   enabled: isPreview,
+ *   onSave: refresh,
+ * });
+ * ```
+ *
+ * Returns the data unchanged on the server and outside the editor iframe.
+ * Select `_id` on every item and component that should update.
+ */
+declare function useNormalizedQuery<T>(query: QueryInput, data: Ref<T> | T, options?: UseNormalizedQueryOptions): ComputedRef<T>;
+
+export { type UseNormalizedQueryOptions, useNormalizedQuery };

package/dist/nuxt/live.d.ts

@@ -0,0 +1,43 @@
+import { Ref, ComputedRef } from 'vue';
+
+/**
+ * What `normalizeQuery` accepts as the query: GraphQL source text, a parsed
+ * `DocumentNode` (from `graphql-tag`, Apollo or GraphQL Code Generator), or a
+ * string-like object such as codegen's `TypedDocumentString`.
+ */
+type QueryInput = string | {
+    kind: 'Document';
+} | {
+    toString(): string;
+};
+
+interface UseNormalizedQueryOptions {
+    /**
+     * Pass your preview flag; never `true` on a production deployment.
+     * Defaults to false: the data is returned unchanged.
+     */
+    enabled?: boolean;
+    /** Called when the editor saves, e.g. `refresh` from `useAsyncData`. */
+    onSave?: () => void;
+    /** Exact editor origins, replacing the `*.prepr.io` default. */
+    allowedEditorOrigins?: string[];
+    /** See the toolbar's `strictMode`. */
+    strictMode?: boolean;
+}
+/**
+ * Show the Prepr editor's unsaved changes in a Nuxt page, applied in the
+ * browser while the editor types:
+ *
+ * ```ts
+ * const page = useNormalizedQuery(GetPageDocument, data, {
+ *   enabled: isPreview,
+ *   onSave: refresh,
+ * });
+ * ```
+ *
+ * Returns the data unchanged on the server and outside the editor iframe.
+ * Select `_id` on every item and component that should update.
+ */
+declare function useNormalizedQuery<T>(query: QueryInput, data: Ref<T> | T, options?: UseNormalizedQueryOptions): ComputedRef<T>;
+
+export { type UseNormalizedQueryOptions, useNormalizedQuery };

package/dist/nuxt/live.js

@@ -0,0 +1,198 @@
+import {
+  collectFields,
+  readQueryDocument
+} from "./chunk-BWPGO25E.js";
+
+// src/nuxt/live.ts
+import {
+  computed,
+  getCurrentScope,
+  onScopeDispose,
+  shallowRef,
+  unref
+} from "vue";
+
+// src/core/live-preview/edit-links.ts
+import {
+  vercelStegaCombine,
+  vercelStegaDecode,
+  vercelStegaSplit
+} from "@vercel/stega";
+var ENTRY_PARAM = "entry";
+var TOP_LEVEL_ENTRY = /^[A-Za-z0-9_]+\.\d+$/;
+function entryIdOf(element) {
+  if (!isRecord(element)) return void 0;
+  if (typeof element._id === "string") return element._id;
+  if (element.__typename !== "Assets" || !Array.isArray(element.items)) {
+    return void 0;
+  }
+  const first = element.items[0];
+  return isRecord(first) && typeof first._id === "string" ? first._id : void 0;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function annotate(value, ctx) {
+  if (!ctx.entryId) return value;
+  const { cleaned, encoded } = vercelStegaSplit(value);
+  if (!encoded) return value;
+  let payload;
+  try {
+    payload = vercelStegaDecode(encoded);
+  } catch {
+    return value;
+  }
+  if (typeof payload?.href !== "string") return value;
+  let url;
+  try {
+    url = new URL(payload.href);
+  } catch {
+    return value;
+  }
+  if (url.searchParams.has(ENTRY_PARAM)) return value;
+  url.searchParams.set(ENTRY_PARAM, ctx.entryId);
+  const itemId = decodeURIComponent(url.pathname.split("/").pop() ?? "");
+  if (!url.searchParams.has("field") && ctx.entryField && TOP_LEVEL_ENTRY.test(ctx.entryField) && itemId === ctx.entryOwnerId) {
+    url.searchParams.set("field", ctx.entryField);
+  }
+  return vercelStegaCombine(
+    cleaned,
+    { ...payload, href: url.toString() },
+    false
+  );
+}
+function walk(value, selections, ctx) {
+  if (typeof value === "string") return annotate(value, ctx);
+  if (Array.isArray(value)) {
+    let changed2 = false;
+    const next2 = value.map((element, index) => {
+      const path = [...ctx.path, String(index)];
+      const entryId = ctx.inAssets ? void 0 : entryIdOf(element);
+      const entry = entryId ? {
+        entryId,
+        entryField: ctx.ownerId ? path.join(".") : void 0,
+        entryOwnerId: ctx.ownerId,
+        inAssets: isRecord(element) && element._id === void 0
+      } : {};
+      const out = walk(element, selections, { ...ctx, ...entry, path });
+      if (out !== element) changed2 = true;
+      return out;
+    });
+    return changed2 ? next2 : value;
+  }
+  if (!isRecord(value)) return value;
+  const id = typeof value._id === "string" ? value._id : void 0;
+  const typename = typeof value.__typename === "string" ? value.__typename : void 0;
+  const fields = ctx.doc && selections ? collectFields(selections, typename, ctx.doc) : null;
+  let changed = false;
+  const next = {};
+  for (const [key, child] of Object.entries(value)) {
+    const field = fields?.get(key);
+    const name = field?.name ?? key;
+    const out = walk(child, field?.selections ?? null, {
+      ...ctx,
+      ownerId: id ?? ctx.ownerId,
+      path: id ? [name] : [...ctx.path, name]
+    });
+    if (out !== child) changed = true;
+    next[key] = out;
+  }
+  return changed ? next : value;
+}
+function annotateEditLinks(result, query, operationName) {
+  let doc = null;
+  if (query !== void 0) {
+    try {
+      doc = readQueryDocument(query, operationName);
+    } catch {
+      doc = null;
+    }
+  }
+  return walk(result, doc?.operation ?? null, { doc, path: [] });
+}
+
+// src/core/live-preview/test-reset.ts
+var resets = /* @__PURE__ */ new Set();
+function onTestReset(reset) {
+  resets.add(reset);
+}
+
+// src/nuxt/live.ts
+var starting = null;
+var store = null;
+var bridge = null;
+var applyLog = null;
+var log = shallowRef([]);
+var allowedEditorOrigins;
+var strictMode;
+var startListeners = /* @__PURE__ */ new Set();
+function isFramed() {
+  return typeof window !== "undefined" && window.self !== window.top;
+}
+function startLive() {
+  starting ?? (starting = import("./live-preview-2RCU35W5.js").then(
+    ({ applyPatchLog, createLiveBridge, createLiveStore }) => {
+      applyLog = applyPatchLog;
+      const started = createLiveStore();
+      bridge = createLiveBridge(started, {
+        allowedEditorOrigins: () => allowedEditorOrigins,
+        strictMode: () => strictMode
+      });
+      bridge.start();
+      started.onLogChange((next) => {
+        log.value = next;
+      });
+      store = started;
+      startListeners.forEach((listener) => listener(started));
+      startListeners.clear();
+    }
+  ));
+}
+function whenLive(listener) {
+  if (store) {
+    listener(store);
+    return () => {
+    };
+  }
+  startListeners.add(listener);
+  return () => startListeners.delete(listener);
+}
+function useNormalizedQuery(query, data, options = {}) {
+  if (!options.enabled) return computed(() => unref(data));
+  const annotated = computed(() => annotateEditLinks(unref(data), query));
+  if (!isFramed()) return annotated;
+  if (options.strictMode) strictMode = true;
+  if (options.allowedEditorOrigins) {
+    allowedEditorOrigins = [...options.allowedEditorOrigins];
+  }
+  startLive();
+  if (options.onSave && getCurrentScope()) {
+    const onSave = options.onSave;
+    let offInvalidate = null;
+    const stopWaiting = whenLive((started) => {
+      offInvalidate = started.onInvalidate(() => onSave());
+    });
+    onScopeDispose(() => {
+      stopWaiting();
+      offInvalidate?.();
+    });
+  }
+  return computed(() => {
+    const value = annotated.value;
+    return log.value.length && applyLog ? applyLog(query, value, log.value) : value;
+  });
+}
+onTestReset(() => {
+  bridge?.stop();
+  bridge = null;
+  store = null;
+  starting = null;
+  applyLog = null;
+  startListeners.clear();
+  log.value = [];
+  allowedEditorOrigins = void 0;
+  strictMode = void 0;
+});
+export {
+  useNormalizedQuery
+};

package/dist/{pixel-e1fUWl2Y.d.cts → pixel-CX422dCO.d.cts}

@@ -2,6 +2,8 @@ type Dictionary = Record<string, unknown>;
 declare const dictionaries: {
     en: Dictionary;
     nl: Dictionary;
+    fr: Dictionary;
+    de: Dictionary;
 };
 type Locale = keyof typeof dictionaries;
 
@@ -64,10 +66,23 @@ interface PreprPreviewOptions extends PreprToolbarOptions {
      */
     ui?: boolean;
     /**
-     * Replace the `*.prepr.io` editor-origin wildcard with an exact list.
-     * Intended for self-hosted editors; when set, the wildcard no longer applies.
+     * Replace the `*.prepr.io` editor-origin wildcard with an exact list, e.g.
+     * `['http://acme.localhost:8000']`. Intended for self-hosted or locally run
+     * editors; when set, the wildcard no longer applies. Entries are compared to
+     * the editor's origin exactly: scheme, host and port.
+     *
+     * `['*']` accepts any editor origin. Use it for development only: any page
+     * that frames the preview can then switch on preview and edit mode and
+     * receives the field-edit events, which carry content item ids.
      */
     allowedEditorOrigins?: string[];
+    /**
+     * Set when your preview token uses GraphQL strict mode, where required
+     * fields are never null. The editor then holds back new entries until
+     * their required fields are filled, and never sends a cleared required
+     * field as null.
+     */
+    strictMode?: boolean;
     /**
      * Strip the invisible stega characters out of visible text at runtime.
      * Default `true`.
@@ -111,7 +126,7 @@ interface PreprToolbarComponentProps extends PreprToolbarProps {
 type PreprHeaderName = 'prepr-customer-id' | 'Prepr-Segments' | 'Prepr-ABtesting' | 'User-Agent' | 'Prepr-User-Agent';
 type PreprVariant = 'A' | 'B';
 type PreprEnvironment = 'preview' | 'production';
-type PreprEventType = 'segment_changed' | 'variant_changed' | 'edit_mode_toggled' | 'preview_mode_toggled' | 'getScrollPosition' | 'loaded' | 'field_edit_requested';
+type PreprEventType = 'segment_changed' | 'variant_changed' | 'edit_mode_toggled' | 'preview_mode_toggled' | 'getScrollPosition' | 'loaded' | 'field_edit_requested' | 'live_ready' | 'navigation_blocked';
 interface PreprHeaders {
     readonly 'prepr-customer-id'?: string;
     readonly 'Prepr-Segments'?: string;

package/dist/{pixel-e1fUWl2Y.d.ts → pixel-CX422dCO.d.ts}

@@ -2,6 +2,8 @@ type Dictionary = Record<string, unknown>;
 declare const dictionaries: {
     en: Dictionary;
     nl: Dictionary;
+    fr: Dictionary;
+    de: Dictionary;
 };
 type Locale = keyof typeof dictionaries;
 
@@ -64,10 +66,23 @@ interface PreprPreviewOptions extends PreprToolbarOptions {
      */
     ui?: boolean;
     /**
-     * Replace the `*.prepr.io` editor-origin wildcard with an exact list.
-     * Intended for self-hosted editors; when set, the wildcard no longer applies.
+     * Replace the `*.prepr.io` editor-origin wildcard with an exact list, e.g.
+     * `['http://acme.localhost:8000']`. Intended for self-hosted or locally run
+     * editors; when set, the wildcard no longer applies. Entries are compared to
+     * the editor's origin exactly: scheme, host and port.
+     *
+     * `['*']` accepts any editor origin. Use it for development only: any page
+     * that frames the preview can then switch on preview and edit mode and
+     * receives the field-edit events, which carry content item ids.
      */
     allowedEditorOrigins?: string[];
+    /**
+     * Set when your preview token uses GraphQL strict mode, where required
+     * fields are never null. The editor then holds back new entries until
+     * their required fields are filled, and never sends a cleared required
+     * field as null.
+     */
+    strictMode?: boolean;
     /**
      * Strip the invisible stega characters out of visible text at runtime.
      * Default `true`.
@@ -111,7 +126,7 @@ interface PreprToolbarComponentProps extends PreprToolbarProps {
 type PreprHeaderName = 'prepr-customer-id' | 'Prepr-Segments' | 'Prepr-ABtesting' | 'User-Agent' | 'Prepr-User-Agent';
 type PreprVariant = 'A' | 'B';
 type PreprEnvironment = 'preview' | 'production';
-type PreprEventType = 'segment_changed' | 'variant_changed' | 'edit_mode_toggled' | 'preview_mode_toggled' | 'getScrollPosition' | 'loaded' | 'field_edit_requested';
+type PreprEventType = 'segment_changed' | 'variant_changed' | 'edit_mode_toggled' | 'preview_mode_toggled' | 'getScrollPosition' | 'loaded' | 'field_edit_requested' | 'live_ready' | 'navigation_blocked';
 interface PreprHeaders {
     readonly 'prepr-customer-id'?: string;
     readonly 'Prepr-Segments'?: string;