froxy 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: ba923cd0a854a238a03b4fb501c027282477ccc90ca2005379001492f1f531f1
+  data.tar.gz: 43e8f7e24dc5ace4efc8c1ff7cba5af6786db2dd7a94b271bc83916ac09c6a84
+SHA512:
+  metadata.gz: 4fee298a6f956749521698d204ea6422d2a7fbfdc43d5e1d1443554cff8dba5bf59c57c92836c6759f79c1287614d20f6a7ee4ebd44e61f563021464666387b5
+  data.tar.gz: 5d5c56b0a0dff9581f339ee563dc83a5c00cc9896355996a887b95a70e461f07a4777b9cac202a0bed9cdda49df80f4cc32aac630b6be100a5b50e376140255f

data/.gitignore

@@ -0,0 +1,10 @@
+/.bundle/
+/.yardoc
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+/test/internal/public
+/node_modules/

data/.rubocop.yml

@@ -0,0 +1,6 @@
+Style/LineLength:
+  Max: 100
+Style/Documentation:
+  Enabled: false
+Style/ClassVars:
+  Enabled: false

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at joel@developwithstyle.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [https://contributor-covenant.org/version/1/4][version]
+
+[homepage]: https://contributor-covenant.org
+[version]: https://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in froxy.gemspec
+gemspec
+
+gem 'combustion', '~> 1.3'
+gem 'minitest', '~> 5.0'
+gem 'minitest-focus'
+gem 'puma'
+gem 'rake', '~> 13.0'
+gem 'rubocop', require: false
+gem 'rubocop-minitest', require: false
+gem 'rubocop-rake', require: false

data/Gemfile.lock

@@ -0,0 +1,113 @@
+PATH
+  remote: .
+  specs:
+    froxy (0.1.0)
+      activesupport (>= 5.0.0, < 7.0)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actionpack (6.1.3)
+      actionview (= 6.1.3)
+      activesupport (= 6.1.3)
+      rack (~> 2.0, >= 2.0.9)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.2.0)
+    actionview (6.1.3)
+      activesupport (= 6.1.3)
+      builder (~> 3.1)
+      erubi (~> 1.4)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.1, >= 1.2.0)
+    activesupport (6.1.3)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    ast (2.4.2)
+    builder (3.2.4)
+    combustion (1.3.1)
+      activesupport (>= 3.0.0)
+      railties (>= 3.0.0)
+      thor (>= 0.14.6)
+    concurrent-ruby (1.1.8)
+    crass (1.0.6)
+    erubi (1.10.0)
+    i18n (1.8.9)
+      concurrent-ruby (~> 1.0)
+    loofah (2.9.0)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.5.9)
+    method_source (1.0.0)
+    mini_portile2 (2.5.0)
+    minitest (5.14.3)
+    minitest-focus (1.2.1)
+      minitest (>= 4, < 6)
+    nio4r (2.5.5)
+    nokogiri (1.11.1)
+      mini_portile2 (~> 2.5.0)
+      racc (~> 1.4)
+    parallel (1.20.1)
+    parser (3.0.0.0)
+      ast (~> 2.4.1)
+    puma (5.2.1)
+      nio4r (~> 2.0)
+    racc (1.5.2)
+    rack (2.2.3)
+    rack-test (1.1.0)
+      rack (>= 1.0, < 3)
+    rails-dom-testing (2.0.3)
+      activesupport (>= 4.2.0)
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.3.0)
+      loofah (~> 2.3)
+    railties (6.1.3)
+      actionpack (= 6.1.3)
+      activesupport (= 6.1.3)
+      method_source
+      rake (>= 0.8.7)
+      thor (~> 1.0)
+    rainbow (3.0.0)
+    rake (13.0.3)
+    regexp_parser (2.0.3)
+    rexml (3.2.4)
+    rubocop (1.10.0)
+      parallel (~> 1.10)
+      parser (>= 3.0.0.0)
+      rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 1.8, < 3.0)
+      rexml
+      rubocop-ast (>= 1.2.0, < 2.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (>= 1.4.0, < 3.0)
+    rubocop-ast (1.4.1)
+      parser (>= 2.7.1.5)
+    rubocop-minitest (0.10.3)
+      rubocop (>= 0.87, < 2.0)
+    rubocop-rake (0.5.1)
+      rubocop
+    ruby-progressbar (1.11.0)
+    thor (1.1.0)
+    tzinfo (2.0.4)
+      concurrent-ruby (~> 1.0)
+    unicode-display_width (2.0.0)
+    zeitwerk (2.4.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  combustion (~> 1.3)
+  froxy!
+  minitest (~> 5.0)
+  minitest-focus
+  puma
+  rake (~> 13.0)
+  rubocop
+  rubocop-minitest
+  rubocop-rake
+
+BUNDLED WITH
+   2.2.9

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Joel Moss
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,200 @@
+# Froxy - Fast ESModule based Frontend Bundling for Rails
+
+Froxy serves as a delivery machanism for all your frontend assets in Rails. It is
+designed specifically for Rails applications, and can completely replace Webpacker and the Rails
+asset pipeline (Sprockets) by bundling your ESModule based frontend code in real time and on demand.
+It does this by proxying all frontend requests to the amazing [esbuild](https://esbuild.github.io).
+
+## ! NOT PRODUCTION READY !
+
+Froxy is currently an experimental library and does not yet have a production or deployment mode.
+While you could deploy it and run it in production, it is highly recommended that you do not do
+this. This is because almost every asset is bundled and built in real time by request. A future
+production mode will likely include pre-built cachable assets.
+
+-- _YOU HAVE BEEN WARNED!_
+
+## Features
+
+- Real-time bundling of JS, JSX and CSS.
+- Import CSS and other static assets (images, fonts, etc.)
+- Serve assets from anywhere within the Rails root. (eg. `/app/views/layouts/application.css`, or `/lib/utils/time.js`)
+- Side loaded JS/CSS for your layouts and views.
+- [Tree shaking](https://esbuild.github.io/api/#tree-shaking).
+- Code Splitting.
+- Source Maps.
+- Minification.
+
+## Roadmap
+
+In no particular order:
+
+- Pre-bundling / cached assets.
+- Typescript.
+- CSS Modules.
+- PostCSS support.
+
+## Installation
+
+Froxy requires Rails 6+ and Node.
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'froxy'
+```
+
+And then execute:
+
+    $ bundle install
+
+Or install it yourself as:
+
+    $ gem install froxy
+
+## Usage
+
+### Javascript
+
+Import any JS:
+
+```javascript
+import start from '/my/start' // Local absolute path
+import start from './start' // Local relative path
+import start from 'start' // From node modules
+```
+
+All JS is [bundled](https://esbuild.github.io/api/#bundle) by esbuild, which will inline any
+imported dependencies into the file itself.
+
+The JS file extension is not required and is assumed.
+
+### CSS
+
+CSS requested directly will return a plain stylesheet - as you would expect. But CSS that is
+imported from JS will result in the requested CSS injected into an HTML `link` tag.
+
+```javascript
+import '/my/styles.css'
+```
+
+### Images/Fonts, etc.
+
+When called directly, images are served directly - avoiding a call to esbuild. But when an image is
+imported from JS or used in a `url()` in CSS, the URL path is returned.
+
+Examples (where 'avatar.png' is located in '/app/images', but could be anywhere):
+
+```javascript
+// /app/views/home.js
+import imgUrl from '../images/avatar.png' // imgUrl == "/app/images/avatar.png"
+```
+
+```css
+body {
+  background-image: url('/app/images/avatar.png');
+}
+```
+
+### Side Loaded JS/CSS
+
+Froxy also has built in support for automatically side loading JS and CSS with your views and
+layouts.
+
+Just create a JS and/or CSS file with the same name as any view or layout, and make sure your
+layouts include the `<%= yield :side_loaded_js %>` and `<%= yield :side_loaded_css %>`. Something
+like this:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello World</title>
+    <%= yield :side_loaded_css %>
+  </head>
+  <body>
+    <%= yield %> <%= yield :side_loaded_js %>
+  </body>
+</html>
+```
+
+On each page request, Froxy will check if your layout and view has a JS/CSS file of the same name,
+and include them into your layout HTML.
+
+### Import aliases
+
+Module aliases can be defined in your package.json, supporting local and node modules.
+
+In your package.json:
+
+```json
+"froxy": {
+  "aliases": {
+    "_": "lodash", // a node module
+    "myalias": "/absolute/path/to/alias.js", // local path
+  }
+}
+```
+
+Then import:
+
+```javascript
+import { map } from '_'
+import axios from 'myaxios'
+```
+
+### Configuration
+
+There are a few options that you can customise, and they are all defined in your `package.json`. For
+example:
+
+```json
+"froxy": {
+  "target": [],
+  "aliases": {
+    "_": "lodash"
+  }
+}
+```
+
+#### `target`
+
+See esbuild's documentation on [defining targets](https://esbuild.github.io/api/#target).
+
+#### `inject`
+
+See esbuild's documentation on [inject](https://esbuild.github.io/api/#inject).
+
+#### `aliases`
+
+See [aliases](#import-aliases)
+
+#### `minify`
+
+(default: `false`)
+
+See esbuild's documentation on [minification](https://esbuild.github.io/api/#minify).
+
+#### `sourcemap`
+
+(default: `true`)
+
+See esbuild's documentation on [sourcemap](https://esbuild.github.io/api/#sourcemap).
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/joelmoss/froxy. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/joelmoss/froxy/blob/master/CODE_OF_CONDUCT.md).
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Code of Conduct
+
+Everyone interacting in the Froxy project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/joelmoss/froxy/blob/master/CODE_OF_CONDUCT.md).

data/Rakefile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require 'bundler/gem_tasks'
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.libs << 'lib'
+  t.test_files = FileList['test/**/*_test.rb']
+end
+
+task default: :test

data/bin/console

@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require 'bundler/setup'
+require 'froxy'
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require 'irb'
+IRB.start(__FILE__)

data/bin/froxy

@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+
+const path = require('path')
+const fs = require('fs')
+const cli = require('cac')()
+const esbuild = require('esbuild')
+const crypto = require('crypto')
+
+const parsed = cli.parse()
+const [absWorkingDir, entryPoint] = parsed.args
+const entryPointKey = crypto.createHash('sha1').update(entryPoint).digest('base64')
+
+const { resolve, config } = require('../lib/froxy/esbuild/utils')
+const loadStylePlugin = require('../lib/froxy/esbuild/plugins/load_style')
+const envPlugin = require('../lib/froxy/esbuild/plugins/env')
+const aliasPlugin = require('../lib/froxy/esbuild/plugins/alias')(absWorkingDir)
+const cssPlugin = require('../lib/froxy/esbuild/plugins/css')(absWorkingDir)
+const imagesPlugin = require('../lib/froxy/esbuild/plugins/images')(absWorkingDir)
+const rootPlugin = require('../lib/froxy/esbuild/plugins/root')(absWorkingDir)
+
+const testPlugin = {
+  name: 'froxy.test',
+  setup(build) {
+    build.onResolve({ filter: /.*/ }, args => {
+      console.log('onResolve', args)
+    })
+    build.onLoad({ filter: /.*/ }, args => {
+      console.log('onLoad', args)
+    })
+  }
+}
+
+const conf = config(absWorkingDir)
+
+const buildOptions = {
+  absWorkingDir,
+  entryPoints: [entryPoint],
+  bundle: true,
+  target: conf.target,
+  minify: conf.minify,
+  inject: conf.inject,
+  sourcemap: conf.sourcemap,
+  format: 'esm',
+  splitting: true,
+  outdir: 'public/froxy/build',
+  outbase: '.',
+  logLevel: 'error',
+  define: {
+    global: 'globalThis',
+    'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`,
+    'process.env.RAILS_ENV': `"${process.env.RAILS_ENV || 'development'}"`
+  },
+  // metafile: `public/froxy/meta/${entryPointKey}.json`,
+  plugins: [aliasPlugin, envPlugin, loadStylePlugin, cssPlugin, imagesPlugin, rootPlugin]
+}
+
+esbuild.build(buildOptions).catch(() => {
+  process.exit(1)
+})
+// .then(results => {
+//   // console.log(results)
+//   const meta = JSON.parse(fs.readFileSync(`${absWorkingDir}/${buildOptions.metafile}`, 'utf8'))
+//   console.log(meta)
+//   // console.log(Object.keys(meta.inputs))
+//   // console.log(Object.keys(meta.outputs))
+
+//   process.stdout.write(buildOptions.metafile)
+//   // process.stdout.write(fs.readFileSync(`${absWorkingDir}/${buildOptions.metafile}`, 'utf8'))
+// })

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/config.ru

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require 'rubygems'
+require 'bundler'
+
+Bundler.require :default, :development
+
+Combustion.path = 'test/internal'
+Combustion.initialize! :action_controller, :action_view
+run Combustion::Application

data/froxy.gemspec

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require_relative 'lib/froxy/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = 'froxy'
+  spec.version       = Froxy::VERSION
+  spec.authors       = ['Joel Moss']
+  spec.email         = ['joel@developwithstyle.com']
+
+  spec.summary       = 'Fast ESModule based Frontend Bundling for Rails'
+  spec.homepage      = 'https://github.com/joelmoss/froxy'
+  spec.license       = 'MIT'
+  spec.required_ruby_version = Gem::Requirement.new('>= 2.7.0')
+
+  spec.metadata['homepage_uri'] = spec.homepage
+  spec.metadata['source_code_uri'] = spec.homepage
+  spec.metadata['changelog_uri'] = "#{spec.homepage}/releases"
+
+  # Specify which files should be added to the gem when it is released.
+  # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
+  spec.files = Dir.chdir(File.expand_path(__dir__)) do
+    `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  end
+  spec.bindir        = 'exe'
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ['lib']
+
+  spec.add_runtime_dependency 'activesupport', ['>= 5.0.0', '< 7.0']
+end

data/lib/froxy.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require 'action_view'
+require 'active_support/dependencies/autoload'
+
+module Froxy
+  extend ActiveSupport::Autoload
+
+  autoload :Proxy
+end
+
+require 'froxy/railtie'

data/lib/froxy/esbuild/plugins/alias.js

@@ -0,0 +1,47 @@
+const { resolve, config } = require('../utils')
+
+// esbuild plugin to support module aliases as defined in package.json. Supports local and node
+// modules.
+//
+// In your package.json:
+//
+//  "froxy": {
+//    "aliases": {
+//      "_": "lodash", // a node module
+//      "myalias": "/absolutle/path/to/alias.js", // local path
+//    }
+//  }
+//
+// Then import:
+//
+//  import { map } from '_'
+//  import axios from 'myaxios'
+//
+module.exports = absWorkingDir => ({
+  name: 'froxy.alias',
+  setup(build) {
+    let map = []
+    let aliases = {}
+
+    try {
+      map = config(absWorkingDir).aliases
+      aliases = Object.keys(map)
+    } catch {
+      // Fail silently, as there is no package.json.
+      return
+    }
+
+    if (aliases.length > 0) {
+      const re = new RegExp(`^${aliases.map(x => escapeRegExp(x)).join('|')}$`)
+
+      build.onResolve({ filter: re }, async ({ resolveDir, path }) => ({
+        path: await resolve(absWorkingDir, resolveDir, map[path], { fallbackToEsbuild: true })
+      }))
+    }
+  }
+})
+
+function escapeRegExp(string) {
+  // $& means the whole matched string
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}

data/lib/froxy/esbuild/plugins/css.js

@@ -0,0 +1,50 @@
+const path = require('path')
+const fs = require('fs')
+
+const { resolve } = require('../utils')
+
+module.exports = absWorkingDir => ({
+  name: 'froxy.css',
+  setup(build) {
+    // Handle CSS imported from JS.
+    build.onResolve({ filter: /\.css$/ }, args => {
+      let resolvedPath = resolve(absWorkingDir, args.resolveDir, args.path)
+
+      if (resolvedPath === args.path) {
+        const nodeModulesDir = path.join(absWorkingDir, 'node_modules')
+
+        try {
+          fs.accessSync(nodeModulesDir, fs.constants.R_OK)
+          resolvedPath = path.join(nodeModulesDir, args.path)
+        } catch {
+          // Do nothing
+        }
+      }
+
+      return {
+        path: resolvedPath,
+        namespace: args.importer.endsWith('.js') ? 'cssFromJs' : 'file'
+      }
+    })
+
+    // Handles CSS imports from JS (eg `import from 'some.css'`) by simply marking it as external.
+    // This then allows the browser to handle the import. However, browsers do not yet support
+    // importing non-JS assets, and will not include the CSS. So the Froxy proxy will return the
+    // imported CSS as a JS file that inserts the CSS directly into the DOM. This unfortunately may
+    // result in a flash of unstyled content (FOUC).
+    //
+    // --- OR
+    //
+    // esbuild returns the content of both the JS and CSS. Then Froxy returns the JS as normal,
+    // and additionally includes the CSS directly into the rendered HTML. This way, there will be no
+    // FOUC. But this method is a little more complex, as Froxy will need to somehow pass the CSS
+    // content to Rails for insertion into the rendered view.
+    build.onLoad({ filter: /\.css$/, namespace: 'cssFromJs' }, args => ({
+      contents: `
+        import loadStyle from 'loadStyle'
+        loadStyle("${args.path.slice(absWorkingDir.length)}")
+      `,
+      loader: 'js'
+    }))
+  }
+})

data/lib/froxy/esbuild/plugins/env.js

@@ -0,0 +1,19 @@
+module.exports = {
+  name: 'froxy.env',
+  setup(build) {
+    // Intercept import paths called "env" so esbuild doesn't attempt
+    // to map them to a file system location. Tag them with the "env-ns"
+    // namespace to reserve them for this plugin.
+    build.onResolve({ filter: /^env$/ }, args => ({
+      path: args.path,
+      namespace: 'env-ns'
+    }))
+
+    // Load paths tagged with the "env-ns" namespace and behave as if
+    // they point to a JSON file containing the environment variables.
+    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
+      contents: JSON.stringify(process.env),
+      loader: 'json'
+    }))
+  }
+}

data/lib/froxy/esbuild/plugins/images.js

@@ -0,0 +1,32 @@
+const { resolve } = require('../utils')
+
+module.exports = absWorkingDir => ({
+  name: 'froxy.images',
+  setup(build) {
+    const IMAGE_TYPES = /\.(png|gif|jpe?g|svg|ico|webp|avif)$/
+
+    // Froxy proxy will render images directly. esbuild will just rewrite the path when an image is
+    // imported from JS, and embed the file name into the bundle as a string. This string is
+    // exported using the default export. Including an image in CSS using `url()`, will simply
+    // return the relative URL of the image.
+    build.onResolve({ filter: IMAGE_TYPES }, args => {
+      const resolvedPath = resolve(absWorkingDir, args.resolveDir, args.path)
+
+      if (args.importer.endsWith('.css')) {
+        return {
+          path: resolvedPath.slice(absWorkingDir.length),
+          external: true
+        }
+      } else {
+        return { path: resolvedPath }
+      }
+    })
+
+    build.onLoad({ filter: IMAGE_TYPES }, args => {
+      return {
+        contents: `export default '${args.path.slice(absWorkingDir.length)}';`,
+        loader: 'js'
+      }
+    })
+  }
+})

data/lib/froxy/esbuild/plugins/load_style.js

@@ -0,0 +1,22 @@
+module.exports = {
+  name: "froxy.loadStyle",
+
+  setup(build) {
+    build.onResolve({ filter: /^loadStyle$/ }, () => ({
+      path: "loadStyle",
+      namespace: "loadStyleShim",
+    }));
+
+    build.onLoad({ filter: /^loadStyle$/, namespace: "loadStyleShim" }, () => ({
+      contents: `
+          export default function (path) {
+            const ele = document.createElement('link')
+            ele.setAttribute('rel', 'stylesheet')
+            ele.setAttribute('media', 'all')
+            ele.setAttribute('href', path)
+            document.head.appendChild(ele)
+          }
+        `,
+    }));
+  },
+};

data/lib/froxy/esbuild/plugins/root.js

@@ -0,0 +1,14 @@
+const path = require('path')
+
+module.exports = absWorkingDir => ({
+  name: 'froxy.root',
+  setup(build) {
+    // Resolves paths starting with a `/` to the Rails root.
+    //
+    // Example:
+    //  import '/my/lib.js' //-> import '{Rails.root}/my/lib.js'
+    build.onResolve({ filter: /^\// }, args => ({
+      path: path.join(absWorkingDir, args.path)
+    }))
+  }
+})

data/lib/froxy/esbuild/utils.js

@@ -0,0 +1,83 @@
+const path = require('path')
+const fs = require('fs')
+const esbuild = require('esbuild')
+
+// Resolve the given path (`p`) to an absolute path.
+const resolve = (absWorkingDir, b, p, options = {}) => {
+  options = {
+    fallbackToEsbuild: false,
+    ...options
+  }
+
+  if (p.startsWith('/')) return path.resolve(absWorkingDir, p.slice(1))
+  if (p.startsWith('.')) return path.resolve(b, p)
+
+  if (options.fallbackToEsbuild) {
+    return (async () => await esbuildResolve(p, b))()
+  }
+
+  return p
+}
+
+const config = absWorkingDir => {
+  let packageConfig = {}
+  const defaultConfig = {
+    minify: false,
+    sourcemap: true
+  }
+
+  try {
+    const pkg = fs.readFileSync(path.join(absWorkingDir, 'package.json'))
+    packageConfig = JSON.parse(pkg).froxy
+  } catch {
+    // Fail silently, as there is no package.json.
+  }
+
+  return { ...defaultConfig, ...packageConfig }
+}
+
+// Resolves a module using esbuild module resolution.
+//
+// @param {string} id Module to resolve
+// @param {string} [resolveDir] The directory to resolve from
+// @returns {string} The resolved module
+async function esbuildResolve(id, resolveDir = process.cwd()) {
+  let _resolve
+  const resolvedPromise = new Promise(resolve => (_resolve = resolve))
+  return Promise.race([
+    resolvedPromise,
+    esbuild
+      .build({
+        sourcemap: false,
+        write: false,
+        bundle: true,
+        format: 'esm',
+        logLevel: 'silent',
+        platform: 'node',
+        stdin: {
+          contents: `import ${JSON.stringify(id)}`,
+          loader: 'js',
+          resolveDir,
+          sourcefile: __filename
+        },
+        plugins: [
+          {
+            name: 'esbuildResolve',
+            setup(build) {
+              build.onLoad({ filter: /.*/ }, ({ path }) => {
+                id = path
+                _resolve(id)
+                return { contents: '' }
+              })
+            }
+          }
+        ]
+      })
+      .then(() => id)
+  ])
+}
+
+module.exports = {
+  resolve,
+  config
+}

data/lib/froxy/helper.rb

@@ -0,0 +1,11 @@
+require 'action_view'
+
+module Froxy
+  module Helper
+    include ActionView::Helpers::AssetUrlHelper
+
+    def compute_asset_path(source, _options = {})
+      File.join('', source)
+    end
+  end
+end

data/lib/froxy/log_subscriber.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require 'active_support/log_subscriber'
+
+module Froxy
+  class LogSubscriber < ActiveSupport::LogSubscriber
+    VIEWS_PATTERN = %r{^app/views/}.freeze
+
+    def side_loaded_assets(event)
+      return if (asset_types = event.payload[:asset_types]).empty?
+
+      identifier_from_root = from_rails_root(event.payload[:identifier])
+
+      info do
+        message = +"  Side loaded #{asset_types.join(',')} for #{identifier_from_root}"
+        message << " (Duration: #{event.duration.round(1)}ms | Allocations: #{event.allocations})"
+      end
+    end
+
+    private
+
+    EMPTY = ''
+    def from_rails_root(string)
+      string = string.sub(rails_root, EMPTY)
+      string.sub!(VIEWS_PATTERN, EMPTY)
+      string
+    end
+
+    def rails_root
+      @rails_root ||= "#{Rails.root}/"
+    end
+  end
+end
+
+Froxy::LogSubscriber.attach_to :action_view

data/lib/froxy/monkey/side_load_assets.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+require 'froxy/log_subscriber'
+
+module Froxy
+  module Monkey
+    module SideLoadAssets
+      def render_template(view, template, layout_name, locals)
+        return super if template.type != :html
+
+        # Side load layout assets - if any.
+        if layout_name
+          layout = find_layout(layout_name, locals.keys, [formats.first])
+          layout && side_load_assets(view, layout)
+        end
+
+        # Side load view assets - if any.
+        side_load_assets view, template
+
+        super
+      end
+
+      private
+
+      def side_load_assets(view, tpl)
+        path = tpl.short_identifier.delete_suffix('.html.erb')
+
+        instrument :side_loaded_assets, identifier: tpl.identifier, asset_types: [] do |payload|
+          side_load_js path, view, payload
+          side_load_css path, view, payload
+        end
+      end
+
+      def side_load_js(path, view, log_payload)
+        # Check that the file actually exists.
+        return unless Rails.root.join(path).sub_ext('.js').exist?
+
+        view.content_for :side_loaded_js do
+          view.javascript_include_tag(path, type: :module).tap do |tag|
+            !tag.nil? && (log_payload[:asset_types] << :js)
+          end
+        end
+      end
+
+      def side_load_css(path, view, log_payload)
+        # Check that the file actually exists.
+        return unless Rails.root.join(path).sub_ext('.css').exist?
+
+        view.content_for :side_loaded_css do
+          view.stylesheet_link_tag(path).tap do |tag|
+            !tag.nil? && (log_payload[:asset_types] << :css)
+          end
+        end
+      end
+
+      def instrument(action, payload, &block)
+        ActiveSupport::Notifications.instrument("#{action}.action_view", payload, &block)
+      end
+    end
+  end
+end

data/lib/froxy/proxy.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+require 'open3'
+require 'rack/utils'
+
+# Proxies files to esbuild.
+module Froxy
+  class Proxy
+    BUILD_PATH = 'public/froxy/build'
+    CLI = File.expand_path('../../bin/froxy', __dir__)
+    IMAGE_TYPES = /\.(png|gif|jpeg|jpg|svg|ico|webp|avif)$/i.freeze
+    FILE_EXT_MAP = {
+      '.jsx' => '.js'
+    }.freeze
+
+    def initialize(app)
+      @app = app
+      @file_server = Rack::Files.new(Rails.root)
+      @build_file_server = Rack::Files.new(Rails.root.join(BUILD_PATH))
+    end
+
+    def call(env)
+      req = Rack::Request.new(env)
+      path_info = req.path_info
+
+      if req.get? || req.head?
+        # Let images through.
+        return @file_server.call(env) if IMAGE_TYPES.match?(path_info)
+
+        # Let JS sourcemaps through.
+        return @build_file_server.call(env) if /\.js\.map$/i.match?(path_info)
+
+        # Let esbuild handle JS and CSS.
+        if /\.(js|jsx|css)$/i.match?(path_info)
+          return unless (path = clean_path(path_info))
+          return [404, {}, []] unless file_readable?(path)
+          return @file_server.call(env) unless Rails.application.config.froxy.use_esbuild
+
+          return build env, req, path
+        end
+      end
+
+      @app.call req.env
+    end
+
+    private
+
+    def path_to_file(env, request, path)
+      ext = Pathname.new(path).extname
+      request.path_info = path.sub(/#{ext}$/, FILE_EXT_MAP[ext]) if FILE_EXT_MAP.key?(ext)
+
+      @build_file_server.call env
+    end
+
+    # Build the file from the given `path` using ESbuild. Returns a Rack::Response.
+    def build(env, request, path)
+      stdout, stderr, status = Open3.capture3(CLI, Rails.root.to_s, path)
+
+      if status.success?
+        Rails.logger.info "[froxy] built #{path}"
+        raise "[froxy] build failed: #{stderr}" unless stderr.empty?
+      else
+        non_empty_streams = [stdout, stderr].delete_if(&:empty?)
+        raise "[froxy] build failed:\n#{non_empty_streams.join("\n\n")}"
+      end
+
+      path_to_file env, request, path
+    end
+
+    def file_readable?(path)
+      file_stat = File.stat(Rails.root.join(path.delete_prefix('/').b).to_s)
+    rescue SystemCallError
+      false
+    else
+      file_stat.file? && file_stat.readable?
+    end
+
+    def clean_path(path_info)
+      path = Rack::Utils.unescape_path path_info.chomp('/').delete_prefix('/')
+      Rack::Utils.clean_path_info path if Rack::Utils.valid_path? path
+    end
+  end
+end

data/lib/froxy/railtie.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require 'rails/railtie'
+
+module Froxy
+  class Railtie < ::Rails::Railtie
+    config.froxy = ActiveSupport::OrderedOptions.new
+
+    initializer 'froxy.configuration' do |app|
+      options = app.config.froxy
+
+      options.use_proxy = true if options.use_proxy.nil?
+      options.use_esbuild = true if options.use_esbuild.nil?
+      options.side_load_assets = true if options.side_load_assets.nil?
+    end
+
+    initializer 'froxy.proxy' do |app|
+      next unless app.config.froxy.use_proxy
+
+      app.middleware.insert_after ActionDispatch::Static, Froxy::Proxy
+    end
+
+    initializer 'froxy.side_load_assets' do |app|
+      next unless app.config.froxy.side_load_assets
+
+      ActiveSupport.on_load :action_view do
+        require 'froxy/monkey/side_load_assets'
+        ActionView::TemplateRenderer.prepend Froxy::Monkey::SideLoadAssets
+
+        require 'froxy/helper'
+        include Froxy::Helper
+      end
+    end
+  end
+end

data/lib/froxy/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module Froxy
+  VERSION = '0.1.0'
+end

data/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "froxy",
+  "private": true,
+  "prettier": {
+    "trailingComma": "none",
+    "printWidth": 100,
+    "semi": false,
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "dependencies": {
+    "cac": "^6.7.1",
+    "esbuild": "^0.8.1"
+  }
+}

data/yarn.lock

@@ -0,0 +1,13 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+cac@^6.7.1:
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.2.tgz#e7f0d21f4776c46c7d0de7976e56fa5562e17597"
+  integrity sha512-w0bH1IF9rEjdi0a6lTtlXYT+vBZEJL9oytaXXRdsD68MH6+SrZGOGsu7s2saHQvYXqwo/wBdkW75tt8wFpj+mw==
+
+esbuild@^0.8.1:
+  version "0.8.48"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.48.tgz#a57e4dde84ec56da1c6ecaefee97e9da6c5b00b5"
+  integrity sha512-lrH8lA8wWQ6Lpe1z6C7ZZaFSmRsUlcQAqe16nf7ITySQ7MV4+vI7qAqQlT/u+c3+9AL3VXmT4MXTxV2e63pO4A==

metadata

@@ -0,0 +1,95 @@
+--- !ruby/object:Gem::Specification
+name: froxy
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Joel Moss
+autorequire:
+bindir: exe
+cert_chain: []
+date: 2021-02-22 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: activesupport
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '7.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '7.0'
+description:
+email:
+- joel@developwithstyle.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rubocop.yml"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- Gemfile.lock
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/froxy
+- bin/setup
+- config.ru
+- froxy.gemspec
+- lib/froxy.rb
+- lib/froxy/esbuild/plugins/alias.js
+- lib/froxy/esbuild/plugins/css.js
+- lib/froxy/esbuild/plugins/env.js
+- lib/froxy/esbuild/plugins/images.js
+- lib/froxy/esbuild/plugins/load_style.js
+- lib/froxy/esbuild/plugins/root.js
+- lib/froxy/esbuild/utils.js
+- lib/froxy/helper.rb
+- lib/froxy/log_subscriber.rb
+- lib/froxy/monkey/side_load_assets.rb
+- lib/froxy/proxy.rb
+- lib/froxy/railtie.rb
+- lib/froxy/version.rb
+- package.json
+- yarn.lock
+homepage: https://github.com/joelmoss/froxy
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/joelmoss/froxy
+  source_code_uri: https://github.com/joelmoss/froxy
+  changelog_uri: https://github.com/joelmoss/froxy/releases
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.7.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.2.3
+signing_key:
+specification_version: 4
+summary: Fast ESModule based Frontend Bundling for Rails
+test_files: []