jsbundling-rails 1.1.1 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 137e2a80465a741d5a59b07f3776f8de07461e782439f64f7a096ac9f46f4446
-  data.tar.gz: 47ddd6de7ec38dbaaf5568c433723cf79c3f93a0b4409b580c85b7fceb5dbb01
+  metadata.gz: c5eb0a7f2f82b82a508d4640babe1980234db73e9f97f2bcdd08db417ad1dfee
+  data.tar.gz: 9ba266bcf549a314d0968705626021566c993a1c7e771ecf886627c307c0300a
 SHA512:
-  metadata.gz: 04222ea64e7bf09c63fef4dddabc1e9537960fecf6629dcca6c3417c31bbfc580d0de716c45b8c9638e60d8c80cee213aa2263b4c0ed2cebf47d49f47f48079f
-  data.tar.gz: ef8f1a586d142d28d4399530a1cdc34065f59ebf23e0446d0fda349ceaefd82dc4377382b9e7ad53c412e89ec03e73562809ba81d05f5a9db47bcfee47776f97
+  metadata.gz: b9f055b3a8a676d91e3fb421e757a5e81e6b01b4c165c8f45f889de1a2c0bbdcf574c6934d17c7b39006ad05a87b52be9e5c4429f0265ddd87888129fc472c3c
+  data.tar.gz: a07320167dc646b5b9792e8d02c770b2e4c40283a5219baf92cfca6b29ae04c54b2d2ab7e0c995514b4bf646b092272f9a3133cd46b0571ebd9190d57682a3d2

data/README.md

@@ -1,33 +1,40 @@
 # JavaScript Bundling for Rails
 
