proscenium 0.14.0-x86_64-linux → 0.15.0.beta.1-x86_64-linux

data/lib/proscenium/libs/react-manager/index.jsx

@@ -1,18 +1,70 @@
 window.Proscenium = window.Proscenium || { lazyScripts: {} };
+const pathAttribute = "data-proscenium-component-path";
 
+// Find lazyscripts JSON already in the DOM.
 const element = document.querySelector("#prosceniumLazyScripts");
 if (element) {
-  const scripts = JSON.parse(element.text);
   window.Proscenium.lazyScripts = {
     ...window.Proscenium.lazyScripts,
-    ...scripts,
+    ...JSON.parse(element.text),
   };
 }
 
-const elements = document.querySelectorAll("[data-proscenium-component-path]");
+// Find components already in the DOM.
+const elements = document.querySelectorAll(`[${pathAttribute}]`);
 elements.length > 0 && init(elements);
 
-function init() {
+new MutationObserver((mutationsList) => {
+  for (const { addedNodes } of mutationsList) {
+    for (const ele of addedNodes) {
+      if (ele.tagName === "SCRIPT" && ele.id === "prosceniumLazyScripts") {
+        window.Proscenium.lazyScripts = {
+          ...window.Proscenium.lazyScripts,
+          ...JSON.parse(ele.text),
+        };
+      } else if (ele.matches(`[${pathAttribute}]`)) {
+        init([ele]);
+      }
+    }
+  }
+}).observe(document, {
+  subtree: true,
+  childList: true,
+});
+
+function init(elements) {
+  Array.from(elements, (element) => {
+    const path = element.dataset.prosceniumComponentPath;
+    const isLazy = "prosceniumComponentLazy" in element.dataset;
+    const props = JSON.parse(element.dataset.prosceniumComponentProps);
+
+    if (proscenium.env.RAILS_ENV === "development") {
+      console.groupCollapsed(
+        `[proscenium/react/manager] ${isLazy ? "💤" : "⚡️"} %o`,
+        path
+      );
+      console.log("element: %o", element);
+      console.log("props: %o", props);
+      console.groupEnd();
+    }
+
+    if (isLazy) {
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            observer.unobserve(element);
+
+            mount(element, path, props);
+          }
+        });
+      });
+
+      observer.observe(element);
+    } else {
+      mount(element, path, props);
+    }
+  });
+
   /**
    * Mounts component located at `path`, into the DOM `element`.
    *
@@ -66,36 +118,4 @@ function init() {
         console.error("[proscenium/react/manager] %o - %o", path, error);
       });
   }
-
-  Array.from(elements, (element) => {
-    const path = element.dataset.prosceniumComponentPath;
-    const isLazy = "prosceniumComponentLazy" in element.dataset;
-    const props = JSON.parse(element.dataset.prosceniumComponentProps);
-
-    if (proscenium.env.RAILS_ENV === "development") {
-      console.groupCollapsed(
-        `[proscenium/react/manager] ${isLazy ? "💤" : "⚡️"} %o`,
-        path
-      );
-      console.log("element: %o", element);
-      console.log("props: %o", props);
-      console.groupEnd();
-    }
-
-    if (isLazy) {
-      const observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            observer.unobserve(element);
-
-            mount(element, path, props);
-          }
-        });
-      });
-
-      observer.observe(element);
-    } else {
-      mount(element, path, props);
-    }
-  });
 }

data/lib/proscenium/log_subscriber.rb

@@ -10,12 +10,24 @@ module Proscenium
       end
     end
 
-    def build(event)
+    def build_to_path(event)
       path = event.payload[:identifier]
+      cached = event.payload[:cached] ? ' | Cached!' : ''
       path = CGI.unescape(path) if path.start_with?(/https?%3A%2F%2F/)
 
       info do
-        message = +"[Proscenium] Building #{path}"
+        message = +"  #{color('[Proscenium]', nil, bold: true)} Building (to path) #{path}"
+        message << " (Duration: #{event.duration.round(1)}ms | " \
+                   "Allocations: #{event.allocations}#{cached})"
+      end
+    end
+
+    def build_to_string(event)
+      path = event.payload[:identifier]
+      path = CGI.unescape(path) if path.start_with?(/https?%3A%2F%2F/)
+
+      info do
+        message = +"  #{color('[Proscenium]', nil, bold: true)} Building #{path}"
         message << " (Duration: #{event.duration.round(1)}ms | Allocations: #{event.allocations})"
       end
     end

data/lib/proscenium/middleware/esbuild.rb

@@ -20,8 +20,8 @@ module Proscenium
       end
 
       def attempt
-        render_response Builder.build(path_to_build, root: Rails.root.to_s,
-                                                     base_url: @request.base_url)
+        render_response Builder.build_to_string(path_to_build, root: Rails.root.to_s,
+                                                               base_url: @request.base_url)
       rescue Builder::CompileError => e
         raise self.class::CompileError, { file: @request.fullpath, detail: e.message }, caller
       end

data/lib/proscenium/monkey.rb

@@ -3,42 +3,52 @@
 module Proscenium
   # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
   module Monkey
-    module DebugView
-      def initialize(assigns)
-        paths = [RESCUES_TEMPLATE_PATH, Rails.root.join('lib', 'templates').to_s]
-        lookup_context = ActionView::LookupContext.new(paths)
-        super(lookup_context, assigns, nil)
-      end
-    end
-
     module TemplateRenderer
       private
 
-      def render_template(view, template, layout_name, locals)
-        return super unless Proscenium.config.side_load
+      def render_template(view, template, layout_name, locals) # rubocop:disable Metrics/*
+        result = super
+        return result if !view.controller || !Proscenium.config.side_load
 
-        layout = find_layout(layout_name, locals.keys, [formats.first])
         renderable = template.instance_variable_get(:@renderable)
 
-        if Object.const_defined?(:ViewComponent) &&
-           template.is_a?(ActionView::Template::Renderable) &&
-           renderable.class < ::ViewComponent::Base && renderable.class.format == :html
-          # Side load controller rendered ViewComponent
-          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
-          Importer.sideload "app/views/#{layout.virtual_path}" if layout
-
-          # Try side loading the variant template
-          if template.respond_to?(:variant) && template.variant
-            Importer.sideload "app/views/#{template.virtual_path}+#{template.variant}"
-          end
-
-          Importer.sideload "app/views/#{template.virtual_path}"
+        to_sideload = if Object.const_defined?(:ViewComponent) &&
+                         template.is_a?(ActionView::Template::Renderable) &&
+                         renderable.class < ::ViewComponent::Base &&
+                         renderable.class.format == :html
+                        renderable
+                      elsif template.respond_to?(:virtual_path) &&
+                            template.respond_to?(:type) && template.type == :html
+                        template
+                      end
+        if to_sideload
+          options = view.controller.sideload_assets_options
+          layout = find_layout(layout_name, locals.keys, [formats.first])
+          sideload_template_assets layout, view.controller, options if layout
+          sideload_template_assets to_sideload, view.controller, options
+        end
+
+        result
+      end
+
+      def sideload_template_assets(tpl, controller, options)
+        options = {} if options.nil?
+        options = { js: options, css: options } unless options.is_a?(Hash)
+
+        if tpl.instance_variable_defined?(:@sideload_assets_options)
+          tpl_options = tpl.instance_variable_get(:@sideload_assets_options)
+          options = case tpl_options
+                    when Hash then options.deep_merge(tpl_options)
+                    else
+                      { js: tpl_options, css: tpl_options }
+                    end
+        end
+
+        %i[css js].each do |k|
+          options[k] = controller.instance_eval(&options[k]) if options[k].is_a?(Proc)
         end
 
-        super
+        Importer.sideload "app/views/#{tpl.virtual_path}", **options
       end
     end
 
@@ -46,13 +56,38 @@ module Proscenium
       private
 
       def render_partial_template(view, locals, template, layout, block)
-        if Proscenium.config.side_load && template.respond_to?(:virtual_path) &&
+        result = super
+
+        return result if !view.controller || !Proscenium.config.side_load
+
+        if 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}"
+          options = view.controller.sideload_assets_options
+          sideload_template_assets layout, options if layout
+          sideload_template_assets template, options
+        end
+
+        result
+      end
+
+      def sideload_template_assets(tpl, options)
+        options = {} if options.nil?
+        options = { js: options, css: options } unless options.is_a?(Hash)
+
+        if tpl.instance_variable_defined?(:@sideload_assets_options)
+          tpl_options = tpl.instance_variable_get(:@sideload_assets_options)
+          options = if tpl_options.is_a?(Hash)
+                      options.deep_merge tpl_options
+                    else
+                      { js: tpl_options, css: tpl_options }
+                    end
+        end
+
+        %i[css js].each do |k|
+          options[k] = controller.instance_eval(&options[k]) if options[k].is_a?(Proc)
         end
 
-        super
+        Importer.sideload "app/views/#{tpl.virtual_path}", **options
       end
     end
   end

data/lib/proscenium/phlex/asset_inclusions.rb

@@ -1,96 +1,17 @@
 # frozen_string_literal: true
 
 module Proscenium::Phlex::AssetInclusions
-  include Phlex::Rails::Helpers::ContentFor
-  include Phlex::Rails::Helpers::StyleSheetPath
-  include Phlex::Rails::Helpers::JavaScriptPath
-
   def include_stylesheets
     comment { '[PROSCENIUM_STYLESHEETS]' }
   end
 
-  def include_javascripts(defer_lazy_scripts: false)
-    comment { '[PROSCENIUM_JAVASCRIPTS]' }
-    !defer_lazy_scripts && include_lazy_javascripts
-  end
-
-  def include_lazy_javascripts
+  def include_javascripts
     comment { '[PROSCENIUM_LAZY_SCRIPTS]' }
+    comment { '[PROSCENIUM_JAVASCRIPTS]' }
   end
 
-  def include_assets(defer_lazy_scripts: false)
+  def include_assets
     include_stylesheets
-    include_javascripts(defer_lazy_scripts: defer_lazy_scripts)
-  end
-
-  def after_template
-    super
-
-    @_buffer.gsub! '<!-- [PROSCENIUM_STYLESHEETS] -->', capture_stylesheets!
-    @_buffer.gsub! '<!-- [PROSCENIUM_JAVASCRIPTS] -->', capture_javascripts!
-
-    if content_for?(:proscenium_lazy_scripts)
-      flush
-      @_buffer.gsub!('<!-- [PROSCENIUM_LAZY_SCRIPTS] -->', capture do
-        content_for(:proscenium_lazy_scripts)
-      end)
-    else
-      @_buffer.gsub! '<!-- [PROSCENIUM_LAZY_SCRIPTS] -->', ''
-    end
-  end
-
-  private
-
-  def capture_stylesheets!
-    capture do
-      Proscenium::Importer.each_stylesheet(delete: true) do |path, _path_options|
-        link rel: 'stylesheet', href: stylesheet_path(path, extname: false)
-      end
-    end
-  end
-
-  def capture_javascripts! # rubocop:disable Metrics/*
-    unless Rails.application.config.proscenium.code_splitting &&
-           Proscenium::Importer.multiple_js_imported?
-      return capture do
-        Proscenium::Importer.each_javascript(delete: true) do |path, _|
-          script(src: javascript_path(path, extname: false), type: :module)
-        end
-      end
-    end
-
-    imports = Proscenium::Importer.imported.dup
-    paths_to_build = []
-    Proscenium::Importer.each_javascript(delete: true) do |x, _|
-      paths_to_build << x.delete_prefix('/')
-    end
-
-    result = Proscenium::Builder.build(paths_to_build.join(';'), base_url: helpers.request.base_url)
-
-    # Remove the react components from the results, so they are not side loaded. Instead they
-    # are lazy loaded by the component manager.
-
-    capture do
-      scripts = {}
-      result.split(';').each do |x|
-        inpath, outpath = x.split('::')
-        inpath.prepend '/'
-        outpath.delete_prefix! 'public'
-
-        next unless imports.key?(inpath)
-
-        if (import = imports[inpath]).delete(:lazy)
-          scripts[inpath] = import.merge(outpath: outpath)
-        else
-          script(src: javascript_path(outpath, extname: false), type: :module)
-        end
-      end
-
-      content_for :proscenium_lazy_scripts do
-        script type: 'application/json', id: 'prosceniumLazyScripts' do
-          unsafe_raw scripts.to_json
-        end
-      end
-    end
+    include_javascripts
   end
 end

data/lib/proscenium/phlex.rb

@@ -12,15 +12,19 @@ module Proscenium
 
     include Proscenium::SourcePath
     include CssModules
+    include AssetInclusions
 
     module Sideload
       def before_template
-        Proscenium::SideLoad.sideload_inheritance_chain self
+        Proscenium::SideLoad.sideload_inheritance_chain self,
+                                                        helpers.controller.sideload_assets_options
 
         super
       end
     end
 
+    class_attribute :sideload_assets_options
+
     class << self
       attr_accessor :abstract_class
 
@@ -29,6 +33,10 @@ module Proscenium
 
         super
       end
+
+      def sideload_assets(value)
+        self.sideload_assets_options = value
+      end
     end
   end
 end

data/lib/proscenium/railtie.rb

@@ -6,12 +6,6 @@ require 'proscenium/log_subscriber'
 ENV['RAILS_ENV'] = Rails.env
 
 module Proscenium
-  class << self
-    def config
-      @config ||= Railtie.config.proscenium
-    end
-  end
-
   class Railtie < ::Rails::Engine
     isolate_namespace Proscenium
 
@@ -20,6 +14,14 @@ module Proscenium
     config.proscenium.side_load = true
     config.proscenium.code_splitting = true
 
+    # Cache asset paths when building to path. Enabled by default in production.
+    # @see Proscenium::Builder#build_to_path
+    config.proscenium.cache = if Rails.env.local?
+                                ActiveSupport::Cache::NullStore.new
+                              else
+                                ActiveSupport::Cache::MemoryStore.new
+                              end
+
     # TODO: implement!
     config.proscenium.cache_query_string = Rails.env.production? && ENV.fetch('REVISION', nil)
     config.proscenium.cache_max_age = 2_592_000 # 30 days
@@ -45,6 +47,12 @@ module Proscenium
       'Proscenium::Builder::BuildError' => 'build_error'
     }
 
+    config.after_initialize do |_app|
+      ActiveSupport.on_load(:action_view) do
+        include Proscenium::Helper
+      end
+    end
+
     initializer 'proscenium.debugging' do
       if Rails.gem_version >= Gem::Version.new('7.1.0')
         tpl_path = root.join('lib', 'proscenium', 'templates').to_s
@@ -58,20 +66,17 @@ module Proscenium
       app.middleware.insert_after ActionDispatch::Static, Rack::ConditionalGet
     end
 
-    initializer 'proscenium.monkey_patches' do
-      ActiveSupport.on_load(:action_view) do
-        ActionView::TemplateRenderer.prepend Monkey::TemplateRenderer
-        ActionView::PartialRenderer.prepend Monkey::PartialRenderer
+    initializer 'proscenium.sideloading' do
+      ActiveSupport.on_load(:action_controller) do
+        ActionController::Base.include EnsureLoaded
+        ActionController::Base.include SideLoad::Controller
       end
     end
 
-    initializer 'proscenium.helper' do
+    initializer 'proscenium.monkey_patches' do
       ActiveSupport.on_load(:action_view) do
-        ActionView::Base.include Helper
-      end
-
-      ActiveSupport.on_load(:action_controller) do
-        ActionController::Base.include EnsureLoaded
+        ActionView::TemplateRenderer.prepend Monkey::TemplateRenderer
+        ActionView::PartialRenderer.prepend Monkey::PartialRenderer
       end
     end
   end

data/lib/proscenium/react_componentable.rb

@@ -44,9 +44,9 @@ module Proscenium
     end
 
     class_methods do
-      def sideload
-        Importer.import manager
-        Importer.sideload source_path, lazy: true
+      def sideload(options)
+        Importer.import manager, **options, js: { type: 'module' }
+        Importer.sideload source_path, lazy: true, **options
       end
     end
 

data/lib/proscenium/side_load.rb

@@ -2,21 +2,135 @@
 
 module Proscenium
   class SideLoad
+    module Controller
+      def self.included(child)
+        child.class_eval do
+          class_attribute :sideload_assets_options
+          child.extend ClassMethods
+
+          append_after_action :capture_and_replace_proscenium_stylesheets,
+                              :capture_and_replace_proscenium_javascripts,
+                              if: -> { request.format.html? && !response.redirect? }
+        end
+      end
+
+      module ClassMethods
+        def sideload_assets(value)
+          self.sideload_assets_options = value
+        end
+      end
+
+      def capture_and_replace_proscenium_stylesheets # rubocop:disable Metrics/AbcSize
+        return if response_body.first.blank? || !Proscenium::Importer.css_imported?
+        return unless response_body.first.include? '<!-- [PROSCENIUM_STYLESHEETS] -->'
+
+        imports = Proscenium::Importer.imported.dup
+        paths_to_build = []
+        Proscenium::Importer.each_stylesheet(delete: true) do |x, _|
+          paths_to_build << x.delete_prefix('/')
+        end
+
+        result = Proscenium::Builder.build_to_path(paths_to_build.join(';'),
+                                                   base_url: helpers.request.base_url)
+
+        out = []
+        result.split(';').each do |x|
+          inpath, outpath = x.split('::')
+          inpath.prepend '/'
+          outpath.delete_prefix! 'public'
+
+          next unless imports.key?(inpath)
+
+          import = imports[inpath]
+          opts = import[:css].is_a?(Hash) ? import[:css] : {}
+          out << helpers.stylesheet_link_tag(outpath, extname: false, **opts)
+        end
+
+        response_body.first.gsub! '<!-- [PROSCENIUM_STYLESHEETS] -->', out.join.html_safe
+      end
+
+      def capture_and_replace_proscenium_javascripts # rubocop:disable Metrics/AbcSize,Metrics/MethodLength,Metrics/PerceivedComplexity
+        return if response_body.first.blank? || !Proscenium::Importer.js_imported?
+
+        imports = Proscenium::Importer.imported.dup
+        paths_to_build = []
+        Proscenium::Importer.each_javascript(delete: true) do |x, _|
+          paths_to_build << x.delete_prefix('/')
+        end
+
+        result = Proscenium::Builder.build_to_path(paths_to_build.join(';'),
+                                                   base_url: helpers.request.base_url)
+
+        if response_body.first.include? '<!-- [PROSCENIUM_JAVASCRIPTS] -->'
+          out = []
+          scripts = {}
+          result.split(';').each do |x|
+            inpath, outpath = x.split('::')
+            inpath.prepend '/'
+            outpath.delete_prefix! 'public'
+
+            next unless imports.key?(inpath)
+
+            if (import = imports[inpath]).delete(:lazy)
+              scripts[inpath] = import.merge(outpath: outpath)
+            else
+              opts = import[:js].is_a?(Hash) ? import[:js] : {}
+              out << helpers.javascript_include_tag(outpath, extname: false, **opts)
+            end
+          end
+
+          response_body.first.gsub! '<!-- [PROSCENIUM_JAVASCRIPTS] -->', out.join.html_safe
+        end
+
+        return unless response_body.first.include? '<!-- [PROSCENIUM_LAZY_SCRIPTS] -->'
+
+        lazy_script = ''
+        if scripts.present?
+          lazy_script = helpers.content_tag 'script', type: 'application/json',
+                                                      id: 'prosceniumLazyScripts' do
+            scripts.to_json.html_safe
+          end
+        end
+
+        response_body.first.gsub! '<!-- [PROSCENIUM_LAZY_SCRIPTS] -->', lazy_script
+      end
+    end
+
     class << self
       # Side loads the class, and its super classes that respond to `.source_path`.
       #
-      # Assign the `abstract_class` class variable to any abstract class, and it will not be side
-      # loaded. Additionally, if the class responds to `#sideload?`, and it returns false, it will
-      # not be side loaded.
+      # Set the `abstract_class` class variable to true in any class, and it will not be side
+      # loaded.
       #
       # If the class responds to `.sideload`, it will be called instead of the regular side loading.
       # You can use this to customise what is side loaded.
-      def sideload_inheritance_chain(obj)
-        return if !Proscenium.config.side_load || (obj.respond_to?(:sideload?) && !obj.sideload?)
+      def sideload_inheritance_chain(obj, options) # rubocop:disable Metrics/*
+        return unless Proscenium.config.side_load
+
+        options = {} if options.nil?
+        options = { js: options, css: options } unless options.is_a?(Hash)
+
+        unless obj.sideload_assets_options.nil?
+          tpl_options = obj.sideload_assets_options
+          options = if tpl_options.is_a?(Hash)
+                      options.deep_merge tpl_options
+                    else
+                      { js: tpl_options, css: tpl_options }
+                    end
+        end
+
+        %i[css js].each do |k|
+          options[k] = obj.instance_eval(&options[k]) if options[k].is_a?(Proc)
+        end
 
         klass = obj.class
         while klass.respond_to?(:source_path) && klass.source_path && !klass.abstract_class
-          klass.respond_to?(:sideload) ? klass.sideload : Importer.sideload(klass.source_path)
+          if klass.respond_to?(:sideload)
+            klass.sideload options
+          else
+            Importer.sideload klass.source_path, **options
+          end
+
           klass = klass.superclass
         end
       end

data/lib/proscenium/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Proscenium
-  VERSION = '0.14.0'
+  VERSION = '0.15.0.beta.1'
 end

data/lib/proscenium/view_component.rb

@@ -14,12 +14,14 @@ class Proscenium::ViewComponent < ViewComponent::Base
 
   module Sideload
     def before_render
-      Proscenium::SideLoad.sideload_inheritance_chain self
+      Proscenium::SideLoad.sideload_inheritance_chain self, controller.sideload_assets_options
 
       super
     end
   end
 
+  class_attribute :sideload_assets_options
+
   class << self
     attr_accessor :abstract_class
 
@@ -28,5 +30,9 @@ class Proscenium::ViewComponent < ViewComponent::Base
 
       super
     end
+
+    def sideload_assets(value)
+      self.sideload_assets_options = value
+    end
   end
 end

data/lib/proscenium.rb

@@ -46,6 +46,16 @@ module Proscenium
       "Path #{@path.inspect} cannot be resolved"
     end
   end
+
+  class << self
+    def config
+      @config ||= Railtie.config.proscenium
+    end
+
+    def cache
+      @cache ||= config.cache || ActiveSupport::Cache::NullStore.new
+    end
+  end
 end
 
 require 'proscenium/railtie'