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

package/src/components/Personalization/dom-actions/dom/getChildren.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 { toArray } from "@adobe/alloy-core/utils";
+
+export default (element) => {
+  const { children } = element;
+
+  if (children) {
+    return toArray(children);
+  }
+
+  return [];
+};

package/src/components/Personalization/dom-actions/dom/getElementById.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.
+*/
+
+/**
+ * Returns an array of matched DOM nodes.
+ * @param {String} id
+ * @param {Node} [context=document] defaults to document
+ * @returns {HTMLElement} an element of null
+ */
+export default (id, context = document) => {
+  return context.getElementById(id);
+};

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

@@ -0,0 +1,15 @@
+/*
+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 (element) => {
+  return element.firstElementChild;
+};

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

@@ -0,0 +1,15 @@
+/*
+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 (element) => {
+  return element.nextElementSibling;
+};

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

@@ -0,0 +1,33 @@
+/*
+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.
+*/
+
+let nonce;
+
+/**
+ * Returns the nonce if available.
+ * @param {Node} [context=document] defaults to document
+ * @returns {(String|undefined)} the nonce or undefined if not available
+ */
+export default (context = document) => {
+  if (nonce === undefined) {
+    const n = context.querySelector("[nonce]");
+    // NOTE: We're keeping n.getAttribute("nonce") until it is safe to remove:
+    //   ref: https://github.com/whatwg/html/issues/2369#issuecomment-280853946
+    nonce = n && (n.nonce || n.getAttribute("nonce"));
+  }
+  return nonce;
+};
+
+// This function is only used for testing and removed when library is built (tree-shaking)
+export const testResetCachedNonce = () => {
+  nonce = undefined;
+};

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

@@ -0,0 +1,15 @@
+/*
+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 (element) => {
+  return element.parentNode;
+};

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

@@ -0,0 +1,22 @@
+/*
+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 { isNonEmptyString } from "@adobe/alloy-core/utils";
+
+const EQ_START = ":eq(";
+const EQ_PATTERN = /:eq\((\d+)\)/g;
+
+export const isNotEqSelector = (str) => str.indexOf(EQ_START) === -1;
+
+export const splitWithEq = (selector) => {
+  return selector.split(EQ_PATTERN).filter(isNonEmptyString);
+};

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

@@ -0,0 +1,26 @@
+/*
+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 as createFragment } from "./createFragment.js";
+export { selectNodesWithEq } from "./selectNodesWithEq.js";
+export { default as getElementById } from "./getElementById.js";
+export { default as setAttribute } from "./setAttribute.js";
+export { default as getAttribute } from "./getAttribute.js";
+export { default as removeAttribute } from "./removeAttribute.js";
+export { default as setStyle } from "./setStyle.js";
+export { default as insertAfter } from "./insertAfter.js";
+export { default as insertBefore } from "./insertBefore.js";
+export { default as getNextSibling } from "./getNextSibling.js";
+export { default as getChildren } from "./getChildren.js";
+export { default as getChildNodes } from "./getChildNodes.js";
+export { default as getFirstChild } from "./getFirstChild.js";
+export { default as getNonce } from "./getNonce.js";

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

@@ -0,0 +1,26 @@
+/*
+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 getParent from "./getParent.js";
+import getNextSibling from "./getNextSibling.js";
+
+export default (container, element) => {
+  if (!container) {
+    return;
+  }
+
+  const parent = getParent(container);
+
+  if (parent) {
+    parent.insertBefore(element, getNextSibling(container));
+  }
+};

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

@@ -0,0 +1,25 @@
+/*
+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 getParent from "./getParent.js";
+
+export default (container, element) => {
+  if (!container) {
+    return;
+  }
+
+  const parent = getParent(container);
+
+  if (parent) {
+    parent.insertBefore(element, container);
+  }
+};

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

@@ -0,0 +1,13 @@
+/*
+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.
+*/
+export default (element) =>
+  element instanceof Element || element instanceof HTMLDocument;

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