-Use [esbuild](https://esbuild.github.io), [rollup.js](https://rollupjs.org), or [Webpack](https://webpack.js.org) to bundle your JavaScript, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use `app/assets/builds` to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to `.gitignore` by default).
+Use [Bun](https://bun.sh), [esbuild](https://esbuild.github.io), [rollup.js](https://rollupjs.org), or [Webpack](https://webpack.js.org) to bundle your JavaScript, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use `app/assets/builds` to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to `.gitignore` by default).
 
 You develop using this approach by running the bundler in watch mode in a terminal with `yarn build --watch` (and your Rails server in another, if you're not using something like [puma-dev](https://github.com/puma/puma-dev)). You can also use `./bin/dev`, which will start both the Rails server and the JS build watcher (along with a CSS build watcher, if you're also using `cssbundling-rails`).
 
 Whenever the bundler detects changes to any of the JavaScript files in your project, it'll bundle `app/javascript/application.js` into `app/assets/builds/application.js` (and all other entry points configured). You can refer to the build output in your layout using the standard asset pipeline approach with `<%= javascript_include_tag "application", defer: true %>`.
 
-When you deploy your application to production, the `javascript:build` task attaches to the `assets:precompile` task to ensure that all your package dependencies from `package.json` have been installed via yarn, and then runs `yarn build` to process all the entry points, as it would in development. The latter files are then picked up by the asset pipeline, digested, and copied into public/assets, as any other asset pipeline file.
+When you deploy your application to production, the `javascript:build` task attaches to the `assets:precompile` task to ensure that all your package dependencies from `package.json` have been installed via your javascript package manager ([bun](https://bun.sh), [npm](https://www.npmjs.com), [pnpm](https://pnpm.io), or [yarn](https://yarnpkg.com)), and then runs the build script defined in `package.json` to process all the entry points, as it would in development. The latter files are then picked up by the asset pipeline, digested, and copied into public/assets, as any other asset pipeline file.
 
-This also happens in testing where the bundler attaches to the `test:prepare` task to ensure the JavaScript has been bundled before testing commences. (Note that this currently only applies to rails `test:*` tasks (like `test:all` or `test:controllers`), not "rails test", as that doesn't load `test:prepare`).
-
-If your testing library of choice does not define a `test:prepare` Rake task, ensure that your test suite runs `javascript:build` to bundle JavaScript before testing commences.
+This also happens in testing where the bundler attaches to the `test:prepare` task to ensure the JavaScript has been bundled before testing commences. If your testing library of choice does not call the `test:prepare` Rake task, ensure that your test suite runs `javascript:build` to bundle JavaScript before testing commences.
 
 That's it!
 
-You can configure your bundler options in the `build` script in `package.json` or via the installer-generated `rollup.config.js` for rollup.js or `webpack.config.json` for Webpack (esbuild does not have a default configuration format, and we don't intend to use esbuild as an API in order to hack around it).
+You can configure your bundler options in the `build` script in `package.json` or via the installer-generated `bun.config.js` for Bun, `rollup.config.js` for rollup.js or `webpack.config.json` for Webpack (esbuild does not have a default configuration format, and we don't intend to use esbuild as an API in order to hack around it).
 
 If you're already using [`webpacker`](https://github.com/rails/webpacker) and you're wondering if you should migrate to `jsbundling-rails`, have a look at [the high-level comparison](./docs/comparison_with_webpacker.md). If you're looking to migrate from webpacker, see the [migration guide](https://github.com/rails/jsbundling-rails/blob/main/docs/switch_from_webpacker.md).
 
 If you want to use webpack features like [code splitting](https://webpack.js.org/guides/code-splitting/) and [hot module reloading](https://webpack.js.org/concepts/hot-module-replacement/), consider using the official fork of `webpacker`, [`shakapacker`](https://github.com/shakacode/shakapacker).
 
 ## Installation
+If you are installing esbuild, rollup, or webpack, you must already have node installed on your system. You will also need npx version 7.1.0 or later.
+
+If you are using Bun, then you must have the Bun runtime already installed on
+your system.
+
+To get started run:
 
-You must already have node and yarn installed on your system. You will also need npx version 7.1.0 or later. Then:
+```
+./bin/bundle add jsbundling-rails
+```
 
-1. Run `./bin/bundle add jsbundling-rails`
-2. Run `./bin/rails javascript:install:[esbuild|rollup|webpack]`
+```
+./bin/rails javascript:install:[bun|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]`.
+Or, in Rails 7+, you can preconfigure your new application to use a specific bundler with `rails new myapp -j [bun|esbuild|rollup|webpack]`.
 
 
 ## FAQ
@@ -36,20 +43,22 @@ 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 bun/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`. 
+If you [import CSS](https://esbuild.github.io/content-types/#css-from-js) in your application.js while using esbuild or Bun, 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 bun/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 `package.json`, under `"scripts"` and `"build"`, add the additional arguments:
+    * `--loader:.png=file` This instructs esbuild to copy png files to the build directory.
+    * `--asset-names=[name]-[hash].digested` This tells esbuild to append `.digested` to the file name so that sprockets or propshaft will not append an additional digest hash to the file.
+1. When esbuild runs, it will copy the png file to something like `app/assets/builds/example-5SRKKTLZ.digested.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.
+1. The path of the image resolves to `/assets/example-5SRKKTLZ.digested.png`, which is served by the asset pipeline.
 
 ## License
 

data/lib/install/Procfile.dev

@@ -1,2 +1,2 @@
-web: unset PORT && bin/rails server
+web: env RUBY_DEBUG_OPEN=true bin/rails server
 js: yarn build --watch

data/lib/install/bun/Procfile.dev

@@ -0,0 +1,2 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server
+js: bun run build --watch

data/lib/install/bun/bun.config.js

@@ -0,0 +1,37 @@
+import path from 'path';
+import fs from 'fs';
+
+const config = {
+  sourcemap: "external",
+  entrypoints: ["app/javascript/application.js"],
+  outdir: path.join(process.cwd(), "app/assets/builds"),
+};
+
+const build = async (config) => {
+  const result = await Bun.build(config);
+
+  if (!result.success) {
+    if (process.argv.includes('--watch')) {
+      console.error("Build failed");
+      for (const message of result.logs) {
+        console.error(message);
+      }
+      return;
+    } else {
+      throw new AggregateError(result.logs, "Build failed");
+    }
+  }
+};
+
+(async () => {
+  await build(config);
+
+  if (process.argv.includes('--watch')) {
+    fs.watch(path.join(process.cwd(), "app/javascript"), { recursive: true }, (eventType, filename) => {
+      console.log(`File changed: ${filename}. Rebuilding...`);
+      build(config);
+    });
+  } else {
+    process.exit(0);
+  }
+})();

data/lib/install/bun/install.rb

@@ -0,0 +1,30 @@
+require 'json'
+
+apply "#{__dir__}/../install.rb"
+
+if Rails.root.join("Procfile.dev").exist?
+  append_to_file "Procfile.dev", "js: bun run build --watch\n"
+else
+  say "Add default Procfile.dev"
+  copy_file "#{__dir__}/Procfile.dev", "Procfile.dev"
+
+  say "Ensure foreman is installed"
+  run "gem install foreman"
+end
+
+say "Add default bun.config.js"
+copy_file "#{__dir__}/bun.config.js", "bun.config.js"
+
+say "Add build script to package.json"
+package_json = JSON.parse(File.read("package.json"))
+package_json["scripts"] ||= {}
+package_json["scripts"]["build"] = "bun bun.config.js"
+File.write("package.json", JSON.pretty_generate(package_json))
+
+say "Add ability to diff lockb to .gitattributes"
+if Rails.root.join(".gitattributes").exist?
+  append_to_file ".gitattributes", "\n# See https://bun.sh/docs/install/lockfile\n*.lockb diff=lockb\n"
+else
+  copy_file "#{__dir__}/.gitattributes", ".gitattributes"
+end
+say %(Run `git config diff.lockb.textconv bun && git config diff.lockb.binary true` to enable pretty diffs for Bun's .lockb file), :green

data/lib/install/dev

@@ -1,8 +1,11 @@
 #!/usr/bin/env sh
 
-if ! gem list foreman -i --silent; then
+if gem list --no-installed --exact --silent foreman; then
   echo "Installing foreman..."
   gem install foreman
 fi
 
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
 exec foreman start -f Procfile.dev "$@"

data/lib/install/esbuild/install.rb

@@ -1,8 +1,11 @@
+apply "#{__dir__}/../install.rb"
+apply "#{__dir__}/../install_procfile.rb"
+
 say "Install esbuild"
 run "yarn add esbuild"
 
 say "Add build script"
-build_script = "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
+build_script = "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets"
 
 case `npx -v`.to_f
 when 7.1...8.0

data/lib/install/install.rb

@@ -14,10 +14,10 @@ end
 if (app_layout_path = Rails.root.join("app/views/layouts/application.html.erb")).exist?
   say "Add JavaScript include tag in application layout"
   insert_into_file app_layout_path.to_s,
-    %(\n    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>), before: /\s*<\/head>/
+    %(\n    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>), before: /\s*<\/head>/
 else
   say "Default application.html.erb is missing!", :red
-  say %(        Add <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %> within the <head> tag in your custom layout.)
+  say %(        Add <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> within the <head> tag in your custom layout.)
 end
 
 unless (app_js_entrypoint_path = Rails.root.join("app/javascript/application.js")).exist?
@@ -31,16 +31,6 @@ unless Rails.root.join("package.json").exist?
   copy_file "#{__dir__}/package.json", "package.json"
 end
 
-if Rails.root.join("Procfile.dev").exist?
-  append_to_file "Procfile.dev", "js: yarn build --watch\n"
-else
-  say "Add default Procfile.dev"
-  copy_file "#{__dir__}/Procfile.dev", "Procfile.dev"
-
-  say "Ensure foreman is installed"
-  run "gem install foreman"
-end
-
 say "Add bin/dev to start foreman"
 copy_file "#{__dir__}/dev", "bin/dev"
 chmod "bin/dev", 0755, verbose: false

data/lib/install/install_procfile.rb

@@ -0,0 +1,9 @@
+if Rails.root.join("Procfile.dev").exist?
+  append_to_file "Procfile.dev", "js: yarn build --watch\n"
+else
+  say "Add default Procfile.dev"
+  copy_file "#{__dir__}/Procfile.dev", "Procfile.dev"
+
+  say "Ensure foreman is installed"
+  run "gem install foreman"
+end

data/lib/install/package.json

@@ -1,4 +1,4 @@
 {
   "name": "app",
-  "private": "true"
+  "private": true
 }

data/lib/install/rollup/install.rb

@@ -1,3 +1,6 @@
+apply "#{__dir__}/../install.rb"
+apply "#{__dir__}/../install_procfile.rb"
+
 say "Install rollup with config"
 copy_file "#{__dir__}/rollup.config.js", "rollup.config.js"
 run "yarn add rollup @rollup/plugin-node-resolve"

data/lib/install/rollup/rollup.config.js

@@ -4,7 +4,7 @@ export default {
   input: "app/javascript/application.js",
   output: {
     file: "app/assets/builds/application.js",
-    format: "es",
+    format: "esm",
     inlineDynamicImports: true,
     sourcemap: true
   },

data/lib/install/webpack/install.rb

@@ -1,3 +1,6 @@
+apply "#{__dir__}/../install.rb"
+apply "#{__dir__}/../install_procfile.rb"
+
 say "Install Webpack with config"
 copy_file "#{__dir__}/webpack.config.js", "webpack.config.js"
 run "yarn add webpack webpack-cli"

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

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

data/lib/jsbundling/version.rb

@@ -1,3 +1,3 @@
 module Jsbundling
-  VERSION = "1.1.1"
+  VERSION = "1.3.0"
 end

data/lib/tasks/jsbundling/build.rake

@@ -1,20 +1,76 @@
 namespace :javascript do
+  desc "Install JavaScript dependencies"
+  task :install do
+    command = Jsbundling::Tasks.install_command
+    unless system(command)
+      raise "jsbundling-rails: Command install failed, ensure #{command.split.first} is installed"
+    end
+  end
+
   desc "Build your JavaScript bundle"
-  task :build do
-    unless system "yarn install && yarn build"
-      raise "jsbundling-rails: Command build failed, ensure yarn is installed and `yarn build` runs without errors"
+  build_task = task :build do
+    command = Jsbundling::Tasks.build_command
+    unless system(command)
+      raise "jsbundling-rails: Command build failed, ensure `#{command}` runs without errors"
     end
   end
+
+  build_task.prereqs << :install unless ENV["SKIP_YARN_INSTALL"] || ENV["SKIP_BUN_INSTALL"]
 end
 
-if Rake::Task.task_defined?("assets:precompile")
-  Rake::Task["assets:precompile"].enhance(["javascript:build"])
+module Jsbundling
+  module Tasks
+    extend self
+
+    def install_command
+      case tool
+      when :bun then "bun install"
+      when :yarn then "yarn install"
+      when :pnpm then "pnpm install"
+      when :npm then "npm install"
+      else raise "jsbundling-rails: No suitable tool found for installing JavaScript dependencies"
+      end
+    end
+
+    def build_command
+      case tool
+      when :bun then "bun run build"
+      when :yarn then "yarn build"
+      when :pnpm then "pnpm build"
+      when :npm then "npm run build"
+      else raise "jsbundling-rails: No suitable tool found for building JavaScript"
+      end
+    end
+
+    def tool_exists?(tool)
+      system "command -v #{tool} > /dev/null"
+    end
+
+    def tool
+      case
+      when File.exist?('bun.lockb') then :bun
+      when File.exist?('yarn.lock') then :yarn
+      when File.exist?('pnpm-lock.yaml') then :pnpm
+      when File.exist?('package-lock.json') then :npm
+      when tool_exists?('bun') then :bun
+      when tool_exists?('yarn') then :yarn
+      when tool_exists?('pnpm') then :pnpm
+      when tool_exists?('npm') then :npm
+      end
+    end
+  end
 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"])
+unless ENV["SKIP_JS_BUILD"]
+  if Rake::Task.task_defined?("assets:precompile")
+    Rake::Task["assets:precompile"].enhance(["javascript:build"])
+  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
 end

data/lib/tasks/jsbundling/install.rake

@@ -1,22 +1,22 @@
 namespace :javascript do
   namespace :install do
-    desc "Install shared elements for all bundlers"
-    task :shared do
-      system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/install.rb",  __dir__)}"
+    desc "Install Bun"
+    task :bun do
+      system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/bun/install.rb",  __dir__)}"
     end
 
     desc "Install esbuild"
-    task esbuild: "javascript:install:shared" do
+    task :esbuild do
       system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/esbuild/install.rb",  __dir__)}"
     end
 
     desc "Install rollup.js"
-    task rollup: "javascript:install:shared" do
+    task :rollup do
       system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/rollup/install.rb",  __dir__)}"
     end
 
     desc "Install Webpack"
-    task webpack: "javascript:install:shared" do
+    task :webpack do
       system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../../install/webpack/install.rb",  __dir__)}"
     end
   end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jsbundling-rails
 version: !ruby/object:Gem::Version
-  version: 1.1.1
+  version: 1.3.0
 platform: ruby
 authors:
 - David Heinemeier Hansson
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-14 00:00:00.000000000 Z
+date: 2024-01-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -34,9 +34,13 @@ files:
 - README.md
 - lib/install/Procfile.dev
 - lib/install/application.js
+- lib/install/bun/Procfile.dev
+- lib/install/bun/bun.config.js
+- lib/install/bun/install.rb
 - lib/install/dev
 - lib/install/esbuild/install.rb
 - lib/install/install.rb
+- lib/install/install_procfile.rb
 - lib/install/package.json
 - lib/install/rollup/install.rb
 - lib/install/rollup/rollup.config.js
@@ -67,8 +71,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.26
+rubygems_version: 3.4.20
 signing_key:
 specification_version: 4
-summary: Bundle and transpile JavaScript in Rails with esbuild, rollup.js, or Webpack.
+summary: Bundle and transpile JavaScript in Rails with bun, esbuild, rollup.js, or
+  Webpack.
 test_files: []