@shopify/cli-kit 3.69.4 → 3.71.0

package/assets/cli-ruby/lib/shopify_cli/theme/dev_server/hooks/file_change_hook.rb

@@ -1,77 +0,0 @@
-# frozen_string_literal: true
-require_relative "../hot_reload/remote_file_reloader"
-require_relative "../hot_reload/remote_file_deleter"
-require "shopify_cli/theme/ignore_helper"
-
-module ShopifyCLI
-  module Theme
-    class DevServer
-      module Hooks
-        class FileChangeHook
-          include ShopifyCLI::Theme::IgnoreHelper
-
-          attr_reader :include_filter, :ignore_filter
-
-          def initialize(ctx, theme:, include_filter: nil, ignore_filter: nil)
-            @ctx = ctx
-            @theme = theme
-            @include_filter = include_filter
-            @ignore_filter = ignore_filter
-          end
-
-          def call(modified, added, removed, streams: nil)
-            @streams = streams
-            files = (modified + added)
-              .map { |f| @theme[f] }
-              .reject { |f| ignore_file?(f) }
-            files -= liquid_css_files = files.select(&:liquid_css?)
-            deleted_files = removed
-              .map { |f| @theme[f] }
-              .reject { |f| ignore_file?(f) }
-
-            remote_delete(deleted_files) unless deleted_files.empty?
-            reload_page(removed) unless deleted_files.empty?
-
-            hot_reload(files) unless files.empty?
-            remote_reload(liquid_css_files)
-          end
-
-          private
-
-          def hot_reload(files)
-            paths = files.map(&:relative_path)
-            @streams.broadcast(JSON.generate(modified: paths))
-            @ctx.debug("[HotReload] Modified #{paths.join(", ")}")
-          end
-
-          def reload_page(removed)
-            @streams.broadcast(JSON.generate(reload_page: true))
-            @ctx.debug("[ReloadPage] Deleted #{removed.join(", ")}")
-          end
-
-          def remote_reload(files)
-            files.each do |file|
-              @ctx.debug("reload file each -> file.relative_path #{file.relative_path}")
-              remote_file_reloader.reload(file)
-            end
-          end
-
-          def remote_delete(files)
-            files.each do |file|
-              @ctx.debug("delete file each -> file.relative_path #{file.relative_path}")
-              remote_file_deleter.delete(file)
-            end
-          end
-
-          def remote_file_deleter
-            @remote_file_deleter ||= HotReload::RemoteFileDeleter.new(@ctx, theme: @theme, streams: @streams)
-          end
-
-          def remote_file_reloader
-            @remote_file_reloader ||= HotReload::RemoteFileReloader.new(@ctx, theme: @theme, streams: @streams)
-          end
-        end
-      end
-    end
-  end
-end

package/assets/cli-ruby/lib/shopify_cli/theme/dev_server/hot_reload/remote_file_deleter.rb

@@ -1,62 +0,0 @@
-# frozen_string_literal: true
-
-module ShopifyCLI
-  module Theme
-    class DevServer
-      class HotReload
-        class RemoteFileDeleter
-          def initialize(ctx, theme:, streams:)
-            @ctx = ctx
-            @theme = theme
-            @streams = streams
-          end
-
-          def delete(file)
-            retries = 6
-
-            until retries.zero?
-              retries -= 1
-
-              _status, body = fetch_asset(file)
-              retries = 0 if deleted_file?(body)
-
-              wait
-            end
-
-            notify(file)
-          end
-
-          private
-
-          def api_client
-            @api_client ||= ThemeAdminAPI.new(@ctx, @theme.shop)
-          end
-
-          def deleted_file?(body)
-            remote_checksum = body.dig("asset", "checksum")
-
-            remote_checksum.nil?
-          end
-
-          def notify(file)
-            @streams.broadcast(JSON.generate(deleted: [file]))
-            @ctx.debug("[RemoteFileDeleter] Deleted #{file}")
-          end
-
-          def wait
-            sleep(1)
-          end
-
-          def fetch_asset(file)
-            api_client.get(
-              path: "themes/#{@theme.id}/assets.json",
-              query: URI.encode_www_form("asset[key]" => file.relative_path),
-            )
-          rescue ShopifyCLI::API::APIRequestNotFoundError
-            [404, {}]
-          end
-        end
-      end
-    end
-  end
-end

