@speedkit/cli 3.9.1 → 3.11.0

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

@@ -4,20 +4,21 @@
    */
   window.dynamicBlockConfig = {
     dynamicScriptExecution: true,
-{{#if addPreRendering}}
-    // ssr container
-    prerendered: [{ selector: "body > .speed-kit-shadow-app-root" }],
-{{/if}}
-{{#if addUADetection}}
-  detectDevice: (doc) => {
-    // TODO adjust condition to your needs
-    return doc.querySelector('<mobile-specific-element>') ? "mobile" : "desktop";
-  },
+{{#if addDeviceDetection}}
+  {{#unless addSSR}}
+    detectDevice: (doc) => {
+      // keep only if you need to check the DOM – for screen width checks the SK config's detectDevice is sufficient
+
+      // TODO: adjust condition to your needs
+      return doc.querySelector('<mobile-specific-element>') ? "mobile" : "desktop";
+    },
+  {{/unless}}
 {{/if}}
     blocks: [
       // TODO: adjust/replace this exemplary list
       {
         selector: "body",
+        {{#unless addSSR}}
         detectChanges: [
           // Main Headline:
           {
@@ -56,12 +57,14 @@
             compare: ["src"],
           },
         ],
+        {{/unless}}
       },
 {{#if isShopify}}
+
       // Shopify specific:
       {
         selector: "#shopify-section-announcement-bar",
-{{#unless addPreRendering}}
+{{#unless addSSR}}
         merge: false, // TODO: remove if body is not the main block
 {{/unless}}
         detectChanges: [{
@@ -110,31 +113,55 @@
       { selector: 'meta[property]', idAttribute: "property"},
       { selector: 'script[type="application/ld+json"]'},
     ],
-    {{#if addPreRendering}}
+{{#if addSSR}}
+
+    // SSR specific:
+    prerendered: [{ selector: "body > sk-shadow-app-root" }],
     preRenderedRootConfig: [
       // TODO: adjust/replace this exemplary list
       {
-      selector: ".prerendered-top-level-element",
-      detectChanges: [
-        {
-          // header area
-          find: "#page-root > div > .aem-container > div:nth-of-type(1)",
-          detectChanges: [
-            // main categories
-            {
-              find: 'button[id^="menu-button"] p',
-              compare: ["text"],
-            },
-            // logo
-            {
-              find: "img[src]",
-              compare: ["src"],
-            },
-          ],
-        },
+        selector: "sk-body",
+        remoteSelector: "body",
+        detectChanges: [
+          // Main Headline:
+          {
+            find: "h1",
+            compare: ["text"],
+          },
+
+          // Top Banner:
+          {
+            find: ".header .top-banner",
+            compare: ["text"],
+          },
+
+          // First-Level Items of Header/Main Navigation:
+          {
+            find: ".header .main-navigation .first-level-item",
+            compare: ["text"],
+          },
+
+          // Stage Teaser:
+          {
+            find: ".stage-teaser source",
+            compare: ["srcset"],
+          },
+
+          // PLP Items:
+          {
+            find: ".product-grid .product img",
+            limit: 9, // only compare the first 9 products
+            compare: ["src"],
+          },
+
+          // PDP Hero Image:
+          {
+            find: ".product-detail .slide.main img",
+            compare: ["src"],
+          },
         ],
       },
-        ],
-    {{/if}}
+    ],
+{{/if}}
   };
 })();

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

@@ -24,20 +24,36 @@
     background-position: calc(100% + 400px) 0;
   }
 }
+{{#if addSSR}}
+
+/* SSR specific – positioning for pre-rendered container */
+.speed-kit-pre-rendered sk-shadow-app-root {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  left: 0;
+  right: 0;
+  z-index: 99999;
+  background: #fff;
+}
+
+/*
+  SSR specific:
+  remember to use sk-html/sk-body as additional selectors if you reference html/body to also cover the SSR case
+*/
+{{/if}}
 {{#if withGoogleOptimize}}
 
 /* Google Optimize Flicker Fix: */
+{{#if addSSR}}
+sk-html > sk-body,
+{{/if}}
 html > body {
   opacity: 1 !important;
 }
 {{/if}}
 
 .speed-kit-dynamic-loading {
-{{#if addPreRendering}}
-  /* TODO: use the following wrapping selector if you want to apply those styles to the pre-rendered block instead: */
-  /* .speed-kit-pre-rendered-block-added */
-{{/if}}
-
   .dummy-price-class,
   .dummy-availability-class {
     visibility: hidden;
@@ -75,7 +91,6 @@ html > body {
     }
   }
 
-
   /* Prevent Add2Cart clicks: */
   .dummy-add2cart-class {
     pointer-events: none !important;
@@ -111,16 +126,3 @@ html > body {
     mask-repeat: no-repeat;
   }
 }
-{{#if addPreRendering}}
-
-/* Positioning for pre-rendered containers */
-html.speed-kit-pre-rendered body > .speed-kit-shadow-app-root {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  left: 0;
-  right: 0;
-  z-index: 99999;
-  background: #fff;
-}
-{{/if}}

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

@@ -1,6 +1,6 @@
 import { BaseBundle } from 'rum/BaseBundle';
 {{#if hasSoftNavigations}}
-import { HistoryApiPlugin } from 'rum/HistoryApiPlugin';
+import { SpaBundle } from 'rum/SpaBundle';
 {{/if}}
 {{#if useGATracking}}
 import { GAEcommerceTrackingPlugin } from 'rum/GAEcommerceTrackingPlugin';
@@ -16,12 +16,6 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
   if (window !== window.top) {
     return;
   }
-{{#if hasSoftNavigations}}
-
-  // Soft Navigation Handling:
-  var softLcpPending = false;
-  var latestUrl = location.href;
-{{/if}}
 {{#if isOxid}}
 
   var pageTypeSent = false;
@@ -52,7 +46,7 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
       }
     {{/if}}),
 {{#if hasSoftNavigations}}
-    new HistoryApiPlugin(), // Soft Navigation Tracking using History API
+    new SpaBundle(), // Soft Navigation Tracking using History API
 {{/if}}
 {{#if useGATracking}}
     new GAEcommerceTrackingPlugin({
@@ -67,9 +61,27 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
     new UserFrictionPlugin(),
     new ClickPlugin(),
   {{/if}}
+{{#if isShopify}}
+    {
+      key: "loggedIn",
+      type: "PiDimension",
+      on: "window.ShopifyAnalytics",
+      set: function () {
+        return !!window.ShopifyAnalytics?.meta?.page?.customerId;
+      },
+    },
+    {
+      key: "pageType",
+      type: "PiDimension",
+      on: "window.ShopifyAnalytics",
+      set: function () {
+        return window.ShopifyAnalytics?.meta?.page?.pageType;
+      },
+    },
+{{else}}
     {
       key: 'loggedIn',
-      type: 'SessionDimension',
+      type: 'PiDimension',
 {{#if useGATracking}}
       on: 'dataLayer',
       set: function(pushedEvent) {
@@ -85,24 +97,6 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
     {
       key: 'pageType',
       type: 'PiDimension',
-{{#if isShopify}}
-      on: 'window.ShopifyAnalytics',
-      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) {
@@ -131,7 +125,6 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
       {{/if}}
       },
   {{/if}}
-{{/if}}
     },
 {{#if isOxid}}
     // OXID eShop specific fallback tracking for page type using URL:
@@ -160,6 +153,7 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
       },
     },
 {{/if}}
+{{/if}}
 {{#if useGATracking}}
 
     // TODO: remove or adapt if events are not properly covered by GAEcommerceTrackingPlugin
@@ -218,36 +212,25 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
     // },
 {{else}}
   {{#if isShopify}}
-
-    // {
-    //   key: 'ecAddToCart',
-    //   on: onAddToCartClick,
-    //   append: 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 {
-    //             id: product.productId + '_' + product.variantId, // optional – remove if no id is available
-    //             price: Number(product.price),
-    //             currencyCode: product.currency || defaultCurrency,
-    //             quantity: 1,
-    //           }
-    //         }
-    //       }
-    //     }
-    //   },
-    // },
+    {
+      key: "ecAddToCart",
+      // TODO depending on the used theme different events are in use variant:added, product-ajax:added, product:added
+      // TODO the correct event can easily spotted by search for the initiator of the /cart/add request after doing a addToCart
+      on: (callback) => document.addEventListener("product-ajax:added", callback),
+      append: function (event) {
+        // TODO depending on the used event the product is exposed under a different property
+        var product = event.detail.product;
+
+        if (product) {
+          return {
+            id: product.product_id,
+            price: (product.discounted_price ?? product.price) / 100, // price is in cents
+            currencyCode: window.Shopify?.currency?.active || defaultCurrency,
+            quantity: product.quantity,
+          };
+        }
+      },
+    },
 
     // No custom ecConversion tracking event as it is already handled by the Speed Kit Extension for Shopify
   {{else}}
@@ -286,106 +269,6 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
     },
   {{/if}}
 {{/if}}
-{{#if hasSoftNavigations}}
-    {
-      on: "softNavigation",
-      track: (controller) => {
-        var onlyHashChanged =
-          latestUrl.split("#")[0] === location.href.split("#")[0];
-        latestUrl = location.href;
-
-        if (onlyHashChanged) {
-          controller.trackCustomEvent("hashChanged", location.href, Date.now());
-          return;
-        }
-
-        controller.trackCustomEvent("softNav", location.href, Date.now());
-
-        // Only capture soft LCP on following pages/page types:
-        // TODO: update to match the resp. page types to capture
-        var isProduct = location.href.indexOf("/p/") !== -1;
-        var isCategory = location.href.indexOf("/c/") !== -1;
-
-        if (!isCategory && !isProduct) return;
-
-        var navStartMark = "soft-nav_" + location.pathname;
-        performance.mark(navStartMark);
-
-        softLcpPending = true;
-
-        var softNavigationPerformanceObserver = new PerformanceObserver(
-          (entries, observer) => {
-            // TODO: update exemplary selectors within this block
-
-            // Wait for product image resources to be loaded:
-            var imageEntries = Array.from(entries.getEntries()).filter(
-              (item) => item.name.indexOf("/product/image/") !== -1,
-            );
-
-            // Ensure product images can be found in requested resources list:
-            if (!imageEntries || imageEntries.length < 1) {
-              return;
-            }
-
-            // Wait for product hero image / first product image in list to be referenced in DOM:
-            var imageElementSelector = isProduct
-              ? ".product-details .slick-slide.slick-active img" // PDP hero image
-              : ".product-list .product-image img"; // PLP list image(s)
-
-            var imageElement = document.querySelector(imageElementSelector);
-
-            // Ensure image element can be found in document:
-            if (!imageElement) {
-              return;
-            }
-            var imageUrl = imageElement.currentSrc || imageElement.srcset || "";
-
-            var imageMatchingRequestedResource = imageEntries.filter(
-              (entry) => {
-                var urlObj = new URL(entry.name);
-                return imageUrl.indexOf(urlObj.pathname) > -1;
-              },
-            )[0];
-
-            // Ensure the resp. image source referenced in the document can be found in requested resources list:
-            if (!imageMatchingRequestedResource) {
-              return;
-            }
-
-            // Ensure Soft LCP is still pending:
-            if (!softLcpPending) {
-              return;
-            }
-
-            var measure = performance.measure("lcp_" + location.pathname, {
-              start: navStartMark,
-              end: imageMatchingRequestedResource.responseEnd,
-            });
-
-            var timing = {
-              start: measure.startTime,
-              duration: measure.duration,
-              image: imageMatchingRequestedResource.name,
-              url: window.location.href,
-            };
-            controller.trackCustomEvent(
-              "softNavLcp",
-              JSON.stringify(timing),
-              Date.now(),
-            );
-
-            softNavigationPerformanceObserver.disconnect();
-            softLcpPending = false;
-          },
-        );
-
-        softNavigationPerformanceObserver.observe({
-          buffered: true,
-          type: "resource",
-        });
-      },
-    },
-{{/if}}
 {{#if isPlentymarkets}}
   {
     on: "domInteractive",
@@ -396,20 +279,6 @@ import { PredictivePreloading } from 'predictive-preloading/predictivePreloading
   },
 {{/if}}
   );
-{{#if isShopify}}
-  // Shopify specific:
-
-  // 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}}
 
   /* ==== */

package/dist/services/onboarding/browser/executable/executable-validator.js

@@ -4,7 +4,7 @@ exports.ExecutableValidator = void 0;
 const tslib_1 = require("tslib");
 // import CLI from puppeteer to use function as sames as `npx puppeteer browsers install`
 const browsers_1 = require("@puppeteer/browsers");
-const version_js_1 = require("puppeteer-core/internal/generated/version.js");
+const version_js_1 = require("puppeteer-core/lib/cjs/puppeteer/util/version.js");
 const node_fs_1 = require("node:fs");
 const application_error_1 = tslib_1.__importDefault(require("../../../error-handling/error/application-error"));
 const browsers_2 = require("@puppeteer/browsers");

package/oclif.manifest.json

@@ -732,5 +732,5 @@
       ]
     }
   },
-  "version": "3.9.1"
+  "version": "3.11.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@speedkit/cli",
   "description": "Speed Kit CLI",
-  "version": "3.9.1",
+  "version": "3.11.0",
   "author": {
     "name": "Baqend.com",
     "email": "info@baqend.com"
@@ -95,7 +95,7 @@
     "nypm": "^0.6.2",
     "parse5": "7.1",
     "parse5-htmlparser2-tree-adapter": "7.0.0",
-    "puppeteer": "^24.16.0",
+    "puppeteer": "^24.25.0",
     "puppeteer-extra": "^3.3.6",
     "semver": "^7.6.3",
     "strip-comments": "^2.0.1",