proscenium 0.1.0.alpha1-x86_64-darwin

data/lib/proscenium/cli/js_builder.js

@@ -0,0 +1,194 @@
+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

@@ -0,0 +1,15 @@
+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

data/lib/proscenium/cli/utils.js

@@ -0,0 +1,93 @@
+import { join } from 'std/path/mod.ts'
+
+import CliArgumentError from './argument_error.js'
+import { builderNames } from './builders/index.js'
+
+export const isTest = () => Deno.env.get('ENVIRONMENT') === 'test'
+
+export const debug = (...args) => {
+  isTest() && console.log(...args)
+}
+
+export const setup = (pluginName, pluginFn) => {
+  return (options = {}) => ({
+    name: pluginName,
+    setup(build) {
+      const plugin = pluginFn(build)
+
+      if (plugin.onResolve) {
+        const { callback, ...onResolve } = plugin.onResolve
+
+        build.onResolve(onResolve, async params => {
+          if (params.pluginData?.isResolvingPath) return
+
+          const results = await callback(params)
+
+          options.debug && console.debug(`plugin(${pluginName}:onResolve)`, { params, results })
+
+          return results
+        })
+      }
+
+      if (plugin.onLoad) {
+        const { callback, ...onLoad } = plugin.onLoad
+
+        build.onLoad(onLoad, params => {
+          const results = callback(params)
+
+          options.debug && console.debug(`plugin(${pluginName}:onLoad)`, { params, results })
+
+          return results
+        })
+      }
+    }
+  })
+}
+
+export const parseArgs = args => {
+  let [cwd, entrypoint, builder] = args
+
+  if (!cwd) {
+    throw new CliArgumentError('cwdRequired')
+  }
+
+  if (!entrypoint) {
+    throw new CliArgumentError('entrypointRequired')
+  }
+
+  if (!builder) {
+    throw new CliArgumentError('builderRequired')
+  }
+
+  try {
+    const stat = Deno.lstatSync(cwd)
+    if (!stat.isDirectory) {
+      throw new CliArgumentError(
+        `Current working directory is required as the first argument - received ${cwd}`
+      )
+    }
+  } catch {
+    throw new CliArgumentError('cwdUnknown', { cwd })
+  }
+
+  if (/\.(jsx?)|(css)\.map$/.test(entrypoint)) {
+    entrypoint = entrypoint.replace(/\.map$/, '')
+  }
+
+  try {
+    const stat = Deno.lstatSync(join(cwd, entrypoint))
+    if (!stat.isFile) {
+      throw new CliArgumentError(
+        `Entrypoint is required as the second argument - received ${entrypoint}`
+      )
+    }
+  } catch {
+    throw new CliArgumentError('entrypointUnknown', { entrypoint })
+  }
+
+  if (!builderNames.includes(builder)) {
+    throw new CliArgumentError('builderUnknown', { builder })
+  }
+
+  return args
+}

data/lib/proscenium/compiler.js

@@ -0,0 +1,84 @@
+// 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

