proscenium 0.1.0.alpha1-x86_64-linux

data/lib/proscenium/css_module.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class Proscenium::CssModule
+  def initialize(path)
+    @path = "#{path}.module.css"
+
+    return unless Rails.application.config.proscenium.side_load
+
+    Proscenium::SideLoad.append! Rails.root.join(@path)
+  end
+
+  # Returns an Array of class names generated from the given CSS module `names`.
+  def class_names(*names)
+    names.flatten.compact.map { |name| "#{name}#{hash}" }
+  end
+
+  private
+
+  def hash
+    @hash ||= Digest::SHA1.hexdigest("/#{@path}")[..7]
+  end
+end

data/lib/proscenium/current.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require 'active_support/current_attributes'
+
+module Proscenium
+  class Current < ActiveSupport::CurrentAttributes
+    attribute :loaded
+  end
+end

data/lib/proscenium/helper.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Proscenium
+  module Helper
+    def compute_asset_path(path, options = {})
+      return "/#{path}" if %i[javascript stylesheet].include?(options[:type])
+
+      super
+    end
+
+    def side_load_stylesheets
+      return unless Proscenium::Current.loaded
+
+      stylesheet_link_tag(*Proscenium::Current.loaded[:css])
+    end
+
+    def side_load_javascripts(**options)
+      return unless Proscenium::Current.loaded
+
+      javascript_include_tag(*Proscenium::Current.loaded[:js], options)
+    end
+
+    def proscenium_dev
+      return if !Rails.env.development? || !Proscenium::Railtie.websocket
+
+      javascript_tag %(
+        import autoReload from '/proscenium-runtime/auto_reload.js';
+        autoReload('#{Proscenium::Railtie.websocket_mount_path}');
+      ), type: 'module'
+    end
+  end
+end

data/lib/proscenium/link_to_helper.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Proscenium
+  module LinkToHelper
+    # Overrides ActionView::Helpers::UrlHelper#link_to to allow passing a component instance as the
+    # URL, which will build the URL from the component path, eg. `/components/my_component`. The
+    # resulting link tag will also populate the `data` attribute with the component props.
+    #
+    # Example:
+    #   link_to 'Go to', MyComponent
+    #
+    # TODO: ummm, todo it! ;)
+    def link_to(*args, &block)
+      # name_argument_index = block ? 0 : 1
+      # if (args[name_argument_index]).respond_to?(:render_in)
+      #   return super(*LinkToComponentArguments.new(args, name_argument_index,
+      #                                              self).helper_options, &block)
+      # end
+
+      super
+    end
+  end
+
+  # Component handling for the `link_to` helper.
+  class LinkToComponentArguments
+    def initialize(options, name_argument_index, context)
+      @options = options
+      @name_argument_index = name_argument_index
+      @component = @options[@name_argument_index]
+
+      # We have to render the component, and then extract the props from the component. Rendering
+      # first ensures that we have all the correct props.
+      context.render @component
+    end
+
+    def helper_options
+      @options[@name_argument_index] = "/components#{@component.virtual_path}"
+      @options[@name_argument_index += 1] ||= {}
+      @options[@name_argument_index][:rel] = 'nofollow'
+      @options[@name_argument_index][:data] ||= {}
+      @options[@name_argument_index][:data][:component] = {
+        path: @component.virtual_path,
+        props: @component.props
+      }
+
+      @options
+    end
+  end
+end

