shopify-cli 2.24.0 → 2.25.0

data/lib/shopify_cli/theme/dev_server.rb

@@ -1,132 +1,320 @@
 # frozen_string_literal: true
-require_relative "development_theme"
-require_relative "ignore_filter"
-require_relative "syncer"
+
+require "pathname"
+require "singleton"
 
 require_relative "dev_server/cdn_fonts"
-require_relative "dev_server/hot_reload"
+require_relative "dev_server/certificate_manager"
+require_relative "dev_server/errors"
 require_relative "dev_server/header_hash"
-require_relative "dev_server/reload_mode"
+require_relative "dev_server/hot_reload"
+require_relative "dev_server/hot_reload/script_injector"
 require_relative "dev_server/local_assets"
+require_relative "dev_server/proxy_param_builder"
 require_relative "dev_server/proxy"
+require_relative "dev_server/reload_mode"
+require_relative "dev_server/remote_watcher"
 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"
+require_relative "dev_server/hooks/file_change_hook"
 
-require "pathname"
+require_relative "development_theme"
+require_relative "ignore_filter"
+require_relative "include_filter"
+require_relative "syncer"
 
 module ShopifyCLI
   module Theme
-    module DevServer
-      # Errors
-      Error = Class.new(StandardError)
-      AddressBindingError = Class.new(Error)
+    class DevServer
+      include Singleton
+
+      attr_reader :app, :stopped, :ctx, :root, :host, :theme_identifier, :port, :poll, :editor_sync, :stable, :mode,
+        :block, :includes, :ignores
 
       class << self
-        attr_accessor :ctx
-
-        def start(ctx, root, host: "127.0.0.1", theme: nil, port: 9292, poll: false, editor_sync: false,
-          mode: ReloadMode.default, stable: false)
-          @ctx = ctx
-          theme = find_theme(root, theme)
-          ignore_filter = IgnoreFilter.from_path(root)
-          @syncer = Syncer.new(ctx, theme: theme, ignore_filter: ignore_filter, overwrite_json: !editor_sync,
-            stable: stable)
-          watcher = Watcher.new(ctx, theme: theme, ignore_filter: ignore_filter, 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)
-          @app = CdnFonts.new(@app, theme: theme)
-          @app = LocalAssets.new(ctx, @app, theme: theme)
-          @app = HotReload.new(ctx, @app, theme: theme, watcher: watcher, mode: mode, ignore_filter: ignore_filter)
-          stopped = false
-          address = "http://#{host}:#{port}"
-
-          trap("INT") do
-            stopped = true
-            stop
-          end
+        def start(
+          ctx,
+          root,
+          host: "127.0.0.1",
+          theme: nil,
+          port: 9292,
+          poll: false,
+          editor_sync: false,
+          stable: false,
+          mode: ReloadMode.default,
+          includes: nil,
+          ignores: nil,
+          &block
+        )
+          instance.setup(
+            ctx,
+            root,
+            host,
+            theme,
+            port,
+            poll,
+            editor_sync,
+            stable,
+            mode,
+            includes,
+            ignores,
+            &block
+          )
+          instance.start
+        end
 
