proscenium 0.9.1-x86_64-darwin → 0.11.0.pre.1-x86_64-darwin

data/lib/proscenium/libs/stimulus-loading.js

@@ -0,0 +1,83 @@
+const controllerAttribute = "data-controller";
+const controllerFilenameExtension = ".js";
+
+export function lazyLoadControllersFrom(
+  under,
+  application,
+  element = document
+) {
+  lazyLoadExistingControllers(under, application, element);
+  lazyLoadNewControllers(under, application, element);
+}
+
+function lazyLoadExistingControllers(under, application, element) {
+  queryControllerNamesWithin(element).forEach((controllerName) =>
+    loadController(controllerName, under, application)
+  );
+}
+
+function lazyLoadNewControllers(under, application, element) {
+  new MutationObserver((mutationsList) => {
+    for (const { attributeName, target, type } of mutationsList) {
+      switch (type) {
+        case "attributes": {
+          if (
+            attributeName == controllerAttribute &&
+            target.getAttribute(controllerAttribute)
+          ) {
+            extractControllerNamesFrom(target).forEach((controllerName) =>
+              loadController(controllerName, under, application)
+            );
+          }
+        }
+
+        case "childList": {
+          lazyLoadExistingControllers(under, application, target);
+        }
+      }
+    }
+  }).observe(element, {
+    attributeFilter: [controllerAttribute],
+    subtree: true,
+    childList: true,
+  });
+}
+
+function queryControllerNamesWithin(element) {
+  return Array.from(element.querySelectorAll(`[${controllerAttribute}]`))
+    .map(extractControllerNamesFrom)
+    .flat();
+}
+
+function extractControllerNamesFrom(element) {
+  return element
+    .getAttribute(controllerAttribute)
+    .split(/\s+/)
+    .filter((content) => content.length);
+}
+
+function loadController(name, under, application) {
+  if (canRegisterController(name, application)) {
+    import(controllerFilename(name, under))
+      .then((module) => registerController(name, module, application))
+      .catch((error) =>
+        console.error(`Failed to autoload controller: ${name}`, error)
+      );
+  }
+}
+
+function controllerFilename(name, under) {
+  return `${under}/${name
+    .replace(/--/g, "/")
+    .replace(/-/g, "_")}_controller${controllerFilenameExtension}`;
+}
+
+function registerController(name, module, application) {
+  if (canRegisterController(name, application)) {
+    application.register(name, module.default);
+  }
+}
+
+function canRegisterController(name, application) {
+  return !application.router.modulesByIdentifier.has(name);
+}

data/lib/proscenium/log_subscriber.rb

@@ -12,12 +12,11 @@ module Proscenium
 
     def build(event)
       path = event.payload[:identifier]
-      path = path.start_with?(/https?%3A%2F%2F/) ? CGI.unescape(path) : path
+      path = CGI.unescape(path) if path.start_with?(/https?%3A%2F%2F/)
 
       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

data/lib/proscenium/middleware/base.rb

@@ -51,7 +51,7 @@ module Proscenium
       end
 
       def file_readable?
-        return unless (path = clean_path(sourcemap? ? real_path[0...-4] : real_path))
+        return false 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

data/lib/proscenium/middleware/esbuild.rb

@@ -20,11 +20,9 @@ module Proscenium
       end
 
       def attempt
-        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
-      rescue Proscenium::Esbuild::CompileError => e
+        render_response Proscenium::Builder.build(path_to_build, root: root,
+                                                                 base_url: @request.base_url)
+      rescue Proscenium::Builder::CompileError => e
         raise self.class::CompileError, { file: @request.fullpath, detail: e.message }, caller
       end
     end

data/lib/proscenium/middleware.rb

@@ -13,12 +13,17 @@ module Proscenium
 
     def initialize(app)
       @app = app
+
+      chunks_path = Rails.public_path.join('assets').to_s
+      headers = Rails.application.config.public_file_server.headers || {}
+      @chunk_handler = ::ActionDispatch::FileHandler.new(chunks_path, headers: headers)
     end
 
     def call(env)
       request = Rack::Request.new(env)
 
       return @app.call(env) if !request.get? && !request.head?