data/lib/proscenium/middleware/base.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+require 'open3'
+
+module Proscenium
+  class Middleware
+    class Base
+      include ActiveSupport::Benchmarkable
+
+      class Error < StandardError; end
+
+      def self.attempt(request)
+        new(request).renderable!&.attempt
+      end
+
+      def initialize(request)
+        @request = request
+      end
+
+      def renderable!
+        renderable? ? self : nil
+      end
+
+      private
+
+      def renderable?
+        file_readable?
+      end
+
+      def file_readable?(file = @request.path_info)
+        return unless (path = clean_path(file))
+
+        file_stat = File.stat(Pathname(root).join(path.delete_prefix('/').b).to_s)
+      rescue SystemCallError
+        false
+      else
+        file_stat.file? && file_stat.readable?
+      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
+        @content_type ||
+          ::Rack::Mime.mime_type(::File.extname(@request.path_info), nil) ||
+          'application/javascript'
+      end
+
+      def render_response(content)
+        response = Rack::Response.new
+        response.write content
+        response.content_type = content_type
+        response['X-Proscenium-Middleware'] = name
+        response.finish
+      end
+
+      def build(cmd)
+        stdout, stderr, status = Open3.capture3(cmd)
+
+        raise Error, stderr unless status.success?
+        unless stderr.empty?
+          raise "Proscenium build of #{name}:'#{@request.fullpath}' failed -- #{stderr}"
+        end
+
+        stdout
+      end
+
+      def benchmark(type)
+        super logging_message(type)
+      end
+
+      # rubocop:disable Style/FormatStringToken
+      def logging_message(type)
+        format '[Proscenium] Request (%s) %s for %s at %s',
+               type, @request.fullpath, @request.ip, Time.now.to_default_s
+      end
+      # rubocop:enable Style/FormatStringToken
+
+      def logger
+        Rails.logger
+      end
+
+      def name
+        @name ||= self.class.name.split('::').last.downcase
+      end
+    end
+  end
+end

data/lib/proscenium/middleware/esbuild.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Proscenium
+  class Middleware
+    class Esbuild < Base
+      def attempt
+        benchmark :esbuild do
+          render_response build("#{cli} --root #{root} #{path}")
+        end
+      end
+
+      private
+
+      def path
+        @request.path[1..]
+      end
+
+      def cli
+        if ENV['PROSCENIUM_TEST']
+          'deno run -q --import-map import_map.json -A lib/proscenium/compilers/esbuild.js'
+        else
+          Gem.bin_path 'proscenium', 'esbuild'
+        end
+      end
+    end
+  end
+end

data/lib/proscenium/middleware/parcel_css.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require 'oj'
+
+module Proscenium
+  class Middleware
+    class ParcelCss < Base
+      def attempt
+        benchmark :parcelcss do
+          results = build("#{cli} #{cli_options.join ' '} #{root}#{@request.path}")
+          render_response css_module? ? Oj.load(results, mode: :strict)['code'] : results
+        end
+      end
+
+      private
+
+      def cli
+        Gem.bin_path 'proscenium', 'parcel_css'
+      end
+
+      def cli_options
+        options = ['--nesting', '--custom-media', '--targets', "'>= 0.25%'"]
+
+        if css_module?
+          hash = Digest::SHA1.hexdigest(@request.path)[..7]
+          options += ['--css-modules', '--css-modules-pattern', "'[local]#{hash}'"]
+        end
+
+        Rails.env.production? ? options << '-m' : options
+      end
+
+      def css_module?
+        @css_module ||= /\.module\.css$/i.match?(@request.path_info)
+      end
+    end
+  end
+end

data/lib/proscenium/middleware/runtime.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Proscenium
+  class Middleware
+    class Runtime < Esbuild
+      private
+
+      def renderable?
+        old_root = root
+        old_path_info = @request.path_info
+
+        @root = Pathname.new(__dir__).join('../')
+        @request.path_info = @request.path_info.sub(%r{^/proscenium-runtime/}, 'runtime/')
+
+        super
+      ensure
+        @request.path_info = old_path_info
+        @root = old_root
+      end
+    end
+  end
+end

data/lib/proscenium/middleware/static.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Proscenium
+  module Middleware
+    # Serves static files from disk that end with .js or .css.
+    class Static < Base
+      def attempt
+        benchmark :static do
+          Rack::File.new(root, { 'X-Proscenium-Middleware' => 'static' }).call(@request.env)
+        end
+      end
+    end
+  end
+end