@@ -0,0 +1,37 @@
+/*
+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 { matchesSelector } from "@adobe/alloy-core/utils/dom";
+import { isNotEqSelector } from "./helperForEq.js";
+import { selectNodesWithEq } from "./selectNodesWithEq.js";
+
+export default (selector, element) => {
+  if (isNotEqSelector(selector)) {
+    return matchesSelector(selector, element);
+  }
+
+  // Using node selection vs matches selector, because of :eq()
+  // Find all nodes using document as context
+  const nodes = selectNodesWithEq(selector);
+  let result = false;
+
+  // Iterate through all the identified elements
+  // and reference compare with element
+  for (let i = 0; i < nodes.length; i += 1) {
+    if (nodes[i] === element) {
+      result = true;
+      break;
+    }
+  }
+
+  return result;
+};

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

@@ -0,0 +1,15 @@
+/*
+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 (element, name) => {
+  element.removeAttribute(name);
+};

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

@@ -0,0 +1,101 @@
+/*
+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 } from "@adobe/alloy-core/utils/dom";
+import { isNotEqSelector, splitWithEq } from "./helperForEq.js";
+
+// Trying to match ID or CSS class
+const CSS_IDENTIFIER_PATTERN = /(#|\.)(-?\w+)/g;
+// Here we use CSS.escape() to make sure we get
+// correct values for ID and CSS class
+// Please check:  https://www.w3.org/TR/css-syntax-3/#escaping
+const replaceIdentifier = (_, $1, $2) => `${$1}${CSS.escape($2)}`;
+
+export const escapeIdentifiersInSelector = (selector) => {
+  return selector.replace(CSS_IDENTIFIER_PATTERN, replaceIdentifier);
+};
+
+export const parseSelector = (rawSelector) => {
+  const result = [];
+  const selector = escapeIdentifiersInSelector(rawSelector.trim());
+  const parts = splitWithEq(selector);
+  const { length } = parts;
+  let i = 0;
+
+  while (i < length) {
+    const sel = parts[i];
+    const eq = parts[i + 1];
+
+    if (eq) {
+      result.push({ sel, eq: Number(eq) });
+    } else {
+      result.push({ sel });
+    }
+
+    i += 2;
+  }
+
+  return result;
+};
+
+/**
+ * Returns an array of matched DOM nodes.
+ * @param {String} selector that contains Sizzle "eq(...)" pseudo selector
+ * @returns {Array} an array of DOM nodes
+ */
+export const selectNodesWithEq = (selector) => {
+  const doc = document;
+
+  if (isNotEqSelector(selector)) {
+    return selectNodes(selector, doc);
+  }
+
+  const parts = parseSelector(selector);
+  const { length } = parts;
+  let result = [];
+  let context = doc;
+  let i = 0;
+
+  while (i < length) {
+    const { sel, eq } = parts[i];
+    const nodes = selectNodes(sel, context);
+    const { length: nodesCount } = nodes;
+
+    if (nodesCount === 0) {
+      break;
+    }
+
+    if (eq != null && eq > nodesCount - 1) {
+      break;
+    }
+
+    if (i < length - 1) {
+      if (eq == null) {
+        [context] = nodes;
+      } else {
+        context = nodes[eq];
+      }
+    }
+
+    if (i === length - 1) {
+      if (eq == null) {
+        result = nodes;
+      } else {
+        result = [nodes[eq]];
+      }
+    }
+
+    i += 1;
+  }
+
+  return result;
+};

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

@@ -0,0 +1,15 @@
+/*
+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 (element, name, value) => {
+  element.setAttribute(name, value);
+};

package/src/components/Personalization/dom-actions/dom/setStyle.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.
+*/
+
+export default (element, name, value, priority) => {
+  let css;
+
+  if (priority) {
+    css = `${name}:${value} !${priority};`;
+  } else {
+    css = `${name}:${value};`;
+  }
+
+  element.style.cssText += `;${css}`;
+};

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

@@ -0,0 +1,17 @@
+/*
+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.
+*/
+
+export const addPxIfMissing = (value) => {
+  const hasPx = `${value}`.endsWith("px");
+
+  return hasPx ? value : `${value}px`;
+};

package/src/components/Personalization/dom-actions/images.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 { createNode, selectNodes } from "@adobe/alloy-core/utils/dom";
+import { IMG } from "@adobe/alloy-core/constants/tagName.js";
+import { SRC } from "@adobe/alloy-core/constants/elementAttribute.js";
+import { getAttribute } from "./dom/index.js";
+
+export const isImage = (element) => element.tagName === IMG;
+
+export const loadImage = (url) => {
+  return createNode(IMG, { src: url });
+};
+
+export const loadImages = (fragment) => {
+  const images = selectNodes(IMG, fragment);
+
+  images.forEach((image) => {
+    const url = getAttribute(image, SRC);
+
+    if (url) {
+      loadImage(url);
+    }
+  });
+};

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

