proscenium 0.1.0.alpha2-x86_64-linux → 0.1.0.alpha4-x86_64-linux

data/lib/proscenium/compilers/esbuild.js

@@ -4,24 +4,66 @@ import { expandGlob } from 'std/fs/mod.ts'
 import { join, isGlob, resolve, dirname, fromFileUrl } from 'std/path/mod.ts'
 import { build, stop } from 'esbuild'
 
+import { readImportMap } from './esbuild/import_map.js'
 import envPlugin from './esbuild/env_plugin.js'
+import cssPlugin from './esbuild/css_plugin.js'
 import resolvePlugin from './esbuild/resolve_plugin.js'
 import ArgumentError from './esbuild/argument_error.js'
+import throwCompileError from './esbuild/compile_error.js'
 
+/**
+ * Compile the given paths, outputting the result to stdout. This is designed to be called as a CLI:
+ *
+ * Example with Deno run (dev and test):
+ *  deno run -A lib/proscenium/compilers/esbuild.js --root ./test/internal lib/foo.js
+ * Example with Deno compiled binary:
+ *  bin/esbuild lib/proscenium/compilers/esbuild.js --root ./test/internal lib/foo.js
+ *
+ * USAGE:
+ *   esbuild [OPTIONS] <PATHS_ARG>...
+ *
+ * ARGS:
+ *   <PATHS_ARG>...    One or more file paths to compile.
+ *
+ * OPTIONS:
+ *   --root
+ *       Relative or absolute path to the root or current working directory when compilation will
+ *       take place.
+ *   --import-map
+ *       Path to an import map, relative to the <root>.
+ *   --write
+ *       Write output to the filesystem according to esbuild logic.
+ *   --debug
+ *       Debug output,
+ */
 if (import.meta.main) {
+  !Deno.env.get('RAILS_ENV') && Deno.env.set('RAILS_ENV', 'development')
+
   const { _: paths, ...options } = parseArgs(Deno.args, {
-    string: ['root', 'runtime-dir'],
-    boolean: ['write'],
-    alias: { 'runtime-dir': 'runtimeDir' }
+    string: ['root', 'import-map'],
+    boolean: ['write', 'debug'],
+    alias: {
+      'import-map': 'importMap'
+    }
   })
-  await writeAll(Deno.stdout, await main(paths, options))
+
+  let result = await main(paths, options)
+
+  // `result` is an error object, so return to stderr as JSON, and an exit code of 1.
+  if (isPlainObject(result)) {
+    result = new TextEncoder().encode(`(${throwCompileError()})(${JSON.stringify(result)})`)
+  }
+
+  await writeAll(Deno.stdout, result)
 }
 
 async function main(paths = [], options = {}) {
-  const { root, write } = { write: false, ...options }
+  const { write, debug } = { write: false, ...options }
 
   if (!Array.isArray(paths) || paths.length < 1) throw new ArgumentError('pathsRequired')
-  if (!root) throw new ArgumentError('rootRequired')
+  if (!options.root) throw new ArgumentError('rootRequired')
+
+  const root = resolve(options.root)
 
   // Make sure that `root` is a valid directory.
   try {
@@ -31,7 +73,9 @@ async function main(paths = [], options = {}) {
     throw new ArgumentError('rootUnknown', { root })
   }
 
-  const isProd = Deno.env.get('RAILS_ENV') === 'production'
+  const env = Deno.env.get('RAILS_ENV')
+  const isProd = env === 'production'
+  const isTest = env === 'test'
 
   const entryPoints = new Set()
   for (let i = 0; i < paths.length; i++) {
@@ -46,37 +90,67 @@ async function main(paths = [], options = {}) {
     }
   }
 
+  let importMap
+  try {
+    importMap = readImportMap(options.importMap, root)
+  } catch (error) {
+    return {
+      detail: error.stack,
+      text: `Cannot read/parse import map: ${error.message}`,
+      location: {
+        file: error.file
+      }
+    }
+  }
+
   const runtimeDir = resolve(dirname(fromFileUrl(import.meta.url)), '../runtime')
 
   const params = {
     entryPoints: Array.from(entryPoints),
     absWorkingDir: root,
-    logLevel: 'error',
-    sourcemap: isProd ? 'linked' : 'inline',
+    logLevel: 'silent',
+    logLimit: 1,
     outdir: 'public/assets',
     outbase: './',
     format: 'esm',
-    jsxFactory: 'reactCreateElement',
-    jsxFragment: 'ReactFragment',
+    jsx: 'automatic',
+    jsxDev: !isTest && !isProd,
     minify: isProd,
     bundle: true,
-    plugins: [envPlugin(), resolvePlugin({ runtimeDir, debug: false })],
-    inject: [join(runtimeDir, 'react_shim/index.js')],
+    plugins: [envPlugin(), resolvePlugin({ runtimeDir, importMap, debug }), cssPlugin({ debug })],
     metafile: write,
     write
   }
 
-  try {
-    const result = await build(params)
+  if (!debug) {
+    params.sourcemap = isTest ? false : isProd ? 'linked' : 'inline'
+  }
 
-    if (write) {
-      return new TextEncoder().encode(JSON.stringify(result))
-    } else {
-      return result.outputFiles[0].contents
+  let result
+  try {
+    result = await build(params)
+  } catch (error) {
+    if (debug) {
+      throw error
     }
+
+    return { ...error.errors[0] }
   } finally {
     stop()
   }
+
+  if (write) {
+    return new TextEncoder().encode(JSON.stringify(result))
+  } else {
+    return result.outputFiles[0].contents
+  }
+}
+
+export function isPlainObject(value) {
+  if (Object.prototype.toString.call(value) !== '[object Object]') return false
+
+  const prototype = Object.getPrototypeOf(value)
+  return prototype === null || prototype === Object.prototype
 }
 
 export default main

data/lib/proscenium/css_module.rb

@@ -1,22 +1,64 @@
 # frozen_string_literal: true
 
 class Proscenium::CssModule
+  class NotFound < StandardError
+    def initialize(pathname)
+      @pathname = pathname
+      super
+    end
+
+    def message
+      "Stylesheet is required, but does not exist: #{@pathname}"
+    end
+  end
+
   def initialize(path)
-    @path = "#{path}.module.css"
+    @path = path
+    @css_module_path = "#{path}.module.css"
+  end
 
-    return unless Rails.application.config.proscenium.side_load
+  # Parses the given `content` for CSS modules names ('class' attributes beginning with '@'), and
+  # returns the content with said CSS Modules replaced with the compiled class names.
+  #
+  # Example:
+  #   <div class="@my_css_module_name"></div>
+  def compile_class_names(content)
+    doc = Nokogiri::HTML::DocumentFragment.parse(content)
+
+    return content if (modules = doc.css('[class*="@"]')).empty?
+
+    modules.each do |ele|
+      classes = ele.classes.map { |cls| cls.starts_with?('@') ? class_names!(cls[1..]) : cls }
+      ele['class'] = classes.join(' ')
+    end
 
-    Proscenium::SideLoad.append! Rails.root.join(@path)
+    doc.to_html.html_safe
   end
 
-  # Returns an Array of class names generated from the given CSS module `names`.
+  # @returns [Array] of class names generated from the given CSS module `names`.
   def class_names(*names)
-    names.flatten.compact.map { |name| "#{name}#{hash}" }
+    side_load_css_module
+    names.flatten.compact.map { |name| "#{name.to_s.camelize(:lower)}#{hash}" }
+  end
+
+  # Like #class_names, but requires that the stylesheet exists.
+  #
+  # @raises Proscenium::CssModule::NotFound if stylesheet does not exists.
+  def class_names!(...)
+    raise NotFound, @css_module_path unless Rails.root.join(@css_module_path).exist?
+
+    class_names(...)
   end
 
   private
 
   def hash
-    @hash ||= Digest::SHA1.hexdigest("/#{@path}")[..7]
+    @hash ||= Digest::SHA1.hexdigest("/#{@css_module_path}")[..7]
+  end
+
+  def side_load_css_module
+    return unless Rails.application.config.proscenium.side_load
+
+    Proscenium::SideLoad.append "#{@path}.module", :css
   end
 end

data/lib/proscenium/helper.rb

@@ -11,7 +11,9 @@ module Proscenium
     def side_load_stylesheets
       return unless Proscenium::Current.loaded
 
-      stylesheet_link_tag(*Proscenium::Current.loaded[:css])
+      Proscenium::Current.loaded[:css].map do |sheet|
+        stylesheet_link_tag(sheet, id: "_#{Digest::SHA1.hexdigest("/#{sheet}")[..7]}")
+      end.join("\n").html_safe
     end
 
     def side_load_javascripts(**options)
@@ -21,12 +23,12 @@ module Proscenium
     end
 
     def proscenium_dev
-      return if !Rails.env.development? || !Proscenium::Railtie.websocket
+      return unless Proscenium.config.auto_reload
 
       javascript_tag %(
         import autoReload from '/proscenium-runtime/auto_reload.js';
         autoReload('#{Proscenium::Railtie.websocket_mount_path}');
-      ), type: 'module'
+      ), type: 'module', defer: true
     end
   end
 end

data/lib/proscenium/middleware/base.rb

@@ -7,7 +7,9 @@ module Proscenium
     class Base
       include ActiveSupport::Benchmarkable
 
-      class Error < StandardError; end
+      # Error when the result of the build returns an error. For example, when esbuild returns
+      # errors.
+      class CompileError < StandardError; end
 
       def self.attempt(request)
         new(request).renderable!&.attempt
@@ -57,15 +59,23 @@ module Proscenium
         response.write content
         response.content_type = content_type
         response['X-Proscenium-Middleware'] = name
+
+        yield response if block_given?
+
         response.finish
       end
 
       def build(cmd)
         stdout, stderr, status = Open3.capture3(cmd)
 
-        raise Error, stderr unless status.success?
+        unless status.success?
+          raise self.class::CompileError, stderr if status.exitstatus == 2
+
+          raise BuildError, stderr
+        end
+
         unless stderr.empty?
-          raise "Proscenium build of #{name}:'#{@request.fullpath}' failed -- #{stderr}"
+          raise BuildError, "Proscenium build of #{name}:'#{@request.fullpath}' failed -- #{stderr}"
         end
 
         stdout

data/lib/proscenium/middleware/esbuild.rb

@@ -3,10 +3,24 @@
 module Proscenium
   class Middleware
     class Esbuild < Base
+      class CompileError < StandardError
+        attr_reader :detail
+
+        def initialize(detail)
+          @detail = ActiveSupport::HashWithIndifferentAccess.new(Oj.load(detail, mode: :strict))
+
+          super "#{@detail[:text]} in #{@detail[:location][:file]}:#{@detail[:location][:line]}"
+        end
+      end
+
       def attempt
         benchmark :esbuild do
           render_response build("#{cli} --root #{root} #{path}")
         end
+      rescue CompileError => e
+        render_response "export default #{e.detail.to_json}" do |response|
+          response['X-Proscenium-Middleware'] = 'Esbuild::CompileError'
+        end
       end
 
       private
@@ -17,7 +31,9 @@ module Proscenium
 
       def cli
         if ENV['PROSCENIUM_TEST']
-          'deno run -q --import-map import_map.json -A lib/proscenium/compilers/esbuild.js'
+          [
+            'deno run -q --import-map import_map.json -A', 'lib/proscenium/compilers/esbuild.js'
+          ].join(' ')
         else
           Gem.bin_path 'proscenium', 'esbuild'
         end

data/lib/proscenium/middleware/lightningcss.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+require 'oj'
+
+module Proscenium
+  class Middleware
+    class Lightningcss < Base
+      def attempt
+        benchmark :lightningcss do
+          with_custom_media { |path| build path }
+        end
+      end
+
+      private
+
+      def with_custom_media
+        if custom_media?
+          Tempfile.create do |f|
+            contents = Pathname.new("#{root}#{@request.path}").read
+            f.write contents, "\n", custom_media_path.read
+            f.rewind
+
+            yield f.path
+          end
+        else
+          yield "#{root}#{@request.path}"
+        end
+      end
+
+      def build(path)
+        results = super("#{cli} #{cli_options.join ' '} #{path}")
+        render_response css_module? ? Oj.load(results, mode: :strict)['code'] : results
+      end
+
+      def custom_media?
+        @custom_media ||= custom_media_path.exist?
+      end
+
+      def custom_media_path
+        @custom_media_path ||= Rails.root.join('lib', 'custom_media_queries.css')
+      end
+
+      def cli
+        Gem.bin_path 'proscenium', 'lightningcss'
+      end
+
+      def cli_options
+        options = ['--nesting', '--targets', "'>= 0.25%'"]
+        options << '--custom-media' if custom_media?
+
+        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.rb

@@ -4,17 +4,13 @@ module Proscenium
   class Middleware
     extend ActiveSupport::Autoload
 
+    # Error when the build command fails.
+    class BuildError < StandardError; end
+
     autoload :Base
     autoload :Esbuild
-    autoload :ParcelCss
     autoload :Runtime
 
-    MIDDLEWARE_CLASSES = {
-      esbuild: Esbuild,
-      parcelcss: ParcelCss,
-      runtime: Runtime
-    }.freeze
-
     def initialize(app)
       @app = app
     end
@@ -35,23 +31,15 @@ module Proscenium
     def attempt(request)
       return unless (type = find_type(request))
 
-      file_handler.attempt(request.env) || MIDDLEWARE_CLASSES[type].attempt(request)
+      file_handler.attempt(request.env) || 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
+      path = Pathname.new(request.path)
 
-      type
+      return Runtime if path.fnmatch?(glob_types[:runtime], File::FNM_EXTGLOB)
+      return Esbuild if path.fnmatch?(glob_types[:esbuild], File::FNM_EXTGLOB)
     end
 
     def file_handler

data/lib/proscenium/phlex.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Proscenium
+  class Phlex < ::Phlex::View
+    module Sideload
+      def template(...)
+        Proscenium::SideLoad.append self.class.path if Rails.application.config.proscenium.side_load
+
+        super
+      end
+    end
+
+    class << self
+      attr_accessor :path
+
+      def inherited(child)
+        path = caller_locations(1, 1)[0].path
+        child.path = path.delete_prefix(::Rails.root.to_s).delete_suffix('.rb')[1..]
+
+        child.prepend Sideload
+
+        super
+      end
+    end
+
+    def css_module(name)
+      cssm.class_names!(name).join ' '
+    end
+
+    private
+
+    def cssm
+      @cssm ||= Proscenium::CssModule.new(self.class.path)
+    end
+  end
+end

data/lib/proscenium/railtie.rb

@@ -12,16 +12,8 @@ module Proscenium
   #
   # 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'
-    ]
+    esbuild: '/{config,app,lib,node_modules}/**.{js,mjs,jsx,css}',
+    runtime: '/proscenium-runtime/**.{js,jsx}'
   }.freeze
 
   class << self
@@ -34,18 +26,16 @@ module Proscenium
     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
+    config.proscenium.auto_reload = Rails.env.development?
+    config.proscenium.auto_reload_paths ||= %w[lib app config]
+    config.proscenium.auto_reload_extensions ||= /\.(css|jsx?)$/
 
     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.auto_reload_paths.filter! { |path| Dir.exist? path }
       options.cable_mount_path ||= '/proscenium-cable'
       options.cable_logger ||= Rails.logger
     end
@@ -73,10 +63,10 @@ module Proscenium
     end
 
     config.after_initialize do
-      next unless config.proscenium.listen
+      next unless config.proscenium.auto_reload
 
-      @listener = Listen.to(*config.proscenium.listen_paths,
-                            only: config.proscenium.listen_extensions) do |mod, add, rem|
+      @listener = Listen.to(*config.proscenium.auto_reload_paths,
+                            only: config.proscenium.auto_reload_extensions) do |mod, add, rem|
         Proscenium::Railtie.websocket&.broadcast('reload', {
                                                    modified: mod,
                                                    removed: rem,
@@ -94,7 +84,7 @@ module Proscenium
     class << self
       def websocket
         return @websocket unless @websocket.nil?
-        return unless config.proscenium.auto_refresh
+        return unless config.proscenium.auto_reload
 
         cable = ActionCable::Server::Configuration.new
         cable.cable = { adapter: 'async' }.with_indifferent_access

data/lib/proscenium/runtime/auto_reload.js

@@ -7,16 +7,16 @@ export default socketPath => {
 
   consumer.subscriptions.create('Proscenium::ReloadChannel', {
     received: debounce(() => {
-      console.log('Proscenium files changed; reloading...')
+      console.log('[Proscenium] Files changed; reloading...')
       location.reload()
     }, 200),
 
     connected() {
-      console.log('Proscenium auto reload websocket connected')
+      console.log('[Proscenium] Auto-reload websocket connected')
     },
 
     disconnected() {
-      console.log('Proscenium auto reload websocket disconnected')
+      console.log('[Proscenium] Auto-reload websocket disconnected')
     }
   })
 }

data/lib/proscenium/side_load.rb

@@ -5,17 +5,6 @@ module Proscenium
     DEFAULT_EXTENSIONS = %i[js css].freeze
     EXTENSIONS = %i[js css].freeze
 
-    class NotFound < StandardError
-      def initialize(pathname)
-        @pathname = pathname
-        super
-      end
-
-      def message
-        "#{@pathname} does not exist"
-      end
-    end
-
     module_function
 
     # Side load the given asset `path`, by appending it to `Proscenium::Current.loaded`, which is a
@@ -46,40 +35,25 @@ module Proscenium
       end
     end
 
-    # Like #append, but only accepts a single `path` argument, which must be a Pathname. Raises
-    # `NotFound` if path does not exist,
-    def append!(pathname)
-      Proscenium::Current.loaded ||= EXTENSIONS.to_h { |e| [e, Set[]] }
-
-      unless pathname.is_a?(Pathname)
-        raise ArgumentError, "Argument `pathname` (#{pathname}) must be a Pathname"
-      end
-
-      ext = pathname.extname.sub('.', '').to_sym
-      path = pathname.relative_path_from(Rails.root).to_s
-
-      raise ArgumentError, "unsupported extension: #{ext}" unless EXTENSIONS.include?(ext)
-
-      return if Proscenium::Current.loaded[ext].include?(path)
-
-      raise NotFound, path unless pathname.exist?
-
-      Proscenium::Current.loaded[ext] << path
-
-      Rails.logger.debug "[Proscenium] Side loaded /#{path}"
-    end
-
     module Monkey
       module TemplateRenderer
         private
 
         def render_template(view, template, layout_name, locals)
-          if template.respond_to?(:virtual_path) &&
-             template.respond_to?(:type) && template.type == :html
-            if (layout = layout_name && find_layout(layout_name, locals.keys, [formats.first]))
-              Proscenium::SideLoad.append "app/views/#{layout.virtual_path}" # layout
-            end
-
+          layout = find_layout(layout_name, locals.keys, [formats.first])
+          renderable = template.instance_variable_get(:@renderable)
+
+          if 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}"
+          elsif template.respond_to?(:virtual_path) &&
+                template.respond_to?(:type) && template.type == :html
+            # Side load regular view template.
+            Proscenium::SideLoad.append "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}"
             end

data/lib/proscenium/utils.js

@@ -0,0 +1,8 @@
+export async function fileExists(path) {
+  try {
+    const fileInfo = await Deno.stat(path)
+    return fileInfo.isFile
+  } catch {
+    return false
+  }
+}

data/lib/proscenium/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Proscenium
-  VERSION = '0.1.0.alpha2'
+  VERSION = '0.1.0.alpha4'
 end

data/lib/proscenium/view_component.rb

@@ -5,12 +5,16 @@ module Proscenium::ViewComponent
 
   autoload :TagBuilder
 
+  def render_in(...)
+    cssm.compile_class_names(super)
+  end
+
   def before_render
     side_load_assets unless self.class < ReactComponent
   end
 
   def css_module(name)
-    cssm.class_names(name.to_s.camelize(:lower)).join ' '
+    cssm.class_names!(name).join ' '
   end
 
   private