@speedkit/cli 2.4.1

package/dist/services/customer-config/templates/config_loadHandler.js.hbs

@@ -0,0 +1,394 @@
+import { BaseBundle } from 'rum/BaseBundle';
+{{#if useGATracking}}
+import { GAEcommerceTrackingPlugin } from 'rum/GAEcommerceTrackingPlugin';
+{{/if}}
+
+!function() {
+  if (window !== window.top) {
+    return;
+  }
+
+  window.SpeedKit = window.SpeedKit || {};
+  SpeedKit.rumPlugins = SpeedKit.rumPlugins || [];
+  SpeedKit.rumPlugins.push(
+    new BaseBundle(),
+{{#if useGATracking}}
+    new GAEcommerceTrackingPlugin(),
+{{/if}}
+
+    {
+      key: 'language',
+      type: 'SessionDimension',
+{{#if useGATracking}}
+      on: 'dataLayer',
+      set: function(pushedEvent) {
+        // TODO: verify event property
+        return pushedEvent?.language;
+      },
+{{else}}
+  {{#if isShopify}}
+      on: ShopifyReady,
+      set: function() {
+        return window.Shopify?.locale;
+      },
+  {{else}}
+      // TODO: set proper 'on' event listener
+      set: function() {
+        // TODO: return value
+      },
+  {{/if}}
+{{/if}}
+    },
+    {
+      key: 'country',
+      type: 'SessionDimension',
+{{#if useGATracking}}
+      on: 'dataLayer',
+      set: function(pushedEvent) {
+        // TODO: verify event property
+        return pushedEvent?.country;
+      },
+{{else}}
+  {{#if isShopify}}
+      on: ShopifyReady,
+      set: function() {
+        return window.Shopify?.country;
+      },
+  {{else}}
+      // TODO: set proper 'on' event listener
+      set: function() {
+        // TODO: return value
+      },
+  {{/if}}
+{{/if}}
+    },
+    {
+      key: 'currency',
+      type: 'SessionDimension',
+{{#if useGATracking}}
+      on: 'dataLayer',
+      set: function(pushedEvent) {
+        // TODO: verify event property
+        return pushedEvent?.currency;
+      },
+{{else}}
+  {{#if isShopify}}
+      on: ShopifyReady,
+      set: function() {
+        return window.Shopify?.currency?.active;
+      },
+  {{else}}
+      // TODO: set proper 'on' event listener
+      set: function() {
+        // TODO: return value
+      },
+  {{/if}}
+{{/if}}
+    },
+    {
+      key: 'loggedIn',
+      type: 'SessionDimension',
+{{#if useGATracking}}
+      on: 'dataLayer',
+      set: function(pushedEvent) {
+        return pushedEvent?.isLoggedIn;
+      },
+{{else}}
+      // TODO: set proper 'on' event listener
+      set: function() {
+        // TODO: return value
+      },
+{{/if}}
+    },
+    {
+      key: 'pageType',
+      type: 'PiDimension',
+{{#if isShopify}}
+      on: ShopifyAnalyticsReady,
+      set: function() {
+        var pathname = window.location.pathname;
+        // TODO: verify pathname patterns
+        if (pathname.indexOf('/checkouts/') > -1) {
+          return 'checkout';
+        } if (pathname.indexOf('/account/login') > -1) {
+          return 'login';
+        } if (pathname.indexOf('/account/register') > -1) {
+          return 'register';
+        } if (pathname.indexOf('/account') > -1) {
+          return 'account';
+        } else {
+          return window.ShopifyAnalytics?.meta?.page?.pageType;
+        }
+      },
+{{else}}
+  {{#if useGATracking}}
+      on: 'dataLayer',
+      set: function(pushedEvent) {
+        // TODO: verify event property
+        return pushedEvent?.pageCategory;
+      },
+  {{else}}
+      // TODO: set proper 'on' event listener
+      set: function() {
+        // TODO: return value
+      },
+  {{/if}}
+{{/if}}
+    },
+{{#if useGATracking}}
+
+    // TODO: remove or adapt if events are not properly covered by GAEcommerceTrackingPlugin
+    // {
+    //   key: 'ecAddToCart',
+    //   on: 'dataLayer',
+    //   append: function (pushedEvent) {
+    //     if (!pushedEvent?.ecommerce?.add?.products) {
+    //       // Ignore, because the passed event was not a 'addToCart' event.
+    //       return;
+    //     }
+    //
+    //     var aTCProductsArray = [];
+    //     var ecommerce = pushedEvent.ecommerce;
+    //     var currencyCode = ecommerce.currencyCode;
+    //
+    //     // iterate over all added products
+    //     for (var i = 0; i < ecommerce.add.products.length; i++) {
+    //       aTCProductsArray.push({
+    //         id: ecommerce.add.products[i].id ? ecommerce.add.products[i].id : location.href,
+    //         currencyCode: currencyCode ? currencyCode : 'EUR',
+    //         price: Number(ecommerce.add.products[i].price),
+    //         quantity: ecommerce.add.products[i].quantity ? ecommerce.add.products[i].quantity : 1,
+    //        });
+    //     }
+    //
+    //     if (aTCProductsArray.length > 0) {
+    //       return aTCProductsArray;
+    //     }
+    //   },
+    // },
+    //
+    // // Confirmation tracking
+    // {
+    //   key: 'ecConversion',
+    //   on: 'dataLayer',
+    //   set: function (pushedEvent) {
+    //     if (!pushedEvent?.ecommerce?.purchase) {
+    //       // Ignore, because the passed event was not a 'purchase' event.
+    //       return;
+    //     }
+    //
+    //     var purchase = pushedEvent.ecommerce.purchase;
+    //     if (!purchase.actionField) {
+    //       return;
+    //     }
+    //
+    //     var orderId = purchase.actionField.id;
+    //     var orderValue = String(purchase.actionField.revenue).replace(',', '.');
+    //     return {
+    //       id: String(orderId), currencyCode: 'EUR', revenue: Number(orderValue),
+    //     };
+    //   },
+    // },
+{{else}}
+  {{#if isShopify}}
+
+    // {
+    //   key: 'ecAddToCart',
+    //   on: onAddToCartClick,
+    //   set: function () {
+    //     if (window.ShopifyAnalytics?.lib) {
+    //       var shopifyData = window.ShopifyAnalytics.lib;
+    //       var product;
+    //
+    //       if (shopifyData && shopifyData.length) {
+    //         shopifyData.forEach(item => {
+    //           if (item[1] === "Viewed Product Variant") {
+    //             if(item.length > 2){
+    //               product = item[2];
+    //             }
+    //           }
+    //         });
+    //
+    //         if (product) {
+    //           return {
+    //             productId: product.productId,
+    //             variantId: product.variantId,
+    //             price: Number(product.price),
+    //             currency: product.currency,
+    //             quantity: 1,
+    //           }
+    //         }
+    //       }
+    //     }
+    //   },
+    // },
+    {
+      key: 'ecConversion',
+      on: ShopifyReady,
+      set: function() {
+        var confirmationPage = location.pathname.indexOf('/thank_you') > -1;
+        if (
+          confirmationPage &&
+          window.Shopify?.checkout
+        ) {
+          var orderId = window.Shopify.checkout.order_id;
+          var orderCurrency = window.Shopify.checkout.currency;
+          var orderValue = window.Shopify.checkout.total_price;
+
+          return {
+            id: orderId, currencyCode: orderCurrency, revenue: Number(orderValue),
+          };
+        }
+      },
+    },
+  {{else}}
+
+    {
+      key: 'ecAddToCart',
+      // TODO: set proper 'on' event listener
+      set: function() {
+        // TODO: return value
+      },
+    },
+    {
+      key: 'ecConversion',
+      // TODO: set proper 'on' event listener
+      set: function() {
+        // TODO: return value
+      },
+    },
+  {{/if}}
+{{/if}}
+  );
+{{#if isShopify}}
+
+  /* ==== */
+
+  // Shopify specific:
+
+  function ShopifyReady(cb, controller) {
+    controller.onDOMInteractive(function() {
+      function init() {
+        if (!window.Shopify) {
+          setTimeout(init, 500);
+          return;
+        }
+        cb();
+      }
+      init();
+    });
+  }
+
+  function ShopifyAnalyticsReady(cb, controller) {
+    controller.onDOMInteractive(function() {
+      function init() {
+        var SA = window.ShopifyAnalytics;
+        if (!SA) {
+          setTimeout(init, 500);
+          return;
+        }
+        cb();
+      }
+      init();
+    });
+  }
+
+  // function onAddToCartClick(cb, controller) {
+  //   controller.onDOMInteractive(function() {
+  //     var addToCartBtn = document.querySelector('.button--add-to-cart');
+  //     if(addToCartBtn) {
+  //       addToCartBtn.addEventListener('click', function (t) {
+  //         cb(controller);
+  //       }, true);
+  //     }
+  //   })
+  // }
+{{/if}}
+{{#if isPlentymarkets}}
+
+  /* ==== */
+
+  // Plentymarkets specific:
+
+  // code for dynamic blacklisting upon user logging in
+  function sendCookiesToSpeedKit() {
+    try {
+      if (navigator.serviceWorker?.controller) {
+        navigator.serviceWorker.controller.postMessage({
+          type: 'send-cookies',
+          data: document.cookie,
+          event: 'domLoaded',
+        });
+      }
+    } catch (e) {}
+  }
+
+  function setBlacklistCookie() {
+    var expires = (new Date(Date.now() + 30*24*60*60000));
+    document.cookie = "baqend-speedkit-blacklist=true; path=/; expires=" + expires.toGMTString();
+    localStorage.setItem('baqend-speedkit-blacklist', 'true');
+  }
+
+  function removeBlacklistCookie() {
+    document.cookie = "baqend-speedkit-blacklist=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+    localStorage.removeItem('baqend-speedkit-blacklist');
+  }
+
+  function onDomInteractive(cb) {
+    if (document.readyState !== 'loading') {
+      return setTimeout(cb, 0);
+    }
+    document.addEventListener('DOMContentLoaded', cb);
+  }
+
+  function blacklistIfLoggedIn() {
+    // TODO: replace with customer-specific selector
+    var loggedIn = document.querySelector('#accountMenuList');
+    if (!loggedIn) {
+      removeBlacklistCookie();
+    } else {
+      setBlacklistCookie();
+    }
+    sendCookiesToSpeedKit();
+  }
+
+  function onJSdone(cb) {
+    onDomInteractive(function() {
+      // resolve if element is already there
+      // TODO: replace with customer-specific selector
+      if (document.querySelector('#newsletterSignup')) {
+        cb();
+      }
+
+      var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+
+      // TODO: replace with customer-specific selector
+      if (!MutationObserver || !document.querySelector('header')) {
+        return;
+      }
+
+      var observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+          // TODO: replace with customer-specific selector
+          if(mutation.target.id ==="newsletterSignup") {
+            cb();
+          }
+        });
+      });
+
+      // TODO: replace with customer-specific selector
+      var target = document.querySelector('header');
+      observer.observe(target, {
+        attributes: true,
+        childList: true,
+        characterData: true,
+        subtree:true,
+      });
+    });
+  }
+
+  onJSdone(function() {
+    blacklistIfLoggedIn();
+  });
+{{/if}}
+}();

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

@@ -0,0 +1,262 @@
+// Salesforce specific:
+
+const { run: executeRefresh } = require('./speedKit.CronJob');
+const fetch = require('node-fetch');
+
+const minutesToMilliseconds = (minutes) => {
+  return minutes * 60000;
+}
+
+const deploymentConfig = {
+  slack: "<1Password deployment token>",
+  origins: [
+    "https://{{production.host}}",
+  ],
+  jobType: "deployment", // "instant" | "deployment"
+
+  // configure how long the origin deployment takes in milliseconds:
+  deploymentDelay: minutesToMilliseconds(15),
+
+  // throttling the HTML refresh:
+  revalidationDelay: minutesToMilliseconds(0),
+
+  compareVersionStrings: false, // Compares version strings of the new and previous assets and only triggers deployment, when the current is newer. The version must be the first group in the regex
+  compareContentHashes: true,
+
+  assetList: [
+    // TODO: adjust/replace this exemplary list
+    "^https://{{production.host}}/on/demandware.static/Sites-(?:.*)-Site/-/[a-z]{2}_[A-Z]{2}/v(\\d{13})/js/main.js",
+    "^https://{{production.host}}/on/demandware.static/Sites-(?:.*)-Site/-/[a-z]{2}_[A-Z]{2}/v(\\d{13})/css/style.css",
+  ],
+}
+
+function getQuery(assetRegex, origin) {
+  const query = getBaseQuery(origin);
+  query.url = { "$regex": assetRegex };
+  return query;
+}
+
+function getBaseQuery(...origins) {
+  return {
+    "contentType": { "$in": ["script", "style"] },
+    "variation": "DEFAULT",
+    "origin": { "$in": origins },
+  };
+}
+
+const DEPLOYMENT_REFRESH_JOB_ID_TEMPLATE = '/db/jobs.Definition/deployment-refresh'
+const DEPLOYMENT_CHECKER_JOB_ID = '/db/jobs.Definition/deployment-check'
+const MINUTE = 60 * 1000;
+
+exports.get = async function(db, req, res) {
+  if (!db.User.me || db.User.me.key !== '1') {
+    throw new Abort("Unauthorized");
+  }
+
+  const assetsByOrigin = {};
+
+  for (const origin of deploymentConfig.origins) {
+    assetsByOrigin[origin] = await Promise.all(deploymentConfig.assetList.map(async asset => {
+      const { url } = await findAsset(db, asset, origin) || { url: null };
+      return url;
+    }))
+  }
+
+  res.json(assetsByOrigin);
+}
+
+
+exports.post = async function(db, req, res) {
+  if (!db.User.me || db.User.me.key !== '1') {
+    throw new Abort("Unauthorized");
+  }
+
+  const deploymentJobs = await Promise.all(deploymentConfig.origins.map(
+    origin => createDeploymentJob(db, deploymentConfig, origin)));
+
+  const deploymentChecker = await (new db['jobs.Definition']({
+    id: DEPLOYMENT_CHECKER_JOB_ID,
+    module: 'deploymentDetection',
+    cronpattern: '42 */10 * * * *',
+    startsAt: new Date(),
+  }).save().catch(e => e.message));
+
+  res.json({ deploymentChecker, deploymentJobs });
+}
+
+function getDeploymentJobId(origin) {
+  const originWithoutSlashes = origin.replace(/https:/g, '').replace(/\//g, '');
+  return `${DEPLOYMENT_REFRESH_JOB_ID_TEMPLATE}-${originWithoutSlashes}`;
+}
+
+function getDeploymentJobName(origin) {
+  const originWithoutSlashes = origin.replace(/https:/g, '').replace(/\//g, '');
+  return `Deployment ${originWithoutSlashes}`
+}
+
+function createDeploymentJob(db, deploymentConfig, origin) {
+  return (new db['jobs.Definition']({
+    id: getDeploymentJobId(origin),
+    module: 'speedKit.CronJob',
+    cronpattern: '*/60 */24 */30 */12 *',
+    startsAt: new Date(),
+    expiresAt: new Date(1970,0, 1),
+    data: {
+      "name": getDeploymentJobName(origin),
+      "jobType": deploymentConfig.jobType || "deployment",
+      "filter": {
+        "contentTypes": [ "document" ],
+        "origin": [ origin ],
+      },
+      "scheduleIn": deploymentConfig.deploymentDelay,
+      "revalidationDelay": deploymentConfig.revalidationDelay,
+    },
+  }).save({ force: true }).catch(e => e.message));
+}
+
+exports.run = async function triggerRefreshAfterDeployment(db, status) {
+  const interval = new Date(Date.now() - 10 * MINUTE - 10);
+  const origins = await findNewAsset(db, interval, deploymentConfig.origins);
+  const app = db.connection.host;
+
+  if (origins.size === 0) {
+    status.data = {refreshing: false, reason: "no new asset" };
+    return;
+  }
+
+  const data = status.data = {};
+  for (const origin of origins) {
+    try {
+      const changedAsset = await getChangedAssets(db, origin);
+      if (!changedAsset) {
+        data[origin] = {
+          refreshing: false, origin, reason: "asset hash not changed",
+        };
+        continue;
+      }
+
+      const reason = `Asset changed: ${changedAsset}`;
+      fetch(deploymentConfig.slack, {
+        username: 'Deployment Detection',
+        method: 'post',
+        body: JSON.stringify({text: `Deployment on ${app} on ${origin} detected. Starting HTML ${deploymentConfig.jobType || "deployment"} Refresh. ${reason}`}),
+      }).catch(db.log.warn);
+
+      await runDeploymentJob(db, origin, reason);
+
+      data[origin] = {
+        refreshing: true, origin, latestAsset: changedAsset,
+      };
+    } catch (e) {
+      fetch(deploymentConfig.slack, {
+        username: 'Deployment Detection',
+        method: 'post',
+        body: JSON.stringify({text: `Deployment detection on ${app} and ${origin} failed. ${e.message}`}),
+      }).catch(db.log.warn);
+      data[origin] = {
+        refreshing: false, origin, reason: e.stack,
+      };
+    }
+  }
+  return data;
+};
+
+async function getChangedAssets(db, origin) {
+  for (const urlRegex of deploymentConfig.assetList) {
+    const interval = new Date(Date.now() - 10 * MINUTE - 10);
+    const current = await findAsset(db, urlRegex, origin, interval);
+    const previous = await findAsset(db, urlRegex, origin, null, interval);
+
+    if (!current) {
+      continue;
+    }
+
+    // trigger deployment since we see a new matching asset
+    if (!previous) {
+      return current.url;
+    }
+
+    if (deploymentConfig.compareContentHashes) {
+      if (current.contentHash === previous.contentHash) {
+        continue;
+      }
+
+      if (await hasCachedAsset(db, current, urlRegex, interval)) {
+        db.log.info('contentHash already known', {current, previous});
+        continue;
+      }
+    }
+
+    if (deploymentConfig.compareVersionStrings) {
+      const prevVersion = previous.url.match(urlRegex)[1];
+      const currentVersion = current.url.match(urlRegex)[1];
+      if (currentVersion < prevVersion) {
+        db.log.info('content version has not increased', {current, previous});
+        continue;
+      }
+    }
+
+    return current.url;
+  }
+
+  return false;
+}
+
+async function findAsset(db, urlRegex, origin, from, to) {
+  return await db["speedKit.Asset"].find()
+    .where(getQuery(urlRegex, origin))
+    .le('createdAt', to || new Date(Date.now() + MINUTE))
+    .gt('createdAt', from || new Date(1970, 0, 1))
+    .descending('createdAt')
+    .singleResult();
+}
+
+async function findNewAsset(db, from, origins) {
+  const result = await db["speedKit.Asset"].find()
+    .where(getBaseQuery(...origins))
+    .gt('createdAt', from || new Date(1970, 0, 1))
+    .resultList();
+
+  return new Set(result.map(asset => asset.origin));
+}
+
+async function hasAssetChanged(asset1, asset2) {
+  const res1 = await fetch(asset1.url);
+  const text1 = await res1.text();
+
+  const res2 = await fetch(asset2.url);
+  const text2 = await res2.text();
+
+  return text1 !== text2;
+}
+
+/**
+ * Check whether we have seen the hash before
+ */
+async function hasCachedAsset(db, asset, urlRegex, to) {
+  return (await db["speedKit.Asset"].find()
+    .where(getQuery(urlRegex, asset.origin))
+    .equal('contentType', asset.contentType)
+    .equal('variation', asset.variation)
+    .equal('contentHash', asset.contentHash)
+    .le('createdAt', to || new Date(Date.now() + MINUTE))
+    .count()
+  ) > 0;
+}
+
+async function runDeploymentJob(db, origin, reason) {
+  const status = new db['jobs.Status']();
+  const jobId = getDeploymentJobId(origin);
+  const cronjob = await db['jobs.Definition'].load(jobId);
+  // TODO: quite hacky right now we may need a way to pass additional parameters to the run job code
+  cronjob.data.reason = reason;
+  status.cronjob = cronjob;
+
+  try {
+    await executeRefresh(db, status, cronjob);
+  } catch(error) {
+    status.status = 'failed';
+    status.error = error;
+    await status.save();
+  }
+}