+      return @chunk_handler.attempt(request.env) if request.path.match?(%r{^/_asset_chunks/})
 
       attempt(request) || @app.call(env)
     end
@@ -35,7 +40,8 @@ module Proscenium
 
     def find_type(request)
       return Url if request.path.match?(%r{^/https?%3A%2F%2F})
-      return Esbuild if Pathname.new(request.path).fnmatch?(path_glob, File::FNM_EXTGLOB)
+
+      Esbuild if Pathname.new(request.path).fnmatch?(path_glob, File::FNM_EXTGLOB)
     end
 
     def path_glob

data/lib/proscenium/{side_load/monkey.rb → monkey.rb}

@@ -1,12 +1,14 @@
 # frozen_string_literal: true
 
-class Proscenium::SideLoad
+module Proscenium
   # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
   module Monkey
     module TemplateRenderer
       private
 
       def render_template(view, template, layout_name, locals)
+        return super unless Proscenium.config.side_load
+
         layout = find_layout(layout_name, locals.keys, [formats.first])
         renderable = template.instance_variable_get(:@renderable)
 
@@ -14,20 +16,18 @@ class Proscenium::SideLoad
            template.is_a?(ActionView::Template::Renderable) &&
            renderable.class < ::ViewComponent::Base && renderable.class.format == :html
           # Side load controller rendered ViewComponent
-          Proscenium::SideLoad.append "app/views/#{layout.virtual_path}" if layout
-          Proscenium::SideLoad.append "app/views/#{renderable.virtual_path}"
+          Importer.sideload "app/views/#{layout.virtual_path}" if layout
+          Importer.sideload "app/views/#{renderable.virtual_path}"
         elsif template.respond_to?(:virtual_path) &&
               template.respond_to?(:type) && template.type == :html
-          # Side load regular view template.
-          Proscenium::SideLoad.append "app/views/#{layout.virtual_path}" if layout
+          Importer.sideload "app/views/#{layout.virtual_path}" if layout
 
           # Try side loading the variant template
           if template.respond_to?(:variant) && template.variant
-            Proscenium::SideLoad.append "app/views/#{template.virtual_path}+#{template.variant}"
+            Importer.sideload "app/views/#{template.virtual_path}+#{template.variant}"
           end
 
-          # The variant template may not exist (above), so we try the regular non-variant path.
-          Proscenium::SideLoad.append "app/views/#{template.virtual_path}"
+          Importer.sideload "app/views/#{template.virtual_path}"
         end
 
         super
@@ -37,10 +37,14 @@ class Proscenium::SideLoad
     module PartialRenderer
       private
 
-      def build_rendered_template(content, template)
-        path = Rails.root.join('app', 'views', template.virtual_path)
-        cssm = Proscenium::CssModule::Resolver.new(path)
-        super cssm.compile_class_names(content), template
+      def render_partial_template(view, locals, template, layout, block)
+        if Proscenium.config.side_load && template.respond_to?(:virtual_path) &&
+           template.respond_to?(:type) && template.type == :html
+          Importer.sideload "app/views/#{layout.virtual_path}" if layout
+          Importer.sideload "app/views/#{template.virtual_path}"
+        end
+
+        super
       end
     end
   end

data/lib/proscenium/phlex/{resolve_css_modules.rb → css_modules.rb}

@@ -1,16 +1,11 @@
 # frozen_string_literal: true
 
 module Proscenium
-  module Phlex::ResolveCssModules
-    extend ActiveSupport::Concern
+  module Phlex::CssModules
+    include Proscenium::CssModule
 
-    class_methods do
-      attr_accessor :side_load_cache
-    end
-
-    def before_template
-      self.class.side_load_cache ||= Set.new
-      super
+    def self.included(base)
+      base.extend CssModule::Path
     end
 
     # Resolve and side load any CSS modules in the "class" attributes, where a CSS module is a class
@@ -44,24 +39,15 @@ module Proscenium
     #     end
     #   end
     #
-    # The given class name should be underscored, and the resulting CSS module name will be
-    # `camelCased` with a lower case first character.
-    #
     # @raise [Proscenium::CssModule::Resolver::NotFound] If a CSS module file is not found for the
     #   Phlex class file path.
     def process_attributes(**attributes)
       if attributes.key?(:class) && (attributes[:class] = tokens(attributes[:class])).include?('@')
