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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16d95e62d81df0d7cdef528f9ef167a457b08d47091fa24baecd0543794cb9df
-  data.tar.gz: 0d3e128c70dd071fd8680bbfe76e70eb810a65a99d7541f9d2f52cb35da0eeff
+  metadata.gz: 20618c6ca12b3a4cc686da231f64a86a413768f5898a0a7b256dc0950108460e
+  data.tar.gz: 628152d21501c20f926a1996502330f2ff234c9cd61d0a2e8c185d4ebea25868
 SHA512:
-  metadata.gz: c81a0c1f16041ce97cb03a880ec1877faaada6ace634edf0840b8548136843cc91e09340c61b00416cf41230d7e641b2d446e51c884487d8ac4fc2dd944d1f0a
-  data.tar.gz: f0e06b2652fe8403b966c896dc81183a4ce48dc3643559ff0b268f9dbb4a36d5ba8008c87a80eefeabafd6e6b690d8b22b0d874482b62493631213b83594acb2
+  metadata.gz: 46ec6c6dc8597d2ab301267709241d2f2df9f9cc48b0266ac4bf33cd6691d1439116561c854ac4251f9757daee33a183f18d8401ece0b008ce90b420530fde5d
+  data.tar.gz: 8c7b601a0b99b22f7f569ccc41da348e203983f71a6e873f9a38a2788796b018a30ad188cd12c4a728c97008f64e2c00207323772e2e4ea1a6a27bb3d8952c3b

data/README.md

@@ -1,12 +1,29 @@
-# Proscenium
+# Proscenium - Modern Client-Side Tooling for Rails
 
-- Serve assets from anywhere within your Rails root.
+Proscenium treats your client-side code as first class citizens of your Rails app, and assumes a
+"fast by default" internet. It compiles your JS, JSX and CSS in real time, and on demand, with no
+configuration at all!
+
+- Zero configuration.
+- NO JavaScript rumtime needed - just the browser!
+- Real-time compilation.
+- No additional process or server - Just run Rails!
+- Serve assets from anywhere within your Rails root (/app, /config, /lib).
 - Automatically side load JS/CSS for your layouts and views.
-- Import JS and CSS from node_modules, URL, local (relative, absolute)
-- Real-time bundling of JS, JSX and CSS.
-- Import Map
-- CSS Modules
-- Minification
+- Import JS(X) and CSS from node_modules, URL, local (relative, absolute).
+- Optional bundling of JS(X) and CSS.
+- Import Map support for JS and CSS.
+- CSS Modules.
+- CSS Custom Media Queries.
+- CSS mixins.
+- Minification.
+- Auto reload after changes (development only).
+
+## !! EXPERIMENTAL SOFTWARE !!
+
+While my goal is to use Proscenium in production, I strongly recommended that you **DO NOT** use
+this in production apps! Right now, this is a play thing, and should only be used for
+development/testing.
 
 ## Installation
 
@@ -34,6 +51,7 @@ Using the examples above...
 - `app/views/users/index.js` => `https://yourapp.com/app/views/users/index.js`
 - `app/views/layouts/application.css` => `https://yourapp.com/app/views/layouts/application.css`
 - `lib/utils.js` => `https://yourapp.com/lib/utils.js`
+- `config/properties.css` => `https://yourapp.com/config/properties.css`
 
 ## Importing
 
@@ -166,10 +184,28 @@ to `false`.
 
 ## CSS Modules
 
-Direct access to CSS files are parsed through @parcel/css.
+Give any CSS file a `.module.css` extension, and Proscenium will load it as a CSS Module...
+
+```css
+.header {
+  background-color: #00f;
+}
+```
 
-Importing a CSS file from JS will append the CSS file to the document's head. The results of the
-import will be an object of CSS modules.
+The above produces:
+
+```css
+.header5564cdbb {
+  background-color: #00f;
+}
+```
+
+Importing a CSS file from JS will automatically append the stylesheet to the document's head. The
+results of the import will be an object of CSS modules.
+
+```js
+import styles from './styles.module.css'
+```
 
 ## Auto Reload
 
