shopify-cli 2.15.1 → 2.15.4

data/lib/shopify_cli/services/app/serve/serve_service.rb

@@ -0,0 +1,57 @@
+module ShopifyCLI
+  module Services
+    module App
+      module Serve
+        class ServeService < BaseService
+          attr_accessor :host, :port, :no_update, :context
+
+          def initialize(host:, port:, no_update:, context:)
+            @host = host
+            @port = port
+            @no_update = no_update
+            @context = context
+            super()
+          end
+
+          def call
+            raise NotImplementedError
+          end
+
+          private
+
+          def generate_url
+            create_tunnel
+            update_url unless no_update
+            show_app_url
+          end
+
+          def create_tunnel
+            url = host || ShopifyCLI::Tunnel.start(context, port: port)
+            raise ShopifyCLI::Abort,
+              context.message("core.app.serve.error.host_must_be_https") if url.match(/^https/i).nil?
+            project.env.update(context, :host, url)
+          end
+
+          def update_url
+            ShopifyCLI::Tasks::UpdateDashboardURLS.call(
+              context,
+              url: project.env.host,
+              callback_url: "/auth/shopify/callback",
+            )
+          end
+
+          def show_app_url
+            return unless project.env.shop
+
+            project_url = "#{project.env.host}/login?shop=#{project.env.shop}"
+            context.puts("\n" + context.message("core.app.serve.open_info", project_url) + "\n")
+          end
+
+          def project
+            @project ||= ShopifyCLI::Project.current
+          end
+        end
+      end
+    end
+  end
+end

data/lib/shopify_cli/services.rb

@@ -5,6 +5,7 @@ module ShopifyCLI
 
     module App
       module Serve
+        autoload :ServeService, "shopify_cli/services/app/serve/serve_service"
         autoload :NodeService, "shopify_cli/services/app/serve/node_service"
         autoload :RailsService, "shopify_cli/services/app/serve/rails_service"
         autoload :PHPService, "shopify_cli/services/app/serve/php_service"

data/lib/shopify_cli/tasks/update_dashboard_urls.rb

@@ -9,24 +9,22 @@ module ShopifyCLI
         api_key = project.env.api_key
         result = ShopifyCLI::PartnersAPI.query(ctx, "get_app_urls", apiKey: api_key)
         app = result["data"]["app"]
-        consent = check_application_url(app["applicationUrl"], url)
+
+        return if app["applicationUrl"].match(url)
+
         constructed_urls = construct_redirect_urls(app["redirectUrlWhitelist"], url, callback_url)
-        return if url == app["applicationUrl"]
         ShopifyCLI::PartnersAPI.query(@ctx, "update_dashboard_urls", input: {
-          applicationUrl: consent ? url : app["applicationUrl"],
-          redirectUrlWhitelist: constructed_urls, apiKey: api_key
+          applicationUrl: url,
+          redirectUrlWhitelist: constructed_urls,
+          apiKey: api_key,
         })
+
         @ctx.puts(@ctx.message("core.tasks.update_dashboard_urls.updated"))
       rescue
         @ctx.puts(@ctx.message("core.tasks.update_dashboard_urls.update_error", ShopifyCLI::TOOL_NAME))
         raise
       end
 
-      def check_application_url(application_url, new_url)
-        return false if application_url.match(new_url)
-        CLI::UI::Prompt.confirm(@ctx.message("core.tasks.update_dashboard_urls.update_prompt"))
-      end
-
       def construct_redirect_urls(urls, new_url, callback_url)
         new_urls = urls.map do |url|
           if (match = url.match(NGROK_REGEX))

data/lib/shopify_cli/theme/dev_server/hot-reload.js

@@ -15,17 +15,37 @@
     eventSource.onerror = () => eventSource.close();
   }
 
+  function sectionNamesByType(type) {
+    const namespace = window.__SHOPIFY_CLI_ENV__;
+    return namespace.section_names_by_type[type] || [];
+  }
+
   function reloadMode() {
-    var namespace = window.__SHOPIFY_CLI_ENV__;
+    const namespace = window.__SHOPIFY_CLI_ENV__;
     return namespace.mode;
   }
 
