shopify-cli 1.14.0 → 2.0.0

data/lib/shopify-cli/theme/dev_server/hot-reload.js

@@ -0,0 +1,93 @@
+(() => {
+  function connect() {
+    const eventSource = new EventSource('/hot-reload');
+
+    eventSource.onmessage = handleUpdate;
+
+    eventSource.onopen = () => console.log('[HotReload] SSE connected.');
+
+    eventSource.onclose = () => {
+      console.log('[HotReload] SSE closed. Attempting to reconnect...');
+
+      setTimeout(connect, 5000);
+    }
+
+    eventSource.onerror = () => eventSource.close();
+  }
+
+  connect();
+
+  function handleUpdate(message) {
+    var data = JSON.parse(message.data);
+
+    // Assume only one file is modified at a time
+    var modified = data.modified[0];
+
+    if (isCssFile(modified)) {
+      reloadCssFile(modified)
+    } else if (isSectionFile(modified)) {
+      reloadSection(modified);
+    } else {
+      console.log(`[HotReload] Refreshing entire page`);
+      window.location.reload();
+    }
+  }
+
+  function isCssFile(filename) {
+    return filename.endsWith('.css');
+  }
+
+  function reloadCssFile(filename) {
+    // Find a stylesheet link starting with /assets (locally-served only) containing the filename
+    let link = document.querySelector(`link[href^="/assets"][href*="${filename}"][rel="stylesheet"]`);
+
+    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}`);
+    }
+  }
+
+  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.element = document.querySelector(`[id^='shopify-section'][id$='${this.name}']`);
+    }
+
+    valid() {
+      return this.filename.startsWith('sections/') && this.element;
+    }
+
+    async refresh() {
+      var url = new URL(window.location.href);
+      url.searchParams.append('section_id', this.name);
+
+      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`);
+        } 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}`);
+      }
+    }
+  }
+})();

data/lib/shopify-cli/theme/dev_server/hot_reload.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module ShopifyCli
+  module Theme
+    module DevServer
+      class HotReload
+        def initialize(ctx, app, theme:, watcher:, ignore_filter: nil)
+          @ctx = ctx
+          @app = app
+          @theme = theme
+          @streams = SSE::Streams.new
+          @watcher = watcher
+          @watcher.add_observer(self, :notify_streams_of_file_change)
+          @ignore_filter = ignore_filter
+        end
+
+        def call(env)
+          if env["PATH_INFO"] == "/hot-reload"
+            create_stream
+          else
+            status, headers, body = @app.call(env)
+
+            body = inject_hot_reload_javascript(body) if request_is_html?(headers)
+
+            [status, headers, body]
+          end
+        end
+
+        def close
+          @streams.close
+        end
+
+        def notify_streams_of_file_change(modified, added, _removed)
+          files = (modified + added).reject { |file| @ignore_filter&.ignore?(file) }
+            .map { |file| @theme[file].relative_path }
+
+          @streams.broadcast(JSON.generate(
+            modified: files,
+          ))
+
+          @ctx.debug("[HotReload] Modified #{files.join(", ")}")
+        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_script = "<script>\n#{hot_reload_js}</script>"
+          body = body.join.gsub("</body>", "#{hot_reload_script}\n</body>")
+
+          [body]
+        end
+
+        def create_stream
+          stream = @streams.new
+
+          @ctx.debug("[HotReload] Connected to SSE stream")
+
+          [
+            200,
+            {
+              "Content-Type" => "text/event-stream",
+              "Cache-Control" => "no-cache",
+              "webrick.chunked" => true,
+            },
+            stream,
+          ]
+        end
+      end
+    end
+  end
+end

data/lib/shopify-cli/theme/dev_server/local_assets.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+module ShopifyCli
+  module Theme
+    module DevServer
+      class LocalAssets
+        ASSET_REGEX = %r{//cdn.shopify.com/s/.*?/(assets/.+\.(?:css|js))}
+
+        class FileBody
+          def initialize(path)
+            @path = path
+          end
+
+          # Naive implementation. Only used in unit tests.
+          def each
+            yield @path.read
+          end
+
+          # Rack will stream a body that responds to `to_path`
+          def to_path
+            @path.to_path
+          end
+        end
+
+        def initialize(ctx, app, theme:)
+          @ctx = ctx
+          @app = app
+          @theme = theme
+        end
+
+        def call(env)
+          if env["PATH_INFO"].start_with?("/assets")
+            # Serve from disk
+            serve_file(env["PATH_INFO"])
+          else
+            # Proxy the request, and replace the URLs in the response
+            status, headers, body = @app.call(env)
+            body = replace_asset_urls(body)
+            [status, headers, body]
+          end
+        end
+
+        private
+
+        def serve_file(path_info)
+          path = @theme.root.join(path_info[1..-1])
+          if path.file? && path.readable?
+            [
+              200,
+              {
+                "Content-Type" => MimeType.by_filename(path).to_s,
+                "Content-Length" => path.size.to_s,
+              },
+              FileBody.new(path),
+            ]
+          else
+            fail(404, "Not found")
+          end
+        end
+
+        def fail(status, body)
+          [
+            status,
+            {
+              "Content-Type" => "text/plain",
+              "Content-Length" => body.size.to_s,
+            },
+            [body],
+          ]
+        end
+
+        def replace_asset_urls(body)
+          replaced_body = body.join.gsub(ASSET_REGEX) do |match|
+            path = Pathname.new(Regexp.last_match[1])
+            if @theme.asset_paths.include?(path)
+              "/#{path}"
+            else
+              match
+            end
+          end
+
+          [replaced_body]
+        end
+      end
+    end
+  end
+end

data/lib/shopify-cli/theme/dev_server/proxy.rb

@@ -0,0 +1,205 @@
+# frozen_string_literal: true
+require "net/http"
+require "stringio"
+require "time"
+
+module ShopifyCli
+  module Theme
+    module DevServer
+      HOP_BY_HOP_HEADERS = [
+        "connection",
+        "keep-alive",
+        "proxy-authenticate",
+        "proxy-authorization",
+        "te",
+        "trailer",
+        "transfer-encoding",
+        "upgrade",
+      ]
+
+      class Proxy
+        SESSION_COOKIE_NAME = "_secure_session_id"
+        SESSION_COOKIE_REGEXP = /#{SESSION_COOKIE_NAME}=(\h+)/
+        SESSION_COOKIE_MAX_AGE = 60 * 60 * 23 # 1 day - leeway of 1h
+
+        def initialize(ctx, theme:, syncer:)
+          @ctx = ctx
+          @theme = theme
+          @syncer = syncer
+          @core_endpoints = Set.new
+
+          @secure_session_id = nil
+          @last_session_cookie_refresh = nil
+        end
+
+        def call(env)
+          headers = extract_http_request_headers(env)
+          headers["Host"] = @theme.shop
+          headers["Cookie"] = add_session_cookie(headers["Cookie"])
+          headers["Accept-Encoding"] = "none"
+          headers["User-Agent"] = "Shopify CLI"
+
+          query = URI.decode_www_form(env["QUERY_STRING"]).to_h
+          replace_templates = build_replace_templates_param(env)
+
+          response = if replace_templates.any?
+            # Pass to SFR the recently modified templates in `replace_templates` body param
+            headers["Authorization"] = "Bearer #{bearer_token}"
+            form_data = URI.decode_www_form(env["rack.input"].read).to_h
+            request(
+              "POST", env["PATH_INFO"],
+              headers: headers,
+              query: query,
+              form_data: form_data.merge(replace_templates).merge(_method: env["REQUEST_METHOD"]),
+            )
+          else
+            request(
+              env["REQUEST_METHOD"], env["PATH_INFO"],
+              headers: headers,
+              query: query,
+              body_stream: (env["rack.input"] if has_body?(headers)),
+            )
+          end
+
+          headers = get_response_headers(response)
+
+          unless headers["x-storefront-renderer-rendered"]
+            @core_endpoints << env["PATH_INFO"]
+          end
+
+          body = response.body || [""]
+          body = [body] unless body.respond_to?(:each)
+          [response.code, headers, body]
+        end
+
+        private
+
+        def has_body?(headers)
+          headers["Content-Length"] || headers["Transfer-Encoding"]
+        end
+
+        def bearer_token
+          ShopifyCli::DB.get(:storefront_renderer_production_exchange_token) ||
+            raise(KeyError, "storefront_renderer_production_exchange_token missing")
+        end
+
+        def extract_http_request_headers(env)
+          headers = HeaderHash.new
+
+          env.each do |name, value|
+            next if value.nil?
+
+            if /^HTTP_[A-Z0-9_]+$/.match?(name) || name == "CONTENT_TYPE" || name == "CONTENT_LENGTH"
+              headers[reconstruct_header_name(name)] = value
+            end
+          end
+
+          x_forwarded_for = (headers["X-Forwarded-For"].to_s.split(/, +/) << env["REMOTE_ADDR"]).join(", ")
+          headers["X-Forwarded-For"] = x_forwarded_for
+
+          headers
+        end
+
+        def normalize_headers(headers)
+          mapped = headers.map do |k, v|
+            [k, v.is_a?(Array) ? v.join("\n") : v]
+          end
+          HeaderHash.new(Hash[mapped])
+        end
+
+        def reconstruct_header_name(name)
+          name.sub(/^HTTP_/, "").gsub("_", "-")
+        end
+
+        def build_replace_templates_param(env)
+          params = {}
+
+          # Core doesn't support replace_templates
+          return params if @core_endpoints.include?(env["PATH_INFO"])
+
+          pending_templates = @syncer.pending_updates.select do |file|
+            # Only replace Liquid or JSON files
+            file.liquid? || file.json?
+          end
+
+          pending_templates.each do |path|
+            params["replace_templates[#{path.relative_path}]"] = path.read
+          end
+
+          params
+        end
+
+        def add_session_cookie(cookie_header)
+          cookie_header = if cookie_header
+            cookie_header.dup
+          else
+            +""
+          end
+
+          expected_session_cookie = "#{SESSION_COOKIE_NAME}=#{secure_session_id}"
+
+          unless cookie_header.include?(expected_session_cookie)
+            if cookie_header.include?(SESSION_COOKIE_NAME)
+              cookie_header.sub!(SESSION_COOKIE_REGEXP, expected_session_cookie)
+            else
+              cookie_header << "; " unless cookie_header.empty?
+              cookie_header << expected_session_cookie
+            end
+          end
+
+          cookie_header
+        end
+
+        def secure_session_id_expired?
+          return true unless @secure_session_id && @last_session_cookie_refresh
+          Time.now - @last_session_cookie_refresh >= SESSION_COOKIE_MAX_AGE
+        end
+
+        def secure_session_id
+          if secure_session_id_expired?
+            @ctx.debug("Refreshing preview _secure_session_id cookie")
+            response = request("HEAD", "/", query: { preview_theme_id: @theme.id })
+            @secure_session_id = response["set-cookie"][SESSION_COOKIE_REGEXP, 1]
+            @last_session_cookie_refresh = Time.now
+          end
+
+          @secure_session_id
+        end
+
+        def get_response_headers(response)
+          response_headers = normalize_headers(
+            response.respond_to?(:headers) ? response.headers : response.to_hash
+          )
+          # According to https://tools.ietf.org/html/draft-ietf-httpbis-p1-messaging-14#section-7.1.3.1Acc
+          # should remove hop-by-hop header fields
+          # (Taken from Rack::Proxy)
+          response_headers.reject! { |k| HOP_BY_HOP_HEADERS.include?(k.downcase) }
+
+          if response_headers["location"]&.include?("myshopify.com")
+            response_headers["location"].gsub!(%r{(https://#{@theme.shop})}, "http://127.0.0.1:9292")
+          end
+
+          response_headers
+        end
+
+        def request(method, path, headers: nil, query: {}, form_data: nil, body_stream: nil)
+          uri = URI.join("https://#{@theme.shop}", path)
+          uri.query = URI.encode_www_form(query.merge(_fd: 0, pb: 0))
+
+          @ctx.debug("Proxying #{method} #{uri}")
+
+          Net::HTTP.start(uri.host, 443, use_ssl: true) do |http|
+            req_class = Net::HTTP.const_get(method.capitalize)
+            req = req_class.new(uri)
+            req.initialize_http_header(headers) if headers
+            req.set_form_data(form_data) if form_data
+            req.body_stream = body_stream if body_stream
+            response = http.request(req)
+            @ctx.debug("`-> #{response.code} request_id: #{response["x-request-id"]}")
+            response
+          end
+        end
+      end
+    end
+  end
+end