@shopify/cli-kit 3.38.0 → 3.40.0

package/assets/cli-ruby/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

package/assets/cli-ruby/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

package/assets/cli-ruby/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

package/assets/cli-ruby/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

package/assets/cli-ruby/lib/shopify_cli/theme/extension/dev_server/proxy_param_builder.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+require "cgi"
+require "shopify_cli/theme/dev_server"
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class DevServer < ShopifyCLI::Theme::DevServer
+        class ProxyParamBuilder
+          def build
+            # Core doesn't support replace_extension_templates
+            return {} if core?(current_path)
+
+            (request_templates + syncer_templates)
+              .select(&:liquid?)
+              .uniq(&:relative_path)
+              .reject { |file| proxy_cannot_render?(file) }
+              .map { |file| as_param(file) }
+              .to_h
+          end
+
+          def with_core_endpoints(core_endpoints)
+            @core_endpoints = core_endpoints
+            self
+          end
+
+          def with_syncer(syncer)
+            @syncer = syncer
+            self
+          end
+
+          def with_rack_env(rack_env)
+            @rack_env = rack_env
+            self
+          end
+
+          def with_extension(extension)
+            @extension = extension
+            self
+          end
+
+          private
+
+          def proxy_cannot_render?(file)
+            !(file&.relative_path&.include?("blocks/") || file&.relative_path&.include?("snippets/"))
+          end
+
+          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_files
+              .map { |file_path| @extension[file_path] unless @extension.nil? }
+              .compact
+          end
+
+          def syncer_templates
+            @syncer&.pending_files || []
+          end
+
+          def cookie_files
+            CGI::Cookie.parse(cookie)["hot_reload_files"].join.split(",") || []
+          end
+
+          def core?(path)
+            core_endpoints.include?(path)
+          end
+
+          def current_path
+            rack_env["PATH_INFO"]
+          end
+
+          def cookie
+            rack_env["HTTP_COOKIE"]
+          end
+
+          def core_endpoints
+            @core_endpoints || []
+          end
+
+          def rack_env
+            @rack_env || {}
+          end
+        end
+      end
+    end
+  end
+end

package/assets/cli-ruby/lib/shopify_cli/theme/extension/dev_server/watcher.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require "shopify_cli/file_system_listener"
+require "shopify_cli/theme/dev_server"
+require "forwardable"
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class DevServer < ShopifyCLI::Theme::DevServer
+        # Watches for file changes and publish events to the theme
+        class Watcher
+          extend Forwardable
+
+          def_delegators :@listener, :add_observer, :changed, :notify_observers
+
+          def initialize(ctx, extension:, syncer:, poll: false)
+            @ctx = ctx
+            @extension = extension
+            @syncer = syncer
+            @listener = FileSystemListener.new(root: @extension.root.to_s, force_poll: poll, ignore_regex: nil)
+
+            add_observer(self, :notify_updates)
+          end
+
+          def start
+            @listener.start
+          end
+
+          def stop
+            @listener.stop
+          end
+
+          def notify_updates(modified, added, removed)
+            @syncer.enqueue_updates(files(modified).select { |file| @extension.extension_file?(file) })
+            @syncer.enqueue_creates(files(added).select { |file| @extension.extension_file?(file) })
+            @syncer.enqueue_deletes(files(removed))
+          end
+
+          def files(paths)
+            paths.map { |file| @extension[file] }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+require "pathname"
+
+require "shopify_cli/theme/extension/app_extension"
+require "shopify_cli/theme/dev_server"
+require "shopify_cli/theme/extension/host_theme"
+require "shopify_cli/theme/syncer"
+
+require_relative "dev_server/local_assets"
+require_relative "dev_server/proxy_param_builder"
+require_relative "dev_server/watcher"
+require_relative "dev_server/hooks/file_change_hook"
+require_relative "dev_server/hot_reload"
+require_relative "dev_server/hot_reload/script_injector"
+require_relative "syncer"
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class DevServer < ShopifyCLI::Theme::DevServer
+        # Themes
+        Proxy = ShopifyCLI::Theme::DevServer::Proxy
+        CdnFonts = ShopifyCLI::Theme::DevServer::CdnFonts
+
+        # Extensions
+        ScriptInjector = ShopifyCLI::Theme::Extension::DevServer::HotReload::ScriptInjector
+
+        attr_accessor :project, :specification_handler
+
+        class << self
+          def start(ctx, root, port: 9292, theme: nil, project:, specification_handler:)
+            instance.project = project
+            instance.specification_handler = specification_handler
+
+            super(ctx, root, port: port, theme: theme)
+          end
+        end
+
+        private
+
+        def middleware_stack
+          @app = Proxy.new(ctx, theme, param_builder)
+          @app = CdnFonts.new(@app, theme: theme)
+          @app = LocalAssets.new(ctx, @app, extension)
+          @app = HotReload.new(ctx, @app, broadcast_hooks: broadcast_hooks, watcher: watcher, mode: mode,
+            script_injector: script_injector)
+        end
+
+        def sync_theme
+          # Ensures the host theme exists
+          theme
+
+          # Ensure the theme app extension is pushed
+          extension
+        end
+
+        def syncer
+          @syncer ||= Syncer.new(
+            ctx,
+            extension: extension,
+            project: project,
+            specification_handler: specification_handler
+          )
+        end
+
+        def theme
+          @theme ||= if theme_identifier
+            theme = ShopifyCLI::Theme::Theme.find_by_identifier(ctx, identifier: theme_identifier)
+            theme || ctx.abort(not_found_error_message)
+          else
+            HostTheme.find_or_create!(ctx)
+          end
+        end
+
+        def extension
+          return @extension if @extension
+
+          app = fetch_theme_app_extension_info.dig(*%w(data app)) || {}
+
+          app_id = app["id"]
+
+          registrations = app["extensionRegistrations"] || []
+          registration = registrations.find { |r| r["type"] == "THEME_APP_EXTENSION" } || {}
+
+          location = registration.dig(*%w(draftVersion location))
+          registration_id = registration["id"]
+
+          @extension = AppExtension.new(
+            ctx,
+            root: root,
+            app_id: app_id,
+            location: location,
+            registration_id: registration_id,
+          )
+        end
+
+        def fetch_theme_app_extension_info
+          params = {
+            api_key: project.app.api_key,
+            type: specification_handler.identifier.downcase,
+          }
+
+          PartnersAPI.query(@ctx, "get_extension_registrations", **params)
+        end
+
+        def watcher
+          @watcher ||= Watcher.new(ctx, syncer: syncer, extension: extension, poll: poll)
+        end
+
+        def param_builder
+          @param_builder ||= ProxyParamBuilder
+            .new
+            .with_extension(extension)
+            .with_syncer(syncer)
+        end
+
+        def setup_server
+          CLI::UI::Frame.open(frame_title, color: :magenta, timing: nil) do
+            ctx.puts(preview_message)
+          end
+
+          watcher.start
+          syncer.start
+        end
+
+        # Hooks
+
+        def broadcast_hooks
+          file_handler = Hooks::FileChangeHook.new(ctx, extension: extension, syncer: syncer)
+          [file_handler]
+        end
+
+        def script_injector
+          ScriptInjector.new(ctx)
+        end
+
+        # Messages
+
+        def frame_title
+          ctx.message("serve.frame_title", root)
+        end
+
+        def preview_message
+          ctx.message("serve.preview_message", extension.location, theme.editor_url, address)
+        end
+      end
+    end
+  end
+end

