@athoscommerce/snap-preact 1.13.1 → 1.13.3-beta.168

package/dist/esm/src/utils/applyChatTargetInject.d.ts

@@ -0,0 +1,3 @@
+import type { ExtendedTarget } from '../Snap';
+export declare function applyChatTargetInject(target: ExtendedTarget): ExtendedTarget;
+//# sourceMappingURL=applyChatTargetInject.d.ts.map

package/dist/esm/src/utils/applyChatTargetInject.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyChatTargetInject.d.ts","sourceRoot":"","sources":["../../../../src/utils/applyChatTargetInject.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAM9C,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,cAAc,GAAG,cAAc,CAiB5E"}

package/dist/esm/src/utils/applyChatTargetInject.js

@@ -0,0 +1,22 @@
+// Chat targets never render *into* the matched element — DomTargeter would empty it
+// (and hideTarget would hide it, e.g. a merchant's nav while injecting a ChatButton).
+// Instead, append a dedicated container to render into and never hide the host.
+// An explicit `inject` in the target config always wins.
+export function applyChatTargetInject(target) {
+    if (target.inject) {
+        return target;
+    }
+    const isBody = target.selector === 'body';
+    return {
+        ...target,
+        hideTarget: false,
+        inject: {
+            action: 'append',
+            element: () => {
+                const container = document.createElement('div');
+                container.className = isBody ? 'ss__chat--target' : 'ss__chat--inline-target';
+                return container;
+            },
+        },
+    };
+}

package/dist/esm/src/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { applyChatTargetInject } from './applyChatTargetInject';
 export { configureSnapFeatures } from './configureSnapFeatures/configureSnapFeatures';
 export { combineMerge } from './combineMerge';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/src/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/esm/src/utils/index.js

@@ -1,2 +1,3 @@
+export { applyChatTargetInject } from './applyChatTargetInject';
 export { configureSnapFeatures } from './configureSnapFeatures/configureSnapFeatures';
 export { combineMerge } from './combineMerge';

package/eslint/src/validate-config.cjs

