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

data/lib/proscenium/helper.rb

@@ -2,15 +2,23 @@
 
 module Proscenium
   module Helper
+    def sideload_assets(value)
+      if value.nil?
+        @current_template.instance_variable_defined?(:@sideload_assets_options) &&
+          @current_template.remove_instance_variable(:@sideload_assets_options)
+      else
+        @current_template.instance_variable_set :@sideload_assets_options, value
+      end
+    end
+
+    # Overriden to allow regular use of javascript_include_tag and stylesheet_link_tag, while still
+    # building with Proscenium. It's important to note that `include_assets` will not call this, as
+    # those asset paths all begin with a slash, which the Rails asset helpers do not pass through to
+    # here.
     def compute_asset_path(path, options = {})
       if %i[javascript stylesheet].include?(options[:type])
-        result = "/#{path}"
-
-        if (qs = Proscenium.config.cache_query_string)
-          result << "?#{qs}"
-        end
-
-        return result
+        result = Proscenium::Builder.build_to_path(path, base_url: request.base_url)
+        return result.split('::').last.delete_prefix 'public'
       end
 
       super
@@ -40,78 +48,23 @@ module Proscenium
       CssModule::Transformer.new(path).class_names(*names).map { |name, _| name }.join(' ')
     end
 
-    def include_stylesheets(**options)
-      out = []
-      Importer.each_stylesheet(delete: true) do |path, _path_options|
-        out << stylesheet_link_tag(path, extname: false, **options)
-      end
-      out.join("\n").html_safe
+    def include_assets
+      include_stylesheets + include_javascripts
+    end
+
+    def include_stylesheets
+      '<!-- [PROSCENIUM_STYLESHEETS] -->'.html_safe
     end
     alias side_load_stylesheets include_stylesheets
     deprecate side_load_stylesheets: 'Use `include_stylesheets` instead', deprecator: Deprecator.new
 
     # Includes all javascripts that have been imported and side loaded.
     #
-    # @param extract_lazy_scripts [Boolean] if true, any lazy scripts will be extracted using
-    #   `content_for` to `:proscenium_lazy_scripts` for later use. Be sure to include this in your
-    #   page with the `declare_lazy_scripts` helper, or simply
-    #   `content_for :proscenium_lazy_scripts`.
     # @return [String] the HTML tags for the javascripts.
-    def include_javascripts(extract_lazy_scripts: false, **options) # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
-      out = []
-
-      if Rails.application.config.proscenium.code_splitting && Importer.multiple_js_imported?
-        imports = Importer.imported.dup
-
-        paths_to_build = []
-        Importer.each_javascript(delete: true) do |x, _|
-          paths_to_build << x.delete_prefix('/')
-        end
-
-        result = Builder.build(paths_to_build.join(';'), base_url: 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.
-
-        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
-            out << javascript_include_tag(outpath, extname: false, **options)
-          end
-        end
-
-        if extract_lazy_scripts
-          content_for :proscenium_lazy_scripts do
-            tag.script type: 'application/json', id: 'prosceniumLazyScripts' do
-              raw scripts.to_json
-            end
-          end
-        else
-          out << tag.script(type: 'application/json', id: 'prosceniumLazyScripts') do
-            raw scripts.to_json
-          end
-        end
-      else
-        Importer.each_javascript(delete: true) do |path, _|
-          out << javascript_include_tag(path, extname: false, **options)
-        end
-      end
-
-      out.join("\n").html_safe
+    def include_javascripts
+      '<!-- [PROSCENIUM_LAZY_SCRIPTS] --><!-- [PROSCENIUM_JAVASCRIPTS] -->'.html_safe
     end
     alias side_load_javascripts include_javascripts
     deprecate side_load_javascripts: 'Use `include_javascripts` instead', deprecator: Deprecator.new
-
-    def declare_lazy_scripts
-      content_for :proscenium_lazy_scripts
-    end
   end
 end

data/lib/proscenium/importer.rb

@@ -72,8 +72,8 @@ module Proscenium
           end
         end
 
-        JS_EXTENSIONS.find(&import_if_exists)
-        CSS_EXTENSIONS.find(&import_if_exists)
+        JS_EXTENSIONS.find(&import_if_exists) unless options[:js] == false
+        CSS_EXTENSIONS.find(&import_if_exists) unless options[:css] == false
       end
 
       def each_stylesheet(delete: false)
@@ -109,10 +109,6 @@ module Proscenium
         imported&.keys&.any? { |x| x.end_with?(*JS_EXTENSIONS) }
       end
 
-      def multiple_js_imported?
-        imported&.keys&.many? { |x| x.end_with?(*JS_EXTENSIONS) }
-      end
-
       def imported?(filepath = nil)
         filepath ? imported&.key?(filepath) : !imported.blank?
       end

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,10 @@ 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 = ActiveSupport::Cache::MemoryStore.new if Rails.env.production?
+
     # 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 +43,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 +62,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