proscenium 0.6.0-x86_64-darwin → 0.7.0-x86_64-darwin

data/lib/proscenium/css_module.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
-class Proscenium::CssModule
-  class NotFound < StandardError
+module Proscenium::CssModule
+  extend ActiveSupport::Autoload
+
+  class StylesheetNotFound < StandardError
     def initialize(pathname)
       @pathname = pathname
       super
@@ -12,53 +14,30 @@ class Proscenium::CssModule
     end
   end
 
-  def initialize(path)
-    @path = path
-    @css_module_path = "#{path}.module.css"
-  end
+  autoload :ClassNamesResolver
+  autoload :Resolver # deprecated
 
-  # Parses the given `content` for CSS modules names ('class' attributes beginning with '@'), and
-  # returns the content with said CSS Modules replaced with the compiled class names.
+  # Like `css_modules`, but will raise if the stylesheet cannot be found.
   #
-  # Example:
-  #   <div class="@my_css_module_name"></div>
-  def compile_class_names(content)
-    doc = Nokogiri::HTML::DocumentFragment.parse(content)
-
-    return content if (modules = doc.css('[class*="@"]')).empty?
-
-    modules.each do |ele|
-      classes = ele.classes.map { |cls| cls.starts_with?('@') ? class_names!(cls[1..]) : cls }
-      ele['class'] = classes.join(' ')
-    end
-
-    doc.to_html.html_safe
-  end
-
-  # @returns [Array] of class names generated from the given CSS module `names`.
-  def class_names(*names)
-    side_load_css_module
-    names.flatten.compact.map { |name| "#{name.to_s.camelize(:lower)}#{hash}" }
+  # @param name [Array, String]
+  def css_module!(names)
+    cssm.class_names!(names).join ' '
   end
 
-  # Like #class_names, but requires that the stylesheet exists.
+  # Accepts one or more CSS class names, and transforms them into CSS module names.
   #
-  # @raises Proscenium::CssModule::NotFound if stylesheet does not exists.
-  def class_names!(...)
-    raise NotFound, @css_module_path unless Rails.root.join(@css_module_path).exist?
-
-    class_names(...)
+  # @param name [Array, String]
+  def css_module(names)
+    cssm.class_names(names).join ' '
   end
 
   private
 
-  def hash
-    @hash ||= Digest::SHA1.hexdigest("/#{@css_module_path}")[..7]
+  def path
+    self.class.path
   end
 
-  def side_load_css_module
-    return unless Rails.application.config.proscenium.side_load
-
-    Proscenium::SideLoad.append "#{@path}.module", :css
+  def cssm
+    @cssm ||= Resolver.new(path)
   end
 end

data/lib/proscenium/esbuild/golib.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+require 'ffi'
+require 'oj'
+
+module Proscenium
+  class Esbuild::Golib
+    class Result < FFI::Struct
+      layout :success, :bool,
+             :response, :string
+    end
+
+    module Request
+      extend FFI::Library
+      ffi_lib Pathname.new(__dir__).join('../../../bin/proscenium').to_s
+
+      enum :environment, [:development, 1, :test, :production]
+
+      attach_function :build, [
+        :string,      # path or entry point
+        :string,      # root
+        :string,      # base URL of the Rails app. eg. https://example.com
+        :environment, # Rails environment as a Symbol
+        :string,      # path to import map, relative to root
+        :bool         # debugging enabled?
+      ], Result.by_value
+
+      attach_function :resolve, [
+        :string,      # path or entry point
+        :string,      # root
+        :environment, # Rails environment as a Symbol
+        :string       # path to import map, relative to root
+      ], Result.by_value
+    end
+
+    class BuildError < StandardError
+      attr_reader :error, :path
+
+      def initialize(path, error)
+        error = Oj.load(error, mode: :strict).deep_transform_keys(&:underscore)
+
+        super "Failed to build '#{path}' -- #{error['text']}"
+      end
+    end
+
+    class ResolveError < StandardError
+      attr_reader :error_msg, :path
+
+      def initialize(path, error_msg)
+        super "Failed to resolve '#{path}' -- #{error_msg}"
+      end
+    end
+
+    def initialize(root: nil, base_url: nil)
+      @root = root || Rails.root
+      @base_url = base_url
+    end
+
+    def self.resolve(path)
+      new.resolve(path)
+    end
+
+    def self.build(path)
+      new.build(path)
+    end
+
+    def build(path)
+      result = Request.build(path, @root.to_s, @base_url, Rails.env.to_sym, import_map,
+                             Rails.env.development?)
+      raise BuildError.new(path, result[:response]) unless result[:success]
+
+      result[:response]
+    end
+
+    def resolve(path)
+      result = Request.resolve(path, @root.to_s, Rails.env.to_sym, import_map)
+      raise ResolveError.new(path, result[:response]) unless result[:success]
+
+      result[:response]
+    end
+
+    private
+
+    def import_map
+      return unless (path = Rails.root&.join('config'))
+
+      if (json = path.join('import_map.json')).exist?
+        return json.relative_path_from(@root).to_s
+      end
+      if (js = path.join('import_map.js')).exist?
+        return js.relative_path_from(@root).to_s
+      end
+
+      nil
+    end
+  end
+end

