jsbundling-rails 1.0.2 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9005a58fceabb06503796890d306f26c1b57b95e98199f6e93c3a9be9656b320
-  data.tar.gz: defe5a30a7543ed3ff40b5d97a493c123fb565bedac270ba2c3a80ee360f58d0
+  metadata.gz: 89ca39cfc099fd19c4f4b57d67b5f02ac22d9faacc5d01a74557a14506aa5503
+  data.tar.gz: 70334b3417d0648cc51c344198c3deaf6b91c24eb70ec7e5337c406d5a85934a
 SHA512:
-  metadata.gz: 1537371737cd78411eacd67683eae126ad912d283bae982da54de5c79104d3c176ebaa4275f5d487d81837c12434b63f9edbcefeacad496c705f9d0bdb9e1f38
-  data.tar.gz: 6da1db4850966e8a74f5be4526ff43b2b9dfbe7839848d091b24062c738168a5fc97875c84c406216b4140a45aec7e7c31c9a5e919f8c971b7e89669d0df0a1e
+  metadata.gz: e8f3aed3f0c089d5bc82c3b56a355732c5e6a57f430f543739b366dcd91f22b64e44dc98e280edb77194104ca69aafe42dd77e0495beec8ddb413a7570fd04f5
+  data.tar.gz: bb9998681664735ea63d0b30b952e94fc78c04d8aee903a60c4be142a81d4b692a4ca6594f0706d256d84f0e5917aeb328c95d0fc0de60404a6c169d7fe06021

data/README.md

