proscenium 0.1.0.alpha2-arm64-darwin → 0.1.0.alpha4-arm64-darwin

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.alpha2
+  version: 0.1.0.alpha4
 platform: arm64-darwin
 authors:
 - Joel Moss
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-07-26 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,27 +143,22 @@ 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/cli/argument_error.js
-- lib/proscenium/cli/builders/index.js
-- lib/proscenium/cli/builders/javascript.js
-- lib/proscenium/cli/builders/react.js
-- lib/proscenium/cli/builders/solid.js
-- lib/proscenium/cli/esbuild/env_plugin.js
-- lib/proscenium/cli/esbuild/resolve_plugin.js
-- lib/proscenium/cli/esbuild/solidjs_plugin.js
-- lib/proscenium/cli/js_builder.js
-- lib/proscenium/cli/solid.js
-- lib/proscenium/cli/utils.js
 - 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/current.rb
 - lib/proscenium/helper.rb
@@ -157,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.js
-- 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/cli/argument_error.js

@@ -1,24 +0,0 @@
-export default class CliArgumentError extends Error {
-  static MESSAGES = {
-    cwdRequired: 'Current working directory is required as first argument.',
-    entrypointRequired: 'An entry point is required as second argument.',
-    builderRequired: 'The builder is required as third and final argument.',
-
-    cwdUnknown: ({ cwd }) => `A valid working directory is required - received ${cwd}`,
-    entrypointUnknown: ({ entrypoint }) =>
-      `A valid entrypoint is required - received ${entrypoint}`,
-    builderUnknown: ({ builder }) => `Unknown builder '${builder}'`
-  }
-
-  constructor(reason, options) {
-    let message = CliArgumentError.MESSAGES[reason]
-    if (typeof message === 'function') {
-      message = message(options)
-    }
-
-    super(message, options)
-
-    this.reason = reason
-    this.message = message
-  }
-}

data/lib/proscenium/cli/builders/index.js

@@ -1 +0,0 @@
-export const builderNames = ['javascript', 'react', 'solid']

data/lib/proscenium/cli/builders/javascript.js

@@ -1,45 +0,0 @@
-import { build, stop } from 'esbuild'
-
-import envPlugin from '../esbuild/env_plugin.js'
-import resolvePlugin from '../esbuild/resolve_plugin.js'
-
-export default async (cwd, entrypoint) => {
-  const railsEnv = Deno.env.get('RAILS_ENV')
-  const isProd = railsEnv === 'production'
-
-  let entrypointIsSourcemap = false
-  if (/\.js\.map$/.test(entrypoint)) {
-    entrypoint = entrypoint.replace(/\.map$/, '')
-    entrypointIsSourcemap = true
-  }
-
-  const params = {
-    entryPoints: [entrypoint],
-    absWorkingDir: cwd,
-    logLevel: 'error',
-    sourcemap: !entrypointIsSourcemap ? false : 'linked',
-    outdir: 'public',
-    outbase: './',
-    write: false,
-    format: 'esm',
-    minify: isProd,
-    bundle: true,
-    plugins: [envPlugin(), resolvePlugin({ debug: false })]
-  }
-
-  try {
-    const result = await build(params)
-
-    if (params.sourcemap === 'linked') {
-      if (entrypointIsSourcemap) {
-        return result.outputFiles[0].contents
-      } else {
-        return result.outputFiles[1].contents
-      }
-    } else {
-      return result.outputFiles[0].contents
-    }
-  } finally {
-    stop()
-  }
-}

data/lib/proscenium/cli/builders/react.js

@@ -1,60 +0,0 @@
-import { build, stop } from 'esbuild'
-import { join } from 'std/path/mod.ts'
-
-import envPlugin from '../esbuild/env_plugin.js'
-import resolvePlugin from '../esbuild/resolve_plugin.js'
-
-export default async (cwd, entrypoint) => {
-  const railsEnv = Deno.env.get('RAILS_ENV')
-  const isProd = railsEnv === 'production'
-
-  let entrypointIsSourcemap = false
-  if (/\.jsx\.map$/.test(entrypoint)) {
-    entrypoint = entrypoint.replace(/\.map$/, '')
-    entrypointIsSourcemap = true
-  }
-
-  const params = {
-    entryPoints: [entrypoint],
-    absWorkingDir: cwd,
-    logLevel: 'error',
-    sourcemap: !entrypointIsSourcemap ? false : 'linked',
-    outdir: 'public',
-    outbase: './',
-    write: false,
-    format: 'esm',
-    minify: isProd,
-    bundle: true,
-    // jsxFactory: 'createElement',
-    // jsxFragment: 'Fragment',
-    plugins: [envPlugin(), resolvePlugin({ debug: false })]
-  }
-
-  if (entrypoint.endsWith('.jsx')) {
-    try {
-      const stat = Deno.lstatSync(join(cwd, 'lib/react_shim.js'))
-      if (stat.isFile) {
-        params.inject = ['./lib/react_shim.js']
-      }
-    } catch {
-      // Safe to swallow as this should only throw if file does not exist.
-      // TODO: print warning to user
-    }
-  }
-
-  try {
-    const result = await build(params)
-
-    if (params.sourcemap === 'linked') {
-      if (entrypointIsSourcemap) {
-        return result.outputFiles[0].contents
-      } else {
-        return result.outputFiles[1].contents
-      }
-    } else {
-      return result.outputFiles[0].contents
-    }
-  } finally {
-    stop()
-  }
-}