-        resolver = CssModule::ClassNamesResolver.new(attributes[:class], path)
-        self.class.side_load_cache.merge resolver.stylesheets
-        attributes[:class] = resolver.class_names
+        names = attributes[:class].is_a?(Array) ? attributes[:class] : attributes[:class].split
+        attributes[:class] = cssm.class_names(*names)
       end
 
       attributes
     end
-
-    def after_template
-      super
-      self.class.side_load_cache&.each { |path| SideLoad.append! path, :css }
-    end
   end
 end

data/lib/proscenium/phlex/page.rb

@@ -32,7 +32,7 @@ module Proscenium::Phlex::Page
 
   def after_template
     super
-    @_buffer.gsub!('<!-- [SIDE_LOAD_STYLESHEETS] -->', capture { side_load_stylesheets })
+    @_buffer.gsub!('<!-- [SIDE_LOAD_STYLESHEETS] -->', capture { include_stylesheets })
   end
 
   def page_title
@@ -56,7 +56,7 @@ module Proscenium::Phlex::Page
     super do
       yield if block_given?
 
-      side_load_javascripts defer: true, type: :module
+      include_javascripts type: :module, defer: true
     end
   end
 end

data/lib/proscenium/phlex/react_component.rb

@@ -1,69 +1,32 @@
 # frozen_string_literal: true
 
-#
-# Renders a div for use with @proscenium/component-manager.
-#
-# 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
+module Proscenium
+  # Renders a <div> for use with React components, with data attributes specifying the component
+  # path and props.
+  #
+  # If a block is given, it will be yielded within the div, allowing for a custom "loading" UI. If
+  # no block is given, then a "loading..." text will be rendered. It is intended that the component
+  # is mounted to this div, and the loading UI will then be replaced with the component's rendered
+  # output.
+  #
+  # You can pass props to the component in the `:props` keyword argument.
+  class Phlex::ReactComponent < Phlex
+    self.abstract_class = true
+
+    include ReactComponentable
+
+    # Override this to provide your own loading UI.
+    #
+    # @example
+    #   def template(**attributes, &block)
+    #     super do
+    #       'Look at me! I am loading now...'
+    #     end
+    #   end
+    #
+    # @yield the given block to a `div` within the top level component div.
+    def template(**attributes, &block)
+      send root_tag, **{ data: data_attributes }.deep_merge(attributes), &block
     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.
-  def initialize(props: {}, lazy: true) # rubocop:disable Lint/MissingSuper
-    @props = props
-    @lazy = lazy
-  end
-
-  # @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(**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

data/lib/proscenium/phlex.rb

@@ -5,54 +5,35 @@ require 'phlex-rails'
 module Proscenium
   class Phlex < ::Phlex::HTML
     extend ActiveSupport::Autoload
-    include Proscenium::CssModule
 
     autoload :Page
+    autoload :CssModules
     autoload :ReactComponent
-    autoload :ResolveCssModules
-    autoload :ComponentConcerns
 
     extend ::Phlex::Rails::HelperMacros
     include ::Phlex::Rails::Helpers::JavaScriptIncludeTag
     include ::Phlex::Rails::Helpers::StyleSheetLinkTag
+    include Proscenium::SourcePath
+    include CssModules
 
-    define_output_helper :side_load_stylesheets
-    define_output_helper :side_load_javascripts
+    define_output_helper :side_load_stylesheets # deprecated
+    define_output_helper :include_stylesheets
+    define_output_helper :side_load_javascripts # deprecated
+    define_output_helper :include_javascripts
 
-    # Side loads the class, and its super classes that respond to `.path`. Assign the
-    # `abstract_class` class variable to any abstract class, and it will not be side loaded.
-    # Additionally, if the class responds to `side_load`, then that method is called.
     module Sideload
       def before_template
-        klass = self.class
-
-        if !klass.abstract_class && respond_to?(:side_load, true)
-          side_load
-          klass = klass.superclass
-        end
-
-        while !klass.abstract_class && klass.respond_to?(:path) && klass.path
-          Proscenium::SideLoad.append klass.path
-          klass = klass.superclass
-        end
+        Proscenium::SideLoad.sideload_inheritance_chain self
 
         super
       end
     end
 
     class << self
