@speedkit/cli 4.0.0 → 4.2.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [4.2.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v4.1.0...v4.2.0) (2026-05-08)
+
+
+### Features
+
+* **onboarding:** local mode ([0a36f37](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/0a36f376d27f6bb369d38f073e5a5e5811cd1e11))
+* **onboarding:** local mode ([e3e44ef](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/e3e44ef55bd7c6f71e776d978ce5cbd3fcf117e8))
+
+# [4.1.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v4.0.0...v4.1.0) (2026-05-06)
+
+
+### Features
+
+* **wizard:** shopify ([f7686ce](https://gitlab.orestes.info/baqend/speed-kit-cli/commit/f7686ce4c24fd2f4d9fa3158f465ab2454dc4959))
+
 # [4.0.0](https://gitlab.orestes.info/baqend/speed-kit-cli/compare/v3.43.2...v4.0.0) (2026-05-06)
 
 

package/README.md

@@ -21,7 +21,7 @@ $ npm install -g @speedkit/cli
 $ sk COMMAND
 running command...
 $ sk (--version)
-@speedkit/cli/4.0.0 linux-x64 node-v22.22.2
+@speedkit/cli/4.2.0 linux-x64 node-v22.22.2
 $ sk --help [COMMAND]
 USAGE
   $ sk COMMAND

package/dist/helpers/java-regex.d.ts

@@ -0,0 +1 @@
+export declare function javaRegexToJs(javaRegex: string): RegExp | undefined;

package/dist/helpers/java-regex.js

@@ -0,0 +1,21 @@
+// Converts a Java-style regex (e.g. with leading `(?i)` inline flags) into a
+// JS RegExp. Named groups `(?<name>...)` are already supported in JS.
+export function javaRegexToJs(javaRegex) {
+    let pattern = javaRegex;
+    let flags = "";
+    const inlineFlags = pattern.match(/^\(\?([a-zA-Z]+)\)/);
+    if (inlineFlags) {
+        pattern = pattern.slice(inlineFlags[0].length);
+        for (const flag of inlineFlags[1]) {
+            if ("imsu".includes(flag) && !flags.includes(flag)) {
+                flags += flag;
+            }
+        }
+    }
+    try {
+        return new RegExp(pattern, flags);
+    }
+    catch {
+        return undefined;
+    }
+}

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

@@ -109,13 +109,22 @@ const config = {
       wrapPreRenderedElementsWithCustomRootTags(document);
       addPolyFillAfterMainPreRenderTemplate(document);
       triggerShadowRendering(document);
+      {{#if isShopify}}
+        // Shopify specific: inject scripts into sk-html which set css variables (normally set to html element)
+        injectCSSVariableScripts(document);
+      {{/if}}
       {{#if addSSRInnerShadowDomSupport}}
 
         overrideCustomElementDefine(document);
         walkPreRenderedElements(document);
       {{/if}}
     {{else}}
-      // do nothing
+      {{#if isShopify}}
+        // Shopify specific: inject script which sets css variables on the html element
+        injectCSSVariableScripts(document);
+      {{else}}
+        // do nothing
+      {{/if}}
     {{/if}}
   },
 {{#if isPlentymarkets}}
@@ -652,3 +661,81 @@ export const post = async (db, req, res) => {
     }
   {{/if}}
 {{/if}}
+{{#if isShopify}}
+
+  /**
+   * Injects scripts into sk-html within each shadow root that set CSS custom
+   * properties (e.g. --window-height, --announcement-bar-height, --header-height)
+   * on sk-html instead of the document's html element.
+   *
+   * @param document
+   */
+  function injectCSSVariableScripts(document) {
+    {{#if addSSR}}
+      const customShadowRoots = getCustomShadowElements(document);
+      for (const customShadowRoot of customShadowRoots) {
+        const skHtml = customShadowRoot.querySelector("sk-html");
+        if (!skHtml) continue;
+
+        const script = document.createElement("script");
+        script.textContent = `(${setCSSVariablesOnSkHtml.toString()})();`;
+        // insert script before #main so styles are applied earlier
+        const main = skHtml.querySelector("#main");
+        if (main) {
+          main.before(script);
+        } else {
+          skHtml.appendChild(script);
+        }
+      }
+    {{else}}
+      const script = document.createElement("script");
+      script.textContent = `(${setCSSVariablesOnHtml.toString()})();`;
+      // insert script before #main so styles are applied earlier
+      const main = document.querySelector("#main");
+      if (!main) return;
+      main.before(script);
+    {{/if}}
+  }
+
+  /**
+   * Client-side script that sets CSS custom properties on {{#if addSSR}}sk-html{{else}}the html element{{/if}}
+   * (e.g. --window-height, --announcement-bar-height, --header-height).
+   * Injected via .toString() into the document.
+   *
+   * TODO: double check whether the set CSS variables are being used by the theme
+   *  and that the queried selectors are correct for this Shopify store.
+   */
+  /* eslint-disable no-undef -- client-side function serialised via .toString() */
+  function {{#if addSSR}}setCSSVariablesOnSkHtml{{else}}setCSSVariablesOnHtml{{/if}}() {
+    {{#if addSSR}}
+      const host = document.querySelector("sk-shadow-app-root");
+      const root = host?.shadowRoot;
+      if (!root) return;
+      const skHtml = root.querySelector("sk-html");
+      if (!skHtml) return;
+    {{else}}
+      const html = document.querySelector("html");
+      if (!html) return;
+    {{/if}}
+
+    requestAnimationFrame(() => {
+      const viewportHeight = window.visualViewport ? window.visualViewport.height : document.documentElement.clientHeight;
+      {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--window-height", viewportHeight + "px");
+    });
+
+    const announcementBar = {{#if addSSR}}root{{else}}document{{/if}}.querySelector('[id^="shopify-section"][id$="announcement-bar"]');
+    if (announcementBar) {
+      {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--announcement-bar-height", announcementBar.clientHeight + "px");
+    }
+
+    const headerElement = {{#if addSSR}}root{{else}}document{{/if}}.querySelector('[id^="shopify-section"][id$="header"]');
+    if (headerElement) {
+      const headerHeight = headerElement.clientHeight;
+      const headerHeightWithoutBottomNav = headerElement.querySelector(".header__wrapper")?.clientHeight;
+      {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--header-height", headerHeight + "px");
+      if (headerHeightWithoutBottomNav != null) {
+        {{#if addSSR}}skHtml{{else}}html{{/if}}.style.setProperty("--header-height-without-bottom-nav", headerHeightWithoutBottomNav + "px");
+      }
+    }
+  }
+{{/if}}

package/dist/services/onboarding/virtual-orestes-app/crawler.d.ts

@@ -8,6 +8,43 @@ export declare class Crawler {
     constructor(cli: CliService, agentConfig: Agent, speedKitServerConfig?: SpeedKitServerConfig);
     fetchRemote(originUrl: string, variation: string): Promise<Response>;
     private setDefaultUserAgent;
+    /**
+     * Mirrors how the Baqend asset server applies the `variations` block from
+     * the Speed Kit server config to outgoing origin fetches. The cookie /
+     * user-agent / etc. headers configured per variation must reach the origin
+     * so that the response matches what the variation is supposed to represent
+     * (e.g. a logged-in user, a specific store, a mobile device).
+     *
+     * Resolution order (matches Orestes server behavior):
+     *   1. The wildcard `"*"` variation (if any) — its headers always apply.
+     *   2. First-match-wins iteration over the remaining variations: for each
+     *      entry in declaration order, try an exact key match against
+     *      `variationParameter` first, then fall back to its Java-style
+     *      `regex` (e.g. `(?i)desktop-fmarkt-variant-(?<storeId>.*)`). The
+     *      first variation that matches by either means is applied — exact
+     *      matches do NOT take priority over regex matches in earlier
+     *      entries. When matched via regex, named capture groups are
+     *      substituted into header values via `${name}` placeholders, so a
+     *      cookie like `fmarktcookie=${storeId}` becomes
+     *      `fmarktcookie=2879130`.
+     *   3. Origin-level basic auth fallback (only if no variation matched).
+     */
     private prepareOriginRequest;
+    /**
+     * Replaces `${name}` placeholders in each header value with the matching
+     * named capture group from a regex match. Used by `prepareOriginRequest`
+     * to materialize parameterized variation headers — e.g. given:
+     *
+     *   headers = { cookie: "fmarktcookie=${storeId}" }
+     *   groups  = { storeId: "2879130" }
+     *
+     * the result is `{ cookie: "fmarktcookie=2879130" }`.
+     *
+     * Placeholders that don't match a captured group are left intact rather
+     * than replaced with `undefined`, so a misconfigured variation still
+     * produces a recognisable header value instead of a silent corruption.
+     * Non-string header values are passed through unchanged.
+     */
+    private substituteNamedGroups;
     private prepareAuthRequest;
 }

package/dist/services/onboarding/virtual-orestes-app/crawler.js

@@ -1,5 +1,6 @@
 import { USER_AGENT } from "../onboarding-model.js";
 import { safe } from "../../../helpers/safe.js";
+import { javaRegexToJs } from "../../../helpers/java-regex.js";
 import { randomUUID } from "node:crypto";
 export class Crawler {
     cli;
@@ -41,30 +42,110 @@ export class Crawler {
         }
         return USER_AGENT.DESKTOP;
     }
+    /**
+     * Mirrors how the Baqend asset server applies the `variations` block from
+     * the Speed Kit server config to outgoing origin fetches. The cookie /
+     * user-agent / etc. headers configured per variation must reach the origin
+     * so that the response matches what the variation is supposed to represent
+     * (e.g. a logged-in user, a specific store, a mobile device).
+     *
+     * Resolution order (matches Orestes server behavior):
+     *   1. The wildcard `"*"` variation (if any) — its headers always apply.
+     *   2. First-match-wins iteration over the remaining variations: for each
+     *      entry in declaration order, try an exact key match against
+     *      `variationParameter` first, then fall back to its Java-style
+     *      `regex` (e.g. `(?i)desktop-fmarkt-variant-(?<storeId>.*)`). The
+     *      first variation that matches by either means is applied — exact
+     *      matches do NOT take priority over regex matches in earlier
+     *      entries. When matched via regex, named capture groups are
+     *      substituted into header values via `${name}` placeholders, so a
+     *      cookie like `fmarktcookie=${storeId}` becomes
+     *      `fmarktcookie=2879130`.
+     *   3. Origin-level basic auth fallback (only if no variation matched).
+     */
     prepareOriginRequest(originUrl, variationParameter, init) {
         if (!this.speedKitServerConfig) {
             return init;
         }
-        if (this.speedKitServerConfig.speedKit.variations?.["*"]) {
-            const config = this.speedKitServerConfig.speedKit.variations["*"];
+        const variations = this.speedKitServerConfig.speedKit.variations;
+        // Wildcard variation headers apply to every request, regardless of which
+        // specific variation (if any) is requested.
+        if (variations?.["*"]) {
+            const config = variations["*"];
             init.headers = { ...init.headers, ...config.headers };
         }
         if (!variationParameter) {
             return init;
         }
-        for (const variationKey in this.speedKitServerConfig.speedKit.variations) {
+        // First-match-wins over the variations in declaration order. Each entry
+        // can match by exact key or by its Java-style `regex` field; whichever
+        // entry matches first applies its headers and short-circuits the rest.
+        for (const variationKey in variations) {
+            if (variationKey === "*") {
+                continue;
+            }
+            const variationConfig = variations[variationKey];
             if (variationParameter === variationKey) {
-                const variationConfig = this.speedKitServerConfig.speedKit.variations[variationKey];
                 init.headers = { ...init.headers, ...variationConfig.headers };
                 return init;
             }
+            if (!variationConfig.regex) {
+                continue;
+            }
+            const regex = javaRegexToJs(variationConfig.regex);
+            if (!regex) {
+                // Unsupported Java regex construct — skip rather than crash so later
+                // variations still get a chance to match.
+                continue;
+            }
+            const match = variationParameter.match(regex);
+            if (!match) {
+                continue;
+            }
+            init.headers = {
+                ...init.headers,
+                ...this.substituteNamedGroups(variationConfig.headers, match.groups),
+            };
+            return init;
         }
+        // No variation matched: fall back to origin basic auth if configured.
         const authentication = this.prepareAuthRequest(originUrl);
         if (authentication) {
             init.headers["Authorization"] = authentication;
         }
         return init;
     }
+    /**
+     * Replaces `${name}` placeholders in each header value with the matching
+     * named capture group from a regex match. Used by `prepareOriginRequest`
+     * to materialize parameterized variation headers — e.g. given:
+     *
+     *   headers = { cookie: "fmarktcookie=${storeId}" }
+     *   groups  = { storeId: "2879130" }
+     *
+     * the result is `{ cookie: "fmarktcookie=2879130" }`.
+     *
+     * Placeholders that don't match a captured group are left intact rather
+     * than replaced with `undefined`, so a misconfigured variation still
+     * produces a recognisable header value instead of a silent corruption.
+     * Non-string header values are passed through unchanged.
+     */
+    substituteNamedGroups(headers, groups) {
+        if (!headers) {
+            return {};
+        }
+        if (!groups) {
+            return { ...headers };
+        }
+        const result = {};
+        for (const [key, value] of Object.entries(headers)) {
+            result[key] =
+                typeof value === "string"
+                    ? value.replace(/\$\{(\w+)}/g, (match, name) => groups[name] ?? match)
+                    : value;
+        }
+        return result;
+    }
     prepareAuthRequest(originUrl) {
         if (!this.speedKitServerConfig ||
             this.speedKitServerConfig.speedKit?.authentications?.length < 1) {

package/oclif.manifest.json

@@ -751,5 +751,5 @@
       ]
     }
   },
-  "version": "4.0.0"
+  "version": "4.2.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@speedkit/cli",
   "description": "Speed Kit CLI",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "author": {
     "name": "Baqend.com",
     "email": "info@baqend.com"
@@ -85,7 +85,7 @@
     "@aws-sdk/client-athena": "^3.529",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@inquirer/prompts": "^8.4.1",
+    "@inquirer/prompts": "^8.4.2",
     "@oclif/core": "^4.10.5",
     "@oclif/errors": "^1.3.6",
     "@oclif/plugin-autocomplete": "^3.2.45",
@@ -131,7 +131,7 @@
     "@types/uuid": "^9.0.8",
     "chai": "^4.4.1",
     "copyfiles": "^2.4.1",
-    "eslint": "10.2.0",
+    "eslint": "10.2.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-unicorn": "^64.0.0",
@@ -139,9 +139,9 @@
     "husky": "^8.0.3",
     "lint-staged": "^16.4.0",
     "memfs": "^4.8.0",
-    "mocha": "^12.0.0-beta-3",
+    "mocha": "^12.0.0-beta-9.2",
     "mock-fs": "^5.5.0",
-    "nock": "^14.0.12",
+    "nock": "^14.0.13",
     "nyc": "^18.0.0",
     "oclif": "^4.23.0",
     "shx": "^0.4.0",