@adobe/alloy 2.32.1-beta.1 → 2.33.0-beta.2

package/src/components/Personalization/dom-actions/move.js

@@ -0,0 +1,28 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { setStyle } from "./dom/index.js";
+import { addPxIfMissing } from "./dom/util.js";
+
+export default (container, styles, decorateProposition) => {
+  const { priority, ...style } = styles;
+
+  Object.keys(style).forEach((key) => {
+    let value = style[key];
+    if (key === "left" || key === "top") {
+      value = addPxIfMissing(value);
+    }
+    setStyle(container, key, value, priority);
+  });
+
+  decorateProposition(container);
+};

package/src/components/Personalization/dom-actions/prependHtml.js

@@ -0,0 +1,60 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { appendNode } from "@adobe/alloy-core/utils/dom";
+import {
+  createFragment,
+  getChildNodes,
+  getFirstChild,
+  insertBefore,
+} from "./dom/index.js";
+import { loadImages } from "./images.js";
+import addNonceToInlineStyleElements from "./addNonceToInlineStyleElements.js";
+import {
+  executeInlineScripts,
+  executeRemoteScripts,
+  getInlineScripts,
+  getRemoteScriptsUrls,
+} from "./scripts.js";
+
+export default (container, html, decorateProposition) => {
+  const fragment = createFragment(html);
+  addNonceToInlineStyleElements(fragment);
+  const elements = getChildNodes(fragment);
+  const scripts = getInlineScripts(fragment);
+  const scriptsUrls = getRemoteScriptsUrls(fragment);
+  const { length } = elements;
+  let i = length - 1;
+
+  // We have to proactively load images to avoid flicker
+  loadImages(fragment);
+
+  // We are inserting elements in reverse order
+  while (i >= 0) {
+    const element = elements[i];
+    decorateProposition(element);
+
+    const firstChild = getFirstChild(container);
+
+    if (firstChild) {
+      insertBefore(firstChild, element);
+    } else {
+      appendNode(container, element);
+    }
+
+    i -= 1;
+  }
+
+  executeInlineScripts(container, scripts);
+
+  return executeRemoteScripts(scriptsUrls);
+};

package/src/components/Personalization/dom-actions/rearrangeChildren.js

@@ -0,0 +1,34 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { getChildren, insertAfter, insertBefore } from "./dom/index.js";
+
+export default (container, { from, to }, decorateProposition) => {
+  const children = getChildren(container);
+  const elementFrom = children[from];
+  const elementTo = children[to];
+
+  if (!elementFrom || !elementTo) {
+    // TODO: We will need to add logging
+    // to ease troubleshooting
+    return;
+  }
+
+  if (from < to) {
+    insertAfter(elementTo, elementFrom);
+  } else {
+    insertBefore(elementTo, elementFrom);
+  }
+
+  decorateProposition(elementTo);
+  decorateProposition(elementFrom);
+};

package/src/components/Personalization/dom-actions/remapCustomCodeOffers.js

@@ -0,0 +1,33 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+/*
+ * Preprocess customCode actions before rendering, so that offer selectors are remapped appropriately for
+ * target offers, to align with the way it works in at.js.
+ */
+import { DOM_ACTION_CUSTOM_CODE } from "./initDomActionsModules.js";
+
+const TARGET_BODY_SELECTOR = "BODY > *:eq(0)";
+
+export default (action) => {
+  const { selector, type } = action;
+
+  if (type !== DOM_ACTION_CUSTOM_CODE) {
+    return action;
+  }
+
+  if (selector !== TARGET_BODY_SELECTOR) {
+    return action;
+  }
+
+  return { ...action, ...{ selector: "BODY" } };
+};

package/src/components/Personalization/dom-actions/remapHeadOffers.js

@@ -0,0 +1,63 @@
+/*
+Copyright 2021 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+/*
+ * Preprocess actions before rendering, so that offers are remapped to appendHtml when these are
+ * to be applied to page HEAD, to align with the way it works in at.js.
+ * Offer content should also be filtered, so that only tags allowed in HEAD are preserved.
+ */
+
+import { selectNodes } from "@adobe/alloy-core/utils/dom";
+import { is } from "./scripts.js";
+import { createFragment, selectNodesWithEq } from "./dom/index.js";
+import isBlankString from "@adobe/alloy-core/utils/isBlankString.js";
+import { HEAD } from "@adobe/alloy-core/constants/tagName.js";
+import {
+  DOM_ACTION_APPEND_HTML,
+  DOM_ACTION_CUSTOM_CODE,
+} from "./initDomActionsModules.js";
+
+const HEAD_TAGS_SELECTOR = "SCRIPT,LINK,STYLE";
+
+const filterHeadContent = (content) => {
+  const container = createFragment(content);
+  const headNodes = selectNodes(HEAD_TAGS_SELECTOR, container);
+  return headNodes.map((node) => node.outerHTML).join("");
+};
+
+export default (action) => {
+  const result = { ...action };
+  const { content, selector } = result;
+
+  // Custom code actions have a "HEAD" selector, but are handled differently.
+  if (result.type === DOM_ACTION_CUSTOM_CODE) {
+    return result;
+  }
+
+  if (isBlankString(content)) {
+    return result;
+  }
+
+  if (selector == null) {
+    return result;
+  }
+
+  const container = selectNodesWithEq(selector);
+  if (!is(container[0], HEAD)) {
+    return result;
+  }
+
+  result.type = DOM_ACTION_APPEND_HTML;
+  result.content = filterHeadContent(content);
+
+  return result;
+};