package/assets/cli-ruby/lib/shopify_cli/theme/dev_server/hot_reload/remote_file_reloader.rb

@@ -1,63 +0,0 @@
-# frozen_string_literal: true
-
-module ShopifyCLI
-  module Theme
-    class DevServer
-      class HotReload
-        class RemoteFileReloader
-          def initialize(ctx, theme:, streams:)
-            @ctx = ctx
-            @theme = theme
-            @streams = streams
-          end
-
-          def reload(file)
-            retries = 6
-
-            until retries.zero?
-              retries -= 1
-
-              _status, body = fetch_asset(file)
-              retries = 0 if updated_file?(body, file)
-
-              wait
-            end
-
-            notify(file)
-          end
-
-          private
-
-          def api_client
-            @api_client ||= ThemeAdminAPI.new(@ctx, @theme.shop)
-          end
-
-          def updated_file?(body, file)
-            remote_checksum = body.dig("asset", "checksum")
-            local_checksum = file.checksum
-
-            remote_checksum == local_checksum
-          end
-
-          def notify(file)
-            @streams.broadcast(JSON.generate(modified: [file]))
-            @ctx.debug("[RemoteFileReloader] Modified #{file}")
-          end
-
-          def wait
-            sleep(1)
-          end
-
-          def fetch_asset(file)
-            api_client.get(
-              path: "themes/#{@theme.id}/assets.json",
-              query: URI.encode_www_form("asset[key]" => file.relative_path),
-            )
-          rescue ShopifyCLI::API::APIRequestNotFoundError
-            [404, {}]
-          end
-        end
-      end
-    end
-  end
-end

package/assets/cli-ruby/lib/shopify_cli/theme/dev_server/hot_reload/resources/hot-reload-no-script.html

@@ -1,27 +0,0 @@
-<noscript>
-  <style type="text/css">
-    .shopify-cli-no-script-message {
-      font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
-      text-size-adjust: 100%;
-      text-rendering: optimizeLegibility;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      position: fixed;
-      z-index: 999;
-      font-weight: 500;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100vh;
-      padding: 10rem 0;
-      color: #202223;
-      text-align: center;
-      background-color: #F6F6F7;
-    }
-  </style>
-  <div class="shopify-cli-no-script-message">
-    Shopify CLI requires JavaScript to work.
-    <br />
-    Activate JavaScript support or try a different browser.
-  </div>
-</noscript>

package/assets/cli-ruby/lib/shopify_cli/theme/dev_server/hot_reload/resources/hot_reload.js

@@ -1,48 +0,0 @@
-class HotReload {
-  static reloadMode = () => {
-    const namespace = window.__SHOPIFY_CLI_ENV__;
-    return namespace.mode;
-  };
-  static isFullPageReloadMode = () => {
-    return HotReload.reloadMode() === "full-page";
-  };
-  static isReloadModeActive = () => {
-    return HotReload.reloadMode() !== "off";
-  };
-  static setHotReloadCookie = (files) => {
-    const date = new Date();
-
-    // Hot reload cookie expires in 3 seconds
-    date.setSeconds(date.getSeconds() + 3);
-
-    const sections = files.join(",");
-    const expires = date.toUTCString();
-
-    document.cookie = `hot_reload_files=${sections}; expires=${expires}; path=/`;
-  };
-  static refreshPage = (files) => {
-    HotReload.setHotReloadCookie(files);
-    console.log("[HotReload] Refreshing entire page");
-    window.location.reload();
-  };
-  static isCSSFile = (filename) => {
-    return filename.endsWith(".css");
-  };
-  static reloadCssFile = (filename) => {
-    // Find a stylesheet link starting with /assets (locally-served only) containing the filename
-    let links = document.querySelectorAll(
-      `link[href^="/assets"][href*="${filename}"][rel="stylesheet"]`
-    );
-
-    Array.from(links).forEach((link) => {
-      if (!link) {
-        console.log(
-          `[HotReload] Could not find link for stylesheet ${filename}`
-        );
-      } else {
-        link.href = new URL(link.href).pathname + `?v=${Date.now()}`;
-        console.log(`[HotReload] Reloaded stylesheet ${filename}`);
-      }
-    });
-  };
-}