data/lib/proscenium/esbuild.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Proscenium
+  class Esbuild
+    class CompileError < StandardError; end
+
+    extend ActiveSupport::Autoload
+
+    autoload :Golib
+
+    def self.build(...)
+      new(...).build
+    end
+
+    def initialize(path, root:, base_url:)
+      @path = path
+      @root = root
+      @base_url = base_url
+    end
+
+    def build
+      Proscenium::Esbuild::Golib.new(root: @root, base_url: @base_url).build(@path)
+    end
+
+    private
+
+    def cache_query_string
+      q = Proscenium.config.cache_query_string
+      q ? "--cache-query-string #{q}" : nil
+    end
+  end
+end

data/lib/proscenium/helper.rb

@@ -15,28 +15,5 @@ module Proscenium
 
       super
     end
-
-    def side_load_stylesheets
-      return unless Proscenium::Current.loaded
-
-      Proscenium::Current.loaded[:css].map do |sheet|
-        stylesheet_link_tag(sheet, id: "_#{Digest::SHA1.hexdigest("/#{sheet}")[..7]}")
-      end.join("\n").html_safe
-    end
-
-    def side_load_javascripts(**options)
-      return unless Proscenium::Current.loaded
-
-      javascript_include_tag(*Proscenium::Current.loaded[:js], options)
-    end
-
-    def proscenium_dev
-      return unless Proscenium.config.auto_reload
-
-      javascript_tag %(
-        import autoReload from '/proscenium-runtime/auto_reload.js';
-        autoReload('#{Proscenium::Railtie.websocket_mount_path}');
-      ), type: 'module', defer: true
-    end
   end
 end

data/lib/proscenium/log_subscriber.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require 'active_support/log_subscriber'
+
+module Proscenium
+  class LogSubscriber < ActiveSupport::LogSubscriber
+    def sideload(event)
+      info do
+        "  [Proscenium] Side loaded #{event.payload[:identifier]}"
+      end
+    end
+
+    def build(event)
+      path = event.payload[:identifier]
+      path = path.start_with?(/https?%3A%2F%2F/) ? CGI.unescape(path) : path
+
+      info do
+        message = +"[Proscenium] Building #{path}"
+        message << " (Duration: #{event.duration.round(1)}ms | Allocations: #{event.allocations})"
+        message << "\n" if defined?(Rails.env) && Rails.env.development?
+      end
+    end
+  end
+end
+
+Proscenium::LogSubscriber.attach_to :proscenium

data/lib/proscenium/middleware/base.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require 'open3'
+require 'oj'
 
 module Proscenium
   class Middleware
@@ -9,7 +10,15 @@ module Proscenium
 
       # Error when the result of the build returns an error. For example, when esbuild returns
       # errors.
-      class CompileError < StandardError; end
+      class CompileError < StandardError
+        attr_reader :detail, :file
+
+        def initialize(args)
+          @detail = args[:detail]
+          @file = args[:file]
+          super "Failed to build '#{args[:file]}' -- #{detail}"
+        end
+      end
 
       def self.attempt(request)
         new(request).renderable!&.attempt
@@ -25,12 +34,25 @@ module Proscenium
 
       private
 
+      def real_path
+        @request.path
+      end
+
+      # @return [String] the path to the file without the leading slash which will be built.
+      def path_to_build
+        @request.path[1..]
+      end
+
+      def sourcemap?
+        @request.path.ends_with?('.map')
+      end
+
       def renderable?
         file_readable?
       end
 
-      def file_readable?(file = @request.path_info)
-        return unless (path = clean_path(file))
+      def file_readable?
+        return unless (path = clean_path(sourcemap? ? real_path[0...-4] : real_path))
 
         file_stat = File.stat(Pathname(root).join(path.delete_prefix('/').b).to_s)
       rescue SystemCallError
@@ -50,7 +72,7 @@ module Proscenium
 
       def content_type
         @content_type ||
-          ::Rack::Mime.mime_type(::File.extname(@request.path_info), nil) ||
+          ::Rack::Mime.mime_type(::File.extname(path_to_build), nil) ||
           'application/javascript'
       end
 
@@ -59,9 +81,10 @@ module Proscenium
         response.write content
         response.content_type = content_type
         response['X-Proscenium-Middleware'] = name
+        response.set_header 'SourceMap', "#{@request.path_info}.map"
 
         if Proscenium.config.cache_query_string && Proscenium.config.cache_max_age
-          response['Cache-Control'] = "public, max-age=#{Proscenium.config.cache_max_age}"
+          response.cache! Proscenium.config.cache_max_age
         end
 
         yield response if block_given?
@@ -69,37 +92,6 @@ module Proscenium
         response.finish
       end
 
-      def build(cmd)
-        stdout, stderr, status = Open3.capture3(cmd)
-
-        unless status.success?
-          raise self.class::CompileError, stderr if status.exitstatus == 2
-
-          raise BuildError, stderr
-        end
-
-        unless stderr.empty?
-          raise BuildError, "Proscenium build of #{name}:'#{@request.fullpath}' failed -- #{stderr}"
-        end
-
-        stdout
-      end
-
-      def benchmark(type)
-        super logging_message(type)
-      end
-
-      # rubocop:disable Style/FormatStringToken
-      def logging_message(type)
-        format '[Proscenium] Request (%s) %s for %s at %s',
-               type, @request.fullpath, @request.ip, Time.now.to_default_s
-      end
-      # rubocop:enable Style/FormatStringToken
-
-      def logger
-        Rails.logger
-      end
-
       def name
         @name ||= self.class.name.split('::').last.downcase
       end

data/lib/proscenium/middleware/esbuild.rb

@@ -3,55 +3,29 @@
 module Proscenium
   class Middleware
     class Esbuild < Base
-      class CompileError < StandardError
-        attr_reader :detail
-
-        def initialize(detail)
-          @detail = ActiveSupport::HashWithIndifferentAccess.new(Oj.load(detail, mode: :strict))
-
-          super "#{@detail[:text]} in #{@detail[:location][:file]}:#{@detail[:location][:line]}"
+      class CompileError < Base::CompileError
+        def initialize(args)
+          detail = args[:detail]
+          detail = ActiveSupport::HashWithIndifferentAccess.new(Oj.load(detail, mode: :strict))
+
+          args[:detail] = if detail[:location]
+                            "#{detail[:text]} in #{detail[:location][:file]}:" +
+                              detail[:location][:line].to_s
+                          else
+                            detail[:text]
+                          end
+
+          super args
         end
       end
 
       def attempt
-        benchmark :esbuild do
-          render_response build([
-            "#{cli} --root #{root}",
-            cache_query_string,
-            "--lightningcss-bin #{lightningcss_cli} #{path}"
-          ].compact.join(' '))
-        end
-      rescue CompileError => e
-        render_response "export default #{e.detail.to_json}" do |response|
-          response['X-Proscenium-Middleware'] = 'Esbuild::CompileError'
-        end
-      end
-
-      private
-
-      def path
-        @request.path[1..]
-      end
-
-      def cli
-        if ENV['PROSCENIUM_TEST']
-          'deno run -q --import-map import_map.json -A lib/proscenium/compilers/esbuild.js'
-        else
-          Gem.bin_path 'proscenium', 'esbuild'
+        ActiveSupport::Notifications.instrument('build.proscenium', identifier: path_to_build) do
+          render_response Proscenium::Esbuild.build(path_to_build, root: root,
+                                                                   base_url: @request.base_url)
         end
-      end
-
-      def lightningcss_cli
-        if ENV['PROSCENIUM_TEST']
-          'bin/lightningcss'
-        else
-          Gem.bin_path 'proscenium', 'lightningcss'
-        end
-      end
-
-      def cache_query_string
-        q = Proscenium.config.cache_query_string
-        q ? "--cache-query-string #{q}" : nil
+      rescue Proscenium::Esbuild::CompileError => e
+        raise self.class::CompileError, { file: @request.fullpath, detail: e.message }, caller
       end
     end
   end

data/lib/proscenium/middleware/url.rb

@@ -2,7 +2,7 @@
 
 module Proscenium
   class Middleware
-    # Handles requests prefixed with "url:https://"; downloading, caching, and compiling them.
+    # Handles requests for URL encoded URL's.
     class Url < Esbuild
       private
 
@@ -11,11 +11,6 @@ module Proscenium
       def renderable?
         true
       end
-
-      # @override [Esbuild]
-      def path
-        CGI.unescape(@request.path)[1..]
-      end
     end
   end
 end

data/lib/proscenium/middleware.rb

@@ -9,9 +9,7 @@ module Proscenium
 
     autoload :Base
     autoload :Esbuild
-    autoload :Runtime
     autoload :Url
-    autoload :OutsideRoot
 
     def initialize(app)
       @app = app
@@ -27,37 +25,35 @@ module Proscenium
 
     private
 
-    # Look for the precompiled file in public/assets first, then fallback to the Proscenium
-    # middleware that matches the type of file requested, ie: .js => esbuild.
-    # See Rails.application.config.proscenium.glob_types.
     def attempt(request)
       return unless (type = find_type(request))
 
-      file_handler.attempt(request.env) || type.attempt(request)
+      # file_handler.attempt(request.env) || type.attempt(request)
+
+      type.attempt(request)
     end
 
-    # Returns the type of file being requested using Rails.application.config.proscenium.glob_types.
+    # Returns the type of file being requested using Proscenium::MIDDLEWARE_GLOB_TYPES.
     def find_type(request)
       path = Pathname.new(request.path)
 
-      # Non-production only!
-      if request.query_string == 'outsideRoot'
-        return if Rails.env.production?
-        return OutsideRoot if path.fnmatch?(glob_types[:outsideRoot], File::FNM_EXTGLOB)
-      end
-
       return Url if request.path.match?(glob_types[:url])
-      return Runtime if path.fnmatch?(glob_types[:runtime], File::FNM_EXTGLOB)
-      return Esbuild if path.fnmatch?(glob_types[:esbuild], File::FNM_EXTGLOB)
+      return Esbuild if path.fnmatch?(application_glob_type, File::FNM_EXTGLOB)
     end
 
+    # TODO: handle precompiled assets
     def file_handler
       ::ActionDispatch::FileHandler.new Rails.public_path.join('assets').to_s,
                                         headers: { 'X-Proscenium-Middleware' => 'precompiled' }
     end
 
     def glob_types
-      Rails.application.config.proscenium.glob_types
+      @glob_types ||= Proscenium::MIDDLEWARE_GLOB_TYPES
+    end
+
+    def application_glob_type
+      paths = Rails.application.config.proscenium.include_paths.join(',')
+      "/{#{paths}}#{glob_types[:application]}"
     end
   end
 end

data/lib/proscenium/phlex/component_concerns.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Proscenium::Phlex::ComponentConcerns
+  module CssModules
+    extend ActiveSupport::Concern
+    include Proscenium::CssModule
+    include Proscenium::Phlex::ResolveCssModules
+
+    # class_methods do
+    #   # FIXME: Still needed?
+    #   def path
+    #     pp name, super
+    #     pp Module.const_source_location(name).first
+
+    #     name && Pathname.new(Module.const_source_location(name).first)
+    #   rescue NameError
+    #     nil
+    #   end
+    # end
+
+    private
+
+    def path
+      self.class.path
+    end
+  end
+end

data/lib/proscenium/phlex/page.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+require 'phlex/rails'
+
+# Include this in your view for additional logic for rendering a full HTML page, usually from a
+# controller.
+module Proscenium::Phlex::Page
+  include Phlex::Rails::Helpers::CSPMetaTag
+  include Phlex::Rails::Helpers::CSRFMetaTags
+  include Phlex::Rails::Helpers::FaviconLinkTag
+  include Phlex::Rails::Helpers::PreloadLinkTag
+  include Phlex::Rails::Helpers::StyleSheetLinkTag
+  include Phlex::Rails::Helpers::ActionCableMetaTag
+  include Phlex::Rails::Helpers::AutoDiscoveryLinkTag
+  include Phlex::Rails::Helpers::JavaScriptIncludeTag
+  include Phlex::Rails::Helpers::JavaScriptImportMapTags
+  include Phlex::Rails::Helpers::JavaScriptImportModuleTag
+
+  def self.included(klass)
+    klass.extend(Phlex::Rails::Layout::Interface)
+  end
+
+  def template(&block)
+    doctype
+    html do
+      head
+      body(&block)
+    end
+  end
+
+  private
+
+  def after_template
+    super
+    @_buffer.gsub!('<!-- [SIDE_LOAD_STYLESHEETS] -->', capture { side_load_stylesheets })
+  end
+
+  def page_title
+    Rails.application.class.name.deconstantize
+  end
+
+  def head
+    super do
+      title { page_title }
+
+      yield if block_given?
+
+      csp_meta_tag
+      csrf_meta_tags
+
+      comment { '[SIDE_LOAD_STYLESHEETS]' }
+    end
+  end
+
+  def body
+    super do
+      yield if block_given?
+
+      side_load_javascripts defer: true, type: :module
+    end
+  end
+end

data/lib/proscenium/phlex/react_component.rb

@@ -1,10 +1,32 @@
 # frozen_string_literal: true
 
 #
-# Renders a div for use with component-manager.
+# Renders a div for use with @proscenium/component-manager.
 #
-class Proscenium::Phlex::ReactComponent < Proscenium::Phlex::Component
-  attr_accessor :props, :lazy
+# You can pass props to the component in the `:props` keyword argument.
+#
+# By default, the component is lazy loaded when intersecting using IntersectionObserver. Pass in
+# :lazy as false to disable this and render the component immediately.
+#
+# React components are not side loaded at all.
+#
+class Proscenium::Phlex::ReactComponent < Phlex::HTML
+  class << self
+    attr_accessor :path, :abstract_class
+
+    def inherited(child)
+      position = caller_locations(1, 1).first.label == 'inherited' ? 2 : 1
+      child.path = Pathname.new caller_locations(position, 1).first.path.sub(/\.rb$/, '')
+
+      super
+    end
+  end
+
+  self.abstract_class = true
+
+  include Proscenium::Phlex::ComponentConcerns::CssModules
+
+  attr_writer :props, :lazy
 
   # @param props: [Hash]
   # @param lazy: [Boolean] Lazy load the component using IntersectionObserver. Default: true.
@@ -16,10 +38,32 @@ class Proscenium::Phlex::ReactComponent < Proscenium::Phlex::Component
   # @yield the given block to a `div` within the top level component div. If not given,
   #   `<div>loading...</div>` will be rendered. Use this to display a loading UI while the component
   #   is loading and rendered.
-  def template(&block)
-    div class: ['componentManagedByProscenium', '@component'],
-        data: { component: { path: virtual_path, props: props, lazy: lazy }.to_json } do
-      block ? div(&block) : div { 'loading...' }
-    end
+  def template(**attributes, &block)
+    component_root(:div, **attributes, &block)
+  end
+
+  private
+
+  def component_root(element, **attributes, &block)
+    send element, data: { proscenium_component: component_data }, **attributes, &block
+  end
+
+  def props
+    @props ||= {}
+  end
+
+  def lazy
+    instance_variable_defined?(:@lazy) ? @lazy : (@lazy = false)
+  end
+
+  def component_data
+    {
+      path: virtual_path, lazy: lazy,
+      props: props.deep_transform_keys { |k| k.to_s.camelize :lower }
+    }.to_json
+  end
+
+  def virtual_path
+    path.to_s.delete_prefix(Rails.root.to_s)
   end
 end