@@ -0,0 +1,22 @@
+export default class ArgumentError extends Error {
+  static MESSAGES = {
+    rootRequired: 'Current working directory is required as --root.',
+    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/env_plugin.js

@@ -0,0 +1,21 @@
+import setup from './setup_plugin.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/compilers/esbuild/resolve_plugin.js

@@ -0,0 +1,145 @@
+import { join, resolve } from 'std/path/mod.ts'
+import {
+  parseFromString as parseImportMap,
+  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']
+
+export default setup('resolve', (build, options) => {
+  const { runtimeDir } = options
+  const cwd = build.initialOptions.absWorkingDir
+  const runtimeCwdAlias = `${cwd}/proscenium-runtime`
+  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/')) {
+          return {
+            path: `${args.path.replace(/^@proscenium/, '/proscenium-runtime')}/index.js`,
+            external: true
+          }
+        }
+
+        if (args.path.startsWith(runtimeCwdAlias)) {
+          return { path: join(runtimeDir, args.path.slice(runtimeCwdAlias.length)) }
+        }
+
+        // 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/compilers/esbuild/setup_plugin.js

@@ -0,0 +1,35 @@
+export default (pluginName, pluginFn) => {
+  return (options = {}) => ({
+    name: pluginName,
+    setup(build) {
+      const plugin = pluginFn(build, options)
+
+      if (plugin.onResolve) {
+        const { callback, ...onResolve } = plugin.onResolve
+
+        build.onResolve(onResolve, 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 })
+
+          return results
+        })
+      }
+
+      if (plugin.onLoad) {
+        const { callback, ...onLoad } = plugin.onLoad
+
+        build.onLoad(onLoad, params => {
+          options.debug && console.debug(`plugin(${pluginName}):onLoad`, { params })
+          const results = callback(params)
+          options.debug && console.debug(`plugin(${pluginName}):onLoad`, { results })
+
+          return results
+        })
+      }
+    }
+  })
+}

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

@@ -0,0 +1,9 @@
+import { join } from 'std/path/mod.ts'
+
+import compile from './esbuild.js'
+
+const cwd = join(Deno.cwd(), 'test', 'internal')
+
+Deno.bench('esbuild', async () => {
+  await compile(cwd, 'lib/foo.js')
+})

data/lib/proscenium/compilers/esbuild.js

@@ -0,0 +1,82 @@
+import { writeAll } from 'std/streams/mod.ts'
+import { parse as parseArgs } from 'std/flags/mod.ts'
+import { expandGlob } from 'std/fs/mod.ts'
+import { join, isGlob, resolve, dirname, fromFileUrl } from 'std/path/mod.ts'
+import { build, stop } from 'esbuild'
+
+import envPlugin from './esbuild/env_plugin.js'
+import resolvePlugin from './esbuild/resolve_plugin.js'
+import ArgumentError from './esbuild/argument_error.js'
+
+if (import.meta.main) {
+  const { _: paths, ...options } = parseArgs(Deno.args, {
+    string: ['root', 'runtime-dir'],
+    boolean: ['write'],
+    alias: { 'runtime-dir': 'runtimeDir' }
+  })
+  await writeAll(Deno.stdout, await main(paths, options))
+}
+
+async function main(paths = [], options = {}) {
+  const { root, write } = { write: false, ...options }
+
+  if (!Array.isArray(paths) || paths.length < 1) throw new ArgumentError('pathsRequired')
+  if (!root) throw new ArgumentError('rootRequired')
+
+  // Make sure that `root` is a valid directory.
+  try {
+    const stat = Deno.lstatSync(root)
+    if (!stat.isDirectory) throw new ArgumentError('rootUnknown', { root })
+  } catch {
+    throw new ArgumentError('rootUnknown', { root })
+  }
+
+  const isProd = Deno.env.get('RAILS_ENV') === 'production'
+
+  const entryPoints = new Set()
+  for (let i = 0; i < paths.length; i++) {
+    const path = paths[i]
+
+    if (isGlob(path)) {
+      for await (const file of expandGlob(path, { root })) {
+        file.isFile && entryPoints.add(file.path)
+      }
+    } else {
+      entryPoints.add(join(root, path))
+    }
+  }
+
+  const runtimeDir = resolve(dirname(fromFileUrl(import.meta.url)), '../runtime')
+
+  const params = {
+    entryPoints: Array.from(entryPoints),
+    absWorkingDir: root,
+    logLevel: 'error',
+    sourcemap: isProd ? 'linked' : 'inline',
+    outdir: 'public/assets',
+    outbase: './',
+    format: 'esm',
+    jsxFactory: 'reactCreateElement',
+    jsxFragment: 'ReactFragment',
+    minify: isProd,
+    bundle: true,
+    plugins: [envPlugin(), resolvePlugin({ runtimeDir, debug: false })],
+    inject: [join(runtimeDir, 'react_shim/index.js')],
+    metafile: write,
+    write
+  }
+
+  try {
+    const result = await build(params)
+
+    if (write) {
+      return new TextEncoder().encode(JSON.stringify(result))
+    } else {
+      return result.outputFiles[0].contents
+    }
+  } finally {
+    stop()
+  }
+}
+
+export default main