package/assets/cli-ruby/lib/shopify_cli/theme/dev_server/hot_reload/resources/sse_client.js

@@ -1,43 +0,0 @@
-class SSEClient {
-  constructor(eventsUrl, eventHandler) {
-    SSEClient.verifySSE();
-    this.eventsUrl = eventsUrl;
-    this.eventHandler = eventHandler;
-  }
-  static verifySSE() {
-    if (typeof EventSource === "undefined") {
-      console.error(
-        "[HotReload] Error: SSE features are not supported. Try a different browser."
-      );
-    }
-
-    console.log("[HotReload] Initializing...");
-  }
-  connect() {
-    const eventSource = new EventSource(this.eventsUrl);
-    eventSource.onmessage = (msg) => {
-      this.handleMessage(msg);
-    };
-
-    eventSource.onopen = () => console.log("[HotReload] SSE connected.");
-
-    eventSource.onclose = () => {
-      console.log("[HotReload] SSE closed. Attempting to reconnect...");
-
-      setTimeout(this.connect, 5000);
-    };
-
-    eventSource.onerror = () => {
-      console.log("[HotReload] SSE closed.");
-      eventSource.close();
-    };
-  }
-  handleMessage(message) {
-    const data = JSON.parse(message.data);
-    if (data.reload_page) {
-      HotReload.refreshPage([]);
-      return;
-    }
-    this.eventHandler(data);
-  }
-}

package/assets/cli-ruby/lib/shopify_cli/theme/dev_server/hot_reload/resources/theme.js

@@ -1,114 +0,0 @@
-(() => {
-  function sectionNamesByType(type) {
-    const namespace = window.__SHOPIFY_CLI_ENV__;
-    return namespace.section_names_by_type[type] || [];
-  }
-
-  function querySelectDOMSections(idSuffix) {
-    const elements = document.querySelectorAll(
-      `[id^='shopify-section'][id$='${idSuffix}']`
-    );
-    return Array.from(elements);
-  }
-
-  function fetchDOMSections(name) {
-    const domSections = sectionNamesByType(name).flatMap((n) =>
-      querySelectDOMSections(n)
-    );
-
-    if (domSections.length > 0) {
-      return domSections;
-    }
-
-    return querySelectDOMSections(name);
-  }
-
-  function isRefreshRequired(files) {
-    if (HotReload.isFullPageReloadMode()) {
-      return true;
-    }
-    return files.some(
-      (file) => !HotReload.isCSSFile(file) && !isSectionFile(file)
-    );
-  }
-
-  function refreshFile(file) {
-    if (HotReload.isCSSFile(file)) {
-      HotReload.reloadCssFile(file);
-      return;
-    }
-
-    if (isSectionFile(file)) {
-      reloadSection(file);
-    }
-  }
-
-  function handleUpdate(data) {
-    const modifiedFiles = data.modified;
-
-    if (modifiedFiles === undefined) {
-      return;
-    }
-
-    if (isRefreshRequired(modifiedFiles)) {
-      HotReload.refreshPage(modifiedFiles);
-    } else {
-      modifiedFiles.forEach(refreshFile);
-    }
-  }
-
-  function isSectionFile(filename) {
-    return new Section(filename).valid();
-  }
-
-  function reloadSection(filename) {
-    new Section(filename).refresh();
-  }
-
-  class Section {
-    constructor(filename) {
-      this.filename = filename;
-      this.name = filename.split("/").pop().replace(".liquid", "");
-      this.elements = fetchDOMSections(this.name);
-    }
-
-    valid() {
-      return this.filename.startsWith("sections/") && this.elements.length > 0;
-    }
-
-    async refreshElement(element) {
-      const sectionId = element.id.replace(/^shopify-section-/, "");
-      const url = new URL(window.location.href);
-
-      url.searchParams.append("section_id", sectionId);
-
-      const response = await fetch(url);
-
-      try {
-        if (response.headers.get("x-templates-from-params") === "1") {
-          element.outerHTML = await response.text();
-        } else {
-          window.location.reload();
-
-          console.log(
-            `[HotReload] Hot-reloading not supported, fully reloading ${this.name} section`
-          );
-        }
-      } catch (e) {
-        console.log(
-          `[HotReload] Failed to reload ${this.name} section: ${e.message}`
-        );
-      }
-    }
-
-    async refresh() {
-      console.log(`[HotReload] Reloaded ${this.name} sections`);
-      this.elements.forEach(this.refreshElement);
-    }
-  }
-
-  if (HotReload.isReloadModeActive()) {
-    let client = new SSEClient("/hot-reload", handleUpdate);
-    client.connect();
-  }
-})();