@@ -0,0 +1,13 @@
+/*
+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 as initDomActionsModules } from "./initDomActionsModules.js";

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

@@ -0,0 +1,67 @@
+/*
+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 setHtml from "./setHtml.js";
+import prependHtml from "./prependHtml.js";
+import { createAction } from "./action.js";
+import setText from "./setText.js";
+import setAttributes from "./setAttributes.js";
+import swapImage from "./swapImage.js";
+import setStyles from "./setStyles.js";
+import move from "./move.js";
+import rearrangeChildren from "./rearrangeChildren.js";
+import insertHtmlAfter from "./insertHtmlAfter.js";
+import insertHtmlBefore from "./insertHtmlBefore.js";
+import replaceHtml from "./replaceHtml.js";
+import appendHtml from "./appendHtml.js";
+import collectInteractions from "./collectInteractions.js";
+import resize from "./resize.js";
+
+export const DOM_ACTION_SET_HTML = "setHtml";
+export const DOM_ACTION_CUSTOM_CODE = "customCode";
+export const DOM_ACTION_SET_TEXT = "setText";
+export const DOM_ACTION_SET_ATTRIBUTE = "setAttribute";
+export const DOM_ACTION_SET_IMAGE_SOURCE = "setImageSource";
+export const DOM_ACTION_SET_STYLE = "setStyle";
+export const DOM_ACTION_MOVE = "move";
+export const DOM_ACTION_RESIZE = "resize";
+export const DOM_ACTION_REARRANGE = "rearrange";
+export const DOM_ACTION_REMOVE = "remove";
+export const DOM_ACTION_INSERT_AFTER = "insertAfter";
+export const DOM_ACTION_INSERT_BEFORE = "insertBefore";
+export const DOM_ACTION_REPLACE_HTML = "replaceHtml";
+export const DOM_ACTION_PREPEND_HTML = "prependHtml";
+export const DOM_ACTION_APPEND_HTML = "appendHtml";
+export const DOM_ACTION_CLICK = "click";
+export const DOM_ACTION_COLLECT_INTERACTIONS = "collectInteractions";
+
+export default () => {
+  return {
+    [DOM_ACTION_SET_HTML]: createAction(setHtml, true),
+    [DOM_ACTION_CUSTOM_CODE]: createAction(prependHtml, true),
+    [DOM_ACTION_SET_TEXT]: createAction(setText, true),
+    [DOM_ACTION_SET_ATTRIBUTE]: createAction(setAttributes, true),
+    [DOM_ACTION_SET_IMAGE_SOURCE]: createAction(swapImage, true),
+    [DOM_ACTION_SET_STYLE]: createAction(setStyles, true),
+    [DOM_ACTION_MOVE]: createAction(move, true),
+    [DOM_ACTION_RESIZE]: createAction(resize, true),
+    [DOM_ACTION_REARRANGE]: createAction(rearrangeChildren),
+    [DOM_ACTION_REMOVE]: createAction(removeNode, true),
+    [DOM_ACTION_INSERT_AFTER]: createAction(insertHtmlAfter),
+    [DOM_ACTION_INSERT_BEFORE]: createAction(insertHtmlBefore),
+    [DOM_ACTION_REPLACE_HTML]: createAction(replaceHtml, true),
+    [DOM_ACTION_PREPEND_HTML]: createAction(prependHtml),
+    [DOM_ACTION_APPEND_HTML]: createAction(appendHtml),
+    [DOM_ACTION_COLLECT_INTERACTIONS]: createAction(collectInteractions, true),
+  };
+};

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

@@ -0,0 +1,43 @@
+/*
+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 { createFragment, getChildNodes, insertAfter } from "./dom/index.js";
+import { loadImages } from "./images.js";
+import addNonceToInlineStyleElements from "./addNonceToInlineStyleElements.js";
+import {
+  getInlineScripts,
+  getRemoteScriptsUrls,
+  executeInlineScripts,
+  executeRemoteScripts,
+} 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);
+
+  loadImages(fragment);
+
+  let insertionPoint = container;
+
+  elements.forEach((element) => {
+    decorateProposition(element);
+    insertAfter(insertionPoint, element);
+    insertionPoint = element;
+  });
+
+  executeInlineScripts(container, scripts);
+
+  return executeRemoteScripts(scriptsUrls);
+};

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

@@ -0,0 +1,40 @@
+/*
+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 { createFragment, getChildNodes, 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);
+
+  loadImages(fragment);
+
+  elements.forEach((element) => {
+    decorateProposition(element);
+    insertBefore(container, element);
+  });
+
+  executeInlineScripts(container, scripts);
+
+  return executeRemoteScripts(scriptsUrls);
+};