-      attr_accessor :path, :abstract_class
+      attr_accessor :abstract_class
 
       def inherited(child)
-        unless child.path
-          child.path = if caller_locations(1, 1).first.label == 'inherited'
-                         Pathname.new caller_locations(2, 1).first.path
-                       else
-                         Pathname.new caller_locations(1, 1).first.path
-                       end
-        end
-
-        child.prepend Sideload if Rails.application.config.proscenium.side_load
+        child.prepend Sideload
 
         super
       end

data/lib/proscenium/railtie.rb

@@ -6,11 +6,6 @@ require 'proscenium/log_subscriber'
 ENV['RAILS_ENV'] = Rails.env
 
 module Proscenium
-  FILE_EXTENSIONS = ['js', 'mjs', 'ts', 'jsx', 'tsx', 'css', 'js.map', 'mjs.map', 'jsx.map',
-                     'ts.map', 'tsx.map', 'css.map'].freeze
-
-  APPLICATION_INCLUDE_PATHS = ['config', 'app/assets', 'app/views', 'lib', 'node_modules'].freeze
-
   class << self
     def config
       @config ||= Railtie.config.proscenium
@@ -21,10 +16,19 @@ module Proscenium
     isolate_namespace Proscenium
 
     config.proscenium = ActiveSupport::OrderedOptions.new
+    config.proscenium.debug = false
     config.proscenium.side_load = true
+    config.proscenium.code_splitting = true
+    config.proscenium.include_paths = Set.new(APPLICATION_INCLUDE_PATHS)
+
+    # TODO: implement!
     config.proscenium.cache_query_string = Rails.env.production? && ENV.fetch('REVISION', nil)
     config.proscenium.cache_max_age = 2_592_000 # 30 days
-    config.proscenium.include_paths = Set.new(APPLICATION_INCLUDE_PATHS)
+
+    # List of environment variable names that should be passed to the builder, which will then be
+    # passed to esbuild's `Define` option. Being explicit about which environment variables are
+    # defined means a faster build, as esbuild will have less to do.
+    config.proscenium.env_vars = Set.new
 
     # A hash of gems that can be side loaded. Assets from gems listed here can be side loaded.
     #
@@ -50,31 +54,25 @@ module Proscenium
     end
 
     initializer 'proscenium.middleware' do |app|
-      app.middleware.insert_after ActionDispatch::Static, Proscenium::Middleware
+      app.middleware.insert_after ActionDispatch::Static, Middleware
       app.middleware.insert_after ActionDispatch::Static, Rack::ETag, 'no-cache'
       app.middleware.insert_after ActionDispatch::Static, Rack::ConditionalGet
     end
 
-    initializer 'proscenium.side_loading' do |app|
-      if app.config.proscenium.side_load
-        Proscenium::Current.loaded ||= SideLoad::EXTENSIONS.to_h { |e| [e, Set.new] }
-
-        ActiveSupport.on_load(:action_view) do
-          ActionView::Base.include Proscenium::SideLoad::Helper
-
-          ActionView::TemplateRenderer.prepend SideLoad::Monkey::TemplateRenderer
-          ActionView::PartialRenderer.prepend SideLoad::Monkey::PartialRenderer
-        end
-
-        ActiveSupport.on_load(:action_controller) do
-          ActionController::Base.include Proscenium::SideLoad::EnsureLoaded
-        end
+    initializer 'proscenium.monkey_views' do
+      ActiveSupport.on_load(:action_view) do
+        ActionView::TemplateRenderer.prepend Monkey::TemplateRenderer
+        ActionView::PartialRenderer.prepend Monkey::PartialRenderer
       end
     end
 
     initializer 'proscenium.helper' do
       ActiveSupport.on_load(:action_view) do
-        ActionView::Base.include Proscenium::Helper
+        ActionView::Base.include Helper
+      end
+
+      ActiveSupport.on_load(:action_controller) do
+        ActionController::Base.include EnsureLoaded
       end
     end
   end