package/src/components/Personalization/dom-actions/replaceHtml.js

@@ -0,0 +1,20 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { removeNode } from "@adobe/alloy-core/utils/dom";
+import insertHtmlBefore from "./insertHtmlBefore.js";
+
+export default (container, html, decorateProposition) => {
+  return insertHtmlBefore(container, html, decorateProposition).then(() => {
+    removeNode(container);
+  });
+};

package/src/components/Personalization/dom-actions/resize.js

@@ -0,0 +1,28 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { setStyle } from "./dom/index.js";
+import { addPxIfMissing } from "./dom/util.js";
+
+export default (container, styles, decorateProposition) => {
+  const { priority, ...style } = styles;
+
+  Object.keys(style).forEach((key) => {
+    let value = style[key];
+    if (key === "width" || key === "height") {
+      value = addPxIfMissing(value);
+    }
+    setStyle(container, key, value, priority);
+  });
+
+  decorateProposition(container);
+};

package/src/components/Personalization/dom-actions/scripts.js

@@ -0,0 +1,106 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { selectNodes, createNode } from "@adobe/alloy-core/utils/dom";
+import { SCRIPT } from "@adobe/alloy-core/constants/tagName.js";
+import { SRC } from "@adobe/alloy-core/constants/elementAttribute.js";
+import { getAttribute, getNonce } from "./dom/index.js";
+
+const getPromise = (url, script) => {
+  return new Promise((resolve, reject) => {
+    script.onload = () => {
+      resolve(script);
+    };
+    script.onerror = () => {
+      reject(new Error(`Failed to load script: ${url}`));
+    };
+  });
+};
+const loadScript = (url) => {
+  const script = document.createElement("script");
+  script.src = url;
+  script.async = true;
+  const promise = getPromise(url, script);
+  document.head.appendChild(script);
+  return promise;
+};
+
+export const is = (element, tagName) =>
+  !!element && element.tagName === tagName;
+
+const isInlineScript = (element) =>
+  is(element, SCRIPT) && !getAttribute(element, SRC);
+
+const isRemoteScript = (element) =>
+  is(element, SCRIPT) && getAttribute(element, SRC);
+
+export const getInlineScripts = (fragment) => {
+  const scripts = selectNodes(SCRIPT, fragment);
+  const result = [];
+  const { length } = scripts;
+  const nonce = getNonce();
+  const attributes = {
+    ...(nonce && { nonce }),
+  };
+
+  for (let i = 0; i < length; i += 1) {
+    const element = scripts[i];
+
+    if (!isInlineScript(element)) {
+      continue;
+    }
+
+    const { textContent } = element;
+
+    if (!textContent) {
+      continue;
+    }
+
+    result.push(createNode(SCRIPT, attributes, { textContent }));
+  }
+
+  return result;
+};
+
+export const getRemoteScriptsUrls = (fragment) => {
+  const scripts = selectNodes(SCRIPT, fragment);
+  const result = [];
+  const { length } = scripts;
+
+  for (let i = 0; i < length; i += 1) {
+    const element = scripts[i];
+
+    if (!isRemoteScript(element)) {
+      continue;
+    }
+
+    const url = getAttribute(element, SRC);
+
+    if (!url) {
+      continue;
+    }
+
+    result.push(url);
+  }
+
+  return result;
+};
+
+export const executeInlineScripts = (parent, scripts) => {
+  scripts.forEach((script) => {
+    parent.appendChild(script);
+    parent.removeChild(script);
+  });
+};
+
+export const executeRemoteScripts = (urls) => {
+  return Promise.all(urls.map(loadScript));
+};

package/src/components/Personalization/dom-actions/setAttributes.js

@@ -0,0 +1,21 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { setAttribute } from "./dom/index.js";
+
+export default (container, attributes, decorateProposition) => {
+  Object.keys(attributes).forEach((key) => {
+    setAttribute(container, key, attributes[key]);
+  });
+
+  decorateProposition(container);
+};

