@coframe/sdk 1.1.55 → 1.1.59

package/README.md

@@ -86,10 +86,11 @@ installations:
   production visitor would get.
 - `coframe_should_send_events=true` allows events during preview for testing.
 
-Debug tools are allowed by default. Open the Launcher with `cf_preview=true` and
-use **Keep across navigation** in the Preview Session tool to keep the selected
-variants active for the current tab. Set `enableDebug: false` to prevent URL or
-saved session state from loading the Launcher.
+Debug tools are allowed by default. A preview link (`coframe_variant_id` with
+`cf_preview=true`) keeps the selected variants active for the current tab as you
+navigate; turn off **Keep across navigation** in the Preview Session tool to
+stop. Set `enableDebug: false` to prevent URL or saved session state from
+loading the Launcher (a preview link then applies to its own page only).
 
 For SSR, pass the complete request URL, including its query string, as
 `currentUrl`. This is required for query-sensitive targeting and allows

package/dist/pkg/cf.cjs.js

@@ -480,6 +480,10 @@ const getSelectorWithoutCache = (element, options) => {
         }
         return null;
     }
+    const ownId = (el) => {
+        const id = el.getAttribute('id');
+        return id && !isGeneratedIdentifier(id) ? id : undefined;
+    };
     const getParentNode = (element) => {
         return element.parentElement || getShadowHost(element);
     };
