https://www.casino.ca/includes/web-components/javascript/web-component-hydration/helpers.9905f63b.js

1// @ts-check
2
3/**
4 * Hydrates server-side rendered custom elements / web components.
5 *
6 * Server-side rendered elements should wrap generated content with a `div` element with
7 * the `data-template` attribute set to the name of the corresponding custom element.
8 *
9 * Initial client-side data can be added to server-side rendered elements with the
10 * `data-initial-data` attribute set to JSON encoded object.
11 *
12 * @param {string} name Custom element name
13 * @param {string} [slotElementType] Name used when defining slot content
14 *    for an element's initial data. Default is `span`.
15 */
16export function hydrate(name, slotElementType) {
17  // skip if no custom elements support or element hasn't yet been defined
18  if (!window.customElements || customElements.get(name) === undefined) {
19    return;
20  }
21
22  // skip if client template isn't present
23  if (!document.getElementById(`template-${name}`)) {
24    return;
25  }
26
27  document.querySelectorAll(`[data-template="${name}"]`).forEach((oldChild) => {
28    const newChild = document.createElement(name);
29    const initialData = oldChild.getAttribute('data-initial-data');
30
31    if (initialData) {
32      hydrateInitialData(initialData, slotElementType, newChild);
33    }
34
35    if (oldChild.parentNode) {
36      oldChild.parentNode.replaceChild(newChild, oldChild);
37    }
38  });
39}
40
41/**
42 * Hydrates server-side rendered initial data for custom elements / web components.
43 *
44 * @param {string} initialData A custom element's initial data
45 * @param {string | undefined} slotElementType Name used when defining slot content
46 *    for an element's initial data.
47 * @param {HTMLElement} newChild Newly created element
48 */
49function hydrateInitialData(initialData, slotElementType, newChild) {
50  const decodedString = decodeURI(initialData)
51    // additional replacements for PHP's `urlencode`
52    .replace(/%3[dD]/g, '=')
53    .replace(/\+/g, ' ')
54    .replace(/%2[fF]/g, '/')
55    .replace(/%3[aA]/g, ':')
56    .replace(/%2[cC]/g, ',');
57  try {
58    const data = JSON.parse(decodedString);
59    Object.keys(data).forEach((key) => {
60      const el = document.createElement(slotElementType || 'span');
61      el.slot = key;
62      el.innerHTML = data[key];
63      newChild.appendChild(el);
64    });
65  } catch (e) {
66    // one, unnamed slot
67    newChild.innerHTML = decodedString;
68  }
69}
70
71/**
72 * Helper function around the `DOMContentLoaded` event to fire
73 * the event handler if the event has already been triggered
74 *
75 * @param {(e?: Event) => void} callback
76 */
77export function onReady(callback) {
78  if (document.readyState === 'loading') {
79    window.addEventListener('DOMContentLoaded', callback);
80    return;
81  }
82
83  callback();
84}