@@ -191,6 +227,25 @@ You can disable auto reload by setting the `config.proscenium.auto_reload` confi
 
 Proscenium supports [custom media queries](https://css-tricks.com/can-we-have-custom-media-queries-please/) as per the [spec](https://www.w3.org/TR/mediaqueries-5/#custom-mq). However, because of the way they are parsed, they cannot be imported using `@import`. So if you define your custom media queries in `/config/custom_media_queries.css`, Proscenium will automatically inject them into your CSS, so you can use them anywhere.
 
+## CSS Mixins
+
+CSS mixins are supported using the `@mixin` at-rule. Simply define your mixins in any number of files ending in `.mixin.css`, and using the `@define-mixin` at-rule...
+
+```css
+// /lib/text.mixin.css
+@define-mixin bigText {
+  font-size: 50px;
+}
+```
+
+```css
+// /app/views/layouts/application.css
+p {
+  @mixin bigText;
+  color: red;
+}
+```
+
 ## How It Works
 
 Proscenium provides a Rails middleware that proxies requests for your frontend code. By default, it will simply search for a file of the same name in your Rails root. For example, a request for '/app/views/layouts/application.js' or '/lib/hooks.js' will return that exact file relative to your Rails root.

data/app/components/react_component.rb

@@ -1,14 +1,21 @@
 # frozen_string_literal: true
 
 class ReactComponent < ApplicationComponent
-  attr_accessor :props
+  attr_accessor :props, :lazy
 
-  def initialize(props = {})
+  # @param props: [Hash]
+  # @param lazy: [Boolean] Lazy load the component using IntersectionObserver. Default: true.
+  def initialize(props: {}, lazy: true)
     @props = props
+    @lazy = lazy
+
     super
   end
 
   def call
-    tag.div data: { component: { path: virtual_path, props: @props } }
+    tag.div class: ['componentManagedByProscenium', css_module(:component)],
+            data: { component: { path: virtual_path, props: props, lazy: lazy } } do
+      tag.div content
+    end
   end
 end

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

@@ -74,11 +74,13 @@ export default function () {
             padding: 10px 0 0 20px;
           }
           .lineText {
+            display: block;
             white-space: pre-wrap;
           }
           .lineCursor {
             white-space: pre;
             color: blueviolet;
+            display: block;
           }
         </style>
         <div class="window">

data/lib/proscenium/compilers/esbuild/css/postcss.js

@@ -0,0 +1,67 @@
+import { expandGlob } from 'std/fs/mod.ts'
+import postcss, { CssSyntaxError } from 'postcss'
+
+export default async (root, path) => {
+  let tmpFile
+  let contents
+
+  const mixinFiles = []
+  for await (const file of expandGlob(`lib/**/*.mixin.css`, { root })) {
+    mixinFiles.push(file.path)
+  }
+
+  // Only process mixins with PostCSS if there are any 'lib/**/*.mixin.css' files.
+  if (mixinFiles.length > 0) {
+    tmpFile = await Deno.makeTempFile()
+    contents = await Deno.readTextFile(path)
+
+    const result = await postcss([mixinsPlugin({ mixinFiles })]).process(contents, { from: path })
+    contents = result.css
+  }
+
+  return [tmpFile, contents]
+}
+
+const mixinsPlugin = (opts = {}) => {
+  return {
+    postcssPlugin: 'mixins',
+
+    prepare() {
+      const mixins = {}
+
+      return {
+        async Once(_, helpers) {
+          for (const path of opts.mixinFiles) {
+            const content = await Deno.readTextFile(path)
+            const root = helpers.parse(content, { from: path })
+
+            root.walkAtRules('define-mixin', atrule => {
+              mixins[atrule.params] = atrule
+            })
+          }
+        },
+
+        AtRule: {
+          mixin: (rule, helpers) => {
+            const mixin = mixins[rule.params]
+
+            if (!mixin) {
+              throw rule.error(`Undefined mixin '${rule.params}'`)
+            }
+
+            const proxy = new helpers.Root()
+            for (let i = 0; i < mixin.nodes.length; i++) {
+              const node = mixin.nodes[i].clone()
+              delete node.raws.before
+              proxy.append(node)
+            }
+
+            rule.parent.insertBefore(rule, proxy)
+
+            if (rule.parent) rule.remove()
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,11 +1,16 @@
 import { crypto } from 'std/crypto/mod.ts'
-import { join, resolve, dirname, fromFileUrl } from 'std/path/mod.ts'
+import { join, resolve, dirname, basename, fromFileUrl } from 'std/path/mod.ts'
 
+import { fileExists } from '../../utils.js'
+import postcss from './css/postcss.js'
 import setup from './setup_plugin.js'
 
 export default setup('css', async build => {
   const cwd = build.initialOptions.absWorkingDir
-  const parcelBin = resolve(dirname(fromFileUrl(import.meta.url)), '../../../../bin/parcel_css')
+  const lightningcssBin = resolve(
+    dirname(fromFileUrl(import.meta.url)),
+    '../../../../bin/lightningcss'
+  )
 
   let customMedia
   try {
@@ -20,24 +25,55 @@ export default setup('css', async build => {
       filter: /\.css$/,
       namespace: 'file',
       async callback(args) {
-        let path = args.path
+        const hash = await digest(args.path.slice(cwd.length))
         const isCssModule = args.path.endsWith('.module.css')
-        let cmd = [parcelBin, '--nesting', '--targets', '>= 0.25%']
 
+        // If path is a CSS module, imported from JS, and a side-loaded ViewComponent stylesheet,
+        // simply return a JS proxy of the class names. The stylesheet itself will have already been
+        // side loaded. This avoids compiling the CSS all over again.
+        if (isCssModule && args.pluginData?.importedFromJs && (await isViewComponent(args.path))) {
+          return {
+            resolveDir: cwd,
+            loader: 'js',
+            contents: cssModulesProxyTemplate(hash)
+          }
+        }
+
+        let cmd = [
+          lightningcssBin,
+          '--nesting',
+          '--error-recovery',
+          args.pluginData?.importedFromJs && '--minify',
+          '--targets',
+          '>= 0.25%'
+        ].filter(Boolean)
+
+        // This will process the CSS with Postcss only if it needs to.
+        let [tmpFile, contents] = await postcss(cwd, args.path)
+
+        // As custom media are defined in their own file, we have to append the file contents to our
+        // stylesheet, so that the custom media can be used.
         if (customMedia) {
           cmd.push('--custom-media')
 
-          path = await Deno.makeTempFile()
-          await Deno.writeTextFile(path, (await Deno.readTextFile(args.path)) + customMedia)
+          if (!tmpFile && !contents) {
+            tmpFile = await Deno.makeTempFile()
+            contents = await Deno.readTextFile(args.path)
+          }
+
+          contents += customMedia
+        }
+
+        if (tmpFile && contents) {
+          await Deno.writeTextFile(tmpFile, contents)
         }
 
         if (isCssModule) {
-          const hash = await digest(args.path.slice(cwd.length))
           cmd = cmd.concat(['--css-modules', '--css-modules-pattern', `[local]${hash}`])
         }
 
         const p = Deno.run({
-          cmd: [...cmd, path],
+          cmd: [...cmd, tmpFile || args.path],
           stdout: 'piped',
           stderr: 'piped'
         })
@@ -51,9 +87,48 @@ export default setup('css', async build => {
         // here.
         p.close()
 
+        // Success!
         if (code === 0) {
-          const contents = new TextDecoder().decode(rawOutput)
-          return { loader: 'css', contents: isCssModule ? JSON.parse(contents).code : contents }
+          let contents = new TextDecoder().decode(rawOutput)
+          if (isCssModule) {
+            contents = JSON.parse(contents)
+          }
+
+          // If stylesheet is imported from JS, then we return JS code that appends the stylesheet
+          // in a <style> in the <head> of the page, and if the stylesheet is a CSS module, it
+          // exports a plain object of class names.
+          if (args.pluginData?.importedFromJs) {
+            const code = isCssModule ? contents.code : contents
+            const mod = [
+              `let e = document.querySelector('#_${hash}');`,
+              'if (!e) {',
+              "e = document.createElement('style');",
+              `e.id = '_${hash}';`,
+              'document.head.appendChild(e);',
+              `e.appendChild(document.createTextNode(\`${code}\`));`,
+              '}'
+            ]
+
+            if (isCssModule) {
+              const classes = {}
+              for (const key in contents.exports) {
+                if (Object.hasOwnProperty.call(contents.exports, key)) {
+                  classes[key] = contents.exports[key].name
+                }
+              }
+              mod.push(`export default ${JSON.stringify(classes)};`)
+            }
+
+            // We are importing from JS, so return the entire result from LightningCSS via the js
+            // loader.
+            return {
+              resolveDir: cwd,
+              loader: 'js',
+              contents: mod.join('')
+            }
+          }
+
+          return { loader: 'css', contents: isCssModule ? contents.code : contents }
         } else {
           const errorString = new TextDecoder().decode(rawError)
           throw errorString
@@ -74,3 +149,28 @@ async function digest(value) {
 
   return hexCodes.slice(0, 8)
 }
+
+async function isViewComponent(path) {
+  const fileName = basename(path)
+  const dirName = dirname(path)
+
+  return (
+    (fileName === 'component.module.css' && (await fileExists(join(dirName, 'component.rb')))) ||
+    (fileName.endsWith('_component.module.css') &&
+      (await fileExists(join(dirName, fileName.replace(/\.module\.css$/, '.rb')))))
+  )
+}
+
+function cssModulesProxyTemplate(hash) {
+  return [
+    `export default new Proxy( {}, {`,
+    `  get(target, prop, receiver) {`,
+    `    if (prop in target || typeof prop === 'symbol') {`,
+    `      return Reflect.get(target, prop, receiver)`,
+    `    } else {`,
+    `      return prop + '${hash}'`,
+    `    }`,
+    `  }`,
+    `})`
+  ].join('')
+}

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

@@ -3,13 +3,13 @@ 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', 'import-rule']
 
 export default setup('resolve', (build, options) => {
   const { runtimeDir, importMap } = options
   const cwd = build.initialOptions.absWorkingDir
   const runtimeCwdAlias = `${cwd}/proscenium-runtime`
+  let bundled = false
 
   return [
     {
@@ -29,18 +29,22 @@ export default setup('resolve', (build, options) => {
         }
 
         // Proscenium runtime
-        if (args.path.startsWith('@proscenium/')) {
-          const result = { suffix: args.suffix }
+        // if (args.path.startsWith('@proscenium/')) {
+        //   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
-          }
+        //   if (args.queryParams?.has('bundle-all')) {
+        //     bundled = true
+        //   }
 
-          return result
-        }
+        //   if (bundled || 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)) {
           return { path: join(runtimeDir, args.path.slice(runtimeCwdAlias.length)) }
@@ -51,32 +55,6 @@ export default setup('resolve', (build, options) => {
           return await unbundleImport(args)
         }
       }
-    },
-
-    {
-      type: 'onLoad',
-      filter: /.*/,
-      namespace: 'importStylesheet',
-      callback(args) {
-        const result = {
-          resolveDir: cwd,
-          loader: 'js'
-        }
-
-        if (args.path.endsWith('.module.css')) {
-          result.contents = `
-              import { importCssModule } from '/proscenium-runtime/import_css.js'
-              export default await importCssModule('${args.path}')
-            `
-        } else {
-          result.contents = `
-            import { appendStylesheet } from '/proscenium-runtime/import_css.js'
-            appendStylesheet('${args.path}')
-          `
-        }
-
-        return result
-      }
     }
   ]
 
@@ -90,7 +68,9 @@ export default setup('resolve', (build, options) => {
     const result = { path: params.path, suffix: params.suffix }
 
     if (importMap) {
+      const baseURL = new URL(params.importer.slice(cwd.length), 'file://')
       const { matched, resolvedImport } = resolveFromImportMap(params.path, importMap, baseURL)
+
       if (matched) {
         if (resolvedImport.protocol === 'file:') {
           params.path = resolvedImport.pathname
@@ -108,24 +88,39 @@ export default setup('resolve', (build, options) => {
     // Resolve the path using esbuild's internal resolution. This allows us to import node packages
     // and extension-less paths without custom code, as esbuild with resolve them for us.
     const resolveResult = await build.resolve(result.path, {
-      resolveDir: params.resolveDir,
+      // If path is a bare module (node_modules), and resolveDir is the Proscenium runtime dir, then
+      // use `cwd` as the `resolveDir`, otherwise pass it through as is. This ensures that nested
+      // node_modules are resolved correctly.
+      resolveDir:
+        isBareModule(result.path) && params.resolveDir.startsWith(runtimeDir)
+          ? cwd
+          : params.resolveDir,
       pluginData: {
         // We use this property later on, as we should ignore this resolution call.
         isResolvingPath: true
       }
     })
 
-    if (resolveResult.errors.length > 0) {
-      // throw `${resolveResult.errors[0].text} (resolveDir: ${cwd})`
+    // Simple return the resolved result if we have an error. Usually happens when module is not
+    // found.
+    if (resolveResult.errors.length > 0) return resolveResult
+
+    // If 'bundle-all' queryParam is defined, return the resolveResult.
+    if (bundled || params.queryParams?.has('bundle-all')) {
+      bundled = true
+      return { ...resolveResult, suffix: '?bundle-all' }
     }
 
-    // If bundle queryParam is defined, return the resolveResult.
+    // If 'bundle' queryParam is defined, return the resolveResult.
     if (params.queryParams?.has('bundle')) {
-      return { ...resolveResult, suffix: result.suffix }
+      return { ...resolveResult, suffix: '?bundle' }
     }
 
     if (resolveResult.path.startsWith(runtimeDir)) {
       result.path = '/proscenium-runtime' + resolveResult.path.slice(runtimeDir.length)
+    } else if (!resolveResult.path.startsWith(cwd)) {
+      // If resolved path does not start with cwd, then it is most likely linked, so bundle it.
+      return { ...resolveResult, suffix: '?bundle' }
     } else {
       result.path = resolveResult.path.slice(cwd.length)
     }
@@ -138,7 +133,7 @@ export default setup('resolve', (build, options) => {
       /\.jsx?$/.test(params.importer)
     ) {
       // We're importing a CSS file from JS(X).
-      result.namespace = 'importStylesheet'
+      return { ...resolveResult, pluginData: { importedFromJs: true } }
     } else {
       result.external = true
     }
@@ -146,3 +141,7 @@ export default setup('resolve', (build, options) => {
     return result
   }
 })
+
+function isBareModule(mod) {
+  return !mod.startsWith('/') && !mod.startsWith('.')
+}

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

@@ -9,13 +9,22 @@ export default (pluginName, pluginFn) => {
           build.onResolve({ filter, namespace }, async params => {
             if (params.pluginData?.isResolvingPath) return
 
-            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 })
+            let results
+
+            if (options.debug) {
+              console.debug()
+              console.group(`plugin(${pluginName}):onResolve`, { filter, namespace })
+              console.debug('params:', params)
+
+              try {
+                results = await callback(params)
+                console.debug('results:', results)
+              } finally {
+                console.groupEnd()
+              }
+            } else {
+              results = await callback(params)
+            }
 
             return results
           })

data/lib/proscenium/compilers/esbuild.js

@@ -11,14 +11,38 @@ 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', 'import-map'],
+    string: ['root', 'import-map'],
     boolean: ['write', 'debug'],
     alias: {
-      'runtime-dir': 'runtimeDir',
       'import-map': 'importMap'
     }
   })
@@ -34,10 +58,12 @@ if (import.meta.main) {
 }
 
 async function main(paths = [], options = {}) {
-  const { root, write, debug } = { 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 {
@@ -84,7 +110,6 @@ async function main(paths = [], options = {}) {
     absWorkingDir: root,
     logLevel: 'silent',
     logLimit: 1,
-    sourcemap: isTest ? false : isProd ? 'linked' : 'inline',
     outdir: 'public/assets',
     outbase: './',
     format: 'esm',
@@ -97,10 +122,18 @@ async function main(paths = [], options = {}) {
     write
   }
 
+  if (!debug) {
+    params.sourcemap = isTest ? false : isProd ? 'linked' : 'inline'
+  }
+
   let result
   try {
     result = await build(params)
   } catch (error) {
+    if (debug) {
+      throw error
+    }
+
     return { ...error.errors[0] }
   } finally {
     stop()

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)

data/lib/proscenium/middleware/esbuild.rb

@@ -31,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/{parcel_css.rb → lightningcss.rb}

@@ -4,9 +4,9 @@ require 'oj'
 
 module Proscenium
   class Middleware
-    class ParcelCss < Base
+    class Lightningcss < Base
       def attempt
-        benchmark :parcelcss do
+        benchmark :lightningcss do
           with_custom_media { |path| build path }
         end
       end
@@ -41,7 +41,7 @@ module Proscenium
       end
 
       def cli
-        Gem.bin_path 'proscenium', 'parcel_css'
+        Gem.bin_path 'proscenium', 'lightningcss'
       end
 
       def cli_options

data/lib/proscenium/middleware.rb

@@ -9,15 +9,8 @@ module Proscenium
 
     autoload :Base
     autoload :Esbuild
-    autoload :ParcelCss
     autoload :Runtime
 
-    MIDDLEWARE_CLASSES = {
-      esbuild: Esbuild,
-      parcelcss: ParcelCss,
-      runtime: Runtime
-    }.freeze
-
     def initialize(app)
       @app = app
     end
@@ -38,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: [
-      'config/**/*.{js,jsx,css}',
-      'lib/**/*.{js,jsx,css}',
-      'app/**/*.{js,jsx,css}'
-    ]
-    # parcelcss: [
-    #   'config/**/*.css',
-    #   'lib/**/*.css',
-    #   'app/**/*.css'
-    # ]
+    esbuild: '/{config,app,lib,node_modules}/**.{js,mjs,jsx,css}',
+    runtime: '/proscenium-runtime/**.{js,jsx}'
   }.freeze
 
   class << self

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.alpha3'
+  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

data/lib/proscenium.rb

@@ -10,6 +10,7 @@ module Proscenium
   autoload :SideLoad
   autoload :CssModule
   autoload :ViewComponent
+  autoload :Phlex
   autoload :Helper
   autoload :LinkToHelper
   autoload :Precompile

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: proscenium
 version: !ruby/object:Gem::Version
-  version: 0.1.0.alpha3
+  version: 0.1.0.alpha4
 platform: x86_64-linux
 authors:
 - Joel Moss
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-10 00:00:00.000000000 Z
+date: 2022-10-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actioncable
@@ -64,6 +64,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: nokogiri
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.13'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.13'
 - !ruby/object:Gem::Dependency
   name: oj
   requirement: !ruby/object:Gem::Requirement
@@ -117,7 +131,7 @@ email:
 - joel@developwithstyle.com
 executables:
 - esbuild
-- parcel_css
+- lightningcss
 extensions: []
 extra_rdoc_files: []
 files:
@@ -129,7 +143,7 @@ files:
 - app/components/application_component.rb
 - app/components/react_component.rb
 - bin/esbuild
-- bin/parcel_css
+- bin/lightningcss
 - config/routes.rb
 - lib/proscenium.rb
 - lib/proscenium/compiler.js
@@ -137,6 +151,7 @@ files:
 - 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
@@ -151,18 +166,17 @@ files:
 - lib/proscenium/middleware.rb
 - lib/proscenium/middleware/base.rb
 - lib/proscenium/middleware/esbuild.rb
-- lib/proscenium/middleware/parcel_css.rb
+- lib/proscenium/middleware/lightningcss.rb
 - lib/proscenium/middleware/runtime.rb
 - lib/proscenium/middleware/static.rb
+- lib/proscenium/phlex.rb
 - lib/proscenium/precompile.rb
 - lib/proscenium/railtie.rb
 - lib/proscenium/runtime/auto_reload.js
-- lib/proscenium/runtime/component_manager/index.js
-- lib/proscenium/runtime/component_manager/render_component.jsx
-- lib/proscenium/runtime/import_css.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/version.rb
 - lib/proscenium/view_component.rb
 - lib/proscenium/view_component/tag_builder.rb

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

@@ -1,27 +0,0 @@
-/* eslint-disable no-console */
-
-export async function init() {
-  const elements = document.querySelectorAll('[data-component]')
-
-  if (elements.length < 1) return
-
-  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 => {
-        if (!isVisible && entry.isIntersecting) {
-          isVisible = true
-          observer.unobserve(ele)
-
-          renderComponent(ele, data)
-        }
-      })
-    })
-
-    observer.observe(ele)
-  })
-}

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

@@ -1,36 +0,0 @@
-/* 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 (
-      <div
-        style={{ height: '100%' }}
-        dangerouslySetInnerHTML={{ __html: contentLoader.outerHTML }}
-      ></div>
-    )
-  }
-
-  createRoot(ele).render(
-    <Suspense fallback={<Fallback contentLoader={contentLoader} />}>
-      {createElement(component, data.props)}
-    </Suspense>
-  )
-
-  RAILS_ENV === 'development' && console.debug(`[REACT]`, `Rendered ${data.path.slice(1)}`)
-}

data/lib/proscenium/runtime/import_css.js

@@ -1,46 +0,0 @@
-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)
-}