data/lib/proscenium/react_componentable.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module Proscenium
+  module ReactComponentable
+    extend ActiveSupport::Concern
+
+    included do
+      # @return [Hash] the props to pass to the React component.
+      attr_writer :props
+
+      # The HTML tag to use as the wrapping element for the component. You can reassign this in your
+      # component class to use a different tag:
+      #
+      #   class MyComponent < Proscenium::ViewComponent::ReactComponent
+      #     self.root_tag = :span
+      #   end
+      #
+      # @return [Symbol]
+      class_attribute :root_tag, instance_predicate: false, default: :div
+
+      # By default, the template block (content) of the component will be server rendered as normal.
+      # However, when React hydrates and takes control of the component, it's content will be
+      # replaced by React with the JavaScript rendered content. Enabling this option will forward
+      # the server rendered content as the `children` prop passed to the React component.
+      #
+      # @example
+      #
+      #   const Component = ({ children }) => {
+      #     return <div dangerouslySetInnerHTML={{ __html: children }} />
+      #   }
+      #
+      # @return [Boolean]
+      class_attribute :forward_children, default: false
+
+      # Lazy load the component using IntersectionObserver?
+      #
+      # @return [Boolean]
+      class_attribute :lazy, default: false
+
+      class_attribute :loader
+    end
+
+    class_methods do
+      # Import only the component manager. The component itself is side loaded in the initializer,
+      # so that it can be lazy loaded based on the value of the `lazy` instance variable.
+      def sideload
+        Importer.import resolve: '@proscenium/react-manager/index.jsx'
+        Importer.sideload source_path, lazy: true
+      end
+    end
+
+    # @param props: [Hash]
+    def initialize(lazy: self.class.lazy, loader: self.class.loader, props: {})
+      self.lazy = lazy
+      self.loader = loader
+      @props = props
+    end
+
+    # The absolute URL path to the javascript component.
+    def virtual_path
+      @virtual_path ||= Resolver.resolve self.class.source_path.sub_ext('.jsx').to_s
+    end
+
+    def props
+      @props ||= {}
+    end
+
+    private
+
+    def data_attributes
+      {
+        proscenium_component_path: Pathname.new(virtual_path).to_s,
+        proscenium_component_props: prepared_props,
+        proscenium_component_lazy: lazy
+      }.tap do |x|
+        x[:proscenium_component_forward_children] = true if forward_children?
+      end
+    end
+
+    def prepared_props
+      props.deep_transform_keys do |term|
+        # This ensures that the first letter after a slash is not capitalized.
+        string = term.to_s.split('/').map { |str| str.camelize :lower }.join('/')
+
+        # Reverses the effect of ActiveSupport::Inflector.camelize converting slashes into `::`.
+        string.gsub '::', '/'
+      end.to_json
+    end
+
+    def loader_component
+      render Loader::Component.new(loader, @html_class, data_attributes, tag: @html_tag)
+    end
+  end
+end

data/lib/proscenium/resolver.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require 'active_support/current_attributes'
+
+module Proscenium
+  class Resolver < ActiveSupport::CurrentAttributes
+    # TODO: cache this across requests in production.
+    attribute :resolved
+
+    # Resolve the given `path` to a URL path.
+    #
+    # @param path [String] Can be URL path, file system path, or bare specifier (ie. NPM package).
+    # @return [String] URL path.
+    def self.resolve(path) # rubocop:disable Metrics/AbcSize
+      self.resolved ||= {}
+
+      self.resolved[path] ||= begin
+        if path.start_with?('./', '../')
+          raise ArgumentError, 'path must be an absolute file system or URL path'
+        end
+
+        if (gem = Proscenium.config.side_load_gems.find { |_, x| path.start_with? "#{x[:root]}/" })
+          unless (package_name = gem[1][:package_name] || gem[0])
+            # TODO: manually resolve the path without esbuild
+            raise PathResolutionFailed, path
+          end
+
+          Builder.resolve "#{package_name}/#{path.delete_prefix("#{gem[1][:root]}/")}"
+        elsif path.start_with?("#{Rails.root}/")
+          path.delete_prefix Rails.root.to_s
+        else
+          Builder.resolve path
+        end
+      end
+    end
+  end
+end