@preprio/toolkit 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/json-script.js

@@ -0,0 +1,7 @@
+// src/core/json-script.ts
+function serializeForScriptTag(value) {
+  return JSON.stringify(value ?? null).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+export {
+  serializeForScriptTag
+};

package/dist/nextjs/components.cjs

@@ -169,7 +169,11 @@ function t(key, locale, vars) {
 }
 
 // src/core/utils.ts
-function sendPreprEvent(event, data) {
+var trustedParentOrigin = null;
+function setTrustedParentOrigin(origin) {
+  trustedParentOrigin = origin;
+}
+function sendPreprEvent(event, data, options) {
   if (typeof window !== "undefined") {
     const message = {
       name: "prepr_preview_bar",
@@ -180,7 +184,11 @@ function sendPreprEvent(event, data) {
       new CustomEvent("prepr_preview_bar", { detail: message })
     );
     if (window.parent && window.parent !== window) {
-      window.parent.postMessage(message, "*");
+      if (trustedParentOrigin) {
+        window.parent.postMessage(message, trustedParentOrigin);
+      } else if (options?.allowUntrustedTarget) {
+        window.parent.postMessage(message, "*");
+      }
     }
   }
 }
@@ -266,7 +274,23 @@ function createElementCache(query, ttl = 1e3) {
 }
 
 // src/core/iframe-bridge.ts
-function createIframeBridge(store) {
+var EDITOR_BASE_DOMAIN = "prepr.io";
+function isAllowedEditorOrigin(origin, allowed) {
+  if (allowed) return allowed.includes(origin);
+  let url;
+  try {
+    url = new URL(origin);
+  } catch {
+    return false;
+  }
+  if (url.protocol !== "https:" || url.port !== "") return false;
+  const suffix = `.${EDITOR_BASE_DOMAIN}`;
+  if (!url.hostname.endsWith(suffix)) return false;
+  const label = url.hostname.slice(0, -suffix.length);
+  return label.length > 0 && !label.includes(".");
+}
+function createIframeBridge(store, options = {}) {
+  const allowedOrigins = options.allowedEditorOrigins;
   let parentOrigin = null;
   const onKeyDown = (event) => {
     const key = event.key.toLowerCase();
@@ -276,14 +300,16 @@ function createIframeBridge(store) {
   const onMessage = (evt) => {
     const data = evt?.data;
     if (data?.event === "prepr:initVE" && !parentOrigin) {
+      if (!isAllowedEditorOrigin(evt.origin, allowedOrigins)) return;
       parentOrigin = evt.origin;
+      setTrustedParentOrigin(parentOrigin);
       if (data.scrollPosition != null) {
         const top = data.scrollPosition;
         setTimeout(() => window.scrollTo(0, top), 1);
       }
       store.set({ previewMode: true, editMode: data.editMode ?? true });
     }
-    if (evt.origin !== parentOrigin) return;
+    if (!parentOrigin || evt.origin !== parentOrigin) return;
     if (data?.event === "prepr:getScrollPosition") {
       const currentScrollY = window.scrollY || document.documentElement.scrollTop;
       sendPreprEvent("getScrollPosition", { value: currentScrollY });
@@ -291,13 +317,15 @@ function createIframeBridge(store) {
   };
   return {
     start() {
-      sendPreprEvent("loaded");
+      sendPreprEvent("loaded", void 0, { allowUntrustedTarget: true });
       window.addEventListener("keydown", onKeyDown);
       window.addEventListener("message", onMessage);
     },
     stop() {
       window.removeEventListener("keydown", onKeyDown);
       window.removeEventListener("message", onMessage);
+      parentOrigin = null;
+      setTrustedParentOrigin(null);
     }
   };
 }
@@ -937,25 +965,28 @@ function cookieOpts() {
 }
 function createChangeHandler(deps) {
   const { store, stega, syncAutoClean } = deps;
-  function updateParam(name, value) {
+  function updateParams(patch) {
     const [path, existing] = splitPath(deps.currentPath());
     const params = new URLSearchParams(existing);
-    if (value === null) {
-      params.delete(name);
-    } else {
-      params.set(name, value);
+    for (const [name, value] of Object.entries(patch)) {
+      if (value === null) {
+        params.delete(name);
+      } else {
+        params.set(name, value);
+      }
     }
     const query = params.toString();
     deps.navigate(query ? `${path}?${query}` : path);
   }
   return function handleChange(before, after) {
+    const paramPatch = {};
     if (before.selectedSegment !== after.selectedSegment) {
       if (after.selectedSegment === null) {
         removeCookie(COOKIE_SEGMENT, "/", crossSiteCookieOptions());
       } else {
         setCookie(COOKIE_SEGMENT, after.selectedSegment, cookieOpts());
       }
-      updateParam(PARAM_SEGMENT, after.selectedSegment);
+      paramPatch[PARAM_SEGMENT] = after.selectedSegment;
       sendPreprEvent("segment_changed", {
         segment: after.selectedSegment ?? void 0
       });
@@ -966,11 +997,14 @@ function createChangeHandler(deps) {
       } else {
         setCookie(COOKIE_VARIANT, after.selectedVariant, cookieOpts());
       }
-      updateParam(PARAM_VARIANT, after.selectedVariant);
+      paramPatch[PARAM_VARIANT] = after.selectedVariant;
       sendPreprEvent("variant_changed", {
         variant: after.selectedVariant ?? void 0
       });
     }
+    if (Object.keys(paramPatch).length > 0) {
+      updateParams(paramPatch);
+    }
     if (before.editMode !== after.editMode) {
       if (after.editMode) {
         stega.start();
@@ -2076,7 +2110,9 @@ function createPreprToolbar(opts) {
   });
   syncAutoClean(store.get().previewMode);
   const bridge = createIframeBridge(store);
-  sendPreprEvent("getScrollPosition", { value: 0 });
+  sendPreprEvent("getScrollPosition", { value: 0 }, {
+    allowUntrustedTarget: true
+  });
   if (isIframe) {
     bridge.start();
   }

package/dist/nextjs/components.js

@@ -2,7 +2,7 @@
 import {
   createPreprToolbar,
   loadTrackingPixel
-} from "../chunk-3FOY6KL4.js";
+} from "../chunk-NLQIRN5O.js";
 
 // src/nextjs/components.ts
 import { usePathname, useRouter } from "next/navigation";

package/dist/nextjs/image-loader.cjs

@@ -23,100 +23,23 @@ __export(image_loader_exports, {
   default: () => preprImageLoader
 });
 module.exports = __toCommonJS(image_loader_exports);
-var TRANSFORMABLE_HOST_SUFFIXES = [".stream.prepr.io", ".b-cdn.net"];
-var KNOWN_OPTION_KEYS = /* @__PURE__ */ new Set([
-  "w",
-  // width
-  "h",
-  // height
-  "q",
-  // quality
-  "c",
-  // crop position (north, centre, ...)
-  "ex",
-  // crop extract: x offset
-  "ey",
-  // crop extract: y offset
-  "ew",
-  // crop extract: width
-  "eh"
-  // crop extract: height
-]);
-function isTransformSegment(segment) {
-  if (!segment) return false;
-  const parts = segment.split(",");
-  let sawKnownOption = false;
-  for (const part of parts) {
-    const underscore = part.indexOf("_");
-    if (underscore <= 0) return false;
-    const key = part.slice(0, underscore);
-    const value = part.slice(underscore + 1);
-    if (!value) return false;
-    if (KNOWN_OPTION_KEYS.has(key)) {
-      sawKnownOption = true;
+var TRANSFORM_SEGMENT = /\/([^/]*\bw_\d+[^/]*)\//;
+var isPositiveInteger = (value) => /^\d+$/.test(value);
+function preprImageLoader({ src, width }) {
+  return src.replace(TRANSFORM_SEGMENT, (match, segment) => {
+    const options = segment.split(",").map((pair) => {
+      const underscore = pair.indexOf("_");
+      return [pair.slice(0, underscore), pair.slice(underscore + 1)];
+    });
+    const emittedWidth = options.find(([key]) => key === "w");
+    if (!emittedWidth || !isPositiveInteger(emittedWidth[1])) return match;
+    const emittedHeight = options.find(([key]) => key === "h");
+    if (emittedHeight && isPositiveInteger(emittedHeight[1])) {
+      emittedHeight[1] = String(
+        Math.round(width * Number(emittedHeight[1]) / Number(emittedWidth[1]))
+      );
     }
-  }
-  return sawKnownOption;
-}
-function parseTransform(segment) {
-  return segment.split(",").map((part) => {
-    const underscore = part.indexOf("_");
-    return [part.slice(0, underscore), part.slice(underscore + 1)];
+    emittedWidth[1] = String(width);
+    return `/${options.map(([key, value]) => `${key}_${value}`).join(",")}/`;
   });
 }
-function parsePreprUrl(rawUrl) {
-  let url;
-  try {
-    url = new URL(rawUrl);
-  } catch {
-    return null;
-  }
-  const isTransformableHost = TRANSFORMABLE_HOST_SUFFIXES.some(
-    (suffix) => url.hostname.endsWith(suffix)
-  );
-  if (!isTransformableHost) return null;
-  const rawSegments = url.pathname.split("/");
-  rawSegments.shift();
-  if (rawSegments.length === 0) return null;
-  const filename = rawSegments[rawSegments.length - 1];
-  const leading = rawSegments.slice(0, -1);
-  let transform = [];
-  const prefixSegments = [];
-  for (const segment of leading) {
-    if (transform.length === 0 && isTransformSegment(segment)) {
-      transform = parseTransform(segment);
-    } else if (segment === "") {
-      continue;
-    } else {
-      prefixSegments.push(segment);
-    }
-  }
-  const prefix = url.origin + "/" + (prefixSegments.length > 0 ? prefixSegments.join("/") + "/" : "");
-  return { prefix, transform, filename: filename + url.search };
-}
-function buildTransformSegment(pairs) {
-  return pairs.map(([key, value]) => `${key}_${value}`).join(",");
-}
-function preprImageLoader({ src, width, quality }) {
-  const parsed = parsePreprUrl(src);
-  if (!parsed) return src;
-  const { prefix, transform, filename } = parsed;
-  const hasCropExtract = transform.some(([key]) => ["ex", "ey", "ew", "eh"].includes(key));
-  const next = [];
-  let setWidth = false;
-  for (const [key, value] of transform) {
-    if (key === "w") {
-      next.push(["w", String(width)]);
-      setWidth = true;
-    } else if (key === "h" && !hasCropExtract) {
-      continue;
-    } else if (key === "q") {
-      continue;
-    } else {
-      next.push([key, value]);
-    }
-  }
-  if (!setWidth) next.push(["w", String(width)]);
-  if (quality) next.push(["q", String(quality)]);
-  return `${prefix}${buildTransformSegment(next)}/${filename}`;
-}

package/dist/nextjs/image-loader.d.cts

@@ -1,10 +1,14 @@
 import { ImageLoaderProps } from 'next/image';
 
 /**
- * Rewrites Prepr stream URLs to the width `next/image` asks for, preserving any
- * crop/preset options already on the URL. Non-Prepr URLs (other hosts, relative
- * paths) come back unchanged — set `unoptimized` on those `<Image>`s.
+ * Rewrites Prepr stream URLs to the width `next/image` asks for. URLs with no
+ * transform segment (other hosts, relative paths) come back unchanged — set
+ * `unoptimized` on those `<Image>`s.
+ *
+ * No upper clamp: the emitted width is the asset's own size or its crop box,
+ * neither of which is a ceiling on what the CDN can serve, so capping there
+ * would rule out retina.
  */
-declare function preprImageLoader({ src, width, quality }: ImageLoaderProps): string;
+declare function preprImageLoader({ src, width }: ImageLoaderProps): string;
 
 export { preprImageLoader as default };

package/dist/nextjs/image-loader.d.ts

@@ -1,10 +1,14 @@
 import { ImageLoaderProps } from 'next/image';
 
 /**
- * Rewrites Prepr stream URLs to the width `next/image` asks for, preserving any
- * crop/preset options already on the URL. Non-Prepr URLs (other hosts, relative
- * paths) come back unchanged — set `unoptimized` on those `<Image>`s.
+ * Rewrites Prepr stream URLs to the width `next/image` asks for. URLs with no
+ * transform segment (other hosts, relative paths) come back unchanged — set
+ * `unoptimized` on those `<Image>`s.
+ *
+ * No upper clamp: the emitted width is the asset's own size or its crop box,
+ * neither of which is a ceiling on what the CDN can serve, so capping there
+ * would rule out retina.
  */
-declare function preprImageLoader({ src, width, quality }: ImageLoaderProps): string;
+declare function preprImageLoader({ src, width }: ImageLoaderProps): string;
 
 export { preprImageLoader as default };

package/dist/nextjs/image-loader.js

@@ -1,101 +1,24 @@
 // src/nextjs/image-loader.ts
-var TRANSFORMABLE_HOST_SUFFIXES = [".stream.prepr.io", ".b-cdn.net"];
-var KNOWN_OPTION_KEYS = /* @__PURE__ */ new Set([
-  "w",
-  // width
-  "h",
-  // height
-  "q",
-  // quality
-  "c",
-  // crop position (north, centre, ...)
-  "ex",
-  // crop extract: x offset
-  "ey",
-  // crop extract: y offset
-  "ew",
-  // crop extract: width
-  "eh"
-  // crop extract: height
-]);
-function isTransformSegment(segment) {
-  if (!segment) return false;
-  const parts = segment.split(",");
-  let sawKnownOption = false;
-  for (const part of parts) {
-    const underscore = part.indexOf("_");
-    if (underscore <= 0) return false;
-    const key = part.slice(0, underscore);
-    const value = part.slice(underscore + 1);
-    if (!value) return false;
-    if (KNOWN_OPTION_KEYS.has(key)) {
-      sawKnownOption = true;
+var TRANSFORM_SEGMENT = /\/([^/]*\bw_\d+[^/]*)\//;
+var isPositiveInteger = (value) => /^\d+$/.test(value);
+function preprImageLoader({ src, width }) {
+  return src.replace(TRANSFORM_SEGMENT, (match, segment) => {
+    const options = segment.split(",").map((pair) => {
+      const underscore = pair.indexOf("_");
+      return [pair.slice(0, underscore), pair.slice(underscore + 1)];
+    });
+    const emittedWidth = options.find(([key]) => key === "w");
+    if (!emittedWidth || !isPositiveInteger(emittedWidth[1])) return match;
+    const emittedHeight = options.find(([key]) => key === "h");
+    if (emittedHeight && isPositiveInteger(emittedHeight[1])) {
+      emittedHeight[1] = String(
+        Math.round(width * Number(emittedHeight[1]) / Number(emittedWidth[1]))
+      );
     }
-  }
-  return sawKnownOption;
-}
-function parseTransform(segment) {
-  return segment.split(",").map((part) => {
-    const underscore = part.indexOf("_");
-    return [part.slice(0, underscore), part.slice(underscore + 1)];
+    emittedWidth[1] = String(width);
+    return `/${options.map(([key, value]) => `${key}_${value}`).join(",")}/`;
   });
 }
-function parsePreprUrl(rawUrl) {
-  let url;
-  try {
-    url = new URL(rawUrl);
-  } catch {
-    return null;
-  }
-  const isTransformableHost = TRANSFORMABLE_HOST_SUFFIXES.some(
-    (suffix) => url.hostname.endsWith(suffix)
-  );
-  if (!isTransformableHost) return null;
-  const rawSegments = url.pathname.split("/");
-  rawSegments.shift();
-  if (rawSegments.length === 0) return null;
-  const filename = rawSegments[rawSegments.length - 1];
-  const leading = rawSegments.slice(0, -1);
-  let transform = [];
-  const prefixSegments = [];
-  for (const segment of leading) {
-    if (transform.length === 0 && isTransformSegment(segment)) {
-      transform = parseTransform(segment);
-    } else if (segment === "") {
-      continue;
-    } else {
-      prefixSegments.push(segment);
-    }
-  }
-  const prefix = url.origin + "/" + (prefixSegments.length > 0 ? prefixSegments.join("/") + "/" : "");
-  return { prefix, transform, filename: filename + url.search };
-}
-function buildTransformSegment(pairs) {
-  return pairs.map(([key, value]) => `${key}_${value}`).join(",");
-}
-function preprImageLoader({ src, width, quality }) {
-  const parsed = parsePreprUrl(src);
-  if (!parsed) return src;
-  const { prefix, transform, filename } = parsed;
-  const hasCropExtract = transform.some(([key]) => ["ex", "ey", "ew", "eh"].includes(key));
-  const next = [];
-  let setWidth = false;
-  for (const [key, value] of transform) {
-    if (key === "w") {
-      next.push(["w", String(width)]);
-      setWidth = true;
-    } else if (key === "h" && !hasCropExtract) {
-      continue;
-    } else if (key === "q") {
-      continue;
-    } else {
-      next.push([key, value]);
-    }
-  }
-  if (!setWidth) next.push(["w", String(width)]);
-  if (quality) next.push(["q", String(quality)]);
-  return `${prefix}${buildTransformSegment(next)}/${filename}`;
-}
 export {
   preprImageLoader as default
 };

package/dist/nextjs/index.cjs

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(nextjs_exports);
 var import_server = require("next/server");
 
 // src/version.ts
-var VERSION = "0.1.0-beta.4";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/nextjs/index.js

@@ -2,7 +2,7 @@
 import { NextResponse } from "next/server";
 
 // src/version.ts
-var VERSION = "0.1.0-beta.4";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/nuxt/index.cjs

@@ -35,7 +35,7 @@ __export(nuxt_exports, {
 module.exports = __toCommonJS(nuxt_exports);
 
 // src/version.ts
-var VERSION = "0.1.0-beta.4";
+var VERSION = "0.1.0-beta.6";
 
 // 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.1.0-beta.4";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/sveltekit/index.cjs

@@ -35,7 +35,7 @@ __export(sveltekit_exports, {
 module.exports = __toCommonJS(sveltekit_exports);
 
 // src/version.ts
-var VERSION = "0.1.0-beta.4";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/sveltekit/index.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.1.0-beta.4";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/package.json

@@ -1,8 +1,28 @@
 {
   "name": "@preprio/toolkit",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.6",
   "description": "Prepr personalization, A/B testing and preview toolkit for Next.js, Nuxt, Astro, SvelteKit and Express",
-  "license": "MIT",
+  "license": "Apache-2.0",
+  "author": "Prepr B.V. (https://prepr.io)",
+  "keywords": [
+    "prepr",
+    "cms",
+    "headless-cms",
+    "personalization",
+    "ab-testing",
+    "preview",
+    "visual-editing",
+    "nextjs",
+    "nuxt",
+    "astro",
+    "sveltekit"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.17"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/preprio/prepr-toolkit.git",
@@ -23,6 +43,16 @@
       "import": "./dist/nextjs/index.js",
       "require": "./dist/nextjs/index.cjs"
     },
+    "./json-script": {
+      "types": "./dist/json-script.d.ts",
+      "import": "./dist/json-script.js",
+      "require": "./dist/json-script.cjs"
+    },
+    "./nextjs/components": {
+      "types": "./dist/nextjs/components.d.ts",
+      "import": "./dist/nextjs/components.js",
+      "require": "./dist/nextjs/components.cjs"
+    },
     "./nextjs/image-loader": {
       "types": "./dist/nextjs/image-loader.d.ts",
       "import": "./dist/nextjs/image-loader.js",
@@ -53,6 +83,16 @@
     "src/sveltekit/*.svelte",
     "src/nuxt/*.vue"
   ],
+  "scripts": {
+    "gen:css": "node scripts/compile-css.mjs",
+    "prebuild": "rm -rf dist && pnpm gen:css && node scripts/check-version.mjs",
+    "pretest": "pnpm gen:css",
+    "pretypecheck": "pnpm gen:css",
+    "build": "tsup",
+    "postbuild": "node scripts/check-exports.mjs",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
   "dependencies": {
     "@vercel/stega": "^1.1.0",
     "preact": "^10.29.7"
@@ -60,7 +100,9 @@
   "peerDependencies": {
     "next": ">=13",
     "react": ">=17",
-    "react-dom": ">=17"
+    "react-dom": ">=17",
+    "svelte": ">=4",
+    "vue": ">=3"
   },
   "peerDependenciesMeta": {
     "next": {
@@ -71,6 +113,12 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -86,15 +134,5 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10"
-  },
-  "scripts": {
-    "gen:css": "node scripts/compile-css.mjs",
-    "prebuild": "rm -rf dist && pnpm gen:css && node scripts/check-version.mjs",
-    "pretest": "pnpm gen:css",
-    "pretypecheck": "pnpm gen:css",
-    "build": "tsup",
-    "postbuild": "node scripts/check-exports.mjs",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/astro/PreprToolbar.astro

@@ -29,6 +29,7 @@
  * data shape of primitives/arrays.)
  */
 import type { PreprToolbarProps } from '@preprio/toolkit';
+import { serializeForScriptTag } from '@preprio/toolkit/json-script';
 
 type Props = PreprToolbarProps;
 
@@ -40,7 +41,7 @@ const props = { activeSegment, activeVariant, segments: segments ?? data ?? [] }
 <script
   type="application/json"
   data-prepr-toolbar-props
-  set:html={JSON.stringify(props)}
+  set:html={serializeForScriptTag(props)}
 />
 
 <script>

package/src/astro/PreprTrackingPixel.astro

@@ -14,6 +14,8 @@
  * from '@preprio/toolkit'` would fail to resolve in the browser. See
  * `PreprToolbar.astro` for the full explanation.
  */
+import { serializeForScriptTag } from '@preprio/toolkit/json-script';
+
 interface Props {
   id: string;
   config?: {
@@ -34,7 +36,7 @@ const payload = { id, config };
 <script
   type="application/json"
   data-prepr-pixel-props
-  set:html={JSON.stringify(payload)}
+  set:html={serializeForScriptTag(payload)}
 />
 
 <script>