shakapacker 6.3.0.pre.rc.1 → 6.4.1

data/docs/react.md

@@ -0,0 +1,262 @@
+# React Integration
+
+These steps describe how to create a Rails/React app, using Shakapacker as the bundler.
+
+Before starting, ensure that you have Yarn installed, for example:
+
+```shell
+npm i -g yarn
+```
+
+## Basic Setup
+
+Create a new Rails app as per the [installation instructions in the README](https://github.com/shakacode/shakapacker#installation).
+
+Add React, as well as the necessary libraries to enable CSS support in your application:
+
+```shell
+yarn add react react-dom @babel/preset-react
+yarn add css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
+```
+
+Update the Babel configuration in the `package.json` file:
+
+```diff
+"babel": {
+  "presets": [
+    "./node_modules/shakapacker/package/babel/preset.js",
++   "@babel/preset-react"
+  ]
+},
+```
+
+And that's it. You can now create a React app using `app/javascript/application.js` as your entry point.
+
+## Enabling Hot Module Replacement (HMR)
+
+With HMR enabled, Shakapacker will automatically update only that part of the page that changed when it detects changes in your project files. This has the nice advantage of preserving your app’s state.
+
+To enable HMR in a React app, proceed as follows:.
+
+In `config/webpacker.yml` set `hmr` is set to `true`.
+
+Install the [react-refresh](https://www.npmjs.com/package/react-refresh) package, as well as [@pmmmwh/react-refresh-webpack-plugin](https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin):
+
+```shell
+yarn add --dev react-refresh @pmmmwh/react-refresh-webpack-plugin
+```
+
+Alter `config/webpack/webpack.config.js` like so:
+
+```js
+const { webpackConfig, inliningCss } = require('shakapacker');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+if (isDevelopment && inliningCss) {
+  webpackConfig.plugins.push(
+    new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockPort: webpackConfig.devServer.port,
+      },
+    })
+  );
+}
+
+module.exports = webpackConfig;
+```
+
+This applies the plugin to the webpack configuration.
+
+Delete the Babel configuration from `package.json`:
+
+```diff
+- "babel": {
+-   "presets": [
+-     "./node_modules/shakapacker/package/babel/preset.js",
+-     "@babel/preset-react"
+-   ]
+- },
+```
+
+Then create a `babel.config.js` file in the root of project and add the following:
+
+```js
+module.exports = function (api) {
+  const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
+  const resultConfig = defaultConfigFunc(api)
+  const isDevelopmentEnv = api.env('development')
+  const isProductionEnv = api.env('production')
+  const isTestEnv = api.env('test')
+
+  const changesOnDefault = {
+    presets: [
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true
+        }
+      ],
+      process.env.WEBPACK_SERVE && 'react-refresh/babel'
+    ].filter(Boolean),
+  }
+
+  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
+
+  return resultConfig
+}
+```
+
+This is taken from the [sample React Babel config](https://github.com/jameshibbard/shakapacker/blob/master/docs/customizing_babel_config.md#react-configuration).
+
+HMR for your React app is now enabled. 🚀
+
+## A Basic Demo App
+
+To test that all of the above is working, you can follow these instructions to create a basic React app using Shakapacker.
+
+1. Create a new Rails app:
+```shell
+rails new myapp --skip-javascript
+cd myapp
+bundle add shakapacker --strict
+./bin/bundle install
+./bin/rails webpacker:install
+yarn add react react-dom @babel/preset-react
+yarn add css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
+```
+
+2. Generate a controller
+```shell
+rails g controller site index
+echo '<div id="root"></div>' > app/views/site/index.html.erb
+```
+
+3. Create a CSS file and a React component:
+```shell
+touch app/javascript/App.css app/javascript/App.js
+```
+
+4. Edit `app/javascript/application.js` like so:
+```jsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import HelloMessage from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+document.addEventListener('DOMContentLoaded', () => {
+  root.render(<HelloMessage name="World" />);
+});
+```
+
+5. Add the following to `app/javascript/App.js`:
+```jsx
+import React from 'react';
+import 'App.css';
+const HelloMessage = ({ name }) => <h1>Hello, {name}!</h1>;
+export default HelloMessage;
+```
+
+6. Add the following to `app/javascript/App.css`:
+```css
+h1 { color: blue; }
+```
+
+7. Enable HMR in config/webpacker.yml:
+```shell
+hmr: true
+```
+
+8. Install the [react-refresh](https://www.npmjs.com/package/react-refresh) package, as well as [@pmmmwh/react-refresh-webpack-plugin](https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin):
+
+```shell
+yarn add --dev react-refresh @pmmmwh/react-refresh-webpack-plugin
+```
+
+9. Alter `config/webpack/webpack.config.js` like so:
+
+```js
+const { webpackConfig, inliningCss } = require('shakapacker');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+if (isDevelopment && inliningCss) {
+  webpackConfig.plugins.push(
+    new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockPort: webpackConfig.devServer.port,
+      },
+    })
+  );
+}
+
+module.exports = webpackConfig;
+```
+
+10. Remove the Babel configuration from `package.json`
+```diff
+- "babel": {
+-   "presets": [
+-     "./node_modules/shakapacker/package/babel/preset.js"
+-   ]
+- },
+```
+
+11. Create a `babel.config.js` file in the project root and add the following [sample code](https://github.com/shakacode/shakapacker/blob/master/docs/customizing_babel_config.md#react-configuration):
+```js
+module.exports = function (api) {
+  const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
+  const resultConfig = defaultConfigFunc(api)
+  const isDevelopmentEnv = api.env('development')
+  const isProductionEnv = api.env('production')
+  const isTestEnv = api.env('test')
+
+  const changesOnDefault = {
+    presets: [
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true
+        }
+      ],
+      process.env.WEBPACK_SERVE && 'react-refresh/babel'
+    ].filter(Boolean),
+  }
+
+  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
+
+  return resultConfig
+}
+```
+
+9. Start the Rails server and the webpack-dev-server in separate console windows:
+```shell
+rails s
+./bin/webpacker-dev-server
+```
+
+10. Hit: <http://localhost:3000/site/index>
+
+11. Edit either the React component at `app/javascript/App.js` or the CSS file at `app/javascript/App.css` and observe the HMR goodness.
+
+Note that HMR will not work if you edit `app/javascript/application.js` and you experience a full refresh with a warning in the console. For more info on this, see here: https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/177

data/docs/sprockets.md

@@ -0,0 +1,10 @@
+# Sprockets
+
+### Note for Sprockets usage
+
+If you are still using Sprockets for some of your assets, you might want to include files from `node_modules` directory in your asset pipeline. This is useful, for example, if you want to reference a stylesheet from a node package in your `.scss` stylesheet.
+
+In order to enable this, make sure you add `node_modules` to the asset load path by adding the following in an initializer (for example `config/initializers/assets.rb`)
+```ruby
+Rails.application.config.assets.paths << Rails.root.join('node_modules')
+```

data/lib/install/config/webpacker.yml

@@ -2,7 +2,15 @@
 
 default: &default
   source_path: app/javascript
+
+  # You can have a subdirectory of the source_path, like 'packs' (recommended).
+  # Alternatively, you can use '/' to use the whole source_path directory.
   source_entry_path: /
+
+  # If nested_entries is true, then we'll pick up subdirectories within the source_entry_path.
+  # You cannot set this option to true if you set source_entry_path to '/'
+  nested_entries: false
+
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/webpacker
@@ -26,9 +34,13 @@ default: &default
   # Set to true to enable check for matching versions of shakapacker gem and NPM package - will raise an error if there is a mismatch or wildcard versioning is used
   ensure_consistent_versioning: false
 
+  # Select whether the compiler will use SHA digest ('digest' option) or most most recent modified timestamp ('mtime') to determine freshness
+  compiler_strategy: digest
+
 development:
   <<: *default
   compile: true
+  compiler_strategy: mtime
 
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:

data/lib/tasks/webpacker/yarn_install.rake

@@ -1,6 +1,12 @@
 namespace :webpacker do
   desc "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn"
   task :yarn_install do
+    warn <<~MSG.strip
+      Shakapacker - Automatic installation of yarn packages is deprecated
+      Automatic installation of yarn packages when assets are precompiled is deprecated and will be removed in Shakapacker v7.
+      Please ensure you are installing yarn packages explicitly before the asset compilation.
+    MSG
+
     valid_node_envs = %w[test development production]
     node_env = ENV.fetch("NODE_ENV") do
       valid_node_envs.include?(Rails.env) ? Rails.env : "production"

data/lib/tasks/webpacker.rake

@@ -9,7 +9,6 @@ tasks = {
   "webpacker:check_binstubs"          => "Verifies that bin/webpacker is present",
   "webpacker:binstubs"                => "Installs Webpacker binstubs in this application",
   "webpacker:verify_install"          => "Verifies if Webpacker is installed",
-  "webpacker:yarn_install"            => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn"
 }.freeze
 
 desc "Lists all available tasks in Webpacker"

data/lib/tasks/yarn.rake

@@ -5,6 +5,12 @@
 namespace :yarn do
   desc "Install all JavaScript dependencies as specified via Yarn"
   task :install do
+    warn <<~MSG.strip
+      Shakapacker - Automatic installation of yarn packages is deprecated
+      Automatic installation of yarn packages when assets are precompiled is deprecated and will be removed in Shakapacker v7.
+      Please ensure you are installing yarn packages explicitly before the asset compilation.
+    MSG
+
     begin
       # Install only production deps when for not usual envs.
       valid_node_envs = %w[test development production]

data/lib/webpacker/base_strategy.rb

@@ -0,0 +1,24 @@
+module Webpacker
+  class BaseStrategy
+    def initialize
+      @config = Webpacker.config
+    end
+
+    def after_compile_hook
+      nil
+    end
+
+    private
+
+      attr_reader :config
+
+      def default_watched_paths
+        [
+          *config.additional_paths.map { |path| "#{path}{,/**/*}" },
+          "#{config.source_path}{,/**/*}",
+          "yarn.lock", "package.json",
+          "config/webpack{,/**/*}"
+        ].freeze
+      end
+  end
+end

data/lib/webpacker/compiler.rb

@@ -1,17 +1,13 @@
 require "open3"
+require "webpacker/compiler_strategy"
 
 class Webpacker::Compiler
-  # Additional paths that test compiler needs to watch
-  # Webpacker::Compiler.watched_paths << 'bower_components'
-  #
-  # Deprecated. Use additional_paths in the YAML configuration instead.
-  cattr_accessor(:watched_paths) { [] }
-
   # Additional environment variables that the compiler is being run with
   # Webpacker::Compiler.env['FRONTEND_API_KEY'] = 'your_secret_key'
   cattr_accessor(:env) { {} }
 
-  delegate :config, :logger, to: :webpacker
+  delegate :config, :logger, :strategy, to: :webpacker
+  delegate :fresh?, :stale?, :after_compile_hook, to: :strategy
 
   def initialize(webpacker)
     @webpacker = webpacker
@@ -19,50 +15,18 @@ class Webpacker::Compiler
 
   def compile
     if stale?
-      run_webpack
+      run_webpack.tap do |success|
+        after_compile_hook
+      end
     else
       logger.debug "Everything's up-to-date. Nothing to do"
       true
     end
   end
 
-  # Returns true if manifest file mtime is newer than the timestamp of the last modified watched file
-  def fresh?
-    manifest_mtime > latest_modified_timestamp
-  end
-
-  # Returns true if manifest file mtime is older than the timestamp of the last modified watched file
-  def stale?
-    !fresh?
-  end
-
   private
     attr_reader :webpacker
 
-    def manifest_mtime
-      config.manifest_path.exist? ? File.mtime(config.manifest_path).to_i : 0
-    end
-
-    def latest_modified_timestamp
-      if Rails.env.development?
-        warn <<~MSG.strip
-          Webpacker::Compiler - Slow setup for development
-
-          Prepare JS assets with either:
-          1. Running `bin/webpacker-dev-server`
-          2. Set `compile` to false in webpacker.yml and run `bin/webpacker -w`
-        MSG
-      end
-
-      warn "Webpacker::Compiler.watched_paths has been deprecated. Set additional_paths in webpacker.yml instead." unless watched_paths.empty?
-      root_path = Pathname.new(File.expand_path(config.root_path))
-      expanded_paths = [*default_watched_paths, *watched_paths].map do |path|
-        root_path.join(path)
-      end
-      latest_modified = Dir[*expanded_paths].max_by { |f| File.mtime(f) }
-      File.mtime(latest_modified).to_i
-    end
-
     def optionalRubyRunner
       bin_webpack_path = config.root_path.join("bin/webpacker")
       first_line = File.readlines(bin_webpack_path).first.chomp
@@ -93,15 +57,6 @@ class Webpacker::Compiler
       status.success?
     end
 
-    def default_watched_paths
-      [
-        *config.additional_paths.map { |path| "#{path}{,/**/*}" },
-        "#{config.source_path}{,/**/*}",
-        "yarn.lock", "package.json",
-        "config/webpack{,/**/*}"
-      ].freeze
-    end
-
     def webpack_env
       return env unless defined?(ActionController::Base)
 

data/lib/webpacker/compiler_strategy.rb

@@ -0,0 +1,20 @@
+require "webpacker/mtime_strategy"
+require "webpacker/digest_strategy"
+
+module Webpacker
+  class CompilerStrategy
+    def self.from_config
+      strategy_from_config = Webpacker.config.compiler_strategy
+
+      case strategy_from_config
+      when "mtime"
+        Webpacker::MtimeStrategy.new
+      when "digest"
+        Webpacker::DigestStrategy.new
+      else
+        raise "Unknown strategy '#{strategy_from_config}'. " \
+              "Available options are 'mtime' and 'digest'."
+      end
+    end
+  end
+end

data/lib/webpacker/configuration.rb

@@ -30,7 +30,10 @@ class Webpacker::Configuration
   def webpacker_precompile?
     # ENV of false takes precedence
     return false if %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
-    return %w(yes true t).include?(ENV["WEBPACKER_PRECOMPILE"]) || fetch(:webpacker_precompile)
+    return true if %w(yes true t).include?(ENV["WEBPACKER_PRECOMPILE"])
+
+    return false unless config_path.exist?
+    fetch(:webpacker_precompile)
   end
 
   def source_path
@@ -85,6 +88,10 @@ class Webpacker::Configuration
     fetch(:webpack_compile_output)
   end
 
+  def compiler_strategy
+    fetch(:compiler_strategy)
+  end
+
   def fetch(key)
     data.fetch(key, defaults[key])
   end

data/lib/webpacker/digest_strategy.rb

@@ -0,0 +1,59 @@
+require "digest/sha1"
+require "webpacker/base_strategy"
+
+module Webpacker
+  class DigestStrategy < BaseStrategy
+    # Returns true if all the compiled packs are up to date with the underlying asset files.
+    def fresh?
+      last_compilation_digest&.== watched_files_digest
+    end
+
+    # Returns true if the compiled packs are out of date with the underlying asset files.
+    def stale?
+      !fresh?
+    end
+
+    def after_compile_hook
+      # We used to only record the digest on success
+      # However, the output file is still written on error, meaning that the digest should still be updated.
+      # If it's not, you can end up in a situation where a recompile doesn't take place when it should.
+      # See https://github.com/rails/webpacker/issues/2113
+      record_compilation_digest
+    end
+
+    private
+
+      def last_compilation_digest
+        compilation_digest_path.read if compilation_digest_path.exist? && config.manifest_path.exist?
+      rescue Errno::ENOENT, Errno::ENOTDIR
+      end
+
+      def watched_files_digest
+        if Rails.env.development?
+          warn <<~MSG.strip
+          Webpacker::Compiler - Slow setup for development
+          Prepare JS assets with either:
+          1. Running `bin/webpacker-dev-server`
+          2. Set `compile` to false in webpacker.yml and run `bin/webpacker -w`
+        MSG
+        end
+
+        root_path = Pathname.new(File.expand_path(config.root_path))
+        expanded_paths = [*default_watched_paths].map do |path|
+          root_path.join(path)
+        end
+        files = Dir[*expanded_paths].reject { |f| File.directory?(f) }
+        file_ids = files.sort.map { |f| "#{File.basename(f)}/#{Digest::SHA1.file(f).hexdigest}" }
+        Digest::SHA1.hexdigest(file_ids.join("/"))
+      end
+
+      def record_compilation_digest
+        config.cache_path.mkpath
+        compilation_digest_path.write(watched_files_digest)
+      end
+
+      def compilation_digest_path
+        config.cache_path.join("last-compilation-digest-#{Webpacker.env}")
+      end
+  end
+end

data/lib/webpacker/instance.rb

@@ -19,6 +19,10 @@ class Webpacker::Instance
     )
   end
 
+  def strategy
+    @strategy ||= Webpacker::CompilerStrategy.from_config
+  end
+
   def compiler
     @compiler ||= Webpacker::Compiler.new self
   end

data/lib/webpacker/mtime_strategy.rb

@@ -0,0 +1,40 @@
+require "webpacker/base_strategy"
+
+module Webpacker
+  class MtimeStrategy < BaseStrategy
+    # Returns true if manifest file mtime is newer than the timestamp of the last modified watched file
+    def fresh?
+      manifest_mtime > latest_modified_timestamp
+    end
+
+    # Returns true if manifest file mtime is older than the timestamp of the last modified watched file
+    def stale?
+      !fresh?
+    end
+
+    private
+
+      def manifest_mtime
+        config.manifest_path.exist? ? File.mtime(config.manifest_path).to_i : 0
+      end
+
+      def latest_modified_timestamp
+        if Rails.env.development?
+          warn <<~MSG.strip
+          Webpacker::Compiler - Slow setup for development
+
+          Prepare JS assets with either:
+          1. Running `bin/webpacker-dev-server`
+          2. Set `compile` to false in webpacker.yml and run `bin/webpacker -w`
+        MSG
+        end
+
+        root_path = Pathname.new(File.expand_path(config.root_path))
+        expanded_paths = [*default_watched_paths].map do |path|
+          root_path.join(path)
+        end
+        latest_modified = Dir[*expanded_paths].max_by { |f| File.mtime(f) }
+        File.mtime(latest_modified).to_i
+      end
+  end
+end

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "6.3.0-rc.1".freeze
+  VERSION = "6.4.1".freeze
 end

data/package/environments/__tests__/base.js

@@ -3,15 +3,18 @@
 // environment.js expects to find config/webpacker.yml and resolved modules from
 // the root of a Rails project
 
-const { chdirTestApp, chdirCwd } = require('../../utils/helpers')
+const { chdirTestApp, chdirCwd, resetEnv } = require('../../utils/helpers')
 
 chdirTestApp()
 
 const { resolve } = require('path')
-const rules = require('../../rules')
+
 const baseConfig = require('../base')
+const config = require("../../config");
 
 describe('Base config', () => {
+  beforeEach(() => jest.resetModules() && resetEnv())
+
   afterAll(chdirCwd)
 
   describe('config', () => {
@@ -21,11 +24,33 @@ describe('Base config', () => {
       )
     })
 
-    test('should return multi file entry points', () => {
+    test('should return only 2 entry points with config.nested_entries == false', () => {
+      expect(config.nested_entries).toEqual(false)
+
+      expect(baseConfig.entry.multi_entry.sort()).toEqual([
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
+        resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
+      ])
+      expect(baseConfig.entry['generated/something']).toEqual(undefined)
+    })
+
+    test('should returns top level and nested entry points with config.nested_entries == true', () => {
+      process.env.WEBPACKER_CONFIG = 'config/webpacker_nested_entries.yml'
+      const config = require("../../config");
+      const baseConfig = require('../base')
+
+      expect(config.nested_entries).toEqual(true)
+
+      expect(baseConfig.entry.application).toEqual(
+        resolve('app', 'packs', 'entrypoints', 'application.js')
+      )
       expect(baseConfig.entry.multi_entry.sort()).toEqual([
         resolve('app', 'packs', 'entrypoints', 'multi_entry.css'),
         resolve('app', 'packs', 'entrypoints', 'multi_entry.js')
       ])
+      expect(baseConfig.entry['generated/something']).toEqual(
+        resolve('app', 'packs', 'entrypoints', 'generated', 'something.js')
+      )
     })
 
     test('should return output', () => {
@@ -36,6 +61,8 @@ describe('Base config', () => {
     })
 
     test('should return default loader rules for each file in config/loaders', () => {
+      const rules = require('../../rules')
+
       const defaultRules = Object.keys(rules)
       const configRules = baseConfig.module.rules