proscenium 0.5.1-x86_64-linux → 0.7.0-x86_64-linux

data/lib/proscenium/view_component.rb

@@ -4,37 +4,47 @@ require 'view_component'
 
 class Proscenium::ViewComponent < ViewComponent::Base
   extend ActiveSupport::Autoload
+  include Proscenium::CssModule
 
   autoload :TagBuilder
   autoload :ReactComponent
 
-  def render_in(...)
-    cssm.compile_class_names(super(...))
+  # 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.
+  module Sideload
+    def before_render
+      klass = self.class
+      while !klass.abstract_class && klass.respond_to?(:path) && klass.path
+        Proscenium::SideLoad.append klass.path
+        klass = klass.superclass
+      end
+
+      super
+    end
   end
 
-  def before_render
-    side_load_assets unless self.class < ReactComponent
-  end
+  class << self
+    attr_accessor :path, :abstract_class
 
-  def css_module(name)
-    cssm.class_names!(name).join ' '
-  end
+    def inherited(child)
+      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
 
-  private
+      child.prepend Sideload if Rails.application.config.proscenium.side_load
 
-  # Side load any CSS/JS assets for the component. This will side load any `index.{css|js}` in
-  # the component directory.
-  def side_load_assets
-    Proscenium::SideLoad.append asset_path if Rails.application.config.proscenium.side_load
+      super
+    end
   end
 
-  def asset_path
-    @asset_path ||= "app/components#{virtual_path}"
+  # @override Auto compilation of class names to css modules.
+  def render_in(...)
+    cssm.compile_class_names(super(...))
   end
 
-  def cssm
-    @cssm ||= Proscenium::CssModule.new(asset_path)
-  end
+  private
 
   # Overrides ActionView::Helpers::TagHelper::TagBuilder, allowing us to intercept the
   # `css_module` option from the HTML options argument of the `tag` and `content_tag` helpers, and

data/lib/proscenium.rb

@@ -12,8 +12,85 @@ module Proscenium
   autoload :ViewComponent
   autoload :Phlex
   autoload :Helper
-  autoload :LinkToHelper
-  autoload :Precompile
+  autoload :Esbuild
+
+  def self.reset_current_side_loaded
+    Current.reset
+    Current.loaded = SideLoad::EXTENSIONS.to_h { |e| [e, Set.new] }
+  end
+
+  class PathResolutionFailed < StandardError
+    def initialize(path)
+      @path = path
+      super
+    end
+
+    def message
+      "Path #{@path.inspect} cannot be resolved"
+    end
+  end
+
+  module Utils
+    module_function
+
+    # @param value [#to_s] The value to create the digest from. This will usually be a `Pathname`.
+    # @return [String] string digest of the given value.
+    def digest(value)
+      Digest::SHA1.hexdigest(value.to_s)[..7]
+    end
+
+    # Resolve the given `path` to a URL path.
+    #
+    # @param path [String] Can be URL path, file system path, or bare specifier (ie. NPM package).
+    # @return [String] URL path.
+    def resolve_path(path) # rubocop:disable Metrics/AbcSize
+      raise ArgumentError, 'path must be a string' unless path.is_a?(String)
+
+      if path.starts_with?('./', '../')
+        raise ArgumentError, 'path must be an absolute file system or URL path'
+      end
+
+      matched_gem = Proscenium.config.side_load_gems.find do |_, opts|
+        path.starts_with?("#{opts[:root]}/")
+      end
+
+      if matched_gem
+        sroot = "#{matched_gem[1][:root]}/"
+        relpath = path.delete_prefix(sroot)
+
+        if matched_gem[1][:package_name]
+          return Esbuild::Golib.resolve("#{matched_gem[1][:package_name]}/#{relpath}")
+        end
+
+        # TODO: manually resolve the path without esbuild
+        raise PathResolutionFailed, path
+      end
+
+      return path.delete_prefix(Rails.root.to_s) if path.starts_with?("#{Rails.root}/")
+
+      Esbuild::Golib.resolve(path)
+    end
+
+    # Resolves CSS class `names` to CSS module names. Each name will be converted to a CSS module
+    # name, consisting of the camelCased name (lower case first character), and suffixed with the
+    # given `digest`.
+    #
+    # @param names [String, Array]
+    # @param digest: [String]
+    # @returns [Array] of class names generated from the given CSS module `names` and `digest`.
+    def css_modularise_class_names(*names, digest: nil)
+      names.flatten.compact.map { |name| css_modularise_class_name name, digest: digest }
+    end
+
+    def css_modularise_class_name(name, digest: nil)
+      sname = name.to_s
+      if sname.starts_with?('_')
+        "_#{sname[1..].camelize(:lower)}#{digest}"
+      else
+        "#{sname.camelize(:lower)}#{digest}"
+      end
+    end
+  end
 end
 
 require 'proscenium/railtie'