package/assets/cli-ruby/lib/shopify_cli/theme/extension/host_theme.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+require "fileutils"
+require_relative "../syncer"
+require_relative "../development_theme"
+require "shopify_cli/git"
+require "shopify_cli/theme/extension/ui/host_theme_progress_bar"
+require "tmpdir"
+
+require "shopify_cli/git"
+require "shopify_cli/theme/development_theme"
+require "shopify_cli/theme/syncer"
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class HostTheme < DevelopmentTheme
+        def id
+          ShopifyCLI::DB.get(:host_theme_id)
+        end
+
+        def name
+          existing_name = ShopifyCLI::DB.get(:host_theme_name)
+          if existing_name.nil? || existing_name.length > API_NAME_LIMIT
+            generate_host_theme_name
+          else
+            existing_name
+          end
+        end
+
+        def ensure_exists!
+          if exists?
+            @ctx.debug("Using temporary host theme: ##{id} #{name}")
+          else
+            create
+            @ctx.debug("Created temporary host theme: #{@id}")
+          end
+
+          self
+        end
+
+        def self.delete(ctx)
+          new(ctx, root: nil).delete
+        end
+
+        def delete
+          delete_theme if exists? # Avoid deleting any existing development theme logic
+
+          ShopifyCLI::DB.del(:host_theme_id) if ShopifyCLI::DB.exists?(:host_theme_id)
+          ShopifyCLI::DB.del(:host_theme_name) if ShopifyCLI::DB.exists?(:host_theme_name)
+        end
+
+        def create
+          super
+          ShopifyCLI::DB.set(host_theme_id: @id)
+
+          generate_tmp_theme
+        end
+
+        def self.find_or_create!(ctx)
+          new(ctx, root: nil).ensure_exists!
+        end
+
+        private
+
+        def generate_host_theme_name
+          hostname = Socket.gethostname.split(".").shift
+          hash = SecureRandom.hex(3)
+
+          theme_name = "App Ext. Host ()"
+          hostname_character_limit = API_NAME_LIMIT - theme_name.length - hash.length - 1
+          identifier = encode_identifier("#{hash}-#{hostname[0, hostname_character_limit]}")
+          theme_name = "App Ext. Host (#{identifier})"
+
+          ShopifyCLI::DB.set(host_theme_name: theme_name)
+
+          theme_name
+        end
+
+        def generate_tmp_theme
+          ctx = @ctx.dup
+
+          Dir.mktmpdir do |dir|
+            @root = Pathname.new(dir)
+            ctx.root = dir
+
+            syncer = ShopifyCLI::Theme::Syncer.new(ctx, theme: self)
+
+            begin
+              syncer.start_threads
+              ::CLI::UI::Frame.open(ctx.message("theme.push.info.pushing", name, id, shop)) do
+                UI::HostThemeProgressBar.new(syncer, dir).progress(:upload_theme!, delete: false)
+              end
+            rescue Errno::ENOENT => e
+              ctx.debug(e.message)
+            ensure
+              syncer.shutdown
+            end
+          end
+        end
+      end
+    end
+  end
+end

