froxy 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea2d91815589713a9c355fe514e3a47c3d7fb3b3d2e3d896749363ea172c9f5f
-  data.tar.gz: 63b66d8cc02a6257ccb98fb750732d555b6b0044bfd38a867c70b13aa4ee4cab
+  metadata.gz: 926d7b56d53ab4dc548a73b3d8f06c231d0bff8a3ea6ade601b6b4625582c529
+  data.tar.gz: 50e66435e3858795c88af5f20609e286336fa627e15f2f430ea66a617faf719f
 SHA512:
-  metadata.gz: 744903b02aea11cc67710d81b5798c6a269db6784b0790a4ee7386f9b20b53869ef84c3e64ba3d097af1775c91d07380d08cf31516cc2869ed5eae41f4292a4a
-  data.tar.gz: 8144a07ff8f146585e3e6fc71fed1da287ea155590158dc8e2dc9519a06d61708e115fc9dde7e0f135a18f3960638d126acb2dfae9b95ca2a06985b0db75781d
+  metadata.gz: 65623c88771f9a1654d2612fa31954adc8f35ee7152575e8c9b14aef146a77acb63715b2f4ae37ee807ec13faea7ad02a3a6c9941ea06b7cfb39268e5d7e3990
+  data.tar.gz: f2a78301922e4dd6fbf505dc3c0a83bf94a7a6878bfc2c8d7109b0111e813367bc6425fd661b3bd1ad9b927188aeaf5c1f5130010ddcb2631a0827aaac7cbfdb

data/.gitignore

@@ -6,5 +6,6 @@
 /pkg/
 /spec/reports/
 /tmp/
-/test/internal/public
+/test/internal/public/
+/test/internal/tmp/
 /node_modules/

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    froxy (0.1.1)
+    froxy (0.1.2)
       activesupport (>= 5.0.0, < 7.0)
 
 GEM

data/README.md

@@ -24,6 +24,7 @@ production mode will likely include pre-built cachable assets.
 - Code Splitting.
 - Source Maps.
 - Minification.
+- PostCSS support.
 
 ## Roadmap
 
@@ -32,7 +33,6 @@ In no particular order:
 - Pre-bundling / cached assets.
 - Typescript.
 - CSS Modules.
-- PostCSS support.
 
 ## Installation
 
@@ -82,6 +82,12 @@ imported from JS will result in the requested CSS injected into an HTML `link` t
 import '/my/styles.css'
 ```
 
+### PostCSS
+
+[PostCSS](https://postcss.org/) is supported out of the box. If any
+[PostCSS config](https://github.com/postcss/postcss-load-config) is found in your project, then any
+local CSS (not from node modules) will be parsed with PostCSS.
+
 ### Images/Fonts, etc.
 
 When called directly, images are served directly - avoiding a call to esbuild. But when an image is
@@ -153,10 +159,12 @@ There are a few options that you can customise, and they are all defined in your
 example:
 
 ```json
