proscenium 0.10.0-arm64-darwin → 0.11.0-arm64-darwin

data/lib/proscenium/css_module.rb

@@ -3,41 +3,28 @@
 module Proscenium::CssModule
   extend ActiveSupport::Autoload
 
-  class StylesheetNotFound < StandardError
-    def initialize(pathname)
-      @pathname = pathname
-      super
-    end
-
-    def message
-      "Stylesheet is required, but does not exist: #{@pathname}"
-    end
-  end
+  autoload :Path
+  autoload :Transformer
 
-  autoload :ClassNamesResolver
-  autoload :Resolver # deprecated
+  class TransformError < StandardError
+    def initialize(name, additional_msg = nil)
+      msg = "Failed to transform CSS module `#{name}`"
+      msg << ' - ' << additional_msg if additional_msg
 
-  # Like `css_modules`, but will raise if the stylesheet cannot be found.
-  #
-  # @param name [Array, String]
-  def css_module!(names)
-    cssm.class_names!(names).join ' '
+      super msg
+    end
   end
 
   # Accepts one or more CSS class names, and transforms them into CSS module names.
   #
-  # @param name [Array, String]
-  def css_module(names)
-    cssm.class_names(names).join ' '
+  # @param name [String,Symbol,Array<String,Symbol>]
+  def css_module(*names)
+    cssm.class_names(*names, require_prefix: false).map { |name, _| name }.join(' ')
   end
 
   private
 
-  def path
-    self.class.path
-  end
-
   def cssm
-    @cssm ||= Resolver.new(path)
+    @cssm ||= Transformer.new(self.class.css_module_path)
   end
 end

data/lib/proscenium/ensure_loaded.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Proscenium
+  NotIncludedError = Class.new(StandardError)
+
+  module EnsureLoaded
+    def self.included(child)
+      child.class_eval do
+        append_after_action do
+          if request.format.html? && Importer.imported?
+            if Importer.js_imported?
+              raise NotIncludedError, 'There are javascripts to be included, but they have ' \
+                                      'not been included in the page. Did you forget to add the ' \
+                                      '`#include_javascripts` helper in your views?'
+            end
+
+            if Importer.css_imported?
+              raise NotIncludedError, 'There are stylesheets to be included, but they have ' \
+                                      'not been included in the page. Did you forget to add the ' \
+                                      '`#include_stylesheets` helper in your views?'
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/proscenium/ext/proscenium.h