package/assets/cli-ruby/lib/shopify_cli/theme/dev_server/hot_reload/resources/theme_extension.js

@@ -1,121 +0,0 @@
-(() => {
-  const APP_BLOCK = "app-block",
-    APP_EMBED_BLOCK = "app-embed-block";
-
-  function querySelectHotReloadElements(handle) {
-    // Gets all blocks (app and embed) with specified handle TODO: add app ID check here
-    const blocks = Array.from(
-      document.querySelectorAll(`[data-block-handle$='${handle}']`)
-    );
-    if (blocks.length) {
-      const queryString = "shopify-section-";
-      const is_section = blocks[0].closest(`[id^=${queryString}]`) !== null;
-      if (is_section)
-        return [
-          blocks.map((block) => block.closest(`[id^=${queryString}]`)),
-          APP_BLOCK,
-        ];
-
-      return [blocks, APP_EMBED_BLOCK];
-    }
-    return [[], null];
-  }
-
-  function isRefreshRequired(files) {
-    if (HotReload.isFullPageReloadMode()) {
-      return true;
-    }
-    return files.some(
-      (file) => !HotReload.isCSSFile(file) && !isBlockFile(file)
-    );
-  }
-
-  function refreshFile(file) {
-    if (HotReload.isCSSFile(file)) {
-      HotReload.reloadCssFile(file);
-      return;
-    }
-
-    let block = new Block(file); // minimize DOM queries
-    if (block.valid()) return block.refresh();
-  }
-
-  function refreshPage(files) {
-    HotReload.setHotReloadCookie(files);
-    console.log("[HotReload] Refreshing entire page");
-    window.location.reload();
-  }
-
-  function handleUpdate(data) {
-    const modifiedFiles = data.modified;
-
-    if (modifiedFiles === undefined) {
-      return;
-    }
-
-    if (isRefreshRequired(modifiedFiles)) {
-      refreshPage(modifiedFiles);
-    } else {
-      modifiedFiles.forEach(refreshFile);
-    }
-  }
-
-  function isBlockFile(filename) {
-    return new Block(filename).valid();
-  }
-
-  class Block {
-    constructor(filename) {
-      this.filename = filename;
-      this.name = filename.split("/").pop().replace(".liquid", "");
-      const [elements, type] = querySelectHotReloadElements(this.name);
-      this.elements = elements;
-      this.type = type;
-
-      this.refreshElement = this.refreshElement.bind(this);
-      this.refresh = this.refresh.bind(this);
-      this.valid = this.valid.bind(this);
-    }
-
-    valid() {
-      return this.filename.startsWith("blocks/") && this.elements.length > 0;
-    }
-
-    async refreshElement(element) {
-      const url = new URL(window.location.href);
-      let regex, key;
-      if (this.type === APP_BLOCK) {
-        regex = /^shopify-section-/;
-        key = "section_id";
-      } else {
-        regex = /^shopify-block-/;
-        key = "app_block_id";
-      }
-      const elementId = element.id.replace(regex, "");
-
-      url.searchParams.append(key, elementId);
-
-      HotReload.setHotReloadCookie([this.filename]);
-
-      const response = await fetch(url);
-
-      try {
-        element.outerHTML = await response.text();
-      } catch (e) {
-        console.log(
-          `[HotReload] Failed to reload ${this.name} ${this.type}: ${e.message}`
-        );
-      }
-    }
-
-    async refresh() {
-      console.log(`[HotReload] Reloaded ${this.name} ${this.type}s`);
-      this.elements.forEach(this.refreshElement);
-    }
-  }
-
-  if (HotReload.isReloadModeActive()) {
-    let client = new SSEClient("/hot-reload", handleUpdate);
-    client.connect();
-  }
-})();

