proscenium 0.16.0

data/lib/proscenium/importer.rb

@@ -0,0 +1,134 @@
+# 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, **)
+        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] = { ** }
+          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 if !Proscenium.config.side_load || (options[:js] == false && options[:css] == false)
+
+        sideload_js(filepath, **options) unless options[:js] == false
+        sideload_css(filepath, **options) unless options[:css] == false
+      end
+
+      def sideload_js(filepath, **options)
+        return unless Proscenium.config.side_load
+
+        filepath = Rails.root.join(filepath) unless filepath.is_a?(Pathname)
+        filepath = filepath.sub_ext('')
+
+        JS_EXTENSIONS.find do |x|
+          if (fp = filepath.sub_ext(x)).exist?
+            import(Resolver.resolve(fp.to_s), sideloaded: true, **options)
+          end
+        end
+      end
+
+      def sideload_css(filepath, **options)
+        return unless Proscenium.config.side_load
+
+        filepath = Rails.root.join(filepath) unless filepath.is_a?(Pathname)
+        filepath = filepath.sub_ext('')
+
+        CSS_EXTENSIONS.find do |x|
+          if (fp = filepath.sub_ext(x)).exist?
+            import(Resolver.resolve(fp.to_s), sideloaded: true, **options)
+          end
+        end
+      end
+
+      def each_stylesheet(delete: false)
+        return if imported.blank?
+
+        blk = proc do |key, options|
+          if key.end_with?(*CSS_EXTENSIONS)
+            yield(key, options)
+            true
+          end
+        end
+
+        delete ? imported.delete_if(&blk) : imported.each(&blk)
+      end
+
+      def each_javascript(delete: false)
+        return if imported.blank?
+
+        blk = proc do |key, options|
+          if key.end_with?(*JS_EXTENSIONS)
+            yield(key, options)
+            true
+          end
+        end
+        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 imported?(filepath = nil)
+        filepath ? imported&.key?(filepath) : !imported.blank?
+      end
+    end
+  end
+end

data/lib/proscenium/libs/custom_element.js

@@ -0,0 +1,54 @@
+/**
+ * Base class for custom elements, providing support for event delegation, and idempotent
+ * customElement registration.
+ *
+ * The `handleEvent` method is called any time an event defined in `delegatedEvents` is triggered.
+ * It's a central handler to handle events for this custom element.
+ *
+ * @example
+ *   class MyComponent extends CustomElement {
+ *     static componentName = 'my-component'
+ *     static delegatedEvents = ['click']
+ *
+ *     handleEvent(event) {
+ *       console.log('Hello, world!')
+ *     }
+ *   }
+ *   MyComponent.register()
+ */
+export default class CustomElement extends HTMLElement {
+  /**
+   * Register the component as a custom element, inferring the component name from the kebab-cased
+   * class name. You can override the component name by setting a static `componentName` property.
+   *
+   * This method is idempotent.
+   */
+  static register() {
+    if (this.componentName === undefined) {
+      this.componentName = this.name
+        .replaceAll(/(.)([A-Z])/g, "$1-$2")
+        .toLowerCase();
+    }
+
+    if (!customElements.get(this.componentName)) {
+      customElements.define(this.componentName, this);
+    }
+  }
+
+  /**
+   * A list of event types to be delegated for the lifetime of the custom element.
+   *
+   * @type {Array}
+   */
+  static delegatedEvents = [];
+
+  constructor() {
+    super();
+
+    if (typeof this.handleEvent !== "undefined") {
+      this.constructor.delegatedEvents?.forEach((event) => {
+        this.addEventListener(event, this);
+      });
+    }
+  }
+}

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

