@preprio/toolkit 0.5.0-rc.1 → 0.5.0-rc.10

package/dist/sveltekit/live.d.cts

@@ -0,0 +1,59 @@
+/**
+ * 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 NormalizedQueryOptions {
+    /**
+     * 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. `invalidateAll` from `$app/navigation`. */
+    onSave?: () => void;
+    /** Exact editor origins, replacing the `*.prepr.io` default. */
+    allowedEditorOrigins?: string[];
+    /** See the toolbar's `strictMode`. */
+    strictMode?: boolean;
+}
+/**
+ * Svelte's store contract, written out so this module needs no build-time
+ * dependency on `svelte`. Read it with `$store` in a component.
+ */
+interface NormalizedQueryStore<T> {
+    subscribe(run: (value: T) => void): () => void;
+}
+/**
+ * Show the Prepr editor's unsaved changes in a SvelteKit page, applied in the
+ * browser while the editor types:
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { invalidateAll } from '$app/navigation';
+ *   import { normalizedQuery } from '@preprio/toolkit/sveltekit/live';
+ *
+ *   let { data } = $props();
+ *   const result = $derived(
+ *     normalizedQuery(GetPageDocument, data.result, {
+ *       enabled: data.preview,
+ *       onSave: invalidateAll,
+ *     }),
+ *   );
+ * </script>
+ *
+ * <h1>{$result.Page.title}</h1>
+ * ```
+ *
+ * Returns a store that holds the data unchanged on the server and outside
+ * the editor iframe. Select `_id` on every item and component that should
+ * update.
+ */
+declare function normalizedQuery<T>(query: QueryInput, data: T, options?: NormalizedQueryOptions): NormalizedQueryStore<T>;
+
+export { type NormalizedQueryOptions, type NormalizedQueryStore, normalizedQuery };

package/dist/sveltekit/live.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 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 NormalizedQueryOptions {
+    /**
+     * 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. `invalidateAll` from `$app/navigation`. */
+    onSave?: () => void;
+    /** Exact editor origins, replacing the `*.prepr.io` default. */
+    allowedEditorOrigins?: string[];
+    /** See the toolbar's `strictMode`. */
+    strictMode?: boolean;
+}
+/**
+ * Svelte's store contract, written out so this module needs no build-time
+ * dependency on `svelte`. Read it with `$store` in a component.
+ */
+interface NormalizedQueryStore<T> {
+    subscribe(run: (value: T) => void): () => void;
+}
+/**
+ * Show the Prepr editor's unsaved changes in a SvelteKit page, applied in the
+ * browser while the editor types:
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { invalidateAll } from '$app/navigation';
+ *   import { normalizedQuery } from '@preprio/toolkit/sveltekit/live';
+ *
+ *   let { data } = $props();
+ *   const result = $derived(
+ *     normalizedQuery(GetPageDocument, data.result, {
+ *       enabled: data.preview,
+ *       onSave: invalidateAll,
+ *     }),
+ *   );
+ * </script>
+ *
+ * <h1>{$result.Page.title}</h1>
+ * ```
+ *
+ * Returns a store that holds the data unchanged on the server and outside
+ * the editor iframe. Select `_id` on every item and component that should
+ * update.
+ */
+declare function normalizedQuery<T>(query: QueryInput, data: T, options?: NormalizedQueryOptions): NormalizedQueryStore<T>;
+
+export { type NormalizedQueryOptions, type NormalizedQueryStore, normalizedQuery };

package/dist/sveltekit/live.js

@@ -0,0 +1,204 @@
+import {
+  collectFields,
+  readQueryDocument
+} from "./chunk-BWPGO25E.js";
+
+// 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/sveltekit/live.ts
+var starting = null;
+var store = null;
+var bridge = null;
+var applyLog = null;
+var log = [];
+var allowedEditorOrigins;
+var strictMode;
+var logListeners = /* @__PURE__ */ new Set();
+var startListeners = /* @__PURE__ */ new Set();
+function constant(value) {
+  return {
+    subscribe(run) {
+      run(value);
+      return () => {
+      };
+    }
+  };
+}
+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 = next;
+        logListeners.forEach((listener) => listener());
+      });
+      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 normalizedQuery(query, data, options = {}) {
+  if (!options.enabled) return constant(data);
+  const annotated = annotateEditLinks(data, query);
+  if (!isFramed()) return constant(annotated);
+  if (options.strictMode) strictMode = true;
+  if (options.allowedEditorOrigins) {
+    allowedEditorOrigins = [...options.allowedEditorOrigins];
+  }
+  startLive();
+  const current = () => log.length && applyLog ? applyLog(query, annotated, log) : annotated;
+  return {
+    subscribe(run) {
+      run(current());
+      const onLog = () => run(current());
+      logListeners.add(onLog);
+      let offInvalidate = null;
+      const stopWaiting = options.onSave ? whenLive((started) => {
+        offInvalidate = started.onInvalidate(() => options.onSave?.());
+      }) : () => {
+      };
+      return () => {
+        logListeners.delete(onLog);
+        stopWaiting();
+        offInvalidate?.();
+      };
+    }
+  };
+}
+onTestReset(() => {
+  bridge?.stop();
+  bridge = null;
+  store = null;
+  starting = null;
+  applyLog = null;
+  log = [];
+  logListeners.clear();
+  startListeners.clear();
+  allowedEditorOrigins = void 0;
+  strictMode = void 0;
+});
+export {
+  normalizedQuery
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preprio/toolkit",
-  "version": "0.5.0-rc.1",
+  "version": "0.5.0-rc.10",
   "description": "Prepr personalization, A/B testing and preview toolkit for React, Next.js, Nuxt, Astro, SvelteKit and Express",
   "license": "Apache-2.0",
   "author": "Prepr B.V. (https://prepr.io)",
@@ -69,23 +69,43 @@
       "import": "./dist/nextjs/image-loader.js",
       "require": "./dist/nextjs/image-loader.cjs"
     },