package/assets/cli-ruby/lib/shopify_cli/theme/dev_server/hot_reload/script_injector.rb

@@ -1,57 +0,0 @@
-# frozen_string_literal: true
-require_relative "../hot_reload/sections_index"
-
-module ShopifyCLI
-  module Theme
-    class DevServer
-      class HotReload
-        class ScriptInjector
-          def initialize(ctx, theme: nil)
-            @ctx = ctx
-            @theme = theme
-            @sections_index = HotReload::SectionsIndex.new(theme) unless theme.nil?
-          end
-
-          def inject(body:, dir:, mode:)
-            @mode = mode
-            @dir = dir
-            hot_reload_script = [
-              read("hot-reload-no-script.html"),
-              "<script>",
-              "(() => {",
-              javascript_inline,
-              *javascript_files.map { |file| read(file) },
-              "})();",
-              "</script>",
-            ].join("\n")
-
-            body = body.join.sub("</body>", "#{hot_reload_script}\n</body>")
-
-            [body]
-          end
-
-          private
-
-          def javascript_files
-            %w(hot_reload.js sse_client.js theme.js)
-          end
-
-          def javascript_inline
-            env = { mode: @mode }
-            env[:section_names_by_type] = @sections_index.section_names_by_type
-
-            <<~JS
-              (() => {
-                window.__SHOPIFY_CLI_ENV__ = #{env.to_json};
-              })();
-            JS
-          end
-
-          def read(filename)
-            ::File.read("#{@dir}/hot_reload/resources/#{filename}")
-          end
-        end
-      end
-    end
-  end
-end

package/assets/cli-ruby/lib/shopify_cli/theme/dev_server/hot_reload/sections_index.rb

@@ -1,50 +0,0 @@
-# frozen_string_literal: true
-
-module ShopifyCLI
-  module Theme
-    class DevServer
-      class HotReload
-        class SectionsIndex
-          def initialize(theme)
-            @theme = theme
-          end
-
-          def section_names_by_type
-            index = {}
-
-            files.each do |file|
-              section_hash(file).each do |key, value|
-                next unless key
-                next unless value.is_a?(Hash)
-                next unless (type = value&.dig("type"))
-
-                index[type] = [] unless index[type]
-                index[type] << key
-              end
-            end
-
-            index
-          end
-
-          private
-
-          def section_hash(file)
-            content = JSON.parse(file.read)
-            return [] unless content.is_a?(Hash)
-
-            sections = content["sections"]
-            return [] if sections.nil?
-
-            sections
-          rescue JSON::JSONError
-            []
-          end
-
-          def files
-            @theme.json_files.filter(&:template?)
-          end
-        end
-      end
-    end
-  end
-end