data/lib/proscenium/middleware.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Proscenium
+  class Middleware
+    extend ActiveSupport::Autoload
+
+    autoload :Base
+    autoload :Esbuild
+    autoload :ParcelCss
+    autoload :Runtime
+
+    MIDDLEWARE_CLASSES = {
+      esbuild: Esbuild,
+      parcelcss: ParcelCss,
+      runtime: Runtime
+    }.freeze
+
+    def initialize(app)
+      @app = app
+    end
+
+    def call(env)
+      request = Rack::Request.new(env)
+
+      return @app.call(env) if !request.get? && !request.head?
+
+      attempt(request) || @app.call(env)
+    end
+
+    private
+
+    # Look for the precompiled file in public/assets first, then fallback to the Proscenium
+    # middleware that matches the type of file requested, ie: .js => esbuild.
+    # See Rails.application.config.proscenium.glob_types.
+    def attempt(request)
+      return unless (type = find_type(request))
+
+      file_handler.attempt(request.env) || MIDDLEWARE_CLASSES[type].attempt(request)
+    end
+
+    # Returns the type of file being requested using Rails.application.config.proscenium.glob_types.
+    def find_type(request)
+      return :runtime if request.path_info.start_with?('/proscenium-runtime/')
+
+      path = Rails.root.join(request.path[1..])
+
+      type, = glob_types.find do |_, globs|
+        # TODO: Look for the precompiled file in public/assets first
+        #   globs.any? { |glob| Rails.public_path.join('assets').glob(glob).any?(path) }
+
+        globs.any? { |glob| Rails.root.glob(glob).any?(path) }
+      end
+
+      type
+    end
+
+    def file_handler
+      ::ActionDispatch::FileHandler.new Rails.public_path.join('assets').to_s,
+                                        headers: { 'X-Proscenium-Middleware' => 'precompiled' }
+    end
+
+    def glob_types
+      Rails.application.config.proscenium.glob_types
+    end
+  end
+end

data/lib/proscenium/precompile.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+require 'open3'
+
+module Proscenium
+  class Precompile
+    def self.call
+      new.call
+    end
+
+    def call
+      Rails.application.config.proscenium.glob_types.find do |type, globs|
+        cmd = "#{cli type} --root #{Rails.root} '#{globs.join "' '"}' --write"
+        _, stderr, status = Open3.capture3(cmd)
+
+        raise stderr unless status.success?
+        raise "#{type} compiliation failed -- #{stderr}" unless stderr.empty?
+      end
+    end
+
+    private
+
+    def cli(type)
+      if ENV['PROSCENIUM_TEST']
+        "deno run -q --import-map import_map.json -A lib/proscenium/compilers/#{type}.js"
+      else
+        Gem.bin_path 'proscenium', type.to_s
+      end
+    end
+  end
+end