-          CLI::UI::Frame.open(@ctx.message("theme.serve.viewing_theme")) do
-            ctx.print_task(ctx.message("theme.serve.syncing_theme", theme.id, theme.shop))
-            @syncer.start_threads
-            if block_given?
-              yield @syncer
-            else
-              @syncer.upload_theme!(delay_low_priority_files: true)
-            end
-
-            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(preview_message)
-          end
+        def stop
+          instance.stop
+        end
+      end
+
+      # rubocop:disable Metrics/ParameterLists
+      def setup(
+        ctx,
+        root,
+        host,
+        theme_identifier,
+        port,
+        poll,
+        editor_sync,
+        stable,
+        mode,
+        includes,
+        ignores,
+        &block
+      )
+        @ctx = ctx
+        @root = root
+        @host = host
+        @theme_identifier = theme_identifier
+        @port = port
+        @poll = poll
+        @editor_sync = editor_sync
+        @stable = stable
+        @mode = mode
+        @includes = includes
+        @ignores = ignores
+        @block = block
+      end
+
+      def start
+        sync_theme
+
+        # Handle process stop
+        trap("INT") { stop("SIGINT") }
+        trap("TERM") { stop("SIGTERM") }
+
+        # Setup the middleware stack. Mimics Rack::Builder / config.ru, but in reverse order
+        @app = middleware_stack
+
+        # Start development server
+        setup_server
+        start_server
+        teardown_server
+
+      rescue ShopifyCLI::API::APIRequestForbiddenError,
+             ShopifyCLI::API::APIRequestUnauthorizedError
+        ctx.abort(ensure_user_message)
+      rescue Errno::EADDRINUSE
+        ctx.abort(port_error_message, port_error_help_message)
+      rescue Errno::EADDRNOTAVAIL
+        ctx.abort(binding_error_message)
+      end
+
+      def stop(signal = nil)
+        ctx.debug(stop_signal(signal)) unless signal.nil?
+
+        @stopped = true
+
+        ctx.puts(stopping_message)
+        app.close
+        WebServer.shutdown
+      end
+
+      private
+
+      def setup_server
+        watcher.start
+        remote_watcher.start if editor_sync
+      end
+
+      def teardown_server
+        # Use instance variables, so we don't build components
+        # at the teardown phase.
+        @remote_watcher&.stop if editor_sync
+        @watcher&.stop
+        @syncer&.shutdown
+      end
+
+      def start_server
+        WebServer.run(
+          app,
+          BindAddress: host,
+          Port: port,
+          Logger: logger,
+          AccessLog: [],
+        )
+      end
+
+      def middleware_stack
+        @app = Proxy.new(ctx, theme, param_builder)
+        @app = CdnFonts.new(@app, theme: theme)
+        @app = LocalAssets.new(ctx, @app, theme)
+        @app = HotReload.new(ctx, @app, broadcast_hooks: broadcast_hooks, watcher: watcher, mode: mode,
+          script_injector: script_injector)
+      end
+
+      def sync_theme
+        CLI::UI::Frame.open(viewing_theme_message) do
+          ctx.print_task(syncing_theme_message)
+          syncer.start_threads
 
-          logger = if ctx.debug?
-            WEBrick::Log.new(nil, WEBrick::BasicLog::INFO)
+          if block
+            block.call(syncer)
           else
-            WEBrick::Log.new(nil, WEBrick::BasicLog::FATAL)
+            syncer.upload_theme!(delay_low_priority_files: true)
           end
 
-          watcher.start
-          remote_watcher.start if editor_sync
-          WebServer.run(
-            @app,
-            BindAddress: host,
-            Port: port,
-            Logger: logger,
-            AccessLog: [],
-          )
-          remote_watcher.stop if editor_sync
-          watcher.stop
-
-        rescue ShopifyCLI::API::APIRequestForbiddenError,
-               ShopifyCLI::API::APIRequestUnauthorizedError
-          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")
-          @ctx.abort(error_message, help_message)
-        rescue Errno::EADDRNOTAVAIL
-          raise AddressBindingError, "Error binding to the address #{host}."
+          return if stopped
+
+          ctx.puts(serving_theme_message)
+          ctx.open_url!(address)
+          ctx.puts(preview_message)
         end
+      end
 
-        def stop
-          @ctx.puts("Stopping…")
-          @app.close
-          @syncer.shutdown
-          WebServer.shutdown
+      def theme
+        @theme ||= if theme_identifier
+          theme = ShopifyCLI::Theme::Theme.find_by_identifier(ctx, root: root, identifier: theme_identifier)
+          theme || ctx.abort(not_found_error_message)
+        else
+          DevelopmentTheme.find_or_create!(ctx, root: root)
         end
+      end
+
+      def syncer
+        @syncer ||= Syncer.new(
+          ctx,
+          theme: theme,
+          include_filter: include_filter,
+          ignore_filter: ignore_filter,
+          overwrite_json: !editor_sync,
+          stable: stable
+        )
+      end
 
-        private
+      def watcher
+        @watcher ||= Watcher.new(
+          ctx,
+          theme: theme,
+          ignore_filter: ignore_filter,
+          syncer: syncer,
+          poll: poll
+        )
+      end
 
-        def find_theme(root, identifier)
-          return theme_by_identifier(root, identifier) if identifier
-          DevelopmentTheme.find_or_create!(@ctx, root: root)
-        end
+      def remote_watcher
+        @remote_watcher ||= RemoteWatcher.to(
+          theme: theme,
+          syncer: syncer
+        )
+      end
+
+      def param_builder
+        @param_builder ||= ProxyParamBuilder
+          .new
+          .with_theme(theme)
+          .with_syncer(syncer)
+      end
 
-        def theme_by_identifier(root, identifier)
-          theme = ShopifyCLI::Theme::Theme.find_by_identifier(@ctx, root: root, identifier: identifier)
-          theme || not_found_error(identifier)
+      def ignore_filter
+        @ignore_filter ||= IgnoreFilter.from_path(root).tap do |filter|
+          filter.add_patterns(ignores) if ignores
         end
