proscenium 0.1.0.alpha2-x86_64-darwin → 0.1.0.alpha3-x86_64-darwin

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

@@ -1,35 +1,45 @@
 import { join, resolve } from 'std/path/mod.ts'
-import {
-  parseFromString as parseImportMap,
-  resolve as resolveFromImportMap
-} from 'import-maps/resolve'
+import { resolve as resolveFromImportMap } from 'import-maps/resolve'
 
 import setup from './setup_plugin.js'
 
 const baseURL = new URL('file://')
-const importKinds = ['import-statement', 'dynamic-import', 'require-call']
+const importKinds = ['import-statement', 'dynamic-import', 'require-call', 'import-rule']
 
 export default setup('resolve', (build, options) => {
-  const { runtimeDir } = options
+  const { runtimeDir, importMap } = options
   const cwd = build.initialOptions.absWorkingDir
   const runtimeCwdAlias = `${cwd}/proscenium-runtime`
-  const importMap = readImportMap()
 
-  return {
-    onResolve: {
+  return [
+    {
+      type: 'onResolve',
       filter: /.*/,
       async callback(args) {
-        // Remote modules
+        if (args.path.includes('?')) {
+          const [path, query] = args.path.split('?')
+          args.path = path
+          args.suffix = `?${query}`
+          args.queryParams = new URLSearchParams(query)
+        }
+
+        // Mark remote modules as external.
         if (args.path.startsWith('http://') || args.path.startsWith('https://')) {
           return { external: true }
         }
 
         // Proscenium runtime
         if (args.path.startsWith('@proscenium/')) {
-          return {
-            path: `${args.path.replace(/^@proscenium/, '/proscenium-runtime')}/index.js`,
-            external: true
+          const result = { suffix: args.suffix }
+
+          if (args.queryParams?.has('bundle')) {
+            result.path = join(runtimeDir, `${args.path.replace(/^@proscenium/, '')}/index.js`)
+          } else {
+            result.path = `${args.path.replace(/^@proscenium/, '/proscenium-runtime')}/index.js`
+            result.external = true
           }
+
+          return result
         }
 
         if (args.path.startsWith(runtimeCwdAlias)) {
@@ -43,7 +53,8 @@ export default setup('resolve', (build, options) => {
       }
     },
 
-    onLoad: {
+    {
+      type: 'onLoad',
       filter: /.*/,
       namespace: 'importStylesheet',
       callback(args) {
@@ -67,7 +78,7 @@ export default setup('resolve', (build, options) => {
         return result
       }
     }
-  }
+  ]
 
   // Resolve the given `params.path` to a path relative to the Rails root.
   //
@@ -76,7 +87,7 @@ export default setup('resolve', (build, options) => {
   //  './my_module' -> '/.../app/my_module.js'
   //  '/app/my_module' -> '/.../app/my_module.js'
   async function unbundleImport(params) {
-    const result = { path: params.path }
+    const result = { path: params.path, suffix: params.suffix }
 
     if (importMap) {
       const { matched, resolvedImport } = resolveFromImportMap(params.path, importMap, baseURL)
@@ -108,7 +119,17 @@ export default setup('resolve', (build, options) => {
       // throw `${resolveResult.errors[0].text} (resolveDir: ${cwd})`
     }
 
-    result.path = resolveResult.path.slice(cwd.length)
+    // If bundle queryParam is defined, return the resolveResult.
+    if (params.queryParams?.has('bundle')) {
+      return { ...resolveResult, suffix: result.suffix }
+    }
+
+    if (resolveResult.path.startsWith(runtimeDir)) {
+      result.path = '/proscenium-runtime' + resolveResult.path.slice(runtimeDir.length)
+    } else {
+      result.path = resolveResult.path.slice(cwd.length)
+    }
+
     result.sideEffects = resolveResult.sideEffects
 
     if (
@@ -119,27 +140,9 @@ export default setup('resolve', (build, options) => {
       // We're importing a CSS file from JS(X).
       result.namespace = 'importStylesheet'
     } else {
-      // Requested path is a bare module.
       result.external = true
     }
 
     return result
   }
-
-  function readImportMap() {
-    const file = join(cwd, 'config', 'import_map.json')
-    let source
-
-    try {
-      source = Deno.readTextFileSync(file)
-    } catch {
-      return null
-    }
-
-    return parseImportMap(source, baseURL)
-  }
 })
-
-function isBareModule(path) {
-  return !path.startsWith('.') && !path.startsWith('/')
-}

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

@@ -1,35 +1,36 @@
 export default (pluginName, pluginFn) => {
   return (options = {}) => ({
     name: pluginName,
-    setup(build) {
-      const plugin = pluginFn(build, options)
+    async setup(build) {
+      const callbacks = await pluginFn(build, options)
 
-      if (plugin.onResolve) {
-        const { callback, ...onResolve } = plugin.onResolve
+      callbacks.forEach(({ type, callback, filter, namespace }) => {
+        if (type === 'onResolve') {
+          build.onResolve({ filter, namespace }, async params => {
+            if (params.pluginData?.isResolvingPath) return
 
-        build.onResolve(onResolve, async params => {
-          if (params.pluginData?.isResolvingPath) return
+            options.debug &&
+              console.debug(`plugin(${pluginName}):onResolve`, params.path, { params })
 
-          options.debug && console.debug(`plugin(${pluginName}):onResolve`, params.path, { params })
-          const results = await callback(params)
-          options.debug &&
-            console.debug(`plugin(${pluginName}):onResolve`, params.path, { results })
+            const results = await callback(params)
 
-          return results
-        })
-      }
+            options.debug &&
+              console.debug(`plugin(${pluginName}):onResolve`, params.path, { results })
 
-      if (plugin.onLoad) {
-        const { callback, ...onLoad } = plugin.onLoad
+            return results
+          })
+        } else if (type === 'onLoad') {
+          build.onLoad({ filter, namespace }, async params => {
+            options.debug && console.debug(`plugin(${pluginName}):onLoad`, { params })
 
-        build.onLoad(onLoad, params => {
-          options.debug && console.debug(`plugin(${pluginName}):onLoad`, { params })
-          const results = callback(params)
-          options.debug && console.debug(`plugin(${pluginName}):onLoad`, { results })
+            const results = await callback(params)
 
-          return results
-        })
-      }
+            options.debug && console.debug(`plugin(${pluginName}):onLoad`, { results })
+
+            return results
+          })
+        }
+      })
     }
   })
 }

data/lib/proscenium/{cli → compilers}/esbuild/solidjs_plugin.js

@@ -2,11 +2,12 @@ import { basename } from 'std/path/mod.ts'
 import { transformAsync } from '@babel/core'
 import solid from 'babel-preset-solid'
 
-import { setup } from '../utils.js'
+import { setup } from './setup_plugin.js'
 
 export default setup('solidjs', () => {
-  return {
-    onLoad: {
+  return [
+    {
+      type: 'onLoad',
       filter: /\.jsx$/,
       async callback(args) {
         const source = await Deno.readTextFile(args.path)
@@ -19,5 +20,5 @@ export default setup('solidjs', () => {
         return { contents: code, loader: 'js' }
       }
     }
-  }
+  ]
 })

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

@@ -2,8 +2,12 @@ import { join } from 'std/path/mod.ts'
 
 import compile from './esbuild.js'
 
-const cwd = join(Deno.cwd(), 'test', 'internal')
+const root = join(Deno.cwd(), 'test', 'internal')
 
-Deno.bench('esbuild', async () => {
-  await compile(cwd, 'lib/foo.js')
+Deno.bench('esbuild js', async () => {
+  await compile(['lib/foo.js'], { root })
+})
+
+Deno.bench('esbuild css', async () => {
+  await compile(['lib/foo.css'], { root })
 })

data/lib/proscenium/compilers/esbuild.js

@@ -4,21 +4,37 @@ 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'
 
 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', 'runtime-dir', 'import-map'],
+    boolean: ['write', 'debug'],
+    alias: {
+      'runtime-dir': 'runtimeDir',
+      '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 { root, write, debug } = { write: false, ...options }
 
   if (!Array.isArray(paths) || paths.length < 1) throw new ArgumentError('pathsRequired')
   if (!root) throw new ArgumentError('rootRequired')
@@ -31,7 +47,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 +64,60 @@ 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,
+    sourcemap: isTest ? false : isProd ? 'linked' : 'inline',
     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
   }
 
+  let result
   try {
-    const result = await build(params)
-
-    if (write) {
-      return new TextEncoder().encode(JSON.stringify(result))
-    } else {
-      return result.outputFiles[0].contents
-    }
+    result = await build(params)
+  } catch (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/helper.rb

@@ -21,12 +21,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

data/lib/proscenium/middleware/parcel_css.rb

@@ -7,19 +7,46 @@ module Proscenium
     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
+          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', 'parcel_css'
       end
 
       def cli_options
-        options = ['--nesting', '--custom-media', '--targets', "'>= 0.25%'"]
+        options = ['--nesting', '--targets', "'>= 0.25%'"]
+        options << '--custom-media' if custom_media?
 
         if css_module?
           hash = Digest::SHA1.hexdigest(@request.path)[..7]

data/lib/proscenium/middleware.rb

@@ -4,6 +4,9 @@ module Proscenium
   class Middleware
     extend ActiveSupport::Autoload
 
+    # Error when the build command fails.
+    class BuildError < StandardError; end
+
     autoload :Base
     autoload :Esbuild
     autoload :ParcelCss

data/lib/proscenium/railtie.rb

@@ -13,15 +13,15 @@ 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'
+      'config/**/*.{js,jsx,css}',
+      'lib/**/*.{js,jsx,css}',
+      'app/**/*.{js,jsx,css}'
     ]
+    # parcelcss: [
+    #   'config/**/*.css',
+    #   'lib/**/*.css',
+    #   'app/**/*.css'
+    # ]
   }.freeze
 
   class << self
@@ -34,18 +34,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 +71,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 +92,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/component_manager/index.js

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

data/lib/proscenium/runtime/component_manager/{render_component.js → render_component.jsx}

@@ -18,22 +18,18 @@ export default async function (ele, data) {
 
     if (!contentLoader) return null
 
-    return /* @__PURE__ */ createElement('div', {
-      style: { height: '100%' },
-      dangerouslySetInnerHTML: { __html: contentLoader.outerHTML }
-    })
+    return (
+      <div
+        style={{ height: '100%' }}
+        dangerouslySetInnerHTML={{ __html: contentLoader.outerHTML }}
+      ></div>
+    )
   }
 
   createRoot(ele).render(
-    /* @__PURE__ */ createElement(
-      Suspense,
-      {
-        fallback: /* @__PURE__ */ createElement(Fallback, {
-          contentLoader
-        })
-      },
-      createElement(component, data.props)
-    )
+    <Suspense fallback={<Fallback contentLoader={contentLoader} />}>
+      {createElement(component, data.props)}
+    </Suspense>
   )
 
   RAILS_ENV === 'development' && console.debug(`[REACT]`, `Rendered ${data.path.slice(1)}`)

data/lib/proscenium/version.rb

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