data/lib/proscenium/railtie.rb

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+require 'rails'
+require 'action_cable/engine'
+require 'listen'
+
+ENV['RAILS_ENV'] = Rails.env
+
+module Proscenium
+  # These globs should actually be Deno supported globs, and not ruby globs. This is because when
+  # precompiling, the glob paths are passed as is to the compiler run by Deno.
+  #
+  # See https://doc.deno.land/https://deno.land/std@0.145.0/path/mod.ts/~/globToRegExp
+  DEFAULT_GLOB_TYPES = {
+    esbuild: [
+      'lib/**/*.{js,jsx}',
+      'app/components/**/*.{js,jsx}',
+      'app/views/**/*.{js,jsx}'
+    ],
+    parcelcss: [
+      'lib/**/*.css',
+      'app/components/**/*.css',
+      'app/views/**/*.css'
+    ]
+  }.freeze
+
+  class << self
+    def config
+      @config ||= Railtie.config.proscenium
+    end
+  end
+
+  class Railtie < ::Rails::Engine
+    isolate_namespace Proscenium
+
+    config.proscenium = ActiveSupport::OrderedOptions.new
+    config.proscenium.listen_paths ||= %w[lib app]
+    config.proscenium.listen_extensions ||= /\.(css|jsx?)$/
+    config.proscenium.side_load = true
+
+    initializer 'proscenium.configuration' do |app|
+      options = app.config.proscenium
+
+      options.glob_types = DEFAULT_GLOB_TYPES if options.glob_types.blank?
+
+      options.auto_refresh = true if options.auto_refresh.nil?
+      options.listen = Rails.env.development? if options.listen.nil?
+      options.listen_paths.filter! { |path| Dir.exist? path }
+      options.cable_mount_path ||= '/proscenium-cable'
+      options.cable_logger ||= Rails.logger
+    end
+
+    initializer 'proscenium.side_load' do |_app|
+      Proscenium::Current.loaded ||= SideLoad::EXTENSIONS.to_h { |e| [e, Set[]] }
+    end
+
+    initializer 'proscenium.middleware' do |app|
+      app.middleware.insert_after ActionDispatch::Static, Proscenium::Middleware
+      app.middleware.insert_after ActionDispatch::Static, Rack::ETag, 'no-cache'
+      app.middleware.insert_after ActionDispatch::Static, Rack::ConditionalGet
+    end
+
+    initializer 'proscenium.helpers' do |_app|
+      ActiveSupport.on_load(:action_view) do
+        ActionView::Base.include Proscenium::Helper
+
+        if Rails.application.config.proscenium.side_load
+          ActionView::TemplateRenderer.prepend SideLoad::Monkey::TemplateRenderer
+        end
+
+        ActionView::Helpers::UrlHelper.prepend Proscenium::LinkToHelper
+      end
+    end
+
+    config.after_initialize do
+      next unless config.proscenium.listen
+
+      @listener = Listen.to(*config.proscenium.listen_paths,
+                            only: config.proscenium.listen_extensions) do |mod, add, rem|
+        Proscenium::Railtie.websocket&.broadcast('reload', {
+                                                   modified: mod,
+                                                   removed: rem,
+                                                   added: add
+                                                 })
+      end
+
+      @listener.start
+    end
+
+    at_exit do
+      @listener&.stop
+    end
+
+    class << self
+      def websocket
+        return unless config.proscenium.auto_refresh
+
+        cable = ActionCable::Server::Configuration.new
+        cable.cable = { adapter: 'async' }.with_indifferent_access
+        cable.mount_path = config.proscenium.cable_mount_path
+        cable.connection_class = -> { Proscenium::Connection }
+        cable.logger = config.proscenium.cable_logger
+
+        @websocket ||= ActionCable::Server::Base.new(config: cable)
+      end
+
+      def websocket_mount_path
+        "#{mounted_path}#{config.proscenium.cable_mount_path}" if websocket
+      end
+
+      def mounted_path
+        Proscenium::Railtie.routes.find_script_name({})
+      end
+    end
+  end
+end

data/lib/proscenium/runtime/auto_reload.js

@@ -0,0 +1,22 @@
+import { createConsumer } from 'https://esm.sh/@rails/actioncable@6.0.5'
+import debounce from 'https://esm.sh/debounce@1.2.1'
+
+export default socketPath => {
+  const uid = (Date.now() + ((Math.random() * 100) | 0)).toString()
+  const consumer = createConsumer(`${socketPath}?uid=${uid}`)
+
+  consumer.subscriptions.create('Proscenium::ReloadChannel', {
+    received: debounce(() => {
+      console.log('Proscenium files changed; reloading...')
+      location.reload()
+    }, 200),
+
+    connected() {
+      console.log('Proscenium auto reload websocket connected')
+    },
+
+    disconnected() {
+      console.log('Proscenium auto reload websocket disconnected')
+    }
+  })
+}