package/assets/cli-ruby/lib/shopify_cli/theme/extension/syncer/extension_serve_job.rb

@@ -0,0 +1,133 @@
+# frozen_string_literal: true
+require "project_types/extension/loaders/project"
+require "project_types/extension/loaders/specification_handler"
+require "shopify_cli/partners_api"
+require "shopify_cli/thread_pool/job"
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class Syncer
+        class ExtensionServeJob < ThreadPool::Job
+          POLL_FREQUENCY = 0.5 # second
+          PUSH_INTERVAL = 5 # seconds
+
+          RESPONSE_FIELD = %w(data extensionUpdateDraft)
+          VERSION_FIELD = "extensionVersion"
+          USER_ERRORS_FIELD = "userErrors"
+          ERROR_FILE_REGEX = /\[([^\]\[]*)\]/
+
+          def initialize(ctx, syncer:, extension:, project:, specification_handler:)
+            super(POLL_FREQUENCY)
+
+            @ctx = ctx
+            @extension = extension
+            @project = project
+            @specification_handler = specification_handler
+
+            @syncer = syncer
+            @syncer_mutex = Mutex.new
+
+            @job_in_progress = false
+            @job_in_progress_mutex = Mutex.new
+          end
+
+          def perform!
+            return unless @syncer.any_operation?
+            return if job_in_progress?
+            return if recently_synced? && !@syncer.any_blocking_operation?
+
+            job_in_progress!
+
+            input = {
+              api_key: @project.app.api_key,
+              registration_id: @project.registration_id,
+              config: JSON.generate(@specification_handler.config(@ctx)),
+              extension_context: @specification_handler.extension_context(@ctx),
+            }
+            response = ShopifyCLI::PartnersAPI.query(@ctx, "extension_update_draft", **input).dig(*RESPONSE_FIELD)
+            user_errors = response.dig(USER_ERRORS_FIELD)
+
+            if user_errors
+              @ctx.puts(error_message(@project.title))
+              error_files = erroneous_files(user_errors)
+              print_items(error_files)
+            else
+              @ctx.puts(success_message(@project.title))
+              print_items({}.freeze)
+              ::Extension::Tasks::Converters::VersionConverter.from_hash(@ctx, response.dig(VERSION_FIELD))
+            end
+
+            @syncer_mutex.synchronize do
+              @syncer.pending_operations.clear
+              @syncer.latest_sync = Time.now
+            end
+
+          ensure
+            job_in_progress!(false)
+          end
+
+          private
+
+          def job_in_progress!(in_progress = true)
+            @job_in_progress_mutex.synchronize { @job_in_progress = in_progress }
+          end
+
+          def job_in_progress?
+            @job_in_progress
+          end
+
+          def recently_synced?
+            Time.now - @syncer.latest_sync < PUSH_INTERVAL
+          end
+
+          def timestamp
+            Time.now.strftime("%T")
+          end
+
+          def success_message(project)
+            "#{timestamp} {{green:Pushed}} {{>}} {{blue:'#{project}'}} to a draft"
+          end
+
+          def error_message(project)
+            "#{timestamp} {{red:Error}}  {{>}} {{blue:'#{project}'}} could not be pushed:"
+          end
+
+          def print_file_success(file)
+            @ctx.puts("{{blue:- #{file.relative_path}}}")
+          end
+
+          def print_file_error(file, err)
+            @ctx.puts("{{red:- #{file.relative_path}}}")
+            @ctx.puts("{{red:  - Cause: #{err}}}")
+          end
+
+          def erroneous_files(errors)
+            files = {}
+            errors.each do |e|
+              path = e["message"][ERROR_FILE_REGEX, 1]
+              file = @extension[path]
+              files[file] = e["message"]
+            end
+            files
+          end
+
+          def print_items(erroneous_files)
+            @syncer.pending_files.each do |file|
+              err = erroneous_files.dig(file)
+              if err
+                print_file_error(file, err)
+                erroneous_files.delete(file)
+              else
+                print_file_success(file)
+              end
+            end
+            erroneous_files.each do |file, err|
+              print_file_error(file, err)
+            end
+          end
+        end
+      end
+    end
+  end
+end

package/assets/cli-ruby/lib/shopify_cli/theme/extension/syncer/operation.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+require "pathname"
+
+module ShopifyCLI
+  module Theme
+    module Extension
+      class Syncer
+        class Operation < Struct.new(:file, :kind)
+          def delete?
+            kind == :delete
+          end
+
+          def create?
+            kind == :create
+          end
+        end
+      end
+    end
+  end
+end