@speedkit/cli 2.4.1

package/dist/services/customer-config/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./customer-config-service"), exports);
+tslib_1.__exportStar(require("./customer-config-service-context"), exports);
+tslib_1.__exportStar(require("./customer-config-service-model"), exports);
+tslib_1.__exportStar(require("./customer-config-service-factory"), exports);

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

@@ -0,0 +1,351 @@
+(function() {
+  var ENABLED_HOSTS_CONFIGS = [
+    // Production:
+    {
+      hosts: ["{{production.host}}"],
+      split: 0,
+      splitTestId: "0vs100_20xx-xx-xx",
+    },
+
+{{#if staging.host}}
+    // Staging:
+    {
+      hosts: ["{{staging.host}}"],
+    },
+{{else}}
+    // No Staging configured
+{{/if}}
+  ];
+  var ENABLED_HOSTS = getEnabledHosts(ENABLED_HOSTS_CONFIGS);
+  var CURRENT_HOST_CONFIG = getCurrentHostConfig(ENABLED_HOSTS_CONFIGS);
+
+  /**
+   * @type {SpeedKitConfig}
+   */
+  window.speedKit = {
+    ruleSetConfig: {
+      version: 2,
+    },
+    appName: APP,
+{{#if isShopify}}
+    sw: "/apps/speed-kit/sw.js", // Shopify specific
+{{else}}
+    sw: "/wrapper-sw.js",
+{{/if}}
+{{#if includeServiceWorker}}
+    includeServiceWorker: "{{includeServiceWorker}}",
+{{/if}}
+    preloadDynamicBlocks: true,
+    rumTracking: {{activateRumTracking}},
+    split: CURRENT_HOST_CONFIG.split,
+    splitTestId: CURRENT_HOST_CONFIG.splitTestId,
+    disabled: !CURRENT_HOST_CONFIG.enabled,
+    enabledSites: [
+      {
+        pathname: [
+          // TODO: adjust/replace this exemplary list
+{{#if isShopify}}
+
+          "/collections/",
+          "/products/",
+{{/if}}
+        ],
+      },
+    ],
+    whitelist: [
+      {
+{{#if isPlentymarkets}}
+        host: ENABLED_HOSTS.concat([
+          // Plentymarkets specific:
+          /cdn\d\d\.plentymarkets\.com/,
+          "www.gstatic.com",
+          "static.doubleclick.net",
+          "static.newsletter2go.com",
+          "cdn-static.optimonk.com",
+        ]),
+{{else}}
+        host: ENABLED_HOSTS,
+{{/if}}
+        contentType: [
+          'navigate',
+          'style',
+          'font',
+{{#if activateImageOptimisation}}
+          'image',
+{{/if}}
+{{#if isShopify}}
+
+          // Shopify specific:
+          // don't enable 'script' because XHR Requests on PDPs, that do not match the navigate content type, are served as scripts
+{{else}}
+          'script',
+{{/if}}
+        ],
+      },
+      {
+        host: [
+          "fonts.googleapis.com",
+          "fonts.gstatic.com",
+        ],
+        contentType: ["script", "style", "font"],
+      },
+{{#if isShopify}}
+
+      // Shopify specific:
+      {
+        host: [
+          "cdn.shopify.com",
+        ],
+        // Image optimization is normally not activated for the Shopify CDN host
+        // – unless this has been explicitly requested!
+        contentType: ["script", "style", "font"],
+      },
+      
+      // Shopify specific:
+      {
+        url: [
+          "bat.bing.com/bat.js",
+          "connect.facebook.net/en_US/fbevents.js",
+        ],
+      },
+{{/if}}
+    ],
+    blacklist: [
+      {
+        pathname: [
+          // TODO: adjust/replace this exemplary list
+
+          // Login & Account:
+          /\/account/i,
+          /password/i,
+          /registration/i,
+          /register/i,
+          /login/i,
+          /authenticate/i,
+
+          // Checkout & Payment:
+          /\/cart/i,
+          /\/basket/i,
+          /checkout/i,
+          /payment/i,
+          /paypal/i,
+          /klarna/i,
+          /amazon/i,
+          /ratepay/i,
+          /payone/i,
+
+          // Admin:
+          /\/admin/i,
+          /\/backend/i,
+
+          // Misc:
+          /\/akam\//i, // Akamai telemetry data
+          /\.pdf/,
+          /\/adyen/i,
+          /\/cdn-cgi\//i, // dynamic scripts
+{{#if isPlentymarkets}}
+
+          // Plentymarkets specific:
+          /\/mein-warenkorb/i,
+          /\/mein-checkout/i,
+          /\/my-account/i,
+          /\/myaccount/i,
+          /\/mein-kundenkonto/i,
+          /\/wish-list/i,
+          /\/rest/i, // REST API
+          /place-order/i,
+{{/if}}
+{{#if isSalesforce}}
+
+          // SFCC specific:
+          /\/demandware\.store/i, // high-level api blacklist
+{{/if}}
+        ],
+      },
+      {
+        url: [
+          /[?&](_=1\d{12})/, // jQuery code execution callbacks
+          /[?&]nocache/i,
+
+          // GTM:
+          "www.googletagmanager.com/gtm.js",
+          "www.googletagmanager.com/gtag/js",
+        ],
+      },
+      {
+        host: ["www.paypal.com", "www.paypalobjects.com"],
+      },
+{{#if isShopify}}
+
+      // Shopify specific:
+      {
+        pathname: [
+          "/api/",
+          "/apps/",
+          "/a/",
+          "/community/",
+          "/tools/",
+          "/recommendations/",
+          /discount/,
+          /orders/,
+          /digital_wallets/, // HTML Fragment in Checkout that does not match XHR Rule
+          "/app/services/", // many checkout resources
+        ],
+      },
+{{/if}}
+{{#if isShopware}}
+
+      // Shopware specific:
+      {
+        pathname: [
+          /\/refreshStatistic/i, // stats request
+        ],
+      },
+{{/if}}
+{{#if isPlentymarkets}}
+
+      // Plentymarkets specific:
+      {
+        url: [
+          /\/plentymarkets/i, // API, updates of certain pages can be triggered under this path
+
+          // params:
+          /[?&]time=/i,
+          /[?&]subscription=/i,
+          /[?&]hash=/i,
+          /[?&]AccountShow=/i,
+          /[?&]OrderID=/i,
+          /[?&]PaymentMethod=/i,
+          /[?&]paymentId=/i,
+          /[?&]token=/i,
+          /[?&]PayerID=/i,
+        ],
+      },
+{{/if}}
+{{#if isShopify}}
+
+      // Shopify specific:
+      // exclude preview function from caching
+      {
+        url: [
+          /[?&]view=/i,
+          /[?&]_ab=/i,
+          /[?&]_fd=/i,
+          /[?&]preview_theme/i,
+        ],
+      },
+      { cookie: ["preview_theme"] },
+{{/if}}
+{{#if isPlentymarkets}}
+
+      // Plentymarkets specific:
+      // blacklist on experimental features cookie
+      {
+        cookie: ['PluginSetPreview'],
+        contentType: ['document'],
+      },
+
+      // Plentymarkets specific:
+      // blacklist based on custom cookie (e.g. on user logging in => see loadHandler)
+      { cookie: ['baqend-speedkit-blacklist'] },
+{{/if}}
+    ],
+    stripQueryParams: [{
+      params: [
+        // TODO: extend during query param analysis
+{{#if isShopify}}
+
+        // Shopify specific:
+        "_fid",
+        "_pos",
+        "_psq",
+        "_sid",
+        "_ss",
+        "_v",
+        /^pr_/i, // Product Recommendation
+{{/if}}
+
+        // Default:
+        "_ga", // Google Analytics User ID (Universal Analytics)
+        "_gl", // Google Analytics User ID (GA 4+)
+        "_kx", // klaviyo
+        "awc", // AWIN (former Zanox Affiliate Network)
+        "campaign",
+        "cjid",
+        "cto_pld",
+        "dclid", // another Click ID
+        "ds_rl",
+        "epik",
+        "fbclid", // Facebook Click ID
+        "gtm_debug", // Google Tag Manager
+        "msclkid", // Microsoft Click ID
+        "srsltid", // google search engine
+        "yclid", // Yandex Click ID
+        "zanpid", // AWIN (former Zanox Affiliate Network)
+        /^[gw]braid$/, // Google's iOS web-to-app campaign measurement
+        /^cq_/,
+        /^et_/,
+        /^gad(w|_source)?$/, // Google Ads
+        /^gcl(id|src)$/, // Google Click ID + Source
+        /^klar_/, // getklar.com
+        /^neocom_/, // Neocom.ai
+        /^sc_/, // e.g. Adobe
+        /^trc_/, // Tracify
+        /^uslk_/, // Userlike Chatbot
+        /^utm[_-]/, // Urchin Tracking Module
+        /^vm(st|track)_id$/,
+        /^wg(u|expiry)$/, // Webgains Affiliate Network
+      ],
+    }],
+  };
+
+  //================================================================================
+  // Utility Functions
+  //================================================================================
+
+  function getEnabledHosts(enabledHostsConfigs) {
+    var allHosts = [];
+    enabledHostsConfigs.forEach(function (enabledHostsConfig) {
+      allHosts = allHosts.concat(enabledHostsConfig.hosts);
+    });
+
+    // Return unique array ("set") of all enabled hosts
+    return allHosts.filter(function (value, index, self) {
+      return self.indexOf(value) === index;
+    });
+  }
+
+  function getCurrentHostConfig(enabledHostsConfigs) {
+    var currentHost = location.hostname;
+    var defaultSplit = 0;
+    var defaultSplitTestId = "0vs100";
+    var foundHostConfig;
+
+    // Lookup for matching enabled hosts config
+    for (var i = 0; i < enabledHostsConfigs.length; i++) {
+      if (enabledHostsConfigs[i].hosts.indexOf(currentHost) !== -1) {
+        foundHostConfig = enabledHostsConfigs[i];
+        break; // Break out of the loop once the config related to the host is found
+      }
+    }
+
+    if (foundHostConfig) {
+      // Provide fallback split values if incomplete or incorrect
+      if (
+        !(foundHostConfig.split >= 0 && foundHostConfig.split <= 1) ||
+        !foundHostConfig.splitTestId
+      ) {
+        foundHostConfig.split = defaultSplit;
+        foundHostConfig.splitTestId = defaultSplitTestId;
+      }
+      foundHostConfig.enabled = true;
+      return foundHostConfig;
+    } else {
+      return {
+        enabled: false,
+        split: defaultSplit,
+        splitTestId: defaultSplitTestId,
+      };
+    }
+  }
+})();

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

@@ -0,0 +1,75 @@
+/**
+ * Shop System in use:
+{{#if isShopify}}
+ * - Shopify
+{{else if isShopware}}
+ * - Shopware
+{{else if isSalesforce}}
+ * - Salesforce Commerce Cloud
+{{else if isPlentymarkets}}
+ * - Plentymarkets
+{{else}}
+ * - TODO: enter name of shop system here... please
+{{/if}}
+ */
+
+const shared = {
+  app: "{{appName}}",
+  domain: "{{production.host}}",
+  origins: [
+    "https://{{production.host}}",
+  ],
+{{#if isShopify}}
+  shopifyId: "{{shopifyId}}", // Shopify specific
+  swPath: "/apps/speed-kit/sw.js", // Shopify specific
+{{else}}
+  swPath: "/wrapper-sw.js",
+{{/if}}
+  scope: "/",
+};
+
+const configs = {
+  test: {
+    ...shared,
+    app: process.env.TEST_APP,
+    name: shared.app,
+    forceInstall: true,
+  },
+{{#if staging.host}}
+  staging: {
+    ...shared,
+    name: "staging",
+    domain: "{{staging.host}}",
+    origins: [
+      "https://{{staging.host}}",
+    ],
+    forceInstall: {{staging.forceInstall}}, // use when our setup is not present yet
+    // bypassDeactivation: false, // comment out when SK deactivation should not be bypassed
+  },
+{{/if}}
+  production: {
+    ...shared,
+    name: "production",
+    forceInstall: {{production.forceInstall}}, // use when our setup is not present yet
+    // bypassDeactivation: false, // comment out when SK deactivation should not be bypassed
+  },
+};
+
+const objectMap = (obj, fn) =>
+  Object.fromEntries(
+    Object.entries(obj).map(
+      ([k, v], i) => [k, fn(v, k, i)],
+    ),
+  );
+
+const completeConfig = config => ({
+  // create installPath automatically if not set:
+{{#if shopifyId}}
+  installPath: `https://${config.app}.app.baqend.com/v1/speedkit/install.js?d=${config.name}&shop=${config.shopifyId}.myshopify.com`,
+{{else}}
+  installPath: `https://${config.app}.app.baqend.com/v1/speedkit/install.js?d=${config.name}`,
+{{/if}}
+  ...config,
+});
+
+module.exports = objectMap(configs, config => completeConfig(config));

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

@@ -0,0 +1,162 @@
+{{#unless addPreRendering}}
+  {{#if removeLazyLoading}}
+const lazyLoadDefaultConfig = {
+  attributes: [
+    { find: 'data-src', rename: 'src' },
+    { find: 'data-srcset', rename: 'srcset' },
+  ],
+  lazyClass: 'lazyload',
+  preload: true,  // preload lazy-removed images in head
+}
+
+const lazyLoadList = [
+  // TODO: adjust/replace this exemplary list
+
+  // Content page's stage image:
+  {
+    ...lazyLoadDefaultConfig,
+    parentClasses: [
+      'image-with-text-overlay__banner',
+    ],
+    limit: 1
+  },
+
+  // PLP product images:
+  {
+    ...lazyLoadDefaultConfig,
+    parentClasses: [
+      'product-image__wrapper',
+    ],
+    limit: 4
+  },
+
+  // PDP hero image:
+  {
+    ...lazyLoadDefaultConfig,
+    parentClasses: [
+      'product-gallery__image',
+    ],
+    limit: 1
+  },
+];
+
+  {{/if}}
+{{/unless}}
+const config = {
+  shouldTransform({ db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers }) {
+    return true;
+  },
+  shouldDelayDom({ db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers }) {
+{{#if isPlentymarkets}}
+    return false; // Plentymarkets specific
+{{else}}
+    return true;
+{{/if}}
+  },
+  async preTransform({db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers}) {
+{{#unless addPreRendering}}
+    return html;
+{{else}}
+    // do nothing
+{{/unless}}
+  },
+  postTransform({db, {{#if addPreRendering}}document{{else}}html{{/if}}, variation, url, headers}) {
+{{#unless addPreRendering}}
+  {{#if includeServiceWorker}}
+    html = injectServiceWorkerScript(html, '{{includeServiceWorker}}');
+  {{/if}}
+    return html;
+{{else}}
+    // do nothing
+{{/unless}}
+  },
+{{#if isPlentymarkets}}
+  stripComments: false, // Plentymarkets specific
+{{/if}}
+{{#if isShopify}}
+  delayScriptPath: "/apps/speed-kit/speed-kit-dom-ready.js", // Shopify specific
+{{else}}
+  delayScriptPath: "/speed-kit-dom-ready.js",
+{{/if}}
+{{#if isSalesforce}}
+  executeDeploymentDetection: false, // Salesforce specific => deploymentDetection.es6 is being used instead
+{{else}}
+  executeDeploymentDetection: true,
+{{/if}}
+{{#unless addPreRendering}}
+  {{#if removeLazyLoading}}
+  lazyLoadList,
+  {{/if}}
+{{else}}
+  preRender: {
+    lambdaUrl: 'https://pw5wfiqnr2kqdzzc45tu3rdjue0zildl.lambda-url.eu-central-1.on.aws',
+    elements: [
+      // app shell e.g. vue often uses #app
+      // this will be the main element to extract from the rendered DOM
+      { selector: '#app' }
+    ],
+    guards: [
+      { // plp
+        whenPresent: '.products-list-page', // check wait for selectors, when this is present on current Page
+        waitFor: [
+          // e.g. wait for first 4 images to be loaded
+          '.products-list-page__products-list .products-list__tiles__element:nth-child(-n+4) img[src=""]',
+        ],
+      },
+    ],
+    rules: {
+      url: [
+        // additional domains for the page to work need to be added here (main domain is already added)
+        '<scripts-domain.com>',
+      ],
+      resourceType: [
+        // only resource types listed here will be fetched
+        'xhr',
+        'font',
+        'script',
+        'document',
+        'stylesheet',
+      ],
+    },
+  },
+{{/unless}}
+}
+
+const documentHandler = new DocumentHandler({
+  ...config,
+  app: APP,
+  dynamicFetcher: DYNAMIC_FETCHER,
+  dynamicFetcherConfig: DYNAMIC_FETCHER_CONFIG,
+  customStyles: CUSTOM_STYLES
+})
+
+export const post = async (db, req, res) => {
+  await documentHandler.transformAndSend(db, req, res);
+}
+{{#unless addPreRendering}}
+{{#if includeServiceWorker}}
+
+//================================================================================
+// Utility Functions
+//================================================================================
+
+function prepend(string, searchString, prependString) {
+  const index = string.lastIndexOf(searchString);
+  return string.slice(0, index) + prependString + string.slice(index);
+}
+
+function injectServiceWorkerScript(html, searchedSwPath) {
+  return prepend(html, '</head>', `
+<script class="speed-kit-service-worker">
+    var serviceWorkerRegister = ServiceWorkerContainer.prototype.register;
+    ServiceWorkerContainer.prototype.register = function (swPath, options) {
+        if (swPath.indexOf('${searchedSwPath}') === 0 && SpeedKit.group === 'A') {
+            return navigator.serviceWorker.getRegistration();
+        }
+        return serviceWorkerRegister.call(this, swPath, options);
+    };
+</script>
+  `);
+}
+{{/if}}
+{{/unless}}