data/lib/proscenium/runtime/component_manager/index.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-console */
+
+import renderComponent from `/proscenium-runtime/component_manager/render_component.js`
+
+document.addEventListener('DOMContentLoaded', () => {
+  const elements = document.querySelectorAll('[data-component]')
+
+  if (elements.length < 1) return
+
+  Array.from(elements, (ele) => {
+    const data = JSON.parse(ele.getAttribute('data-component'))
+
+    let isVisible = false
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!isVisible && entry.isIntersecting) {
+          isVisible = true
+          observer.unobserve(ele)
+
+          renderComponent(ele, data)
+        }
+      })
+    })
+
+    observer.observe(ele)
+  })
+})

data/lib/proscenium/runtime/component_manager/render_component.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-console */
+
+import { RAILS_ENV } from 'env'
+
+// We don't use JSX, as doing so would auto-inject React. We don't want to do this, as React is lazy
+// loaded only when needed.
+export default async function (ele, data) {
+  const { createElement, useEffect, lazy, Suspense } = await import('react')
+  const { createRoot } = await import('react-dom/client')
+
+  const component = lazy(() => import(`/app/components${data.path}.jsx`))
+  const contentLoader = data.contentLoader && ele.firstElementChild
+
+  const Fallback = ({ contentLoader }) => {
+    useEffect(() => {
+      contentLoader && contentLoader.remove()
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    if (!contentLoader) return null
+
+    return /* @__PURE__ */ createElement('div', {
+      style: { height: '100%' },
+      dangerouslySetInnerHTML: { __html: contentLoader.outerHTML }
+    })
+  }
+
+  createRoot(ele).render(
+    /* @__PURE__ */ createElement(
+      Suspense,
+      {
+        fallback: /* @__PURE__ */ createElement(Fallback, {
+          contentLoader
+        })
+      },
+      createElement(component, data.props)
+    )
+  )
+
+  RAILS_ENV === 'development' && console.debug(`[REACT]`, `Rendered ${data.path.slice(1)}`)
+}

data/lib/proscenium/runtime/import_css.js

@@ -0,0 +1,46 @@
+async function digest(value) {
+  value = new TextEncoder().encode(value)
+  const view = new DataView(await crypto.subtle.digest('SHA-1', value))
+
+  let hexCodes = ''
+  for (let index = 0; index < view.byteLength; index += 4) {
+    hexCodes += view.getUint32(index).toString(16).padStart(8, '0')
+  }
+
+  return hexCodes.slice(0, 8)
+}
+
+const proxyCache = {}
+
+export async function importCssModule(path) {
+  appendStylesheet(path)
+
+  if (Object.keys(proxyCache).includes(path)) {
+    return proxyCache[path]
+  }
+
+  const hashValue = await digest(path)
+  return (proxyCache[path] = new Proxy(
+    {},
+    {
+      get(target, prop, receiver) {
+        if (prop in target || typeof prop === 'symbol') {
+          return Reflect.get(target, prop, receiver)
+        } else {
+          return `${prop}${hashValue}`
+        }
+      }
+    }
+  ))
+}
+
+export function appendStylesheet(path) {
+  // Make sure we only load the stylesheet once.
+  if (document.head.querySelector(`link[rel=stylesheet][href='${path}']`)) return
+
+  const ele = document.createElement('link')
+  ele.setAttribute('rel', 'stylesheet')
+  ele.setAttribute('media', 'all')
+  ele.setAttribute('href', path)
+  document.head.appendChild(ele)
+}

data/lib/proscenium/runtime/react_shim/index.js

@@ -0,0 +1 @@
+export { createElement as reactCreateElement, Fragment as ReactFragment } from 'react'

data/lib/proscenium/runtime/react_shim/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "react_shim",
+  "private": true,
+  "sideEffects": false
+}