-"froxy": {
-  "target": [],
-  "aliases": {
-    "_": "lodash"
+{
+  "froxy": {
+    "target": [],
+    "aliases": {
+      "_": "lodash"
+    }
   }
 }
 ```
@@ -185,6 +193,22 @@ See esbuild's documentation on [minification](https://esbuild.github.io/api/#min
 
 See esbuild's documentation on [sourcemap](https://esbuild.github.io/api/#sourcemap).
 
+#### `ignore`
+
+A regular expression matching paths that should be ignored and not built or bundled.
+
+Example:
+
+Ignore all paths starting with "/fonts/":
+
+```json
+{
+  "froxy": {
+    "ignore": "^\\/fonts\\/"
+  }
+}
+```
+
 ## 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.

data/bin/froxy

@@ -1,27 +1,25 @@
 #!/usr/bin/env node
 
-const esbuild = require(require.resolve('esbuild', { paths: [process.cwd()] }))
+const [, , cwd, entryPoint] = process.argv
 
-const [, , absWorkingDir, entryPoint] = process.argv
+const esbuild = require(require.resolve('esbuild', { paths: [cwd] }))
 
 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 conf = config(absWorkingDir)
+const ignorePlugin = require('../lib/froxy/esbuild/plugins/ignore')
+const aliasPlugin = require('../lib/froxy/esbuild/plugins/alias')
+const cssPlugin = require('../lib/froxy/esbuild/plugins/css')
+const imagesPlugin = require('../lib/froxy/esbuild/plugins/images')
+const rootPlugin = require('../lib/froxy/esbuild/plugins/root')
 
 const buildOptions = {
-  absWorkingDir,
+  absWorkingDir: cwd,
   entryPoints: [entryPoint],
   bundle: true,
-  target: conf.target,
-  minify: conf.minify,
-  inject: conf.inject,
-  sourcemap: conf.sourcemap,
+  target: config.target,
+  minify: config.minify,
+  inject: config.inject,
+  sourcemap: config.sourcemap,
   format: 'esm',
   splitting: true,
   outdir: 'public/froxy/build',
@@ -32,9 +30,11 @@ const buildOptions = {
     'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`,
     'process.env.RAILS_ENV': `"${process.env.RAILS_ENV || 'development'}"`
   },
-  plugins: [aliasPlugin, envPlugin, loadStylePlugin, cssPlugin, imagesPlugin, rootPlugin]
+  plugins: [aliasPlugin, loadStylePlugin, cssPlugin, imagesPlugin, rootPlugin]
 }
 
+config.ignore && buildOptions.plugins.unshift(ignorePlugin)
+
 esbuild.build(buildOptions).catch(() => {
   process.exit(1)
 })

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

@@ -17,14 +17,14 @@ const { resolve, config } = require('../utils')
 //  import { map } from '_'
 //  import axios from 'myaxios'
 //
-module.exports = absWorkingDir => ({
+module.exports = {
   name: 'froxy.alias',
   setup(build) {
     let map = []
     let aliases = {}
 
     try {
-      map = config(absWorkingDir).aliases
+      map = config.aliases
       aliases = Object.keys(map)
     } catch {
       // Fail silently, as there is no package.json.
@@ -35,11 +35,11 @@ module.exports = absWorkingDir => ({
       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 })
+        path: await resolve(resolveDir, map[path], { fallbackToEsbuild: true })
       }))
     }
   }