+  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 isFullPageReloadMode(){
-    return reloadMode() === "full-page";
+    return reloadMode() === 'full-page';
   }
 
   function isReloadModeActive(){
-    return reloadMode() !== "off";
+    return reloadMode() !== 'off';
   }
 
   function isRefreshRequired(files) {
@@ -104,26 +124,28 @@
     constructor(filename) {
       this.filename = filename;
       this.name = filename.split('/').pop().replace('.liquid', '');
-      this.element = document.querySelector(`[id^='shopify-section'][id$='${this.name}']`);
+      this.elements = fetchDOMSections(this.name);
     }
 
     valid() {
-      return this.filename.startsWith('sections/') && this.element;
+      return this.filename.startsWith('sections/') && this.elements.length > 0;
     }
 
-    async refresh() {
-      var url = new URL(window.location.href);
-      url.searchParams.append('section_id', this.name);
+    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 {
-        const response = await fetch(url);
         if (response.headers.get('x-templates-from-params') == '1') {
           const html = await response.text();
-          this.element.outerHTML = html;
-
-          console.log(`[HotReload] Reloaded ${this.name} section`);
+          element.outerHTML = html;
         } else {
-          window.location.reload()
+          window.location.reload();
 
           console.log(`[HotReload] Hot-reloading not supported, fully reloading ${this.name} section`);
         }
@@ -132,6 +154,11 @@
         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 (isReloadModeActive()) {

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

@@ -51,7 +51,7 @@ module ShopifyCLI
           def fetch_asset(file)
             api_client.get(
               path: "themes/#{@theme.id}/assets.json",
-              query: URI.encode_www_form("asset[key]" => file.relative_path.to_s),
+              query: URI.encode_www_form("asset[key]" => file.relative_path),
             )
           rescue ShopifyCLI::API::APIRequestNotFoundError
             [404, {}]

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module ShopifyCLI
+  module Theme
+    module 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|
+                name = key
+                type = value&.dig("type")
+
+                next if !name || !type
+
+                index[type] = [] unless index[type]
+                index[type] << name
+              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
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require_relative "hot_reload/remote_file_reloader"
+require_relative "hot_reload/sections_index"
 
 module ShopifyCLI
   module Theme
@@ -13,6 +14,7 @@ module ShopifyCLI
           @mode = mode
           @streams = SSE::Streams.new
           @remote_file_reloader = RemoteFileReloader.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
@@ -78,7 +80,10 @@ module ShopifyCLI
         end
 
         def params_js
-          env = { mode: @mode }
+          env = {
+            mode: @mode,
+            section_names_by_type: @sections_index.section_names_by_type,
+          }
           <<~JS
             (() => {
               window.__SHOPIFY_CLI_ENV__ = #{env.to_json};

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

@@ -71,7 +71,7 @@ module ShopifyCLI
 
         def replace_asset_urls(body)
           replaced_body = body.join.gsub(ASSET_REGEX) do |match|
-            path = Pathname.new(Regexp.last_match[1])
+            path = Regexp.last_match[1]
             if @theme.static_asset_paths.include?(path)
               "/#{path}"
             else

data/lib/shopify_cli/theme/dev_server/remote_watcher/json_files_update_job.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require "shopify_cli/thread_pool/job"
+
+module ShopifyCLI
+  module Theme
+    module DevServer
+      class RemoteWatcher
+        class JsonFilesUpdateJob < ShopifyCLI::ThreadPool::Job
+          def initialize(theme, syncer, interval)
+            super(interval)
+
+            @theme = theme
+            @syncer = syncer
+          end
+
+          def perform!
+            @syncer.fetch_checksums!
+            @syncer.enqueue_get(json_files)
+          end
+
+          private
+
+          def json_files
+            @theme
+              .json_files
+              .reject { |file| @syncer.pending_updates.include?(file) }
+              .reject { |file| @syncer.broken_file?(file) }
+              .reject { |file| @syncer.ignore_file?(file) }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require "shopify_cli/thread_pool"
+
+require_relative "remote_watcher/json_files_update_job"
+
+module ShopifyCLI
+  module Theme
+    module DevServer
+      class RemoteWatcher
+        SYNC_INTERVAL = 3 # seconds
+
+        class << self
+          def to(theme:, syncer:)
+            new(theme, syncer)
+          end
+        end
+
+        def start
+          thread_pool.schedule(recurring_job)
+        end
+
+        def stop
+          thread_pool.shutdown
+        end
+
+        private
+
+        def initialize(theme, syncer)
+          @theme = theme
+          @syncer = syncer
+        end
+
+        def thread_pool
+          @thread_pool ||= ShopifyCLI::ThreadPool.new(pool_size: 1)
+        end
+
+        def recurring_job
+          JsonFilesUpdateJob.new(@theme, @syncer, SYNC_INTERVAL)
+        end
+      end
+    end
+  end
+end

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

@@ -46,20 +46,14 @@ module ShopifyCLI
           files
             .select { |file| @theme.theme_file?(file) }
             .map { |file| @theme[file] }
-            .reject { |file| ignore_file?(file) }
+            .reject { |file| @syncer.ignore_file?(file) }
         end
 
         def filter_remote_files(files)
           files
             .select { |file| @syncer.remote_file?(file) }
             .map { |file| @theme[file] }
-            .reject { |file| ignore_file?(file) }
-        end
-
-        private
-
-        def ignore_file?(file)
-          @ignore_filter&.ignore?(file.relative_path.to_s)
+            .reject { |file| @syncer.ignore_file?(file) }
         end
       end
     end

data/lib/shopify_cli/theme/dev_server.rb

@@ -11,6 +11,7 @@ require_relative "dev_server/local_assets"
 require_relative "dev_server/proxy"
 require_relative "dev_server/sse"
 require_relative "dev_server/watcher"
+require_relative "dev_server/remote_watcher"
 require_relative "dev_server/web_server"
 require_relative "dev_server/certificate_manager"
 
@@ -26,12 +27,13 @@ module ShopifyCLI
       class << self
         attr_accessor :ctx
 
-        def start(ctx, root, host: "127.0.0.1", port: 9292, poll: false, mode: ReloadMode.default)
+        def start(ctx, root, host: "127.0.0.1", port: 9292, poll: false, editor_sync: false, mode: ReloadMode.default)
           @ctx = ctx
           theme = DevelopmentTheme.find_or_create!(ctx, root: root)
           ignore_filter = IgnoreFilter.from_path(root)
-          @syncer = Syncer.new(ctx, theme: theme, ignore_filter: ignore_filter)
-          watcher = Watcher.new(ctx, theme: theme, syncer: @syncer, ignore_filter: ignore_filter, poll: poll)
+          @syncer = Syncer.new(ctx, theme: theme, ignore_filter: ignore_filter, overwrite_json: !editor_sync)
+          watcher = Watcher.new(ctx, theme: theme, syncer: @syncer, poll: poll)
+          remote_watcher = RemoteWatcher.to(theme: theme, syncer: @syncer)
 
           # Setup the middleware stack. Mimics Rack::Builder / config.ru, but in reverse order
           @app = Proxy.new(ctx, theme: theme, syncer: @syncer)
@@ -57,9 +59,17 @@ module ShopifyCLI
 
             return if stopped
 
+            preview_suffix = editor_sync ? "" : ctx.message("theme.serve.download_changes")
+            preview_message = ctx.message(
+              "theme.serve.customize_or_preview",
+              preview_suffix,
+              theme.editor_url,
+              theme.preview_url
+            )
+
             ctx.puts(ctx.message("theme.serve.serving", theme.root))
             ctx.open_url!(address)
-            ctx.puts(ctx.message("theme.serve.customize_or_preview", theme.editor_url, theme.preview_url))
+            ctx.puts(preview_message)
           end
 
           logger = if ctx.debug?
@@ -69,6 +79,7 @@ module ShopifyCLI
           end
 
           watcher.start
+          remote_watcher.start if editor_sync
           WebServer.run(
             @app,
             BindAddress: host,
@@ -76,11 +87,13 @@ module ShopifyCLI
             Logger: logger,
             AccessLog: [],
           )
+          remote_watcher.stop if editor_sync
           watcher.stop
 
         rescue ShopifyCLI::API::APIRequestForbiddenError,
                ShopifyCLI::API::APIRequestUnauthorizedError
-          raise ShopifyCLI::Abort, @ctx.message("theme.serve.ensure_user", theme.shop)
+          shop = ShopifyCLI::AdminAPI.get_shop_or_abort(@ctx)
+          raise ShopifyCLI::Abort, @ctx.message("theme.serve.ensure_user", shop)
         rescue Errno::EADDRINUSE
           error_message = @ctx.message("theme.serve.address_already_in_use", address)
           help_message = @ctx.message("theme.serve.try_port_option")

data/lib/shopify_cli/theme/file.rb

@@ -4,7 +4,6 @@ require_relative "mime_type"
 module ShopifyCLI
   module Theme
     class File < Struct.new(:path)
-      attr_reader :relative_path
       attr_accessor :remote_checksum
 
       def initialize(path, root)
@@ -42,7 +41,7 @@ module ShopifyCLI
       end
 
       def mime_type
-        @mime_type ||= MimeType.by_filename(relative_path)
+        @mime_type ||= MimeType.by_filename(@relative_path)
       end
 
       def text?
@@ -54,7 +53,7 @@ module ShopifyCLI
       end
 
       def liquid_css?
-        relative_path.to_s.end_with?(".css.liquid")
+        relative_path.end_with?(".css.liquid")
       end
 
       def json?
@@ -62,7 +61,7 @@ module ShopifyCLI
       end
 
       def template?
-        relative_path.to_s.start_with?("templates/")
+        relative_path.start_with?("templates/")
       end
 
       def checksum
@@ -84,6 +83,18 @@ module ShopifyCLI
         relative_path == other.relative_path
       end
 
+      def name(*args)
+        ::File.basename(path, *args)
+      end
+
+      def absolute_path
+        path.realpath.to_s
+      end
+
+      def relative_path
+        @relative_path.to_s
+      end
+
       private
 
       def normalize_json(content)

data/lib/shopify_cli/theme/syncer/checksums.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module ShopifyCLI
+  module Theme
+    class Syncer
+      class Checksums
+        def initialize(theme)
+          @theme = theme
+          @checksum_by_key = {}
+
+          # Mutex used to coordinate changes in the checksums (shared accross `Syncer` threads)
+          @checksums_mutex = Mutex.new
+        end
+
+        def has?(file)
+          checksum_by_key.key?(to_key(file))
+        end
+
+        def file_has_changed?(file)
+          file.checksum != checksum_by_key[file.relative_path]
+        end
+
+        def keys
+          checksum_by_key.keys
+        end
+
+        def [](key)
+          checksum_by_key[key]
+        end
+
+        def []=(key, value)
+          checksums_mutex.synchronize do
+            checksum_by_key[key] = value
+          end
+        end
+
+        # Generate .liquid asset files are reported twice in checksum:
+        # once of generated, once for .liquid. We only keep the .liquid, that's the one we have
+        # on disk.
+        def reject_duplicated_checksums!
+          checksums_mutex.synchronize do
+            checksum_by_key.reject! { |key, _| checksum_by_key.key?("#{key}.liquid") }
+          end
+        end
+
+        private
+
+        def to_key(file)
+          theme[file].relative_path
+        end
+
+        # Private getters only used in unit tests
+
+        attr_reader :checksum_by_key
+        attr_reader :theme
+        attr_reader :checksums_mutex
+      end
+    end
+  end
+end

data/lib/shopify_cli/theme/syncer/forms/apply_to_all.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+require_relative "apply_to_all_form"
+
+module ShopifyCLI
+  module Theme
+    class Syncer
+      module Forms
+        class ApplyToAll
+          attr_reader :value
+
+          def initialize(ctx, number_of_files)
+            @ctx = ctx
+            @number_of_files = number_of_files
+            @value = nil
+            @apply = nil
+          end
+
+          def apply?(value)
+            return unless @number_of_files > 1
+
+            if @apply.nil?
+              @apply = ask.apply?
+              @value = value if @apply
+            end
+
+            @apply
+          end
+
+          private
+
+          def ask
+            ApplyToAllForm.ask(@ctx, [], number_of_files: @number_of_files)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/shopify_cli/theme/syncer/forms/apply_to_all_form.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module ShopifyCLI
+  module Theme
+    class Syncer
+      module Forms
+        class ApplyToAllForm < ShopifyCLI::Form
+          attr_accessor :apply
+          flag_arguments :number_of_files
+
+          def ask
+            title = message("title", number_of_files - 1)
+
+            self.apply = CLI::UI::Prompt.ask(title, allow_empty: false) do |handler|
+              handler.option(message("yes")) { true }
+              handler.option(message("no")) { false }
+            end
+
+            self
+          end
+
+          def apply?
+            apply
+          end
+
+          private
+
+          def message(key, *params)
+            ctx.message("theme.serve.syncer.forms.apply_to_all.#{key}", *params)
+          end
+        end
+      end
+    end
+  end
+end