data/lib/proscenium/cli/builders/solid.js

@@ -1,46 +0,0 @@
-import { build, stop } from 'esbuild'
-
-import envPlugin from '../esbuild/env_plugin.js'
-import resolvePlugin from '../esbuild/resolve_plugin.js'
-import solidjsPlugin from '../esbuild/solidjs_plugin.js'
-
-export default async (cwd, entrypoint) => {
-  const railsEnv = Deno.env.get('RAILS_ENV')
-  const isProd = railsEnv === 'production'
-
-  let entrypointIsSourcemap = false
-  if (/\.jsx\.map$/.test(entrypoint)) {
-    entrypoint = entrypoint.replace(/\.map$/, '')
-    entrypointIsSourcemap = true
-  }
-
-  const params = {
-    entryPoints: [entrypoint],
-    absWorkingDir: cwd,
-    logLevel: 'error',
-    sourcemap: !entrypointIsSourcemap ? false : 'linked',
-    outdir: 'public',
-    outbase: './',
-    write: false,
-    format: 'esm',
-    minify: isProd,
-    bundle: true,
-    plugins: [envPlugin(), resolvePlugin({ debug: false }), solidjsPlugin({ debug: false })]
-  }
-
-  try {
-    const result = await build(params)
-
-    if (params.sourcemap === 'linked') {
-      if (entrypointIsSourcemap) {
-        return result.outputFiles[0].contents
-      } else {
-        return result.outputFiles[1].contents
-      }
-    } else {
-      return result.outputFiles[0].contents
-    }
-  } finally {
-    stop()
-  }
-}

data/lib/proscenium/cli/esbuild/env_plugin.js

@@ -1,21 +0,0 @@
-import { setup } from '../utils.js'
-
-export default setup('env', () => {
-  return {
-    onResolve: {
-      filter: /^env$/,
-      callback({ path }) {
-        return { path, namespace: 'env' }
-      }
-    },
-
-    onLoad: {
-      filter: /.*/,
-      namespace: 'env',
-      callback() {
-        const env = Deno.env.toObject()
-        return { loader: 'json', contents: JSON.stringify(env) }
-      }
-    }
-  }
-})

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