package/src/components/Personalization/dom-actions/setHtml.js

@@ -0,0 +1,27 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { removeNode } from "@adobe/alloy-core/utils/dom";
+import { getChildNodes } from "./dom/index.js";
+import appendHtml from "./appendHtml.js";
+
+const clear = (container) => {
+  // We want to remove ALL nodes, text, comments etc
+  const childNodes = getChildNodes(container);
+
+  childNodes.forEach(removeNode);
+};
+
+export default (container, html, decorateProposition) => {
+  clear(container);
+  return appendHtml(container, html, decorateProposition);
+};

package/src/components/Personalization/dom-actions/setStyles.js

@@ -0,0 +1,23 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { setStyle } from "./dom/index.js";
+
+export default (container, styles, decorateProposition) => {
+  const { priority, ...style } = styles;
+
+  Object.keys(style).forEach((key) => {
+    setStyle(container, key, style[key], priority);
+  });
+
+  decorateProposition(container);
+};

package/src/components/Personalization/dom-actions/setText.js

@@ -0,0 +1,16 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+export default (container, text, decorateProposition) => {
+  decorateProposition(container);
+  container.textContent = text;
+};

package/src/components/Personalization/dom-actions/swapImage.js

@@ -0,0 +1,32 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { SRC } from "@adobe/alloy-core/constants/elementAttribute.js";
+import { removeAttribute, setAttribute } from "./dom/index.js";
+import { isImage, loadImage } from "./images.js";
+
+export default (container, url, decorateProposition) => {
+  if (!isImage(container)) {
+    return;
+  }
+
+  // Start downloading the image
+  loadImage(url);
+
+  decorateProposition(container);
+
+  // Remove "src" so there is no flicker
+  removeAttribute(container, SRC);
+
+  // Replace the image "src"
+  setAttribute(container, SRC, url);
+};

package/src/components/Personalization/flicker/index.js

@@ -0,0 +1,106 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import {
+  createNode,
+  appendNode,
+  removeNode,
+} from "@adobe/alloy-core/utils/dom";
+import { STYLE } from "@adobe/alloy-core/constants/tagName.js";
+import { getElementById, getNonce } from "../dom-actions/dom/index.js";
+
+const PREHIDING_ID = "alloy-prehiding";
+const HIDING_STYLE_DEFINITION = "{ visibility: hidden }";
+
+// Using global is OK since we have a single DOM
+// so storing nodes even for multiple Alloy instances is fine
+const styleNodes = {};
+
+export const hideElements = (prehidingSelector) => {
+  // if we have different events with the same
+  // prehiding selector we don't want to recreate
+  // the style tag
+  if (styleNodes[prehidingSelector]) {
+    return;
+  }
+
+  const nonce = getNonce();
+  const attrs = {
+    ...(nonce && { nonce }),
+  };
+  const props = {
+    textContent: `${prehidingSelector} ${HIDING_STYLE_DEFINITION}`,
+  };
+  const node = createNode(STYLE, attrs, props);
+
+  appendNode(document.head, node);
+
+  styleNodes[prehidingSelector] = node;
+};
+
+export const showElements = (prehidingSelector) => {
+  const node = styleNodes[prehidingSelector];
+
+  if (node) {
+    removeNode(node);
+    delete styleNodes[prehidingSelector];
+  }
+};
+
+export const createHideContainers = (logger) => {
+  return (prehidingStyle) => {
+    if (!prehidingStyle) {
+      return;
+    }
+
+    // If containers prehiding style has been added
+    // by customer's prehiding snippet we don't
+    // want to add the same node
+    const node = getElementById(PREHIDING_ID);
+
+    if (node) {
+      return;
+    }
+
+    const nonce = getNonce();
+    const attrs = { id: PREHIDING_ID, ...(nonce && { nonce }) };
+    const props = { textContent: prehidingStyle };
+    const styleNode = createNode(STYLE, attrs, props);
+
+    logger.logOnContentHiding({
+      status: "hide-containers",
+      message: "Prehiding style applied to hide containers.",
+      logLevel: "info",
+    });
+
+    appendNode(document.head, styleNode);
+  };
+};
+
+export const createShowContainers = (logger) => {
+  return () => {
+    // If containers prehiding style exists
+    // we will remove it
+    const node = getElementById(PREHIDING_ID);
+
+    if (!node) {
+      return;
+    }
+
+    logger.logOnContentHiding({
+      status: "show-containers",
+      message: "Prehiding style removed to show containers.",
+      logLevel: "info",
+    });
+    removeNode(node);
+  };
+};