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

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,97 @@
+// 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 isFramed() {
+  return typeof window !== "undefined" && window.self !== window.top;
+}
+function startLive() {
+  starting ?? (starting = import("./live-preview-O2ZTJNW4.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 || !isFramed()) {
+    return {
+      subscribe(run) {
+        run(data);
+        return () => {
+        };
+      }
+    };
+  }
+  if (options.strictMode) strictMode = true;
+  if (options.allowedEditorOrigins) {
+    allowedEditorOrigins = [...options.allowedEditorOrigins];
+  }
+  startLive();
+  const current = () => log.length && applyLog ? applyLog(query, data, log) : data;
+  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.4",
+  "version": "0.5.0-rc.5",
   "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)",
@@ -85,6 +85,11 @@
       "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",