@@ -487,7 +491,7 @@ const getSelectorWithoutCache = (element, options) => {
         var _a;
         const selector = {
             t: el.tagName.toLowerCase(),
-            id: el.getAttribute('id') || undefined,
+            id: ownId(el),
             text: getInnerText(el) || undefined,
             href: el.getAttribute('href') || undefined,
             dataTestId: el.getAttribute('data-test-id') || undefined,
@@ -572,12 +576,33 @@ const getElement = (selector, options) => {
     return null;
 };
 const resolvedPathCache = new Map();
+const isGeneratedIdentifier = (value) => {
+    const token = value.trim();
+    if (!token)
+        return false;
+    const frameworkId = /^(?::r[0-9a-z]+:|«r[0-9a-z]+»|radix-:?r?[0-9a-z]+:?.*|headlessui-[a-z-]+-:?r?[0-9a-z]+:?|react-aria\d+.*|mui-\d+|ember\d+)$/;
+    const cssInJsClass = /^(?:css-[0-9a-z]{5,}(?:-[A-Za-z0-9]+)?|sc-[A-Za-z]{5,}|jsx-\d{6,}|[A-Za-z][A-Za-z0-9]*_[A-Za-z0-9]+__[A-Za-z0-9_-]{5})$/;
+    if (frameworkId.test(token) || cssInJsClass.test(token))
+        return true;
+    return token.split(/[-_:.]+/).some((segment) => {
+        var _a, _b;
+        if (/^\d{8,}$/.test(segment))
+            return true;
+        if (/^[0-9a-f]{6,}$/.test(segment) &&
+            /\d/.test(segment) &&
+            /[a-f]/.test(segment))
+            return true;
+        return (/^[0-9a-zA-Z]{8,}$/.test(segment) &&
+            ((_b = (_a = segment.match(/\d+|[a-zA-Z]+/g)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) >= 5);
+    });
+};
+const stableId = (id) => id && !isGeneratedIdentifier(id) ? id : undefined;
 const selectorKey = (selector) => selector.fingerprint || JSON.stringify(selector);
 const keepsIdentity = (document, element, selector) => {
     if (element.tagName.toLowerCase() !== selector.t.toLowerCase())
         return false;
     const attrs = [
-        ['id', selector.id],
+        ['id', stableId(selector.id)],
         ['data-test-id', selector.dataTestId],
         ['aria-label', selector.ariaLabel],
     ];
@@ -843,7 +868,7 @@ const generateRelativePaths = (sel, max) => {
         const uniqueQueries = [];
         const nonUniqQueries = [];
         const newWipPaths = [];
-        if (currentSel.id) {
+        if (currentSel.id && !isGeneratedIdentifier(currentSel.id)) {
             uniqueQueries.push({
                 xpath: `[@id="${currentSel.id}"]`,
                 css: `#${currentSel.id}`,
@@ -2479,6 +2504,16 @@ function readStoredPreviewVariantId() {
         return null;
     }
 }
+function persistPreviewVariantId(variantId) {
+    const normalized = normalizePreviewVariantId(variantId);
+    if (!normalized)
+        return;
+    try {
+        window.sessionStorage.setItem(COFRAME_PREVIEW_SESSION_STORAGE_KEY, normalized);
+    }
+    catch (_a) {
+    }
+}
 function resolvePreviewSource(url = window.location.href) {
     const urlVariantId = readPreviewVariantIdFromUrl(url);
     const storedVariantId = readStoredPreviewVariantId();
@@ -2496,6 +2531,7 @@ function isElementVisible(el) {
 }
 const VALUE_UNKNOWN_YET = 'n/a';
 function checkActivationCondition(condition, personalizationHeaders, currentUrl, languages, browserPlatform, userToken, userVisitCount, runJsFunction, logger, options) {
+    var _a;
     if (condition.and) {
         const results = condition.and.map((c) => checkActivationCondition(c, personalizationHeaders, currentUrl, languages, browserPlatform, userToken, userVisitCount, runJsFunction, logger));
         const hasUnknown = results.some((r) => r === VALUE_UNKNOWN_YET);
@@ -2602,12 +2638,13 @@ function checkActivationCondition(condition, personalizationHeaders, currentUrl,
             }
         }
     }
-    if (condition.device) {
-        const isMobileDevice = personalizationHeaders['x-is-mobile-viewer'] === 'true';
-        if (condition.device.includes('mobile') && !isMobileDevice) {
-            return false;
+    if ((_a = condition.device) === null || _a === void 0 ? void 0 : _a.length) {
+        let device = personalizationHeaders['x-device-type'];
+        if (!['desktop', 'mobile', 'tablet'].includes(device)) {
+            device =
+                personalizationHeaders['x-is-mobile-viewer'] === 'true' ? 'mobile' : '';
         }
-        if (condition.device.includes('desktop') && isMobileDevice) {
+        if (!condition.device.includes(device)) {
             return false;
         }
     }
@@ -5338,6 +5375,10 @@ async function resolveConfig(Coframe, revealActions) {
     if (previewSource.urlVariantId) {
         previewVariantId = previewSource.urlVariantId;
         isSessionVariant = previewSource.isKeptForSession;
+        if (urlParams.get(COFRAME_PREVIEW_QUERY_PARAM) === 'true' &&
+            config.enableDebug !== false) {
+            persistPreviewVariantId(previewSource.urlVariantId);
+        }
     }
     else if (previewSource.storedVariantId) {
         previewVariantId = previewSource.storedVariantId;

package/dist/pkg/cf.esm.mjs

@@ -478,6 +478,10 @@ const getSelectorWithoutCache = (element, options) => {
         }
         return null;
     }
+    const ownId = (el) => {
+        const id = el.getAttribute('id');
+        return id && !isGeneratedIdentifier(id) ? id : undefined;
+    };
     const getParentNode = (element) => {
         return element.parentElement || getShadowHost(element);
     };
@@ -485,7 +489,7 @@ const getSelectorWithoutCache = (element, options) => {
         var _a;
         const selector = {
             t: el.tagName.toLowerCase(),
-            id: el.getAttribute('id') || undefined,
+            id: ownId(el),
             text: getInnerText(el) || undefined,
             href: el.getAttribute('href') || undefined,
             dataTestId: el.getAttribute('data-test-id') || undefined,
@@ -570,12 +574,33 @@ const getElement = (selector, options) => {
     return null;
 };
 const resolvedPathCache = new Map();
+const isGeneratedIdentifier = (value) => {
+    const token = value.trim();
+    if (!token)
+        return false;
+    const frameworkId = /^(?::r[0-9a-z]+:|«r[0-9a-z]+»|radix-:?r?[0-9a-z]+:?.*|headlessui-[a-z-]+-:?r?[0-9a-z]+:?|react-aria\d+.*|mui-\d+|ember\d+)$/;
+    const cssInJsClass = /^(?:css-[0-9a-z]{5,}(?:-[A-Za-z0-9]+)?|sc-[A-Za-z]{5,}|jsx-\d{6,}|[A-Za-z][A-Za-z0-9]*_[A-Za-z0-9]+__[A-Za-z0-9_-]{5})$/;
+    if (frameworkId.test(token) || cssInJsClass.test(token))
+        return true;
+    return token.split(/[-_:.]+/).some((segment) => {
+        var _a, _b;
+        if (/^\d{8,}$/.test(segment))
+            return true;
+        if (/^[0-9a-f]{6,}$/.test(segment) &&
+            /\d/.test(segment) &&
+            /[a-f]/.test(segment))
+            return true;
+        return (/^[0-9a-zA-Z]{8,}$/.test(segment) &&
+            ((_b = (_a = segment.match(/\d+|[a-zA-Z]+/g)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) >= 5);
+    });
+};
+const stableId = (id) => id && !isGeneratedIdentifier(id) ? id : undefined;
 const selectorKey = (selector) => selector.fingerprint || JSON.stringify(selector);
 const keepsIdentity = (document, element, selector) => {
     if (element.tagName.toLowerCase() !== selector.t.toLowerCase())
         return false;
     const attrs = [
-        ['id', selector.id],
+        ['id', stableId(selector.id)],
         ['data-test-id', selector.dataTestId],
         ['aria-label', selector.ariaLabel],
     ];
@@ -841,7 +866,7 @@ const generateRelativePaths = (sel, max) => {
         const uniqueQueries = [];
         const nonUniqQueries = [];
         const newWipPaths = [];
-        if (currentSel.id) {
+        if (currentSel.id && !isGeneratedIdentifier(currentSel.id)) {
             uniqueQueries.push({
                 xpath: `[@id="${currentSel.id}"]`,
                 css: `#${currentSel.id}`,
@@ -2477,6 +2502,16 @@ function readStoredPreviewVariantId() {
         return null;
     }
 }
+function persistPreviewVariantId(variantId) {
+    const normalized = normalizePreviewVariantId(variantId);
+    if (!normalized)
+        return;
+    try {
+        window.sessionStorage.setItem(COFRAME_PREVIEW_SESSION_STORAGE_KEY, normalized);
+    }
+    catch (_a) {
+    }
+}
 function resolvePreviewSource(url = window.location.href) {
     const urlVariantId = readPreviewVariantIdFromUrl(url);
     const storedVariantId = readStoredPreviewVariantId();
@@ -2494,6 +2529,7 @@ function isElementVisible(el) {
 }
 const VALUE_UNKNOWN_YET = 'n/a';
 function checkActivationCondition(condition, personalizationHeaders, currentUrl, languages, browserPlatform, userToken, userVisitCount, runJsFunction, logger, options) {
+    var _a;
     if (condition.and) {
         const results = condition.and.map((c) => checkActivationCondition(c, personalizationHeaders, currentUrl, languages, browserPlatform, userToken, userVisitCount, runJsFunction, logger));
         const hasUnknown = results.some((r) => r === VALUE_UNKNOWN_YET);
@@ -2600,12 +2636,13 @@ function checkActivationCondition(condition, personalizationHeaders, currentUrl,
             }
         }
     }
-    if (condition.device) {
-        const isMobileDevice = personalizationHeaders['x-is-mobile-viewer'] === 'true';
-        if (condition.device.includes('mobile') && !isMobileDevice) {
-            return false;
+    if ((_a = condition.device) === null || _a === void 0 ? void 0 : _a.length) {
+        let device = personalizationHeaders['x-device-type'];
+        if (!['desktop', 'mobile', 'tablet'].includes(device)) {
+            device =
+                personalizationHeaders['x-is-mobile-viewer'] === 'true' ? 'mobile' : '';
         }
-        if (condition.device.includes('desktop') && isMobileDevice) {
+        if (!condition.device.includes(device)) {
             return false;
         }
     }
@@ -5336,6 +5373,10 @@ async function resolveConfig(Coframe, revealActions) {
     if (previewSource.urlVariantId) {
         previewVariantId = previewSource.urlVariantId;
         isSessionVariant = previewSource.isKeptForSession;
+        if (urlParams.get(COFRAME_PREVIEW_QUERY_PARAM) === 'true' &&
+            config.enableDebug !== false) {
+            persistPreviewVariantId(previewSource.urlVariantId);
+        }
     }
     else if (previewSource.storedVariantId) {
         previewVariantId = previewSource.storedVariantId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coframe/sdk",
-  "version": "1.1.55",
+  "version": "1.1.59",
   "description": "Coframe optimizes your website using generative AI to deliver maximum impact to your audience and allow your site to improve itself as you sleep. Learn more at coframe.com.",
   "main": "dist/pkg/cf.cjs.js",
   "module": "dist/pkg/cf.esm.mjs",