-})
+}
 
 function escapeRegExp(string) {
   // $& means the whole matched string

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

@@ -3,21 +3,24 @@ const fs = require('fs')
 
 const { resolve } = require('../utils')
 
-module.exports = absWorkingDir => ({
+const [, , cwd] = process.argv
+
+module.exports = {
   name: 'froxy.css',
   setup(build) {
-    // Handle CSS imported from JS.
-    build.onResolve({ filter: /\.css$/ }, args => {
-      let resolvedPath = resolve(absWorkingDir, args.resolveDir, args.path)
+    build.onResolve({ filter: /\.css$/ }, async args => {
+      let resolvedPath = resolve(args.resolveDir, args.path)
 
+      // Resolved path is not relative or absolute, so we assume it's a node module, and attempt to
+      // resolve it from node_modules.
       if (resolvedPath === args.path) {
-        const nodeModulesDir = path.join(absWorkingDir, 'node_modules')
+        const nodeModulesDir = path.join(cwd, 'node_modules')
 
         try {
-          fs.accessSync(nodeModulesDir, fs.constants.R_OK)
+          await fs.promises.access(nodeModulesDir, fs.constants.R_OK)
           resolvedPath = path.join(nodeModulesDir, args.path)
         } catch {
-          // Do nothing
+          // Fail siently
         }
       }
 
@@ -27,24 +30,46 @@ module.exports = absWorkingDir => ({
       }
     })
 
-    // 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'
-    }))
+    // When CSS is requested directly - and not imported from JS.
+    build.onLoad({ filter: /\.css$/, namespace: 'file' }, async args => {
+      // Don't parse node modules with postcss.
+      if (args.path.includes('node_modules')) return
+
+      const postcssrc = require(require.resolve('postcss-load-config', { paths: [cwd] }))
+
+      let postcssConfig
+      try {
+        postcssConfig = await postcssrc({ cwd: cwd }, cwd)
+      } catch {
+        // Fail siently
+      }
+
+      if (postcssConfig) {
+        const postcss = require(require.resolve('postcss', { paths: [cwd] }))
+        const css = await fs.promises.readFile(args.path, 'utf8')
+
+        const result = await postcss(postcssConfig.plugins).process(css, {
+          ...postcssConfig.options,
+          from: args.path
+        })
+
+        return {
+          contents: result.css,
+          loader: 'css'
+        }
+      }
+    })
+
+    // When CSS is imported from JS, the CSS is injected into the DOM as a <link> tag. The browser
+    // then loads the CSS file as it usually would.
+    build.onLoad({ filter: /\.css$/, namespace: 'cssFromJs' }, args => {
+      return {
+        contents: `
+          import loadStyle from 'loadStyle'
+          loadStyle("${args.path.slice(cwd.length)}")
+        `,
+        loader: 'js'
+      }
+    })
   }
-})
+}

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

@@ -0,0 +1,14 @@
+const path = require('path')
+
+const { config } = require('../utils')
+
+if (!config.ignore) return
+
+module.exports = {
+  name: 'froxy.ignore',
+  setup(build) {
+    build.onResolve({ filter: new RegExp(config.ignore) }, args => ({
+      external: true
+    }))
+  }
+}

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

@@ -1,6 +1,8 @@
 const { resolve } = require('../utils')
 
-module.exports = absWorkingDir => ({
+const [, , cwd] = process.argv
+
+module.exports = {
   name: 'froxy.images',
   setup(build) {
     const IMAGE_TYPES = /\.(png|gif|jpe?g|svg|ico|webp|avif)$/
@@ -10,11 +12,11 @@ module.exports = absWorkingDir => ({
     // 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)
+      const resolvedPath = resolve(args.resolveDir, args.path)
 
       if (args.importer.endsWith('.css')) {
         return {
-          path: resolvedPath.slice(absWorkingDir.length),
+          path: resolvedPath.slice(cwd.length),
           external: true
         }
       } else {
@@ -24,9 +26,9 @@ module.exports = absWorkingDir => ({
 
     build.onLoad({ filter: IMAGE_TYPES }, args => {
       return {
-        contents: `export default '${args.path.slice(absWorkingDir.length)}';`,
+        contents: `export default '${args.path.slice(cwd.length)}';`,
         loader: 'js'
       }
     })
   }
-})
+}

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

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

data/lib/froxy/esbuild/utils.js

@@ -1,39 +1,42 @@
 const path = require('path')
 const fs = require('fs')
-const esbuild = require(require.resolve('esbuild', { paths: [process.cwd()] }))
 
-// Resolve the given path (`p`) to an absolute path.
-const resolve = (absWorkingDir, b, p, options = {}) => {
-  options = {
-    fallbackToEsbuild: false,
-    ...options
-  }
+const [, , cwd] = process.argv
 
-  if (p.startsWith('/')) return path.resolve(absWorkingDir, p.slice(1))
-  if (p.startsWith('.')) return path.resolve(b, p)
+module.exports = {
+  // Resolve the given path (`p`) to an absolute path.
+  resolve: (b, p, options = {}) => {
+    options = {
+      fallbackToEsbuild: false,
+      ...options
+    }
 
-  if (options.fallbackToEsbuild) {
-    return (async () => await esbuildResolve(p, b))()
-  }
+    if (p.startsWith('/')) return path.resolve(cwd, p.slice(1))
+    if (p.startsWith('.')) return path.resolve(b, p)
 
-  return p
-}
+    if (options.fallbackToEsbuild) {
+      return (async () => await esbuildResolve(p, b))()
+    }
 
-const config = absWorkingDir => {
-  let packageConfig = {}
-  const defaultConfig = {
-    minify: false,
-    sourcemap: true
-  }
+    return p
+  },
 
-  try {
-    const pkg = fs.readFileSync(path.join(absWorkingDir, 'package.json'))
-    packageConfig = JSON.parse(pkg).froxy
-  } catch {
-    // Fail silently, as there is no package.json.
-  }
+  get config() {
+    let packageConfig = {}
+    const defaultConfig = {
+      minify: false,
+      sourcemap: true
+    }
+
+    try {
+      const pkg = fs.readFileSync(path.join(cwd, 'package.json'))
+      packageConfig = JSON.parse(pkg).froxy
+    } catch {
+      // Fail silently, as there is no package.json.
+    }
 
-  return { ...defaultConfig, ...packageConfig }
+    return { ...defaultConfig, ...packageConfig }
+  }
 }
 
 // Resolves a module using esbuild module resolution.
@@ -41,9 +44,12 @@ const config = absWorkingDir => {
 // @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()) {
+async function esbuildResolve(id, resolveDir) {
+  const esbuild = require(require.resolve('esbuild', { paths: [cwd] }))
+
   let _resolve
   const resolvedPromise = new Promise(resolve => (_resolve = resolve))
+
   return Promise.race([
     resolvedPromise,
     esbuild
@@ -76,8 +82,3 @@ async function esbuildResolve(id, resolveDir = process.cwd()) {
       .then(() => id)
   ])
 }
-
-module.exports = {
-  resolve,
-  config
-}

data/lib/froxy/proxy.rb

@@ -2,13 +2,16 @@
 
 require 'open3'
 require 'rack/utils'
+require 'active_support/benchmarkable'
 
 # Proxies files to esbuild.
 module Froxy
   class Proxy
+    include ActiveSupport::Benchmarkable
+
     BUILD_PATH = 'public/froxy/build'
     CLI = File.expand_path('../../bin/froxy', __dir__)
-    IMAGE_TYPES = /\.(png|gif|jpeg|jpg|svg|ico|webp|avif)$/i.freeze
+    FALLTHRU_TYPES = /\.(png|gif|jpeg|jpg|svg|ico|webp|avif)$/i.freeze
     FILE_EXT_MAP = {
       '.jsx' => '.js'
     }.freeze
@@ -25,7 +28,7 @@ module Froxy
 
       if req.get? || req.head?
         # Let images through.
-        return @file_server.call(env) if IMAGE_TYPES.match?(path_info)
+        return @file_server.call(env) if FALLTHRU_TYPES.match?(path_info)
 
         # Let JS sourcemaps through.
         return @build_file_server.call(env) if /\.js\.map$/i.match?(path_info)
@@ -34,9 +37,12 @@ module Froxy
         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
+          return benchmark logging_message(req) do
+            build env, req, path
+          end
         end
       end
 
@@ -45,6 +51,10 @@ module Froxy
 
     private
 
+    def logging_message(request)
+      format '[froxy] "%s" for %s at %s', request.path_info, request.ip, Time.now.to_default_s
+    end
+
     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)
@@ -57,7 +67,6 @@ module Froxy
       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?)
@@ -79,5 +88,9 @@ module Froxy
       path = Rack::Utils.unescape_path path_info.chomp('/').delete_prefix('/')
       Rack::Utils.clean_path_info path if Rack::Utils.valid_path? path
     end
+
+    def logger
+      Rails.logger
+    end
   end
 end

data/lib/froxy/version.rb

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

data/package.json

@@ -8,7 +8,5 @@
     "singleQuote": true,
     "arrowParens": "avoid"
   },
-  "devDependencies": {
-    "esbuild": "0.8.50"
-  }
+  "devDependencies": {}
 }

data/yarn.lock

@@ -2,7 +2,3 @@
 # yarn lockfile v1
 
 
-esbuild@0.8.50:
-  version "0.8.50"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.50.tgz#ebf24fde0cdad1a369789dd6fd7a820b0a01e46c"
-  integrity sha512-oidFLXssA7IccYzkqLVZSqNJDwDq8Mh/vqvrW+3fPWM7iUiC5O2bCllhnO8+K9LlyL/2Z6n+WwRJAz9fqSIVRg==

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: froxy
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
 platform: ruby
 authors:
 - Joel Moss
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2021-02-22 00:00:00.000000000 Z
+date: 2021-02-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -55,6 +55,7 @@ files:
 - lib/froxy/esbuild/plugins/css.js
 - lib/froxy/esbuild/plugins/debug.js
 - lib/froxy/esbuild/plugins/env.js
+- lib/froxy/esbuild/plugins/ignore.js
 - lib/froxy/esbuild/plugins/images.js
 - lib/froxy/esbuild/plugins/load_style.js
 - lib/froxy/esbuild/plugins/root.js