@speedkit/cli 2.4.1

package/dist/services/customer-config/templates/config_dynamicBlocks.es6.hbs

@@ -0,0 +1,263 @@
+(function() {
+{{#if addPreRendering}}
+
+  const MAIN_PRE_RENDERED_BLOCK_SELECTOR = "#app";
+{{/if}}
+
+  /**
+   * @type {DynamicBlockConfig}
+   */
+  window.dynamicBlockConfig = {
+{{#if isShopify}}
+    dynamicScriptExecution: true, // Shopify specific
+    // => as some async external scripts are injected more or less randomly into the html, destroying the order of local & remote scripts
+{{/if}}
+{{#unless addPreRendering}}
+{{/unless}}
+
+    blocks: [
+      // TODO: adjust/replace this exemplary list
+
+{{#if isShopify}}
+      // Shopify specific:
+      {
+        selector: "#shopify-section-announcement-bar",
+        detectChanges: [{
+          find: ".announcement-bar--wrapper",
+          compare: ["text"],
+        }],
+      },
+      // cover all the other high-level Shopify sections:
+      {
+        selector: "body > .shopify-section[id]",
+        idAttribute: "id",
+      },
+
+{{/if}}
+      {
+        selector: '#main',
+        detectChanges: [
+
+          // home teaser:
+          {
+            find: '.teaser a',
+            compare: ['href'],
+          },
+          {
+            find: '.teaser source',
+            compare: ['srcset'],
+          },
+
+          // plp:
+          // ...
+
+          // pdp:
+          // ...
+        ],
+      },
+{{#if addPreRendering}}
+
+      // Pre-Rendering:
+      {
+          selector: MAIN_PRE_RENDERED_BLOCK_SELECTOR,
+          merge: (localBlock,remoteBlock) => {
+              // handle preRendering by inserting pre-rendered #app before initial #app
+              if(window.dynamicBlockConfig.prerender){
+                  localBlock.classList.add('speed-kit-shadow-app-root');
+                  let localId = localBlock.getAttribute('id');
+                  if (localId) {
+                      localBlock.setAttribute('id',`sk-${localId}`)
+                  }
+                  localBlock.before(remoteBlock)
+                  return;
+              }
+              SpeedKit.replaceBlock(localBlock,remoteBlock);
+          },
+          detectChanges: false,
+      },
+{{/if}}
+{{#if isPlentymarkets}}
+
+      // Plentymarkets specific:
+      // cover JSON with site contents
+      {
+        selector: 'script[type="application/json"]',
+        merge: false,
+        detectChanges: [{compare: ['text']}],
+      },
+{{/if}}
+{{#if activateCfRocketLoaderWorkaround}}
+
+      // Workaround for Cloudflare's Rocket Loader (e.g. needed for Shopify)
+      {
+        selector: 'script[data-cf-settings]',
+        mergeFunction: function (localBlock, remoteBlock) {
+          let cFHash = remoteBlock.getAttribute('data-cf-settings');
+          localBlock.setAttribute('data-cf-settings', cFHash);
+          let deferScripts = document.querySelectorAll('script[src][defer]');
+                deferScripts.forEach((deferScript) => {
+            let type = deferScript.type;
+            type = type.replace(/[a-f0-9]{24}/, cFHash.split('-')[0]);
+            deferScript.type = type;
+          })
+        },
+      },
+{{/if}}
+
+      // default entries
+      {selector: 'link[rel="canonical"]'},
+      {selector: 'meta[name]', idAttribute: 'name'},
+      {selector: 'meta[property]', idAttribute: 'property'},
+      {selector: 'script[type="application/ld+json"]'},
+    ],
+  };
+
+  //================================================================================
+  // Utility Functions
+  //================================================================================
+
+{{#if addPreRendering}}
+  async function sleep(interval = 500) {
+    return new Promise(resolve => setTimeout(resolve, interval))
+  }
+
+  /**
+   * retry searching for a given selector in the actual app root
+   * @param root
+   * @param selector
+   * @param retryInterval
+   * @param maxAttempts
+   * @returns {Promise<*>}
+   */
+  async function querySelectorWithRetry(root, selector, retryInterval = 500, maxAttempts = 10) {
+    for (let i = 0; i < maxAttempts; i++) {
+      const element = root.querySelector(selector);
+      if (element) {
+        return element
+      }
+      await sleep(retryInterval)
+    }
+  }
+
+  // hide preRendered appRoot if configured waitForElements were found on remote block
+  const shadowAppRoot = document.querySelector(`body > ${MAIN_PRE_RENDERED_BLOCK_SELECTOR}.speed-kit-pre-rendered-block-added`);
+  if (shadowAppRoot) {
+    document.addEventListener('dynamic-fetcher-data-ready', () => {
+      if (window.dynamicBlockConfig.prerender) {
+        let waitFor = []
+        for (let selector of window.dynamicBlockConfig.prerender) {
+          waitFor.push(querySelectorWithRetry(document, prepareWaitForSelector(`body > ${MAIN_PRE_RENDERED_BLOCK_SELECTOR}:not(.speed-kit-pre-rendered-block-added) `, selector)))
+        }
+
+        return Promise.all(waitFor).catch(() => true).then(() => {
+          let appRoot = document.querySelector(`body > ${MAIN_PRE_RENDERED_BLOCK_SELECTOR}:not(.speed-kit-pre-rendered-block-added)`)
+          detectChanges(shadowAppRoot, appRoot, window.dynamicBlockConfig.prerender);
+          shadowAppRoot.remove();
+          dispatchReadyEvent();
+        })
+      }
+    })
+  }
+
+  /**
+   * prepare selector for querySelectorWithRetry
+   * @param root - root element
+   * @param selector - selector string
+   * @returns {*}
+   */
+  function prepareWaitForSelector(root, selector) {
+    return selector.split(',').map(string => {
+      return root + string
+    }).join(',');
+  }
+
+  /**
+   * dispatch prerender ready event after shadow app root was removed
+   */
+  function dispatchReadyEvent() {
+    document.dispatchEvent(new CustomEvent('speed-kit-prerender-ready'))
+  }
+
+  function detectChanges(local, remote, prerender) {
+    let changes = {}
+    let hasChanges = false;
+    for (let selector of prerender) {
+      let localBlock = local.querySelector(selector);
+      if (!localBlock) {
+        console.log(selector + ' not found')
+        continue;
+      }
+
+      let remoteBlock = remote.querySelector(selector)
+      let reason = []
+
+      if (localBlock && !remoteBlock) {
+        reason.push({selector, reason: 'remote block not found'})
+        changes[selector] = reason
+        hasChanges = true;
+        continue;
+      }
+
+      if (localBlock.hasAttribute('data-sk-change-detect')) {
+        continue;
+      }
+
+      if (localBlock.hasAttribute('srcset') && (localBlock.getAttribute('srcset') !== remoteBlock.getAttribute('srcset'))) {
+        reason.push({selector, reason: 'srcset differs'})
+      }
+
+      if (localBlock.hasAttribute('src') && (localBlock.getAttribute('src') !== remoteBlock.getAttribute('src'))) {
+        reason.push({selector, reason: 'src differs'})
+      }
+
+      if (localBlock.hasAttribute('href') && (localBlock.getAttribute('href') !== remoteBlock.getAttribute('href'))) {
+        reason.push({selector, reason: 'href differs'})
+      }
+
+      let localString = localBlock.innerHTML.replace(/\s+/g, '').replace(/<!--.*?-->/g, "");
+      let remoteString = remoteBlock.innerHTML.replace(/\s+/g, '').replace(/<!--.*?-->/g, "");
+      if (localString !== remoteString) {
+        reason.push({selector, reason: 'innerHTML differs'})
+      }
+      if (reason.length > 0) {
+        changes[selector] = reason
+        hasChanges = true;
+      }
+    }
+    if (hasChanges) {
+      sendRevalidation(window.location.href, changes)
+    }
+  }
+
+  function sendRevalidation(url, selectors) {
+    let baqendAssetUrl = url;
+    let userId = window.SpeedKit.userId || "";
+    let sessionId = window.SpeedKit.sessionId || "";
+    let navigateId = window.SpeedKit.navigateId;
+
+    let detectedChanges = {
+      url: baqendAssetUrl,
+      triggeredBy: selectors,
+    };
+
+    // Please note: *.appName is being provided by the DocumentHandler AFTER having this config processed
+    let beaconUrl = `https://${window.dynamicBlockConfig.appName}.app.baqend.com/v1/rum/pi`;
+    let data = {
+      piId: navigateId,
+      userId: userId,
+      sessionId: sessionId,
+      changeDetection: detectedChanges,
+      debug: true,
+    };
+
+    if (navigator.sendBeacon) {
+      navigator.sendBeacon(beaconUrl, JSON.stringify(data));
+      return;
+    }
+
+    let xhr = new XMLHttpRequest();
+    xhr.open("POST", beaconUrl, true);
+    xhr.send(JSON.stringify(data));
+  }
+{{/if}}
+})();

package/dist/services/customer-config/templates/config_dynamicStyles.css.hbs

@@ -0,0 +1,116 @@
+@keyframes speed-kit-loading-dots {
+  0% {
+    box-shadow:
+      8px 0 #c8c8cd,
+      20px 0 #dddde0,
+      32px 0 #ededee;
+  }
+  33% {
+    box-shadow:
+      8px 0 #ededee,
+      20px 0 #c8c8cd,
+      32px 0 #dddde0;
+  }
+  66% {
+    box-shadow:
+      8px 0 #dddde0,
+      20px 0 #ededee,
+      32px 0 #c8c8cd;
+  }
+}
+
+@keyframes speed-kit-skeleton {
+  to {
+    background-position: calc(100% + 400px) 0;
+  }
+}
+{{#if withGoogleOptimize}}
+
+/* Google Optimize Flicker Fix: */
+html > body {
+  opacity: 1 !important;
+}
+{{/if}}
+
+.speed-kit-dynamic-loading .dummy-price-class,
+.speed-kit-dynamic-loading .dummy-availability-class {
+  visibility: hidden;
+}
+
+.speed-kit-dynamic-loading .dummy-price-class {
+  position: relative;
+}
+.speed-kit-dynamic-loading .dummy-price-class::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  display: block;
+  position: absolute;
+  top: calc(50% - 4px);
+  border-radius: 50%;
+  box-shadow:
+    8px 0 #c8c8cd,
+    20px 0 #dddde0,
+    32px 0 #ededee;
+  will-change: box-shadow;
+  animation: speed-kit-loading-dots 1.5s infinite both;
+  visibility: visible;
+  z-index: 1;
+
+  /* --- align left --- */
+  left: -8px;
+
+  /* --- align right --- */
+  /* left: auto; */
+  /* right: 32px; */
+
+  /* --- align center --- */
+  /* left: calc(50% - 32px); */
+}
+
+/* Prevent Add2Cart clicks: */
+.speed-kit-dynamic-loading .dummy-add2cart-class {
+  pointer-events: none !important;
+}
+
+/* Skeleton loading style: */
+.speed-kit-dynamic-loading .dummy-add2cart-class,
+.speed-kit-dynamic-loading .dummy-skeleton-container-class {
+  background-color: #ededed;
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
+  background-repeat: no-repeat;
+  background-size: 200px 100%;
+  background-position: calc(-1 * 200px) 0;
+  animation: speed-kit-skeleton 1.5s 500ms infinite; /* works best with a container width of ~300-500 px */
+  will-change: background-position;
+  text-indent: -9999px;
+}
+.speed-kit-dynamic-loading .dummy-add2cart-class > *,
+.speed-kit-dynamic-loading .dummy-skeleton-container-class > * {
+  visibility: hidden;
+}
+.speed-kit-dynamic-loading .dummy-skeleton-container-class {
+  /* chunk skeleton background into smaller boxes: */
+  mask-size:
+    100% 98px,
+    100% 108px,
+    100% 98px;
+  mask-position:
+    0 0,
+    163px 123px,
+    0 259px;
+  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
+  mask-repeat: no-repeat;
+}
+{{#if addPreRendering}}
+
+/* Pre-Rendering */
+body > div.speed-kit-pre-rendered-block-added {
+  position: absolute !important;
+  top: 0 !important;
+  width: calc(100vw) !important;
+  left: 0 !important;
+  z-index: 1000;
+  background: #fff;
+}
+{{/if}}