metadata

@@ -1,17 +1,17 @@
 --- !ruby/object:Gem::Specification
 name: proscenium
 version: !ruby/object:Gem::Version
-  version: 0.5.1
+  version: 0.7.0
 platform: x86_64-linux
 authors:
 - Joel Moss
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-08 00:00:00.000000000 Z
+date: 2023-06-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: actioncable
+  name: activesupport
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -31,81 +31,75 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '8.0'
 - !ruby/object:Gem::Dependency
-  name: activesupport
+  name: ffi
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 6.1.0
-    - - "<"
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '8.0'
+        version: 1.15.5
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 6.1.0
-    - - "<"
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '8.0'
+        version: 1.15.5
 - !ruby/object:Gem::Dependency
-  name: listen
+  name: nokogiri
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '1.13'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '1.13'
 - !ruby/object:Gem::Dependency
-  name: nokogiri
+  name: oj
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.13'
+        version: '3.13'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.13'
+        version: '3.13'
 - !ruby/object:Gem::Dependency
-  name: oj
+  name: phlex
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.13'
+        version: 1.8.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.13'
+        version: 1.8.1
 - !ruby/object:Gem::Dependency
-  name: phlex
+  name: phlex-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.4.0
+        version: 1.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.4.0
+        version: 1.0.0
 - !ruby/object:Gem::Dependency
   name: railties
   requirement: !ruby/object:Gem::Requirement
@@ -126,78 +120,45 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '8.0'
-- !ruby/object:Gem::Dependency
-  name: view_component
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 2.74.1
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 2.74.1
 description:
 email:
 - joel@developwithstyle.com
-executables:
-- esbuild
-- lightningcss
+executables: []
 extensions: []
 extra_rdoc_files: []
 files:
 - CODE_OF_CONDUCT.md
 - LICENSE.txt
 - README.md
-- app/channels/proscenium/connection.rb
-- app/channels/proscenium/reload_channel.rb
-- bin/esbuild
-- bin/lightningcss
-- config/routes.rb
 - lib/proscenium.rb
-- lib/proscenium/compiler.js
-- lib/proscenium/compilers/esbuild.bench.js
-- lib/proscenium/compilers/esbuild.js
-- lib/proscenium/compilers/esbuild/argument_error.js
-- lib/proscenium/compilers/esbuild/compile_error.js
-- lib/proscenium/compilers/esbuild/css/postcss.js
-- lib/proscenium/compilers/esbuild/css_plugin.js
-- lib/proscenium/compilers/esbuild/env_plugin.js
-- lib/proscenium/compilers/esbuild/http_bundle_plugin.js
-- lib/proscenium/compilers/esbuild/import_map.js
-- lib/proscenium/compilers/esbuild/resolve_plugin.js
-- lib/proscenium/compilers/esbuild/setup_plugin.js
-- lib/proscenium/compilers/esbuild/solidjs_plugin.js
 - lib/proscenium/css_module.rb
+- lib/proscenium/css_module/class_names_resolver.rb
+- lib/proscenium/css_module/resolver.rb
 - lib/proscenium/current.rb
+- lib/proscenium/esbuild.rb
+- lib/proscenium/esbuild/golib.rb
+- lib/proscenium/ext/proscenium
+- lib/proscenium/ext/proscenium.h
 - lib/proscenium/helper.rb
-- lib/proscenium/link_to_helper.rb
+- lib/proscenium/log_subscriber.rb
 - lib/proscenium/middleware.rb
 - lib/proscenium/middleware/base.rb
 - lib/proscenium/middleware/esbuild.rb
-- lib/proscenium/middleware/lightningcss.rb
-- lib/proscenium/middleware/outside_root.rb
-- lib/proscenium/middleware/runtime.rb
-- lib/proscenium/middleware/static.rb
 - lib/proscenium/middleware/url.rb
 - lib/proscenium/phlex.rb
-- lib/proscenium/phlex/component.rb
+- lib/proscenium/phlex/component_concerns.rb
+- lib/proscenium/phlex/page.rb
 - lib/proscenium/phlex/react_component.rb
-- lib/proscenium/precompile.rb
+- lib/proscenium/phlex/resolve_css_modules.rb
 - lib/proscenium/railtie.rb
-- lib/proscenium/runtime/auto_reload.js
-- lib/proscenium/runtime/react_shim/index.js
-- lib/proscenium/runtime/react_shim/package.json
 - lib/proscenium/side_load.rb
