proscenium 0.10.0-x86_64-linux → 0.11.0.pre.1-x86_64-linux

data/lib/proscenium/importer.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+require 'active_support/current_attributes'
+
+module Proscenium
+  class Importer < ActiveSupport::CurrentAttributes
+    JS_EXTENSIONS = %w[.tsx .ts .jsx .js].freeze
+    CSS_EXTENSIONS = %w[.module.css .css].freeze
+
+    # Holds the JS and CSS files to include in the current request.
+    #
+    # Example:
+    #   {
+    #     '/path/to/input/file.js': {
+    #       output: '/path/to/compiled/file.js',
+    #       **options
+    #     }
+    #   }
+    attribute :imported
+
+    class << self
+      # Import the given `filepath`. This is idempotent - it will never include duplicates.
+      #
+      # @param filepath [String] Absolute path (relative to Rails root) of the file to import.
+      #   Should be the actual asset file, eg. app.css, some/component.js.
+      # @param resolve [String] description of the file to resolve and import.
+      # @return [String] the digest of the imported file path if a css module (*.module.css).
+      def import(filepath = nil, resolve: nil, **options)
+        self.imported ||= {}
+
+        filepath = Resolver.resolve(resolve) if !filepath && resolve
+        css_module = filepath.end_with?('.module.css')
+
+        unless self.imported.key?(filepath)
+          # ActiveSupport::Notifications.instrument('sideload.proscenium', identifier: value)
+
+          self.imported[filepath] = { **options }
+          self.imported[filepath][:digest] = Utils.digest(filepath) if css_module
+        end
+
+        css_module ? self.imported[filepath][:digest] : nil
+      end
+
+      # Sideloads JS and CSS assets for the given Ruby filepath.
+      #
+      # Any files with the same base name and matching a supported extension will be sideloaded.
+      # Only one JS and one CSS file will be sideloaded, with the first match used in the following
+      # order:
+      #  - JS extensions: .tsx, .ts, .jsx, and .js.
+      #  - CSS extensions: .css.module, and .css.
+      #
+      # Example:
+      #  - `app/views/layouts/application.rb`
+      #  - `app/views/layouts/application.css`
+      #  - `app/views/layouts/application.js`
+      #  - `app/views/layouts/application.tsx`
+      #
+      # A request to sideload `app/views/layouts/application.rb` will result in `application.css`
+      # and `application.tsx` being sideloaded. `application.js` will not be sideloaded because the
+      # `.tsx` extension is matched first.
+      #
+      # @param filepath [Pathname] Absolute file system path of the Ruby file to sideload.
+      def sideload(filepath, **options)
+        return unless Proscenium.config.side_load
+
+        filepath = Rails.root.join(filepath) unless filepath.is_a?(Pathname)
+        filepath = filepath.sub_ext('')
+
+        import_if_exists = lambda do |x|
+          if (fp = filepath.sub_ext(x)).exist?
+            import(Resolver.resolve(fp.to_s), sideloaded: true, **options)
+          end
+        end
+
+        JS_EXTENSIONS.find(&import_if_exists)
+        CSS_EXTENSIONS.find(&import_if_exists)
+      end
+
+      def each_stylesheet(delete: false)
+        return if imported.blank?
+
+        blk = proc { |key, options| key.end_with?(*CSS_EXTENSIONS) && yield(key, options) }
+        delete ? imported.delete_if(&blk) : imported.each(&blk)
+      end
+
+      def each_javascript(delete: false)
+        return if imported.blank?
+
+        blk = proc { |key, options| key.end_with?(*JS_EXTENSIONS) && yield(key, options) }
+        delete ? imported.delete_if(&blk) : imported.each(&blk)
+      end
+
+      def css_imported?
+        imported&.keys&.any? { |x| x.end_with?(*CSS_EXTENSIONS) }
+      end
+
+      def js_imported?
+        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
+    end
+  end
+end

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