+    "./nextjs/live": {
+      "types": "./dist/nextjs/live.d.ts",
+      "import": "./dist/nextjs/live.js",
+      "require": "./dist/nextjs/live.cjs"
+    },
     "./astro": {
       "types": "./dist/astro/index.d.ts",
       "import": "./dist/astro/index.js",
       "require": "./dist/astro/index.cjs"
     },
     "./astro/components/*": "./src/astro/*.astro",
+    "./codegen": {
+      "types": "./dist/codegen/index.d.ts",
+      "import": "./dist/codegen/index.js",
+      "require": "./dist/codegen/index.cjs"
+    },
     "./sveltekit": {
       "types": "./dist/sveltekit/index.d.ts",
       "import": "./dist/sveltekit/index.js",
       "require": "./dist/sveltekit/index.cjs"
     },
+    "./sveltekit/live": {
+      "types": "./dist/sveltekit/live.d.ts",
+      "import": "./dist/sveltekit/live.js",
+      "require": "./dist/sveltekit/live.cjs"
+    },
     "./sveltekit/components/*": "./src/sveltekit/*.svelte",
     "./nuxt": {
       "types": "./dist/nuxt/index.d.ts",
       "import": "./dist/nuxt/index.js",
       "require": "./dist/nuxt/index.cjs"
     },
+    "./nuxt/live": {
+      "types": "./dist/nuxt/live.d.ts",
+      "import": "./dist/nuxt/live.js",
+      "require": "./dist/nuxt/live.cjs"
+    },
     "./nuxt/components/*": "./src/nuxt/*.vue"
   },
   "files": [
@@ -102,13 +122,15 @@
     "build": "tsup",
     "postbuild": "node scripts/check-exports.mjs",
     "test": "vitest run",
+    "test:e2e": "pnpm build && vitest run --config vitest.e2e.config.ts",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@vercel/stega": "^1.1.0",
-    "preact": "^10.29.7"
+    "preact": "^10.29.8"
   },
   "peerDependencies": {
+    "graphql": ">=16",
     "next": ">=13",
     "react": ">=17",
     "react-dom": ">=17",
@@ -116,6 +138,9 @@
     "vue": ">=3.3"
   },
   "peerDependenciesMeta": {
+    "graphql": {
+      "optional": true
+    },
     "next": {
       "optional": true
     },
@@ -133,17 +158,18 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^22.20.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "browserslist": "^4.28.7",
-    "happy-dom": "^20.11.1",
+    "@types/node": "^22.20.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "browserslist": "^4.29.5",
+    "graphql": "^16.14.2",
+    "happy-dom": "^21.0.4",
     "lightningcss": "^1.33.0",
-    "next": "^16.2.12",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "next": "^16.4.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.12"
   }
 }

package/src/astro/PreprToolbar.astro

@@ -50,11 +50,17 @@ const payload = {
 />
 
 <script>
-  import { createPreprPreview } from '@preprio/toolkit';
+  import { createPreprPreview, startHtmlLivePreview } from '@preprio/toolkit';
 
   const el = document.querySelector('script[data-prepr-toolbar-props]');
   if (el?.textContent) {
     const { props, options } = JSON.parse(el.textContent);
     createPreprPreview({ props, options });
+    // Inside the Prepr editor: re-render the page with the editor's unsaved
+    // changes while they type (see `normalizeQuery`). A no-op elsewhere.
+    startHtmlLivePreview({
+      allowedEditorOrigins: options?.allowedEditorOrigins,
+      strictMode: options?.strictMode,
+    });
   }
 </script>