@@ -42,14 +42,17 @@ module.exports = {
 			noResultComponents: '"{{ value }}" is not a valid resultComponent. No keys found in components.result.',
 			invalidGlobalResultComponent: '"{{ value }}" is not a valid globalResultComponent. Must be one of: {{ validKeys }}.',
 			noGlobalResultComponents: '"{{ value }}" is not a valid globalResultComponent. No keys found in components.result.',
+			// tab values are rendered by `staticValue` - literals quoted, references in backticks
 			duplicateTabId:
-				'Tab id "{{ id }}" is used by more than one tab controller. Every search/autocomplete tab id must be unique, since it becomes the controller id.',
-			mismatchedTabParam:
-				'Tab "{{ id }}" (siteId "{{ siteId }}") uses param "{{ param }}", but other tabs sharing siteId "{{ siteId }}" use param "{{ expectedParam }}". Tab controllers across search and autocomplete that share a siteId must use the same param.',
+				'Tab id {{ id }} is used by more than one tab controller. Every search/autocomplete tab id must be unique, since it becomes the controller id.',
 			duplicateSiteIdInFeature:
-				'Tab "{{ id }}" uses siteId "{{ siteId }}", which is already used by another tab in {{ feature }}.tabs. Tabs within the same feature must target unique siteIds.',
+				'Tab {{ id }} uses siteId {{ siteId }}, which is already used by another tab in {{ feature }}.tabs. Tabs within the same feature must target unique siteIds.',
+			duplicateParamInFeature:
+				'Tab {{ id }} uses param {{ param }}, which is already used by another tab in {{ feature }}.tabs. Tabs within the same feature must use unique params, since the param identifies the tab in the URL and namespaces its URL state.',
+			mismatchedTabParam:
+				'Tab {{ id }} (siteId {{ siteId }}) uses param {{ param }}, but other tabs sharing siteId {{ siteId }} use param {{ expectedParam }}. Tab controllers across search and autocomplete that share a siteId must use the same param.',
 			mismatchedTabSiteId:
-				'Tab "{{ id }}" (param "{{ param }}") uses siteId "{{ siteId }}", but other tabs sharing param "{{ param }}" use siteId "{{ expectedSiteId }}". Tab controllers that share a param must use the same siteId.',
+				'Tab {{ id }} (param {{ param }}) uses siteId {{ siteId }}, but other tabs sharing param {{ param }} use siteId {{ expectedSiteId }}. Tab controllers across search and autocomplete that share a param must use the same siteId.',
 			invalidOpenNamedSelectorProp:
 				'"{{ value }}" is not a valid prop for the "{{ selector }}" override ({{ componentType }} resolves to {{ typeName }}). Must be one of: {{ validKeys }}.',
 			invalidOpenNamedSelectorPropType:
@@ -690,102 +693,109 @@ module.exports = {
 		}
 
 		/**
-		 * Validate that every search/autocomplete tab id is unique (it becomes the
-		 * controller id), that siteIds are unique within a feature's tabs, and that
-		 * tabs sharing a siteId or a param (across search and autocomplete, or
-		 * within a feature) agree on the other value too — a siteId and its param
-		 * identify the same catalog, so they must move together.
+		 * Validate the search/autocomplete tab controller configs:
+		 *
+		 *  - every tab id is unique across the whole config (it becomes the controller id)
+		 *  - within a feature, every tab has its own siteId and its own param - the param is the
+		 *    tab's identity in the url and namespaces its url state, so two tabs sharing one
+		 *    collide, and selecting the second writes a url that resolves back to the first
+		 *  - across search and autocomplete, tabs sharing a siteId or a param agree on the other
+		 *    value too - a siteId and its param identify the same catalog, so they must move
+		 *    together
+		 *
+		 * Values are compared statically (see `staticValue`): string literals by value, and
+		 * identifiers or member chains (`siteId`, `config.siteId`) by source text, since the same
+		 * expression reads the same value. Two DIFFERENT expressions are never assumed to differ,
+		 * so the mismatch checks only ever compare literals.
 		 */
 		function validateTabs(configObjectExpression, context) {
-			const tabs = collectTabs(configObjectExpression);
+			const tabs = collectTabs(configObjectExpression, context);
 			if (tabs.length === 0) return;
 
-			const tabsById = new Map();
-			for (const tab of tabs) {
-				if (tab.id === undefined) continue;
-				if (!tabsById.has(tab.id)) tabsById.set(tab.id, []);
-				tabsById.get(tab.id).push(tab);
-			}
-			for (const [id, group] of tabsById) {
-				if (group.length > 1) {
-					for (const tab of group) {
-						context.report({
-							node: tab.idNode,
-							messageId: 'duplicateTabId',
-							data: { id },
-						});
-					}
+			// duplicate ids anywhere in the config
+			for (const group of groupTabs(tabs, (tab) => tab.id?.key)) {
+				if (group.length < 2) continue;
+				for (const tab of group) {
+					context.report({
+						node: tab.id.node,
+						messageId: 'duplicateTabId',
+						data: { id: tab.id.display },
+					});
 				}
 			}
 
-			const tabsByFeatureAndSiteId = new Map();
-			for (const tab of tabs) {
-				if (tab.siteId === undefined) continue;
-				const key = `${tab.feature} ${tab.siteId}`;
-				if (!tabsByFeatureAndSiteId.has(key)) tabsByFeatureAndSiteId.set(key, []);
-				tabsByFeatureAndSiteId.get(key).push(tab);
-			}
-			for (const group of tabsByFeatureAndSiteId.values()) {
-				if (group.length > 1) {
-					for (const tab of group) {
-						context.report({
-							node: tab.siteIdNode,
-							messageId: 'duplicateSiteIdInFeature',
-							data: { id: tab.id, siteId: tab.siteId, feature: tab.feature },
-						});
-					}
+			// duplicate siteIds and params within a feature
+			for (const group of groupTabs(tabs, (tab) => tab.siteId && `${tab.feature} ${tab.siteId.key}`)) {
+				if (group.length < 2) continue;
+				for (const tab of group) {
+					context.report({
+						node: tab.siteId.node,
+						messageId: 'duplicateSiteIdInFeature',
+						data: { id: displayOf(tab.id), siteId: tab.siteId.display, feature: tab.feature },
+					});
 				}
 			}
-
-			const tabsBySiteId = new Map();
-			for (const tab of tabs) {
-				if (tab.siteId === undefined || tab.param === undefined) continue;
-				if (!tabsBySiteId.has(tab.siteId)) tabsBySiteId.set(tab.siteId, []);
-				tabsBySiteId.get(tab.siteId).push(tab);
-			}
-			for (const [siteId, group] of tabsBySiteId) {
-				// only enforce when the siteId is shared across both search and autocomplete tabs
-				if (!group.some((tab) => tab.feature === 'search') || !group.some((tab) => tab.feature === 'autocomplete')) {
-					continue;
+			for (const group of groupTabs(tabs, (tab) => tab.param && `${tab.feature} ${tab.param.key}`)) {
+				if (group.length < 2) continue;
+				for (const tab of group) {
+					context.report({
+						node: tab.param.node,
+						messageId: 'duplicateParamInFeature',
+						data: { id: displayOf(tab.id), param: tab.param.display, feature: tab.feature },
+					});
 				}
+			}
 
-				const expectedParam = group[0].param;
-				for (const tab of group) {
-					if (tab.param !== expectedParam) {
-						context.report({
-							node: tab.paramNode,
-							messageId: 'mismatchedTabParam',
-							data: { id: tab.id, siteId, param: tab.param, expectedParam },
-						});
-					}
+			// tabs sharing a siteId across features must share a param, and vice versa. within a
+			// feature the duplicate checks above already own the collision, so only groups that span
+			// both features are compared here - otherwise a duplicate param would also be reported as
+			// a siteId mismatch
+			reportMismatches(tabs, { shared: 'siteId', compared: 'param', messageId: 'mismatchedTabParam', expectedKey: 'expectedParam' }, context);
+			reportMismatches(tabs, { shared: 'param', compared: 'siteId', messageId: 'mismatchedTabSiteId', expectedKey: 'expectedSiteId' }, context);
+		}
+
+		function reportMismatches(tabs, { shared, compared, messageId, expectedKey }, context) {
+			for (const group of groupTabs(tabs, (tab) => tab[shared] && tab[compared] && tab[shared].key)) {
+				if (!group.some((tab) => tab.feature === 'search') || !group.some((tab) => tab.feature === 'autocomplete')) continue;
+
+				// two different references may still hold the same value, so only literals are compared
+				const literals = group.filter((tab) => tab[compared].literal !== undefined);
+				const expected = literals[0];
+				for (const tab of literals) {
+					if (tab[compared].key === expected[compared].key) continue;
+					context.report({
+						node: tab[compared].node,
+						messageId,
+						data: {
+							id: displayOf(tab.id),
+							siteId: tab.siteId.display,
+							param: tab.param.display,
+							[expectedKey]: expected[compared].display,
+						},
+					});
 				}
 			}
+		}
 
-			const tabsByParam = new Map();
+		/**
+		 * Group tabs by a key; tabs whose key is falsy (missing or unreadable value) are left out.
+		 */
+		function groupTabs(tabs, keyOf) {
+			const groups = new Map();
 			for (const tab of tabs) {
-				if (tab.param === undefined || tab.siteId === undefined) continue;
-				if (!tabsByParam.has(tab.param)) tabsByParam.set(tab.param, []);
-				tabsByParam.get(tab.param).push(tab);
-			}
-			for (const [param, group] of tabsByParam) {
-				const expectedSiteId = group[0].siteId;
-				for (const tab of group) {
-					if (tab.siteId !== expectedSiteId) {
-						context.report({
-							node: tab.siteIdNode,
-							messageId: 'mismatchedTabSiteId',
-							data: { id: tab.id, param, siteId: tab.siteId, expectedSiteId },
-						});
-					}
-				}
+				const key = keyOf(tab);
+				if (!key) continue;
+				if (!groups.has(key)) groups.set(key, []);
+				groups.get(key).push(tab);
 			}
+			return groups.values();
 		}
 
 		/**
-		 * Collect { feature, id, idNode, siteId, siteIdNode, param, paramNode } for
-		 * every tab in config.search.tabs and config.autocomplete.tabs.
+		 * Collect { feature, id, siteId, param } for every tab in config.search.tabs and
+		 * config.autocomplete.tabs, each value described by `staticValue` (or undefined).
 		 */
-		function collectTabs(configObjectExpression) {
+		function collectTabs(configObjectExpression, context) {
 			const tabs = [];
 
 			for (const feature of ['search', 'autocomplete']) {
@@ -798,18 +808,11 @@ module.exports = {
 				for (const element of tabsProp.value.elements) {
 					if (!element || element.type !== 'ObjectExpression') continue;
 
-					const idProp = findProperty(element, 'id');
-					const siteIdProp = findProperty(element, 'siteId');
-					const paramProp = findProperty(element, 'param');
-
 					tabs.push({
 						feature,
-						id: literalStringValue(idProp),
-						idNode: idProp?.value,
-						siteId: literalStringValue(siteIdProp),
-						siteIdNode: siteIdProp?.value,
-						param: literalStringValue(paramProp),
-						paramNode: paramProp?.value,
+						id: staticValue(findProperty(element, 'id'), context),
+						siteId: staticValue(findProperty(element, 'siteId'), context),
+						param: staticValue(findProperty(element, 'param'), context),
 					});
 				}
 			}
@@ -818,15 +821,54 @@ module.exports = {
 		}
 
 		/**
-		 * Get the string value of a property whose value is a string literal,
-		 * or undefined if the property is missing or not a string literal
-		 * (e.g. a computed/spread value we can't statically check).
+		 * Describe a tab property's value for comparison:
+		 *  - `key` is equal for two values that are certainly equal at runtime
+		 *  - `literal` is the string value when it is known statically, else undefined
+		 *  - `display` is how the value reads in a message: literals quoted, references in backticks
+		 *
+		 * Returns undefined when the property is missing or its value cannot be reasoned about
+		 * statically (a call, a conditional, a spread...), which excludes it from every check.
 		 */
-		function literalStringValue(property) {
-			if (!property || property.value.type !== 'Literal' || typeof property.value.value !== 'string') {
-				return undefined;
+		function staticValue(property, context) {
+			if (!property) return undefined;
+
+			let node = property.value;
+			// `siteId as string`, `siteId!`, `siteId satisfies string` all read the inner expression
+			while (node.type === 'TSAsExpression' || node.type === 'TSNonNullExpression' || node.type === 'TSSatisfiesExpression') {
+				node = node.expression;
+			}
+
+			if (node.type === 'Literal' && typeof node.value === 'string') {
+				return { node: property.value, key: JSON.stringify(node.value), literal: node.value, display: JSON.stringify(node.value) };
+			}
+			if (node.type === 'TemplateLiteral' && node.expressions.length === 0) {
+				const value = node.quasis[0].value.cooked;
+				return { node: property.value, key: JSON.stringify(value), literal: value, display: JSON.stringify(value) };
 			}
-			return property.value.value;
+			if (isStableReference(node)) {
+				const sourceCode = context.sourceCode ?? context.getSourceCode();
+				const text = sourceCode.getText(node);
+				return { node: property.value, key: `ref ${text}`, literal: undefined, display: `\`${text}\`` };
+			}
+
+			return undefined;
+		}
+
+		/**
+		 * An identifier or a member chain over identifiers (`siteId`, `config.siteId`,
+		 * `sites['blog']`) - the same text reads the same value, unlike a call or a conditional.
+		 */
+		function isStableReference(node) {
+			if (node.type === 'Identifier' || node.type === 'ThisExpression') return true;
+			if (node.type === 'MemberExpression') {
+				const propertyIsStable = node.computed ? node.property.type === 'Literal' : node.property.type === 'Identifier';
+				return propertyIsStable && isStableReference(node.object);
+			}
+			return false;
+		}
+
+		function displayOf(value) {
+			return value ? value.display : '<unknown>';
 		}
 
 		/**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@athoscommerce/snap-preact",
-	"version": "1.13.1",
+	"version": "1.13.3-beta.168+f48f5a0d2",
 	"description": "Snap Preact",
 	"main": "dist/cjs/src/index.js",
 	"module": "dist/esm/src/index.js",
@@ -28,24 +28,26 @@
 		"storybook": "storybook dev -c ./components/.storybook -p 6006"
 	},
 	"dependencies": {
-		"@athoscommerce/snap-client": "1.13.1",
-		"@athoscommerce/snap-controller": "1.13.1",
-		"@athoscommerce/snap-event-manager": "1.13.1",
-		"@athoscommerce/snap-logger": "1.13.1",
-		"@athoscommerce/snap-platforms": "1.13.1",
-		"@athoscommerce/snap-profiler": "1.13.1",
-		"@athoscommerce/snap-store-mobx": "1.13.1",
-		"@athoscommerce/snap-toolbox": "1.13.1",
-		"@athoscommerce/snap-tracker": "1.13.1",
-		"@athoscommerce/snap-url-manager": "1.13.1",
+		"@athoscommerce/snap-client": "1.13.3-beta.168+f48f5a0d2",
+		"@athoscommerce/snap-controller": "1.13.3-beta.168+f48f5a0d2",
+		"@athoscommerce/snap-event-manager": "1.13.3-beta.168+f48f5a0d2",
+		"@athoscommerce/snap-logger": "1.13.3-beta.168+f48f5a0d2",
+		"@athoscommerce/snap-platforms": "1.13.3-beta.168+f48f5a0d2",
+		"@athoscommerce/snap-profiler": "1.13.3-beta.168+f48f5a0d2",
+		"@athoscommerce/snap-store-mobx": "1.13.3-beta.168+f48f5a0d2",
+		"@athoscommerce/snap-toolbox": "1.13.3-beta.168+f48f5a0d2",
+		"@athoscommerce/snap-tracker": "1.13.3-beta.168+f48f5a0d2",
+		"@athoscommerce/snap-url-manager": "1.13.3-beta.168+f48f5a0d2",
 		"@emotion/react": "11.13.0",
 		"acorn": "8.16.0",
 		"classnames": "^2.3.2",
 		"colord": "^2.9.3",
 		"deepmerge": "4.3.1",
 		"dequal": "2.0.3",
+		"dompurify": "^3.2.4",
 		"intersection-observer": "0.12.2",
 		"is-plain-object": "5.1.0",
+		"marked": "17.0.6",
 		"react-ranger": "2.1.0",
 		"swiper": "11.0.7"
 	},
@@ -106,5 +108,5 @@
 		"./webpack": "./webpack/index.js",
 		"./eslintplugin": "./eslint/src/index.cjs"
 	},
-	"gitHead": "8808ef454ae5e882a32c71dd68ef602fc782af6e"
+	"gitHead": "f48f5a0d20e1ffda1884d2cba6524d6bfbe6c6bc"
 }