+      end
+
+      def include_filter
+        @include_filter ||= ShopifyCLI::Theme::IncludeFilter.new(root, includes)
+      end
 
-        def not_found_error(identifier)
-          @ctx.abort(@ctx.message("theme.serve.theme_not_found", identifier))
+      def logger
+        @logger ||= if ctx.debug?
+          WEBrick::Log.new(nil, WEBrick::BasicLog::INFO)
+        else
+          WEBrick::Log.new(nil, WEBrick::BasicLog::FATAL)
         end
       end
+
+      # Hooks
+
+      def broadcast_hooks
+        file_handler = Hooks::FileChangeHook.new(ctx, theme: theme, include_filter: include_filter,
+          ignore_filter: ignore_filter)
+        [file_handler]
+      end
+
+      def script_injector
+        HotReload::ScriptInjector.new(ctx, theme: theme)
+      end
+
+      def address
+        @address ||= "http://#{host}:#{port}"
+      end
+
+      # Messages
+
+      def ensure_user_message
+        shop = ShopifyCLI::AdminAPI.get_shop_or_abort(ctx)
+        ctx.message("theme.serve.ensure_user", shop)
+      end
+
+      def port_error_message
+        ctx.message("theme.serve.address_already_in_use", address)
+      end
+
+      def port_error_help_message
+        ctx.message("theme.serve.try_port_option")
+      end
+
+      def binding_error_message
+        ctx.message("theme.serve.binding_error", ShopifyCLI::TOOL_NAME)
+      end
+
+      def viewing_theme_message
+        ctx.message("theme.serve.viewing_theme")
+      end
+
+      def syncing_theme_message
+        ctx.message("theme.serve.syncing_theme", theme.id, theme.shop)
+      end
+
+      def serving_theme_message
+        ctx.message("theme.serve.serving", theme.root)
+      end
+
+      def stopping_message
+        ctx.message("theme.serve.stopping")
+      end
+
+      def stop_signal(signal)
+        ctx.message("theme.serve.stop_signal", signal)
+      end
+
+      def not_found_error_message
+        ctx.message("theme.serve.theme_not_found", theme_identifier)
+      end
+
+      def preview_message
+        preview_suffix = editor_sync ? "" : ctx.message("theme.serve.download_changes")
+
+        ctx.message(
+          "theme.serve.customize_or_preview",
+          preview_suffix,
+          theme.editor_url,
+          theme.preview_url
+        )
+      end
     end
   end
 end