@@ -24,9 +24,8 @@ If you want to use webpack features like [code splitting](https://webpack.js.org
 
 You must already have node and yarn installed on your system. You will also need npx version 7.1.0 or later. Then:
 
-1. Add `jsbundling-rails` to your Gemfile with `gem 'jsbundling-rails'`
-2. Run `./bin/bundle install`
-3. Run `./bin/rails javascript:install:[esbuild|rollup|webpack]`
+1. Run `./bin/bundle add jsbundling-rails`
+2. Run `./bin/rails javascript:install:[esbuild|rollup|webpack]`
 
 Or, in Rails 7+, you can preconfigure your new application to use a specific bundler with `rails new myapp -j [esbuild|rollup|webpack]`.
 
@@ -37,10 +36,20 @@ Or, in Rails 7+, you can preconfigure your new application to use a specific bun
 
 The default build script for esbuild relies on the `app/javascript/*.*` glob pattern to compile multiple entrypoints automatically. This glob pattern is not available by default on Windows, so you need to change the build script in `package.json` to manually list the entrypoints you wish to compile.
 
-## Why does esbuild overwrite my application.css?
+### Why does esbuild overwrite my application.css?
 
 If you [import CSS](https://esbuild.github.io/content-types/#css-from-js) in your application.js while using esbuild, you'll be creating both an `app/assets/builds/application.js` _and_ `app/assets/builds/application.css` file when bundling. The latter can conflict with the `app/assets/builds/application.css` produced by [cssbundling-rails](https://github.com/rails/cssbundling-rails). The solution is to either change the output file for esbuild (and the references for that) or for cssbundling. Both are specified in `package.json`. 
 
+### How can I reference static assets in JavaScript code?
+
+Suppose you have an image `app/javascript/images/example.png` that you need to reference in frontend code built with esbuild.
+
+1. Create the image at `app/javascript/images/example.png`.
+1. In `package.json`, under `"scripts"` and `"build"`, add the option `--loader:.png=file` to the esbuild script, which instructs esbuild to copy png files to the build directory.
+1. When esbuild runs, it will copy the png file to something like `app/assets/builds/example-5SRKKTLZ.png`.
+1. In frontend code, the image is available for import by its original name: `import Example from "../images/example.png"`.
+1. The image itself can now be referenced by its imported name, e.g. in React, `<img src={Example} />`.
+1. The path of the image resolves to `/assets/example-5SRKKTLZ.png`, which is served by the asset pipeline.
 
 ## License
 

data/lib/install/Procfile.dev

@@ -1,2 +1,2 @@
-web: bin/rails server -p 3000
+web: unset PORT && bin/rails server
 js: yarn build --watch

data/lib/install/dev

@@ -1,9 +1,8 @@
-#!/usr/bin/env bash
+#!/usr/bin/env sh
 
-if ! command -v foreman &> /dev/null
-then
+if ! gem list foreman -i --silent; then
   echo "Installing foreman..."
   gem install foreman
 fi
 
-foreman start -f Procfile.dev "$@"
+exec foreman start -f Procfile.dev "$@"

data/lib/install/esbuild/install.rb

@@ -2,11 +2,15 @@ say "Install esbuild"
 run "yarn add esbuild"
 
 say "Add build script"
-build_script = "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"
+build_script = "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
 
-if (`npx -v`.to_f < 7.1 rescue "Missing")
-  say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green
-else
+case `npx -v`.to_f
+when 7.1...8.0
   run %(npm set-script build "#{build_script}")
   run %(yarn build)
+when 8.0..
+  run %(npm pkg set scripts.build="#{build_script}")
+  run %(yarn build)
+else
+  say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green
 end

data/lib/install/rollup/install.rb

@@ -3,11 +3,15 @@ copy_file "#{__dir__}/rollup.config.js", "rollup.config.js"
 run "yarn add rollup @rollup/plugin-node-resolve"
 
 say "Add build script"
-build_script = "rollup -c rollup.config.js"
+build_script = "rollup -c --bundleConfigAsCjs rollup.config.js"
 
-if (`npx -v`.to_f < 7.1 rescue "Missing")
-  say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green
-else
+case `npx -v`.to_f
+when 7.1...8.0
   run %(npm set-script build "#{build_script}")
   run %(yarn build)
+when 8.0..
+  run %(npm pkg set scripts.build="#{build_script}")
+  run %(yarn build)
+else
+  say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green
 end

data/lib/install/webpack/install.rb

@@ -5,9 +5,13 @@ run "yarn add webpack webpack-cli"
 say "Add build script"
 build_script = "webpack --config webpack.config.js"
 
-if (`npx -v`.to_f < 7.1 rescue "Missing")
-  say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green
-else
+case `npx -v`.to_f
+when 7.1...8.0
   run %(npm set-script build "#{build_script}")
   run %(yarn build)
+when 8.0..
+  run %(npm pkg set scripts.build="#{build_script}")
+  run %(yarn build)
+else
+  say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green
 end

data/lib/install/webpack/webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
   },
   output: {
     filename: "[name].js",
-    sourceMapFilename: "[name].js.map",
+    sourceMapFilename: "[file].map",
     path: path.resolve(__dirname, "app/assets/builds"),
   },
   plugins: [

data/lib/jsbundling/version.rb

@@ -1,3 +1,3 @@
 module Jsbundling
-  VERSION = "1.0.2"
+  VERSION = "1.1.0"
 end

data/lib/tasks/jsbundling/build.rake

@@ -13,6 +13,8 @@ end
 
 if Rake::Task.task_defined?("test:prepare")
   Rake::Task["test:prepare"].enhance(["javascript:build"])
+elsif Rake::Task.task_defined?("spec:prepare")
+  Rake::Task["spec:prepare"].enhance(["javascript:build"])
 elsif Rake::Task.task_defined?("db:test:prepare")
   Rake::Task["db:test:prepare"].enhance(["javascript:build"])
 end

data/lib/tasks/jsbundling/clobber.rake

@@ -1,7 +1,7 @@
 namespace :javascript do
   desc "Remove JavaScript builds"
   task :clobber do
-    rm_rf Dir["app/assets/builds/[^.]*.js"], verbose: false
+    rm_rf Dir["app/assets/builds/**/[^.]*.{js,js.map}"], verbose: false
   end
 end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jsbundling-rails
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.1.0
 platform: ruby
 authors:
 - David Heinemeier Hansson
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-02-26 00:00:00.000000000 Z
+date: 2022-12-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -67,7 +67,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.32
+rubygems_version: 3.3.26
 signing_key:
 specification_version: 4
 summary: Bundle and transpile JavaScript in Rails with esbuild, rollup.js, or Webpack.