proscenium 0.5.1-x86_64-darwin → 0.7.0-x86_64-darwin

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-darwin
 authors:
 - Joel Moss
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-08 00:00:00.000000000 Z
+date: 2023-05-31 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,47 @@ 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
+- proscenium
 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
+- bin/proscenium
+- bin/proscenium.h
 - 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/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 +184,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/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}`
-    }
-  }
-}

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

@@ -1,67 +0,0 @@
-import { expandGlob } from 'std/fs/mod.ts'
-import postcss from 'postcss'
-
-export default async (root, path) => {
-  let tmpFile
-  let contents
-
-  const mixinFiles = []
-  for await (const file of expandGlob('lib/**/*.mixin.css', { root, globstar: true })) {
-    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()
-          }
-        }
-      }
-    }
-  }
-}