data/lib/shopify_cli/theme/extension/app_extension.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+require "forwardable"
+require "shopify_cli/theme/root"
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class AppExtension
+        extend Forwardable
+
+        attr_reader :app_id, :location, :registration_id
+        def_delegators :@root_obj,
+          :root,
+          :static_asset_files,
+          :liquid_files,
+          :json_files,
+          :glob,
+          :static_asset_file?,
+          :static_asset_paths,
+          :[],
+          :file?
+
+        def initialize(ctx, root:, app_id: nil, location: nil, registration_id: nil)
+          @app_id = app_id
+          @location = location
+          @registration_id = registration_id
+          @root_obj = Root.new(ctx, root: root)
+        end
+
+        def extension_files
+          (glob(["**/*.liquid", "**/*.json"]) + static_asset_files).uniq
+        end
+
+        def extension_file?(file)
+          extension_files.include?(self[file])
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class DevServer
+        module Hooks
+          class FileChangeHook
+            attr_reader :ctx, :extension, :syncer, :streams
+
+            def initialize(ctx, extension:, syncer:)
+              @ctx = ctx
+              @extension = extension
+              @syncer = syncer
+            end
+
+            def call(modified, added, removed, streams: nil)
+              @streams = streams
+
+              modified = paths(modified).select { |file| @extension.extension_file?(file) }
+              added = paths(added).select { |file| @extension.extension_file?(file) }
+              removed = paths(removed)
+
+              hot_reload(modified) unless modified.empty?
+              reload_page(added, removed) unless (added + removed).empty?
+            end
+
+            private
+
+            def hot_reload(modified)
+              broadcast(modified: modified)
+
+              ctx.debug("[HotReload] Modified: #{modified.join(", ")}")
+            end
+
+            def reload_page(added, removed)
+              wait_blocking_operations
+
+              broadcast(reload_page: true)
+
+              ctx.debug("[ReloadPage] Added: #{added.join(", ")}")
+              ctx.debug("[ReloadPage] Removed: #{removed.join(", ")}")
+            end
+
+            def wait_blocking_operations
+              retries = 10
+              while syncer.any_blocking_operation? && !retries.zero?
+                sleep(0.5)
+                retries -= 1
+              end
+            end
+
+            def paths(files)
+              files
+                .map { |file| extension[file] }
+                .reject(&:liquid_css?)
+                .map(&:relative_path)
+            end
+
+            def broadcast(message)
+              streams&.broadcast(JSON.generate(message))
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require "shopify_cli/theme/dev_server/hot_reload/script_injector"
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class DevServer < ShopifyCLI::Theme::DevServer
+        class HotReload < ShopifyCLI::Theme::DevServer::HotReload
+          class ScriptInjector < ShopifyCLI::Theme::DevServer::HotReload::ScriptInjector
+            private
+
+            def javascript_files
+              %w(hot_reload.js sse_client.js theme_extension.js)
+            end
+
+            def javascript_inline
+              env = { mode: @mode }
+              <<~JS
+                (() => {
+                  window.__SHOPIFY_CLI_ENV__ = #{env.to_json};
+                })();
+              JS
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require "shopify_cli/theme/dev_server/hot_reload"
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class DevServer < ShopifyCLI::Theme::DevServer
+        class HotReload < ShopifyCLI::Theme::DevServer::HotReload; end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require "shopify_cli/theme/dev_server/local_assets"
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class DevServer < ShopifyCLI::Theme::DevServer
+        class LocalAssets < ShopifyCLI::Theme::DevServer::LocalAssets
+          TAE_ASSET_REGEX = %r{(http:|https:)?//cdn\.shopify\.com/extensions/.+?/(assets/.+?\.(?:css|js))}
+
+          private
+
+          def replace_asset_urls(body)
+            replaced_body = body.join.gsub(TAE_ASSET_REGEX) do |match|
+              path = Regexp.last_match[2]
+              if @target.static_asset_paths.include?(path)
+                "/#{path}"
+              else
+                match
+              end
+            end
+
+            [replaced_body]
+          end
+        end
+      end
+    end
+  end
+end

data/lib/shopify_cli/theme/{dev_server/proxy/template_param_builder.rb → extension/dev_server/proxy_param_builder.rb}

@@ -1,19 +1,21 @@
 # frozen_string_literal: true
 
 require "cgi"
+require "shopify_cli/theme/dev_server"
 
 module ShopifyCLI
   module Theme
-    module DevServer
-      class Proxy
-        class TemplateParamBuilder
+    module Extension
+      class DevServer < ShopifyCLI::Theme::DevServer
+        class ProxyParamBuilder
           def build
-            # Core doesn't support replace_templates
+            # Core doesn't support replace_extension_templates
             return {} if core?(current_path)
 
-            (syncer_templates + request_templates)
-              .select { |file| file.liquid? || file.json? }
+            (request_templates + syncer_templates)
+              .select(&:liquid?)
               .uniq(&:relative_path)
+              .reject { |file| proxy_cannot_render?(file) }
               .map { |file| as_param(file) }
               .to_h
           end
@@ -33,29 +35,37 @@ module ShopifyCLI
             self
           end
 
-          def with_theme(theme)
-            @theme = theme
+          def with_extension(extension)
+            @extension = extension
             self
           end
 
           private
 
-          def as_param(file)
-            ["replace_templates[#{file.relative_path}]", file.read]
+          def proxy_cannot_render?(file)
+            !(file&.relative_path&.include?("blocks/") || file&.relative_path&.include?("snippets/"))
           end
 
-          def syncer_templates
-            @syncer&.pending_updates || []
+          def as_param(file)
+            if file&.relative_path&.include?("blocks/")
+              ["replace_extension_templates[blocks][#{file.relative_path}]", file.read]
+            elsif file&.relative_path&.include?("snippets/")
+              ["replace_extension_templates[snippets][#{file.relative_path}]", file.read]
+            end
           end
 
           def request_templates
-            cookie_sections
-              .map { |section| @theme[section] unless @theme.nil? }
+            cookie_files
+              .map { |file_path| @extension[file_path] unless @extension.nil? }
               .compact
           end
 
-          def cookie_sections
-            CGI::Cookie.parse(cookie)["hot_reload_sections"].join.split(",") || []
+          def syncer_templates
+            @syncer&.pending_files || []
+          end
+
+          def cookie_files
+            CGI::Cookie.parse(cookie)["hot_reload_files"].join.split(",") || []
           end
 
           def core?(path)