@@ -1,136 +0,0 @@
-import { join, resolve } from 'std/path/mod.ts'
-import {
-  parseFromString as parseImportMap,
-  resolve as resolveFromImportMap
-} from 'import-maps/resolve'
-
-import { setup } from '../utils.js'
-
-const baseURL = new URL('file://')
-const importKinds = ['import-statement', 'dynamic-import', 'require-call']
-
-export default setup('resolve', build => {
-  const cwd = build.initialOptions.absWorkingDir
-  const importMap = readImportMap()
-
-  return {
-    onResolve: {
-      filter: /.*/,
-      async callback(args) {
-        // Remote modules
-        if (args.path.startsWith('http://') || args.path.startsWith('https://')) {
-          return { external: true }
-        }
-
-        // Proscenium runtime
-        if (args.path.startsWith('/proscenium-runtime')) {
-          return { external: true }
-        }
-
-        // Everything else is unbundled.
-        if (importKinds.includes(args.kind)) {
-          return await unbundleImport(args)
-        }
-      }
-    },
-
-    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
-      }
-    }
-  }
-
-  // Resolve the given `params.path` to a path relative to the Rails root.
-  //
-  // Examples:
-  //  'react' -> '/.../node_modules/react/index.js'
-  //  './my_module' -> '/.../app/my_module.js'
-  //  '/app/my_module' -> '/.../app/my_module.js'
-  async function unbundleImport(params) {
-    const result = { path: params.path }
-
-    if (importMap) {
-      const { matched, resolvedImport } = resolveFromImportMap(params.path, importMap, baseURL)
-      if (matched) {
-        if (resolvedImport.protocol === 'file:') {
-          params.path = resolvedImport.pathname
-        } else {
-          return { path: resolvedImport.href, external: true }
-        }
-      }
-    }
-
-    // Absolute path - append to current working dir.
-    if (params.path.startsWith('/')) {
-      result.path = resolve(cwd, params.path.slice(1))
-    }
-
-    // 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,
-      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})`
-    }
-
-    result.path = resolveResult.path.slice(cwd.length)
-    result.sideEffects = resolveResult.sideEffects
-
-    if (
-      params.path.endsWith('.css') &&
-      params.kind === 'import-statement' &&
-      /\.jsx?$/.test(params.importer)
-    ) {
-      // 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/cli/js_builder.js

@@ -1,194 +0,0 @@
-import * as esbuild from 'https://deno.land/x/esbuild@v0.14.27/mod.js'
-import { parse } from 'flags/mod.ts'
-import { join } from 'path/mod.ts'
-
-import resolvePlugin from './esbuild/resolve_plugin.js'
-
-const isProd = Deno.env.get('RAILS_ENV') === 'production'
-const isTest = Deno.env.get('RAILS_ENV') === 'test'
-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;
-  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-top: 0;
-  margin-bottom: 1em;
-  overflow-x: scroll;
-  scrollbar-width: none;
-}
-
-pre::-webkit-scrollbar {
-  display: none;
-}
-
-.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;
-}
-
-</style>
-<div class="window">
-  <pre class="message"><span class="message-body"></span></pre>
-  <pre class="file"></pre>
-</div>
-`
-
-export default async (args, { debug }) => {
-  const { _: entrypoints, ...flags } = parse(args)
-  const [cwd, entrypoint] = validatePaths(entrypoints)
-
-  const params = {
-    entryPoints: [entrypoint],
-    absWorkingDir: cwd,
-    logLevel: 'error',
-    sourcemap: isTest ? false : 'inline',
-    write: false,
-    format: 'esm',
-    // minify: true,
-    bundle: true,
-    plugins: [resolvePlugin({ debug })]
-  }
-
-  if (entrypoint.endsWith('.jsx')) {
-    try {
-      const stat = Deno.lstatSync(join(cwd, 'lib/react_shim.js'))
-      if (stat.isFile) {
-        params.inject = ['./lib/react_shim.js']
-      }
-    } catch {
-      // Safe to swallow as this should only throw if file does not exist.
-    }
-  }
-
-  try {
-    const result = await esbuild.build(params)
-    return result.outputFiles[0].contents
-
-    // } catch (e) {
-    //   if (isProd) {
-    //     return new TextEncoder().encode(`
-    //         const err = ${JSON.stringify(e.errors[0])}
-    //         const location = \`\${err.location.file}:\${err.location.line}:\${err.location.column}\`
-    //         console.error('%s at %O', err.text, location);
-    //       `)
-    //   } else {
-    //     return new TextEncoder().encode(`
-    //         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}:\${err.location.column}\`
-    //               this.root.querySelector('.file').textContent = location
-    //               console.error('%s at %O', err.text, location)
-    //             } else {
-    //               console.error(err.text)
-    //             }
-
-    //             throw err
-    //           }
-    //         }
-
-    //         customElements.define('error-overlay', ErrorOverlay)
-    //         document.body.appendChild(new ErrorOverlay(${JSON.stringify(e.errors[0])}))
-    //       `)
-    //   }
-  } finally {
-    esbuild.stop()
-  }
-}
-
-function validatePaths(paths) {
-  const cwd = paths[0]
-  const entrypoint = paths[1]
-
-  if (!cwd || !entrypoint) {
-    throw new TypeError(
-      'Current working directory and entrypoint are required as first and second arguments.'
-    )
-  }
-
-  try {
-    const stat = Deno.lstatSync(cwd)
-    if (!stat.isDirectory) {
-      throw new TypeError(
-        `Current working directory is required as the first argument - received ${cwd}`
-      )
-    }
-  } catch {
-    throw new TypeError(
-      `A valid working directory is required as the first argument - received ${cwd}`
-    )
-  }
-
-  try {
-    const stat = Deno.lstatSync(join(cwd, entrypoint))
-    if (!stat.isFile) {
-      throw new TypeError(`Entrypoint is required as the second argument - received ${entrypoint}`)
-    }
-  } catch {
-    throw new TypeError(
-      `A valid entrypoint is required as the second argument - received ${entrypoint}`
-    )
-  }
-
-  if (/\.(js|jsx)$/.test(entrypoint) === false) {
-    throw new TypeError(
-      `Only a JS/JSX entrypoint is supported with this CLI - received ${entrypoint}`
-    )
-  }
-
-  return [cwd, entrypoint]
-}

data/lib/proscenium/cli/solid.js

@@ -1,15 +0,0 @@
-import { writeAll } from 'std/streams/mod.ts'
-import { parseArgs } from './utils.js'
-
-import builder from './builders/solid.js'
-
-if (import.meta.main) {
-  await writeAll(Deno.stdout, await main(Deno.args))
-}
-
-async function main(args = []) {
-  const [cwd, entrypoint, _] = parseArgs(args)
-  return await builder(cwd, entrypoint)
-}
-
-export default main