@@ -97,7 +97,7 @@ extern "C" {
 //	- codeSpitting?
 //	- debug?
 //
-extern struct Result build(char* filepath, char* baseUrl, char* importMap, char* envVars, char* root, unsigned int env, GoUint8 codeSplitting, GoUint8 debug);
+extern struct Result build(char* filepath, char* baseUrl, char* importMap, char* envVars, char* appRoot, char* gemPath, unsigned int env, GoUint8 codeSplitting, char* engines, GoUint8 debug);
 
 // Resolve the given `path` relative to the `root`.
 //
@@ -107,8 +107,9 @@ extern struct Result build(char* filepath, char* baseUrl, char* importMap, char*
 //	Config
 //	- root - The working directory.
 //	- env - The environment (1 = development, 2 = test, 3 = production)
+//	- debug?
 //
-extern struct Result resolve(char* path, char* importMap, char* root, unsigned int env);
+extern struct Result resolve(char* path, char* importMap, char* appRoot, char* gemPath, unsigned int env, GoUint8 debug);
 
 #ifdef __cplusplus
 }

data/lib/proscenium/helper.rb

@@ -15,5 +15,90 @@ module Proscenium
 
       super
     end
+
+    # Accepts one or more CSS class names, and transforms them into CSS module names.
+    #
+    # @see CssModule::Transformer#class_names
+    # @param name [String,Symbol,Array<String,Symbol>]
+    def css_module(*names)
+      path = Pathname.new(@lookup_context.find(@virtual_path).identifier).sub_ext('')
+      CssModule::Transformer.new(path).class_names(*names, require_prefix: false).map do |name, _|
+        name
+      end.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
+    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
+    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

@@ -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 URL 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,101 @@
+window.Proscenium = window.Proscenium || { lazyScripts: {} };
+
+const element = document.querySelector("#prosceniumLazyScripts");
+if (element) {
+  const scripts = JSON.parse(element.text);
+  window.Proscenium.lazyScripts = {
+    ...window.Proscenium.lazyScripts,
+    ...scripts,
+  };
+}
+
+const elements = document.querySelectorAll("[data-proscenium-component-path]");
+elements.length > 0 && init(elements);
+
+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 (!window.Proscenium.lazyScripts[path]) {
+      throw `[proscenium/react/manager] Cannot load component ${path} (not found in Proscenium.lazyScripts)`;
+    }
+
+    const react = import("@proscenium/react-manager/react");
+    const Component = import(window.Proscenium.lazyScripts[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);
+      })
+      .catch((error) => {
+        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/libs/react-manager/react.js

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

data/lib/proscenium/libs/test.js

@@ -0,0 +1 @@
+console.log("/@proscenium/test.js");

data/lib/proscenium/middleware/base.rb

@@ -34,12 +34,12 @@ module Proscenium
       private
 
       def real_path
-        @request.path
+        @real_path ||= @request.path
       end
 
       # @return [String] the path to the file without the leading slash which will be built.
       def path_to_build
-        @request.path[1..]
+        @path_to_build ||= @request.path[1..]
       end
 
       def sourcemap?
@@ -53,22 +53,22 @@ module Proscenium
       def file_readable?
         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)
+        file_stat = File.stat(root_for_readable.join(path.delete_prefix('/').b).to_s)
       rescue SystemCallError
         false
       else
         file_stat.file? && file_stat.readable?
       end
 
+      def root_for_readable
+        Rails.root
+      end
+
       def clean_path(file)
         path = Rack::Utils.unescape_path file.chomp('/').delete_prefix('/')
         Rack::Utils.clean_path_info path if Rack::Utils.valid_path? path
       end
 
-      def root
-        @root ||= Rails.root.to_s
-      end
-
       def content_type
         case ::File.extname(path_to_build)
         when '.js', '.mjs', '.ts', '.tsx', '.jsx' then 'application/javascript'

data/lib/proscenium/middleware/engines.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Proscenium
+  class Middleware
+    # This middleware handles requests for assets in Rails engines. An engine that wants to expose
+    # its assets via Proscenium to the application must add itself to the list of engines in the
+    # Proscenium config options `Proscenium.config.engines`.
+    #
+    # For example, we have a gem that exposes a Rails engine.
+    #
+    #   module Gem1
+    #     class Engine < ::Rails::Engine
+    #       config.proscenium.engines << self
+    #     end
+    #   end
+    #
+    # When this gem is installed in any Rails application, its assets will be available at the URL
+    # `/gem1/...`. For example, if the gem has a file `lib/styles.css`, it can be requested at
+    # `/gem1/lib/styles.css`.
+    #
+    class Engines < Esbuild
+      def real_path
+        @real_path ||= Pathname.new(@request.path.delete_prefix("/#{engine.engine_name}")).to_s
+      end
+
+      def root_for_readable
+        engine.root
+      end
+
+      def engine
+        @engine ||= Proscenium.config.engines.find do |engine|
+          @request.path.start_with?("/#{engine.engine_name}")
+        end
+      end
+    end
+  end
+end

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::Builder.build(path_to_build, root: root,
-                                                                   base_url: @request.base_url)
-        end
-      rescue Proscenium::Builder::CompileError => e
+        render_response Builder.build(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
     end

data/lib/proscenium/middleware/runtime.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Proscenium
+  class Middleware
+    class Runtime < Esbuild
+      private
+
+      def real_path
+        @real_path ||= Pathname.new(@request.path.sub(%r{^/@proscenium},
+                                                      '/lib/proscenium/libs')).to_s
+      end
+
+      def root_for_readable
+        Proscenium::Railtie.root
+      end
+    end
+  end
+end

data/lib/proscenium/middleware.rb

@@ -9,6 +9,8 @@ module Proscenium
 
     autoload :Base
     autoload :Esbuild
+    autoload :Engines
+    autoload :Runtime
     autoload :Url
 
     def initialize(app)
@@ -40,12 +42,20 @@ 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)
+      return Runtime if request.path.match?(%r{^/@proscenium/})
+      return Esbuild if Pathname.new(request.path).fnmatch?(app_path_glob, File::FNM_EXTGLOB)
+
+      Engines if Pathname.new(request.path).fnmatch?(engines_path_glob, File::FNM_EXTGLOB)
+    end
+
+    def app_path_glob
+      "/{#{Proscenium::ALLOWED_DIRECTORIES}}/**.{#{FILE_EXTENSIONS.join(',')}}"
     end
 
-    def path_glob
-      paths = Rails.application.config.proscenium.include_paths.join(',')
-      "/{#{paths}}/**.{#{FILE_EXTENSIONS.join(',')}}"
+    def engines_path_glob
+      names = Proscenium.config.engines.map(&:engine_name)
+
+      "/{#{names.join(',')}}/{#{Proscenium::ALLOWED_DIRECTORIES}}/**.{#{FILE_EXTENSIONS.join(',')}}"
     end
 
     # TODO: handle precompiled assets

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

@@ -1,12 +1,22 @@
 # frozen_string_literal: true
 
-class Proscenium::SideLoad
+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
+
         layout = find_layout(layout_name, locals.keys, [formats.first])
         renderable = template.instance_variable_get(:@renderable)
 
@@ -14,18 +24,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 +46,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