@@ -0,0 +1,121 @@
+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) {
+  window.Proscenium.lazyScripts = {
+    ...window.Proscenium.lazyScripts,
+    ...JSON.parse(element.text),
+  };
+}
+
+// Find components already in the DOM.
+const elements = document.querySelectorAll(`[${pathAttribute}]`);
+elements.length > 0 && init(elements);
+
+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`.
+   *
+   * 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);
+      });
+  }
+}

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/stimulus-loading.js

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

data/lib/proscenium/libs/test.js

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

data/lib/proscenium/libs/ujs/class.js

@@ -0,0 +1,15 @@
+import DataConfirm from "./data_confirm";
+import DataDisableWith from "./data_disable_with";
+
+export default class UJS {
+  constructor() {
+    this.dc = new DataConfirm();
+    this.ddw = new DataDisableWith();
+
+    document.addEventListener("submit", this, { capture: true });
+  }
+
+  handleEvent(event) {
+    this.dc.onSubmit(event) && this.ddw.onSubmit(event);
+  }
+}

data/lib/proscenium/libs/ujs/data_confirm.js

@@ -0,0 +1,23 @@
+export default class DataConfirm {
+  onSubmit = (event) => {
+    if (
+      !event.target.matches("[data-turbo=true]") &&
+      event.submitter &&
+      "confirm" in event.submitter.dataset
+    ) {
+      const v = event.submitter.dataset.confirm;
+
+      if (
+        v !== "false" &&
+        !confirm(v === "true" || v === "" ? "Are you sure?" : v)
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        return false;
+      }
+    }
+
+    return true;
+  };
+}

data/lib/proscenium/libs/ujs/data_disable_with.js

@@ -0,0 +1,68 @@
+export default class DataDisableWith {
+  onSubmit = event => {
+    const target = event.target
+    const formId = target.id
+
+    if (target.matches('[data-turbo=true]')) return
+
+    const submitElements = Array.from(
+      target.querySelectorAll(
+        ['input[type=submit][data-disable-with]', 'button[type=submit][data-disable-with]'].join(
+          ', '
+        )
+      )
+    )
+
+    submitElements.push(
+      ...Array.from(
+        document.querySelectorAll(
+          [
+            `input[type=submit][data-disable-with][form='${formId}']`,
+            `button[type=submit][data-disable-with][form='${formId}']`
+          ].join(', ')
+        )
+      )
+    )
+
+    for (const ele of submitElements) {
+      if (ele.hasAttribute('form') && ele.getAttribute('form') !== target.id) continue
+
+      this.#disableButton(ele)
+    }
+  }
+
+  #disableButton(ele) {
+    const defaultTextValue = 'Please wait...'
+    let textValue = ele.dataset.disableWith || defaultTextValue
+    if (textValue === 'false') return
+    if (textValue === 'true') {
+      textValue = defaultTextValue
+    }
+
+    ele.disabled = true
+
+    if (ele.matches('button')) {
+      ele.dataset.valueBeforeDisabled = ele.innerHTML
+      ele.innerHTML = textValue
+    } else {
+      ele.dataset.valueBeforeDisabled = ele.value
+      ele.value = textValue
+    }
+
+    if (ele.resetDisableWith === undefined) {
+      // This function can be called on the element to reset the disabled state. Useful for when
+      // form submission fails, and the button should be re-enabled.
+      ele.resetDisableWith = function () {
+        this.disabled = false
+
+        if (this.matches('button')) {
+          this.innerHTML = this.dataset.valueBeforeDisabled
+        } else {
+          this.value = this.dataset.valueBeforeDisabled
+        }
+
+        delete this.dataset.valueBeforeDisabled
+      }
+    }
+  }
+}

data/lib/proscenium/libs/ujs/index.js

@@ -0,0 +1,9 @@
+export default async () => {
+  window.Proscenium = window.Proscenium || {};
+
+  if (!window.Proscenium.UJS) {
+    const classPath = "/@proscenium/ujs/class.js";
+    const module = await import(classPath);
+    window.Proscenium.UJS = new module.default();
+  }
+};

data/lib/proscenium/log_subscriber.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require 'active_support/log_subscriber'
+
+module Proscenium
+  class LogSubscriber < ActiveSupport::LogSubscriber
+    def sideload(event)
+      info do
+        "  [Proscenium] Side loaded #{event.payload[:identifier]}"
+      end
+    end
+
+    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 = "  #{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
+  end
+end
+
+Proscenium::LogSubscriber.attach_to :proscenium

data/lib/proscenium/middleware/base.rb

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+require 'oj'
+
+module Proscenium
+  class Middleware
+    class Base
+      include ActiveSupport::Benchmarkable
+
+      # Error when the result of the build returns an error. For example, when esbuild returns
+      # errors.
+      class CompileError < StandardError
+        attr_reader :detail, :file
+
+        def initialize(args)
+          @detail = args[:detail]
+          @file = args[:file]
+          super("Failed to build '#{args[:file]}' -- #{detail}")
+        end
+      end
+
+      def self.attempt(request)
+        new(request).renderable!&.attempt
+      end
+
+      def initialize(request)
+        @request = request
+      end
+
+      def renderable!
+        renderable? ? self : nil
+      end
+
+      private
+
+      def real_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
+        @path_to_build ||= @request.path[1..]
+      end
+
+      def sourcemap?
+        @request.path.ends_with?('.map')
+      end
+
+      def renderable?
+        file_readable?
+      end
+
+      def file_readable?
+        return false unless (path = clean_path(sourcemap? ? real_path[0...-4] : real_path))
+
+        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 content_type
+        case ::File.extname(path_to_build)
+        when '.js', '.mjs', '.ts', '.tsx', '.jsx' then 'application/javascript'
+        when '.css' then 'text/css'
+        when '.map' then 'application/json'
+        else
+          ::Rack::Mime.mime_type(::File.extname(path_to_build), nil) || 'application/javascript'
+        end
+      end
+
+      def render_response(content)
+        response = Rack::Response.new
+        response.write content
+        response.content_type = content_type
+        response['X-Proscenium-Middleware'] = name
+        response.set_header 'SourceMap', "#{@request.path_info}.map"
+
+        if Proscenium.config.cache_query_string && Proscenium.config.cache_max_age
+          response.cache! Proscenium.config.cache_max_age
+        end
+
+        yield response if block_given?
+
+        response.finish
+      end
+
+      def name
+        @name ||= self.class.name.split('::').last.downcase
+      end
+    end
+  end
+end

data/lib/proscenium/middleware/engines.rb

@@ -0,0 +1,45 @@
+# 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_name}")).to_s
+      end
+
+      def root_for_readable
+        ui? ? Proscenium.ui_path : engine.root
+      end
+
+      def engine
+        @engine ||= Proscenium.config.engines.find do |x|
+          @request.path.start_with?("/#{x.engine_name}")
+        end
+      end
+
+      def engine_name
+        ui? ? 'proscenium/ui' : engine.engine_name
+      end
+
+      def ui?
+        @request.path.start_with?('/proscenium/ui/')
+      end
+    end
+  end
+end