@preprio/toolkit 0.5.0-rc.11 → 0.5.0-rc.12

package/dist/react/components.js

@@ -371,6 +371,7 @@ function createIframeBridge(store, options = {}) {
   const onReferences = options.onReferences;
   const onAssets = options.onAssets;
   const onAllowNavigation = options.onAllowNavigation;
+  const onItemChanged = options.onItemChanged;
   let parentOrigin = null;
   const onKeyDown = (event) => {
     const key = event.key.toLowerCase();
@@ -461,6 +462,14 @@ function createIframeBridge(store, options = {}) {
         debug.warn("allowNavigation handler failed", error);
       }
     }
+    if (data?.event === "prepr:itemChanged") {
+      if (typeof data.itemId !== "string" || !data.itemId) return;
+      try {
+        onItemChanged?.(data.itemId);
+      } catch (error) {
+        debug.warn("itemChanged handler failed", error);
+      }
+    }
   };
   return {
     start() {
@@ -2604,6 +2613,7 @@ var ABSOLUTE_HTTP = /^https?:\/\//i;
 var SOURCE_URL_ATTRIBUTES = ["src", "data-src"];
 var SOURCE_SET_ATTRIBUTES = ["srcset", "data-srcset"];
 var ASSET_ATTR = "data-prepr-asset";
+var REMOVED_ATTR = "data-prepr-removed";
 var ASSET_SOURCE_ATTRIBUTES = [
   ...SOURCE_URL_ATTRIBUTES,
   ...SOURCE_SET_ATTRIBUTES
@@ -2613,7 +2623,8 @@ var TAG_ATTRIBUTES = [
   "data-prepr-id",
   "data-prepr-field",
   "data-prepr-entry-id",
-  ASSET_ATTR
+  ASSET_ATTR,
+  REMOVED_ATTR
 ];
 function decodeSegment(segment) {
   try {
@@ -2732,11 +2743,22 @@ function besideOtherItem(img, isCurrentItem) {
   return false;
 }
 function tagAssetImages(index, itemId, keys, options = {}) {
-  const { isCurrentItem } = options;
+  const { isCurrentItem, removed } = options;
+  let showsRemoved = false;
   for (const img of document.getElementsByTagName("img")) {
     const ours = img.hasAttribute(ASSET_ATTR);
-    if (!ours && img.hasAttribute("data-prepr-encoded")) continue;
-    const match = index.size ? matchAsset(img, index, keys) : void 0;
+    let match = index.size ? matchAsset(img, index, keys) : void 0;
+    let isRemoved = false;
+    if (!match && removed?.size) {
+      match = matchAsset(img, removed, keys);
+      isRemoved = match !== void 0;
+    }
+    if (!ours && img.hasAttribute("data-prepr-encoded")) {
+      const mark = isRemoved && (!isCurrentItem || isCurrentItem(img));
+      setIfChanged(img, REMOVED_ATTR, mark ? "" : null);
+      showsRemoved || (showsRemoved = mark);
+      continue;
+    }
     const asset = match && isCurrentItem && besideOtherItem(img, isCurrentItem) ? void 0 : match;
     if (!asset) {
       if (ours) untagAssetImage(img);
@@ -2747,10 +2769,14 @@ function tagAssetImages(index, itemId, keys, options = {}) {
     setIfChanged(img, "data-prepr-id", itemId);
     setIfChanged(img, "data-prepr-field", asset.field);
     setIfChanged(img, "data-prepr-entry-id", asset.entryId ?? null);
+    setIfChanged(img, REMOVED_ATTR, isRemoved ? "" : null);
+    showsRemoved || (showsRemoved = isRemoved);
   }
+  return showsRemoved;
 }
 function untagAssetImages() {
   document.querySelectorAll(`img[${ASSET_ATTR}]`).forEach(untagAssetImage);
+  document.querySelectorAll(`img[${REMOVED_ATTR}]`).forEach((img) => img.removeAttribute(REMOVED_ATTR));
 }
 
 // src/core/visual-editor/navigation-guard.ts
@@ -2926,11 +2952,13 @@ var CHROME_SELECTOR = "header, footer, nav, [role=banner], [role=contentinfo], [
 var SECTIONING_SELECTOR = "article, aside, main, nav, section";
 var PLAIN_HEADER_FOOTER = "header:not([role]), footer:not([role])";
 var CURSOR_STYLE_MARKER = "data-prepr-visual-editor";
-var CURSOR_STYLES = `${ENCODED_SELECTOR2}{cursor:pointer}html[data-prepr-ve-suspended] ${ENCODED_SELECTOR2}{cursor:auto}`;
+var REMOVED_STYLES = `img[${REMOVED_ATTR}]{opacity:.2!important;transition:opacity .2s ease}@media (prefers-reduced-motion:reduce){img[${REMOVED_ATTR}]{transition:none}}`;
+var CURSOR_STYLES = `${ENCODED_SELECTOR2}{cursor:pointer}html[data-prepr-ve-suspended] ${ENCODED_SELECTOR2}{cursor:auto}${REMOVED_STYLES}`;
 var SUSPENDED_ATTR = "data-prepr-ve-suspended";
 var FIND_RETRY_MS = 150;
 var FIND_RETRIES = 6;
 var MAX_CACHED_KEYS = 2e3;
+var SAVED_FADE_MS = 1e4;
 var LAYOUT_MUTATIONS = {
   childList: true,
   subtree: true,
@@ -2973,6 +3001,9 @@ function createVisualEditor(opts) {
   let guardEnabled = false;
   let assetIndex = /* @__PURE__ */ new Map();
   const assetKeys = /* @__PURE__ */ new Map();
+  const removedAssets = /* @__PURE__ */ new Map();
+  let saved = false;
+  let savedTimeout = null;
   const guard = createNavigationGuard({
     onBlocked: (href) => opts.onNavigationBlocked?.(href),
     showsEditedContent: () => showsEditedContent()
@@ -3171,15 +3202,32 @@ function createVisualEditor(opts) {
     const el = block !== void 0 ? nthListItem(found, block) ?? found : found;
     select(el, found, block);
   }
+  const hasAssets = () => assetIndex.size > 0 || removedAssets.size > 0;
   function tagAssets() {
     if (assetKeys.size > MAX_CACHED_KEYS) assetKeys.clear();
-    tagAssetImages(assetIndex, currentItemId, assetKeys, {
-      isCurrentItem: (el) => isCurrentItem(el)
+    const showsRemoved = tagAssetImages(assetIndex, currentItemId, assetKeys, {
+      isCurrentItem: (el) => isCurrentItem(el),
+      removed: removedAssets
     });
+    if (saved && !showsRemoved) forgetRemoved();
+  }
+  function forgetRemoved() {
+    saved = false;
+    if (savedTimeout) clearTimeout(savedTimeout);
+    savedTimeout = null;
+    if (!removedAssets.size) return;
+    removedAssets.clear();
+    if (running) tagAssets();
+  }
+  function itemSaved() {
+    if (!removedAssets.size) return;
+    saved = true;
+    if (savedTimeout) clearTimeout(savedTimeout);
+    savedTimeout = setTimeout(forgetRemoved, SAVED_FADE_MS);
   }
   const handleLayoutFrame = () => {
     mutationFrame = null;
-    if (assetIndex.size) tagAssets();
+    if (hasAssets()) tagAssets();
     reselect();
     const hovered = overlay.getHoverTarget();
     if (hovered && !hovered.isConnected) {
@@ -3191,7 +3239,7 @@ function createVisualEditor(opts) {
   };
   const handleMutations = () => {
     if (mutationFrame !== null) return;
-    if (!selection && !overlay.getHoverTarget() && !assetIndex.size) return;
+    if (!selection && !overlay.getHoverTarget() && !hasAssets()) return;
     mutationFrame = requestAnimationFrame(handleLayoutFrame);
   };
   function injectCursorStyles() {
@@ -3232,7 +3280,7 @@ function createVisualEditor(opts) {
     });
     mutationObserver = new MutationObserver(handleMutations);
     mutationObserver.observe(document.body, LAYOUT_MUTATIONS);
-    if (assetIndex.size) tagAssets();
+    if (hasAssets()) tagAssets();
     syncGuard();
     debug8.log("visual editor started");
   }
@@ -3308,18 +3356,24 @@ function createVisualEditor(opts) {
     });
   }
   function setCurrentItem(itemId, referenceList, componentIds) {
+    if (itemId !== currentItemId) forgetRemoved();
     currentItemId = itemId;
     if (referenceList) setReferences(referenceList, componentIds);
     else if (componentIds) ownComponents = new Set(componentIds);
-    if (running && assetIndex.size) tagAssets();
+    if (running && hasAssets()) tagAssets();
     const selected = overlay.getSelectedTarget();
     const owner = selected ? encodedFrom(selected) : null;
     if (owner && !isCurrentItem(owner)) clearSelection();
   }
   function setAssets(assets) {
-    const hadAssets = assetIndex.size > 0;
-    assetIndex = createAssetIndex(assets);
-    if (running && (hadAssets || assetIndex.size)) tagAssets();
+    const hadAssets = hasAssets();
+    const next = createAssetIndex(assets);
+    for (const [key, asset] of assetIndex) {
+      if (!next.has(key)) removedAssets.set(key, asset);
+    }
+    for (const key of next.keys()) removedAssets.delete(key);
+    assetIndex = next;
+    if (running && (hadAssets || hasAssets())) tagAssets();
   }
   function setReferences(referenceList, componentIds) {
     if (componentIds) ownComponents = new Set(componentIds);
@@ -3345,6 +3399,7 @@ function createVisualEditor(opts) {
     setCurrentItem,
     setReferences,
     setAssets,
+    itemSaved,
     setLocale,
     focusField,
     setNavigationGuard,
@@ -3502,6 +3557,7 @@ function createPreprPreview(opts = {}) {
     },
     onAssets: (assets) => visualEditor?.setAssets(assets),
     onAllowNavigation: (href) => visualEditor?.allowNavigation(href),
+    onItemChanged: () => visualEditor?.itemSaved(),
     onReferences: (referencedIds, componentIds) => visualEditor?.setReferences(referencedIds, componentIds),
     // The editor selecting a field scrolls the matching element into view. The
     // lookup relies on the attributes the stega scan writes, so it finds
@@ -3542,7 +3598,7 @@ function createPreprPreview(opts = {}) {
 }
 
 // src/version.ts
-var VERSION = "0.5.0-rc.11";
+var VERSION = "0.5.0-rc.12";
 
 // src/core/pixel.ts
 var PIXEL_SCRIPT_URL = "https://cdn.tracking.prepr.io/js/prepr.min.js";

package/dist/sveltekit/index.cjs

@@ -35,7 +35,7 @@ __export(sveltekit_exports, {
 module.exports = __toCommonJS(sveltekit_exports);
 
 // src/version.ts
-var VERSION = "0.5.0-rc.11";
+var VERSION = "0.5.0-rc.12";
 
 // 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.5.0-rc.11";
+var VERSION = "0.5.0-rc.12";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/sveltekit/{live-preview-2RCU35W5.js → live-preview-XMQQZHMZ.js}

@@ -160,8 +160,32 @@ function shapeLike(template, incoming) {
   }
   return out;
 }
+function isAsset(value) {
+  return isPlainObject(value) && (typeof value.url === "string" || value.__typename === "Asset");
+}
+function hasId(list, entry) {
+  return entry._id !== void 0 && list.some((c) => isPlainObject(c) && c._id === entry._id);
+}
+function isAssetValue(value) {
+  return Array.isArray(value) ? value.length > 0 && value.every(isAsset) : isAsset(value);
+}
+function keepRemovedAssets(current, next) {
+  const listed = /* @__PURE__ */ new Set();
+  for (const entry of next) {
+    if (isPlainObject(entry) && entry._id !== void 0) listed.add(entry._id);
+  }
+  let out = next;
+  current.forEach((entry, position) => {
+    if (!isPlainObject(entry) || entry._id === void 0) return;
+    if (listed.has(entry._id)) return;
+    if (out === next) out = [...next];
+    out.splice(Math.min(position, out.length), 0, entry);
+  });
+  return out;
+}
 function mergeStructured(current, incoming) {
   if (incoming === null || Array.isArray(incoming) && !incoming.length) {
+    if (isAssetValue(current)) return current;
     if (Array.isArray(current)) return current.length ? [] : current;
     return null;
   }
@@ -169,13 +193,18 @@ function mergeStructured(current, incoming) {
   if (current === null || current === void 0) return incoming;
   if (Array.isArray(current)) {
     const template = current.find(isPlainObject);
-    return list.map((entry) => {
+    const next = list.map((entry) => {
       const match = current.find(
         (c) => isPlainObject(c) && c._id !== void 0 && c._id === entry._id
       );
       if (isPlainObject(match)) return mergeObject(match, entry);
       return isPlainObject(template) ? shapeLike(template, entry) : entry;
     });
+    if (!isAssetValue(current) || list.some((entry) => !hasId(current, entry))) {
+      return next;
+    }
+    const kept = keepRemovedAssets(current, next);
+    return kept.length === current.length && kept.every((entry, i) => entry === current[i]) ? current : kept;
   }
   if (isPlainObject(current)) return mergeObject(current, list[0]);
   return current;

package/dist/sveltekit/live.cjs

@@ -536,8 +536,32 @@ function shapeLike(template, incoming) {
   }
   return out;
 }
+function isAsset(value) {
+  return isPlainObject(value) && (typeof value.url === "string" || value.__typename === "Asset");
+}
+function hasId(list, entry) {
+  return entry._id !== void 0 && list.some((c) => isPlainObject(c) && c._id === entry._id);
+}
+function isAssetValue(value) {
+  return Array.isArray(value) ? value.length > 0 && value.every(isAsset) : isAsset(value);
+}
+function keepRemovedAssets(current, next) {
+  const listed = /* @__PURE__ */ new Set();
+  for (const entry of next) {
+    if (isPlainObject(entry) && entry._id !== void 0) listed.add(entry._id);
+  }
+  let out = next;
+  current.forEach((entry, position) => {
+    if (!isPlainObject(entry) || entry._id === void 0) return;
+    if (listed.has(entry._id)) return;
+    if (out === next) out = [...next];
+    out.splice(Math.min(position, out.length), 0, entry);
+  });
+  return out;
+}
 function mergeStructured(current, incoming) {
   if (incoming === null || Array.isArray(incoming) && !incoming.length) {
+    if (isAssetValue(current)) return current;
     if (Array.isArray(current)) return current.length ? [] : current;
     return null;
   }
@@ -545,13 +569,18 @@ function mergeStructured(current, incoming) {
   if (current === null || current === void 0) return incoming;
   if (Array.isArray(current)) {
     const template = current.find(isPlainObject);
-    return list.map((entry) => {
+    const next = list.map((entry) => {
       const match = current.find(
         (c) => isPlainObject(c) && c._id !== void 0 && c._id === entry._id
       );
       if (isPlainObject(match)) return mergeObject(match, entry);
       return isPlainObject(template) ? shapeLike(template, entry) : entry;
     });
+    if (!isAssetValue(current) || list.some((entry) => !hasId(current, entry))) {
+      return next;
+    }
+    const kept = keepRemovedAssets(current, next);
+    return kept.length === current.length && kept.every((entry, i) => entry === current[i]) ? current : kept;
   }
   if (isPlainObject(current)) return mergeObject(current, list[0]);
   return current;

package/dist/sveltekit/live.js

@@ -131,7 +131,7 @@ function isFramed() {
   return typeof window !== "undefined" && window.self !== window.top;
 }
 function startLive() {
-  starting ?? (starting = import("./live-preview-2RCU35W5.js").then(
+  starting ?? (starting = import("./live-preview-XMQQZHMZ.js").then(
     ({ applyPatchLog, createLiveBridge, createLiveStore }) => {
       applyLog = applyPatchLog;
       const started = createLiveStore();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preprio/toolkit",
-  "version": "0.5.0-rc.11",
+  "version": "0.5.0-rc.12",
   "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)",