@@ -0,0 +1,88 @@
+const elements = document.querySelectorAll("[data-proscenium-component-path]");
+
+// Initialize only if there are components.
+elements.length > 0 && init();
+
+function init() {
+  /**
+   * Mounts component located at `path`, into the DOM `element`.
+   *
+   * The element at which the component is mounted must have the following data attributes:
+   *
+   * - `data-proscenium-component-path`: The URL path to the component's source file.
+   * - `data-proscenium-component-props`: JSON object of props to pass to the component.
+   * - `data-proscenium-component-lazy`: If present, will lazily load the component when in view
+   *   using IntersectionObserver.
+   * - `data-proscenium-component-forward-children`: If the element should forward its `innerHTML`
+   *   as the component's children prop.
+   */
+  function mount(element, path, { children, ...props }) {
+    // For testing and simulation of slow connections.
+    // const sim = new Promise((resolve) => setTimeout(resolve, 5000));
+
+    if (!(path in window.prosceniumLazyScripts)) {
+      throw `[proscenium/react/manager] Cannot load component ${path} (not found in prosceniumLazyScripts)`;
+    }
+
+    const react = import("@proscenium/react-manager/react");
+    const Component = import(window.prosceniumLazyScripts[path].outpath);
+
+    const forwardChildren =
+      "prosceniumComponentForwardChildren" in element.dataset &&
+      element.innerHTML !== "";
+
+    Promise.all([react, Component]).then(([r, c]) => {
+      if (proscenium.env.RAILS_ENV === "development") {
+        console.groupCollapsed(
+          `[proscenium/react/manager] 🔥 %o mounted!`,
+          path
+        );
+        console.log("props: %o", props);
+        console.groupEnd();
+      }
+
+      let component;
+      if (forwardChildren) {
+        component = r.createElement(c.default, props, element.innerHTML);
+      } else if (children) {
+        component = r.createElement(c.default, props, children);
+      } else {
+        component = r.createElement(c.default, props);
+      }
+
+      r.createRoot(element).render(component);
+    });
+  }
+
+  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/libs/react-manager/react.js

@@ -0,0 +1,2 @@
+export { createElement } from "react";
+export { createRoot } from "react-dom/client";

data/lib/proscenium/middleware/esbuild.rb

@@ -20,10 +20,8 @@ module Proscenium
       end
 
       def attempt
-        ActiveSupport::Notifications.instrument('build.proscenium', identifier: path_to_build) do
-          render_response Proscenium::Builder.build(path_to_build, root: root,
-                                                                   base_url: @request.base_url)
-        end
+        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

data/lib/proscenium/middleware.rb

@@ -40,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,18 +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
-          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
 
-          Proscenium::SideLoad.append "app/views/#{template.virtual_path}"
+          Importer.sideload "app/views/#{template.virtual_path}"
         end
 
         super
@@ -36,20 +38,14 @@ class Proscenium::SideLoad
       private
 
       def render_partial_template(view, locals, template, layout, block)
-        if template.respond_to?(:virtual_path) &&
+        if Proscenium.config.side_load && template.respond_to?(:virtual_path) &&
            template.respond_to?(:type) && template.type == :html
-          Proscenium::SideLoad.append "app/views/#{layout.virtual_path}" if layout
-          Proscenium::SideLoad.append "app/views/#{template.virtual_path}"
+          Importer.sideload "app/views/#{layout.virtual_path}" if layout
+          Importer.sideload "app/views/#{template.virtual_path}"
         end
 
         super
       end
-
-      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
-      end
     end
   end
   # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity

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 type: :module, defer: true
+      include_javascripts type: :module, defer: true
     end
   end
 end

data/lib/proscenium/phlex/react_component.rb

@@ -1,33 +1,32 @@
 # frozen_string_literal: true
 
-#
-# 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 Proscenium::Phlex::ReactComponent < Proscenium::Phlex
-  self.abstract_class = true
-
-  include Proscenium::Componentable
-  include Proscenium::Phlex::ComponentConcerns::CssModules
-
-  # Override this to provide your own loading UI.
+module Proscenium
+  # Renders a <div> for use with React components, with data attributes specifying the component
+  # path and props.
   #
-  # @example
-  #   def template(**attributes, &block)
-  #     super do
-  #       'Look at me! I am loading now...'
-  #     end
-  #   end
+  # 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.
   #
-  # @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
+  # 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
 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,14 +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
-
-  # Environment variables that should always be passed to the builder.
-  DEFAULT_ENV_VARS = Set['RAILS_ENV', 'NODE_ENV'].freeze
-
   class << self
     def config
       @config ||= Railtie.config.proscenium
@@ -26,10 +18,12 @@ module Proscenium
     config.proscenium = ActiveSupport::OrderedOptions.new
     config.proscenium.debug = false
     config.proscenium.side_load = true
-    config.proscenium.code_splitting = false
+    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
@@ -60,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