shopify-cli 2.24.0 → 2.25.0

data/lib/shopify_cli/theme/dev_server/errors.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+module ShopifyCLI
+  module Theme
+    class DevServer
+      # Errors
+      class Error < StandardError; end
+    end
+  end
+end

data/lib/shopify_cli/theme/dev_server/header_hash.rb

@@ -2,7 +2,7 @@
 
 module ShopifyCLI
   module Theme
-    module DevServer
+    class DevServer
       # Based on Rack::HeaderHash
       class HeaderHash < Hash
         def self.[](headers)

data/lib/shopify_cli/theme/dev_server/hooks/file_change_hook.rb

@@ -0,0 +1,77 @@
+# 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

data/lib/shopify_cli/theme/dev_server/hot_reload/remote_file_deleter.rb

@@ -2,7 +2,7 @@
 
 module ShopifyCLI
   module Theme
-    module DevServer
+    class DevServer
       class HotReload
         class RemoteFileDeleter
           def initialize(ctx, theme:, streams:)

data/lib/shopify_cli/theme/dev_server/hot_reload/remote_file_reloader.rb

@@ -2,7 +2,7 @@
 
 module ShopifyCLI
   module Theme
-    module DevServer
+    class DevServer
       class HotReload
         class RemoteFileReloader
           def initialize(ctx, theme:, streams:)

data/lib/shopify_cli/theme/dev_server/hot_reload/resources/hot_reload.js

@@ -0,0 +1,48 @@
+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}`);
+      }
+    });
+  };
+}

data/lib/shopify_cli/theme/dev_server/hot_reload/resources/sse_client.js

@@ -0,0 +1,43 @@
+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);
+  }
+}

data/lib/shopify_cli/theme/dev_server/hot_reload/resources/theme.js

@@ -0,0 +1,114 @@
+(() => {
+  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();
+  }
+})();

data/lib/shopify_cli/theme/dev_server/hot_reload/resources/theme_extension.js

@@ -0,0 +1,121 @@
+(() => {
+  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-template";
+      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();
+  }
+})();

data/lib/shopify_cli/theme/dev_server/hot_reload/script_injector.rb

@@ -0,0 +1,57 @@
+# 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.gsub("</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

data/lib/shopify_cli/theme/dev_server/hot_reload/sections_index.rb

@@ -2,7 +2,7 @@
 
 module ShopifyCLI
   module Theme
-    module DevServer
+    class DevServer
       class HotReload
         class SectionsIndex
           def initialize(theme)

data/lib/shopify_cli/theme/dev_server/hot_reload.rb

@@ -1,25 +1,18 @@
 # frozen_string_literal: true
 
-require_relative "hot_reload/remote_file_reloader"
-require_relative "hot_reload/remote_file_deleter"
-require_relative "hot_reload/sections_index"
-
 module ShopifyCLI
   module Theme
-    module DevServer
+    class DevServer
       class HotReload
-        def initialize(ctx, app, theme:, watcher:, mode:, ignore_filter: nil)
+        def initialize(ctx, app, broadcast_hooks: [], script_injector: nil, watcher:, mode:)
           @ctx = ctx
           @app = app
-          @theme = theme
           @mode = mode
+          @broadcast_hooks = broadcast_hooks
+          @script_injector = script_injector
           @streams = SSE::Streams.new
-          @remote_file_reloader = RemoteFileReloader.new(ctx, theme: @theme, streams: @streams)
-          @remote_file_deleter = RemoteFileDeleter.new(ctx, theme: @theme, streams: @streams)
-          @sections_index = SectionsIndex.new(@theme)
           @watcher = watcher
           @watcher.add_observer(self, :notify_streams_of_file_change)
-          @ignore_filter = ignore_filter
         end
 
         def call(env)
@@ -39,80 +32,19 @@ module ShopifyCLI
         end
 
         def notify_streams_of_file_change(modified, added, removed)
-          files = (modified + added)
-            .map { |file| @theme[file] }
-            .reject { |file| @ignore_filter&.ignore?(file.relative_path) }
-
-          files -= liquid_css_files = files.select(&:liquid_css?)
-
-          deleted_files = removed
-            .map { |file| @theme[file] }
-            .reject { |file| @ignore_filter&.ignore?(file.relative_path) }
-
-          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_delete(files)
-          files.each do |file|
-            @ctx.debug("delete file each -> file.relative_path #{file.relative_path}")
-            @remote_file_deleter.delete(file)
+          @broadcast_hooks.each do |hook|
+            hook.call(modified, added, removed, streams: @streams)
           end
         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
+        private
 
         def request_is_html?(headers)
           headers["content-type"]&.start_with?("text/html")
         end
 
         def inject_hot_reload_javascript(body)
-          hot_reload_js = ::File.read("#{__dir__}/hot-reload.js")
-          hot_reload_no_script = ::File.read("#{__dir__}/hot-reload-no-script.html")
-          hot_reload_script = [
-            hot_reload_no_script,
-            "<script>",
-            params_js,
-            hot_reload_js,
-            "</script>",
-          ].join("\n")
-
-          body = body.join.gsub("</body>", "#{hot_reload_script}\n</body>")
-
-          [body]
-        end
-
-        def params_js
-          env = {
-            mode: @mode,
-            section_names_by_type: @sections_index.section_names_by_type,
-          }
-          <<~JS
-            (() => {
-              window.__SHOPIFY_CLI_ENV__ = #{env.to_json};
-            })();
-          JS
+          @script_injector&.inject(body: body, dir: __dir__, mode: @mode)
         end
 
         def create_stream