-- lib/proscenium/utils.js
+- lib/proscenium/side_load/ensure_loaded.rb
+- lib/proscenium/side_load/helper.rb
+- lib/proscenium/side_load/monkey.rb
 - lib/proscenium/version.rb
 - lib/proscenium/view_component.rb
 - lib/proscenium/view_component/react_component.rb
 - lib/proscenium/view_component/tag_builder.rb
-- lib/tasks/assets.rake
 homepage: https://github.com/joelmoss/proscenium
 licenses:
 - MIT
@@ -221,7 +182,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.7
+rubygems_version: 3.4.13
 signing_key:
 specification_version: 4
 summary: The engine powering your Rails frontend

data/app/channels/proscenium/connection.rb

@@ -1,13 +0,0 @@
-# frozen_string_literal: true
-
-module Proscenium
-  class Connection < ActionCable::Connection::Base
-    identified_by :uid
-
-    def connect
-      self.uid = request.params[:uid]
-      logger.add_tags(uid)
-      logger.info 'connected to Proscenium'
-    end
-  end
-end

data/app/channels/proscenium/reload_channel.rb

@@ -1,9 +0,0 @@
-# frozen_string_literal: true
-
-module Proscenium
-  class ReloadChannel < ActionCable::Channel::Base
-    def subscribed
-      stream_from 'reload'
-    end
-  end
-end

data/config/routes.rb

@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-Proscenium::Railtie.routes.draw do
-  if Proscenium.config.auto_reload
-    mount Proscenium::Railtie.websocket => Proscenium.config.cable_mount_path
-  end
-end

data/lib/proscenium/compiler.js

@@ -1,84 +0,0 @@
-// Recursively Scans the /app path for any JS/JSX/CSS files, and compiles each one, while also
-// building a manifest (JSON) of all files that are built. The manifest contains a simple mapping of
-// source file => compiled file. The compiled files are appended with the content digest, for
-// caching.
-
-import { writeAll } from 'std/streams/mod.ts'
-import { MuxAsyncIterator } from 'std/async/mod.ts'
-import { expandGlob, ensureDir } from 'std/fs/mod.ts'
-import { extname, relative, join, dirname, parse } from 'std/path/mod.ts'
-
-import build from './cli.js'
-
-const extnameToBuilderMap = {
-  '.js': 'javascript'
-}
-
-async function main(args = []) {
-  const [root, ...paths] = args
-  const outDir = join(root, 'public', 'assets')
-  const manifest = {}
-  const promises = []
-  const mux = new MuxAsyncIterator()
-
-  paths.forEach(path => {
-    mux.add(expandGlob(`${path}/**/*.{css,js,jsx}`, { root }))
-  })
-
-  for await (const file of mux) {
-    const builder = extnameToBuilderMap[extname(file.path)]
-
-    if (!builder) {
-      console.error('--! Failed to compile %o (unknown builder)', relative(root, file.path))
-      continue
-    }
-
-    promises.push(
-      compile({ ...file, root, outDir }).then(({ inPath, outPath }) => {
-        manifest[inPath] = outPath
-      })
-    )
-  }
-
-  await Promise.allSettled(promises)
-
-  return new TextEncoder().encode(JSON.stringify(manifest))
-}
-
-function compile({ root, path, outDir }) {
-  const entrypoint = relative(root, path)
-  const { dir, name, ext } = parse(entrypoint)
-  const builder = extnameToBuilderMap[ext]
-
-  console.log('--- Compiling %o with %s builder...', entrypoint, builder)
-
-  return build([root, entrypoint, builder])
-    .then(src => {
-      console.log(2)
-      return digest(src)
-    })
-    .then(({ hash, source }) => {
-      const path = join(outDir, dir, `${name}-${hash}${ext}`)
-
-      return ensureDir(dirname(path))
-        .then(() => Deno.writeTextFile(path, new TextDecoder().decode(source)))
-        .then(() => ({ inPath: entrypoint, outPath: relative(outDir, path) }))
-    })
-}
-
-async function digest(source) {
-  const view = new DataView(await crypto.subtle.digest('SHA-1', source))
-
-  let hash = ''
-  for (let index = 0; index < view.byteLength; index += 4) {
-    hash += view.getUint32(index).toString(16).padStart(8, '0')
-  }
-
-  return { hash, source }
-}
-
-export default main
-
-if (import.meta.main) {
-  await writeAll(Deno.stdout, await main(Deno.args))
-}

data/lib/proscenium/compilers/esbuild/argument_error.js

@@ -1,24 +0,0 @@
-export default class ArgumentError extends Error {
-  static MESSAGES = {
-    rootRequired: 'Current working directory is required as --root.',
-    lightningcssBinRequired:
-      'Path to the lightningcss CLI binary is required as --lightningcss-bin.',
-    pathsRequired: 'One or more file paths or globs are required.',
-
-    rootUnknown: ({ root }) => `A valid working directory is required - received ${root}`
-  }
-
-  constructor(reason, options) {
-    let message = ArgumentError.MESSAGES[reason]
-    if (typeof message === 'function') {
-      message = message(options)
-    }
-
-    message = `${reason}: ${message}`
-
-    super(message, options)
-
-    this.reason = reason
-    this.message = message
-  }
-}

data/lib/proscenium/compilers/esbuild/compile_error.js

@@ -1,148 +0,0 @@
-export default function () {
-  if (Deno.env.get('RAILS_ENV') === 'development') {
-    return function (detail) {
-      const template = `
-        <style>
-          :host {
-            position: fixed;
-            z-index: 99999;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            overflow-y: scroll;
-            margin: 0;
-            background: rgba(0, 0, 0, 0.66);
-            display: flex;
-            align-items: center;
-            --monospace: 'SFMono-Regular', Consolas,
-                        'Liberation Mono', Menlo, Courier, monospace;
-            --red: #ff5555;
-            --yellow: #e2aa53;
-            --purple: #cfa4ff;
-            --cyan: #2dd9da;
-            --dim: #c9c9c9;
-          }
-          
-          .window {
-            font-family: var(--monospace);
-            line-height: 1.5;
-            width: 800px;
-            height: 66vh;
-            color: #d8d8d8;
-            margin: 30px auto;
-            padding: 25px 40px;
-            position: relative;
-            background: #181818;
-            border-radius: 6px 6px 8px 8px;
-            box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-            overflow: hidden;
-            border-top: 8px solid var(--red);
-          }
-          
-          pre {
-            font-family: var(--monospace);
-            font-size: 16px;
-            margin: 0 0 1em 0;
-            overflow-x: scroll;
-            scrollbar-width: none;
-          }
-
-          pre::-webkit-scrollbar {
-            display: none;
-          }
-
-          .title, .message {
-            line-height: 1.3;
-            font-weight: 600;
-            white-space: pre-wrap;
-          }
-          
-          .message-body {
-            color: var(--red);
-          }
-
-          .file {
-            color: var(--cyan);
-            margin-bottom: 0;
-            white-space: pre-wrap;
-            word-break: break-all;
-          }
-
-          .code {
-            background: black;
-            border-left: 3px solid gray;
-            padding: 10px 0 0 20px;
-          }
-          .lineText {
-            display: block;
-            white-space: pre-wrap;
-          }
-          .lineCursor {
-            white-space: pre;
-            color: blueviolet;
-            display: block;
-          }
-        </style>
-        <div class="window">
-          <pre class="title">COMPILE ERROR!</pre>
-          <pre class="message"><span class="message-body"></span> in <span class="file"></span></pre>
-          <pre class="code"><span class="lineText"></span><span class="lineCursor"></span></pre>
-        </div>
-      `
-
-      class ErrorOverlay extends HTMLElement {
-        constructor(err) {
-          super()
-
-          this.root = this.attachShadow({ mode: 'open' })
-          this.root.innerHTML = template
-          this.root.querySelector('.message-body').textContent = err.text.trim()
-          if (err.location) {
-            const location = [err.location.file]
-            err.location.line && location.push(err.location.line)
-            err.location.column && location.push(err.location.column)
-            this.root.querySelector('.file').textContent = `/${location.join(':')}`
-
-            if (err.location.lineText) {
-              this.root.querySelector('.lineText').textContent = err.location.lineText
-              this.root.querySelector('.lineCursor').textContent =
-                ''.padStart(err.location.column - 1, ' ') + '^'
-            } else {
-              this.root.querySelector('.code').remove()
-            }
-
-            console.error('%s at %O', err.text, location)
-          } else {
-            console.error(err.text)
-          }
-
-          this.root.querySelector('.window').addEventListener('click', e => {
-            e.stopPropagation()
-          })
-
-          this.addEventListener('click', () => {
-            this.close()
-          })
-        }
-
-        close() {
-          this.parentNode?.removeChild(this)
-        }
-      }
-
-      const overlayId = 'proscenium-error-overlay'
-      if (customElements && !customElements.get(overlayId)) {
-        customElements.define(overlayId, ErrorOverlay)
-      }
-
-      document.body.appendChild(new ErrorOverlay(detail))
-    }
-  } else {
-    return function (detail) {
-      const location = `/${detail.location.file}:${detail.location.line}:${detail.location.column}`
-      console.error('%s at %O', detail.text, location)
-      throw `${detail.text} at ${location}`
-    }
-  }
-}