shakapacker 6.0.0.rc.14 → 6.1.0.beta.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 52b536f1a629b24f309e3b8fa5d12b4f00f3ab8d900072aef7a87310de40dbf2
-  data.tar.gz: aabac3cce21b2ebffd5cb89d250dcbd5adca8599d96dfe2ad6668bd05a81b5ad
+  metadata.gz: 4167db4aea00b8ed494df2151cb5fd7ad414dc6617e8c1b0ee5537d461c7c968
+  data.tar.gz: 7cc1c3c5f9c5a39801ac1801b252ee609e01a6c06508541b64d30fadcf7464ed
 SHA512:
-  metadata.gz: 7ad0f3e841893c69bc92cb543ed5a96305904b8aa8cc7799c7380bed6979577b60b866ef9d197252d1bbd13ae98e11eae2f8e7e9a8eb22be7a68321389f1826d
-  data.tar.gz: 86396cb0725037f0153731ed203d8c3840116e8dd40fd1a1eb8eceace8f20e4f0fab7105956d466b49a86cb08b3c5ea9de40c06213c91801d3500ec18a0f973e
+  metadata.gz: 56ce966357cbf20bcf9fb92839e94988a9f91768118aca2960ec53b0b0ed377df04b0bbb6801e885a9011eafa63655537dc36c63a50eda6cca4d46cba319beee
+  data.tar.gz: 163807c57c4e543967a58a3dc96630d92d50fd798bac7d78536c39eaf055281c150922e98e66ad5af5e41daf3b2739b48a0cc5d1285f3251f875fda3581389f4

data/CHANGELOG.md

@@ -1,4 +1,4 @@
-* For versions prior to v6, see the [5.x stable branch of rails/webpacker](https://github.com/rails/webpacker/tree/5-x-stable). 
+* For versions prior to v6, see the [5.x stable branch of rails/webpacker](https://github.com/rails/webpacker/tree/5-x-stable).
 * Please see [UPGRADE GUIDE](./docs/v6_upgrade.md).
 
 ## Versions
@@ -6,18 +6,25 @@
 Changes since last non-beta release.
 
 *Please add entries here for your pull requests that are not yet released.*
-## [v6.0.0.rc.14] - January 20, 2022
+## [v6.0.2] - January 25, 2022
+### Improved
+- Fix incorrect command name in warning. [PR 33](https://github.com/shakacode/shakapacker/pull/33) by [tricknotes](https://github.com/tricknotes).
+
+## [v6.0.1] - January 24, 2022
+### Improved
+- PR #21 removed pnp-webpack-plugin as a dev dependency but did not remove it from the peer dependency list. [PR 30](https://github.com/shakacode/shakapacker/pull/30) by [t27duck](https://github.com/t27duck).
+
+## [v6.0.0 changes from v6.0.0.rc.6] - January 22, 2022
 
 ### Improved
-- Raise on multiple invocations of javascript_pack_tag and stylesheet_pack_tag helpers. [PR 19](https://github.com/shakacode/shakapacker/pull/19) by [tomdracz](https://github.com/tomdracz].
-- Remove automatic addition of node_modules into rails asset load path. [PR 20](https://github.com/shakacode/shakapacker/pull/20) by [tomdracz](https://github.com/tomdracz].
-- Remove pnp-webpack-plugin. [PR 21](https://github.com/shakacode/shakapacker/pull/21) by [tomdracz](https://github.com/tomdracz].
+- Raise on multiple invocations of javascript_pack_tag and stylesheet_pack_tag helpers. [PR 19](https://github.com/shakacode/shakapacker/pull/19) by [tomdracz](https://github.com/tomdracz).
+- Remove automatic addition of node_modules into rails asset load path. [PR 20](https://github.com/shakacode/shakapacker/pull/20) by [tomdracz](https://github.com/tomdracz).
+- Remove pnp-webpack-plugin. [PR 21](https://github.com/shakacode/shakapacker/pull/21) by [tomdracz](https://github.com/tomdracz).
 
-## [v6.0.0.rc.13 changes from v6.0.0.rc.6]
 
 ### Merged from rails/webpacker
 
-- Make watched_files_digest thread safe. [rails/webpacker #3233](https://github.com/rails/webpacker/pull/3233) 
+- Make watched_files_digest thread safe. [rails/webpacker #3233](https://github.com/rails/webpacker/pull/3233)
 - Use single webpack config webpack.config.js. [rails/webpacker #3240](https://github.com/rails/webpacker/pull/3240)
 - Switch to peer dependencies. [rails/webpacker #3234](https://github.com/rails/webpacker/pull/3234)
 
@@ -52,6 +59,8 @@ Changes since last non-beta release.
 - CSS extraction enabled by default, except when devServer is configured and running
 
 
-[Unreleased]: https://github.com/shakacode/shakapacker/compare/6.0.0-rc.13...master
-[v6.0.0.rc.13 changes from v6.0.0.rc.6]: https://github.com/shakacode/shakapacker/compare/aba79635e6ff6562ec04d3c446d57ef19a5fef7d...v6.0.0-rc.13
+[Unreleased]: https://github.com/shakacode/shakapacker/compare/6.0.2...master
+[v6.0.2]: https://github.com/shakacode/shakapacker/compare/v6.0.1...v6.0.2
+[v6.0.1]: https://github.com/shakacode/shakapacker/compare/v6.0.0...v6.0.1
+[v6.0.0 changes from v6.0.0.rc.6]: https://github.com/shakacode/shakapacker/compare/aba79635e6ff6562ec04d3c446d57ef19a5fef7d...v6.0.0
 [v6.0.0.rc.6 changes from v5.4]: https://github.com/rails/webpacker/compare/v5.4.3...aba79635e6ff6562ec04d3c446d57ef19a5fef7d

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    shakapacker (6.0.0.rc.13)
+    shakapacker (6.0.0)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)

data/README.md

@@ -1,11 +1,7 @@
 # Shakapacker
 
-_Official, actively maintained fork of [rails/webpacker](https://github.com/rails/webpacker). For pre v6, see [rails/webpacker 5-x-stable](https://github.com/rails/webpacker/tree/5-x-stable). Be sure to see the [CHANGELOG](./CHANGELOG.md)._
-
-* Note, internal naming will continue to use `webpacker` where possible.
-* See [V6 Upgrade](./docs/v6_upgrade.md) for upgrading from v5 or prior v6 releases. See this [PR from v6.0.0.rc.6 to shakapacker](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/pull/27).
-* [Slack discussion channel](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE).
-
+_Official, actively maintained fork of [rails/webpacker](https://github.com/rails/webpacker). Internal naming for `shakapacker` will continue to use `webpacker` where possible. Notably, the NPM package name is `shakapacker`._
+* See [V6 Upgrade](./docs/v6_upgrade.md) for upgrading from v5 or prior v6 releases. 
 
 [![Ruby specs](https://github.com/shakacode/shakapacker/workflows/Ruby%20specs/badge.svg)](https://github.com/shakacode/shakapacker/actions)
 [![Jest specs](https://github.com/shakacode/shakapacker/workflows/Jest%20specs/badge.svg)](https://github.com/shakacode/shakapacker/actions)
@@ -14,6 +10,7 @@ _Official, actively maintained fork of [rails/webpacker](https://github.com/rail
 
 [![node.js](https://img.shields.io/badge/node-%3E%3D%2012.0.0-brightgreen.svg)](https://www.npmjs.com/package/shakapacker)
 [![Gem](https://img.shields.io/gem/v/shakapacker.svg)](https://rubygems.org/gems/shakapacker)
+[![npm version](https://badge.fury.io/js/shakapacker.svg)](https://badge.fury.io/js/shakapacker)
 
 Webpacker makes it easy to use the JavaScript pre-processor and bundler
 [Webpack v5](https://webpack.js.org/)
@@ -35,16 +32,16 @@ Discussion forums to discuss debugging and troubleshooting tips. Please open iss
 - [Features](#features)
   - [Optional support](#optional-support)
 - [Installation](#installation)
-  - [Rails v6](#rails-v6)
-  - [Rails v7](#rails-v7)
-  - [Manual Installation Steps](#manual-installation-steps)
+  - [Rails v6+](#rails-v6)
   - [Note for Sprockets usage](#note-for-sprockets-usage)
 - [Usage](#usage)
-      - [Defer for `javascript_pack_tag`](#defer-for-javascript_pack_tag)
-    - [Server-Side Rendering (SSR)](#server-side-rendering-ssr)
+  - [View Helpers](#view-helpers)
+  - [Defer for `javascript_pack_tag`](#defer-for-javascript_pack_tag)
+  - [Server-Side Rendering (SSR)](#server-side-rendering-ssr)
   - [Development](#development)
   - [Webpack Configuration](#webpack-configuration)
   - [Babel configuration](#babel-configuration)
+  - [SWC configuration](#swc-configuration)
   - [Integrations](#integrations)
     - [React](#react)
     - [Typescript](#typescript)
@@ -58,9 +55,10 @@ Discussion forums to discuss debugging and troubleshooting tips. Please open iss
     - [Other frameworks](#other-frameworks)
   - [Custom Rails environments](#custom-rails-environments)
   - [Upgrading](#upgrading)
-- [Paths](#paths)
+  - [Paths](#paths)
   - [Additional paths](#additional-paths)
 - [Deployment](#deployment)
+- [Example Apps](#example-apps)
 - [Troubleshooting](#troubleshooting)
 - [Contributing](#contributing)
 - [License](#license)
@@ -75,49 +73,40 @@ Discussion forums to discuss debugging and troubleshooting tips. Please open iss
 - Yarn
 
 ## Features
-
+- Rails view helpers that fully support webpack output
+- Convenient but not required webpack configuration. The only requirement is that your webpack configuration create a manifest.
+- HMR with the webpack-dev-server, such as for hot-reloading for React!
+- Automatic code splitting using multiple entry points to optimize JavaScript downloads
 - [Webpack v5](https://webpack.js.org/)
 - ES6 with [babel](https://babeljs.io/)
-- Automatic code splitting using multiple entry points
 - Asset compression, source-maps, and minification
 - CDN support
-- Rails view helpers
-- Extensible and configurable
+- Extensible and configurable. For example, all major dependencies are specified as peers, so you can upgrade easily.
 
 ### Optional support
-
-  _requires extra packages to be installed_
-
-  - Stylesheets - Sass, Less, Stylus and Css, PostCSS
-  - CoffeeScript
-  - TypeScript
-  - React
+ _Requires extra packages to be installed._
+ - React
+ - TypeScript
+ - Stylesheets - Sass, Less, Stylus and Css, PostCSS
+ - CoffeeScript
 
 ## Installation
 
-### Rails v6
-With Rails v6, webpacker is installed by default:
-```bash
-rails new myapp
-```
 
-### Rails v7
+### Rails v6+
 
-With Rails v7, skip JavaScript for a new app and follow below Manual Installation Steps to manually add the `webpacker` gem to your Gemfile. 
+With Rails v6+, skip JavaScript for a new app and follow below Manual Installation Steps to manually add the `shakapacker` gem to your Gemfile.
 ```bash
 rails new myapp --skip-javascript
 ```
 
-### Manual Installation Steps
+_Note, Rails 6 installs the older v5 version of webpacker unless you specify `--skip-javascript`._
+
 Update your `Gemfile`:
 
 ```ruby
 # Gemfile
 gem 'shakapacker', '~> 6.0'
-
-# OR if you prefer to use master
-gem 'shakapacker', git: 'https://github.com/shakacode/shakapacker.git'
-yarn add https://github.com/shakacode/shakapacker.git
 ```
 
 Then running the following to install Webpacker:
@@ -155,6 +144,8 @@ Rails.application.config.assets.paths << Rails.root.join('node_modules')
 
 ## Usage
 
+### View Helpers
+
 Once installed, you can start writing modern ES6-flavored JavaScript apps right away:
 
 ```yml
@@ -192,7 +183,7 @@ The result looks like this:
 <script src="/packs/map-16838bab065ae1e314.js" data-turbolinks-track="reload" defer></script>
 ```
 
-**Important:** Pass all your pack names as multiple arguments, not multiple calls, when using `javascript_pack_tag` and the **`stylesheet_pack_tag`. Otherwise, you will get duplicated chunks on the page. Be especially careful if you might be calling these view helpers from your view, partials, and the layout for a page. You will need some logic to ensure you call the helpers only once with multiple arguments.
+**Important:** Pass all your pack names as multiple arguments, not multiple calls, when using `javascript_pack_tag` and the `stylesheet_pack_tag`. Otherwise, you will get duplicated chunks on the page. Be especially careful if you might be calling these view helpers from your view, partials, and the layout for a page. You will need some logic to ensure you call the helpers only once with multiple arguments.
 
 ```erb
 <%# DO %>
@@ -234,10 +225,10 @@ If you want to use images in your stylesheets:
   background-image: url('../images/logo.svg')
 }
 ```
-##### Defer for `javascript_pack_tag`
+### Defer for `javascript_pack_tag`
 Note, the default of "defer" for the `javascript_pack_tag`. You can override that to `false`. If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/packs/entrypoints/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
 
-#### Server-Side Rendering (SSR)
+### Server-Side Rendering (SSR)
 
 Note, if you are using server-side rendering of JavaScript with dynamic code-splitting, as is often done with extensions to Webpacker, like [React on Rails](https://github.com/shakacode/react_on_rails), your JavaScript should create the link prefetch HTML tags that you will use, so you won't need to use to `asset_pack_path` in those circumstances.
 
@@ -298,11 +289,33 @@ end
 
 ### Webpack Configuration
 
-Webpacker gives you a default configuration file for your test, development, and production environments in `config/webpack/*.js`. 
+First, you don't _need_ to use Shakapacker's webpack configuration. However, the `shakapacker` NPM package provides convenient access to configuration code that reads the `config/webpacker.yml` file which the view helpers also use. If you have your own customized webpack configuration, at the mininmum, you must ensure:
+
+1. Your output files go the right directory
+2. You provide a manifest, via package [`webpack-assets-manifest`](https://github.com/webdeveric/webpack-assets-manifest) that maps output names (your 'packs') to the fingerprinted versions, including bundle-splitting dependencies. That's the main secret sauce of webpacker!
+
+The most practical webpack configuration is to take the default from Shakapacker and then use [webpack-merge](https://github.com/survivejs/webpack-merge) to merge your customizations with the default. For example, suppose you want to add some `resolve.extensions`:
+
+```js
+// use the new NPM package name, `shakapacker`.
+// merge is webpack-merge from https://github.com/survivejs/webpack-merge
+const { webpackConfig: baseWebpackConfig, merge } = require('shakapacker')
+
+const options = {
+  resolve: {
+      extensions: ['.css', '.ts', '.tsx']
+  }
+}
 
-By default, you don't need to make any changes to `config/webpack/webpack.config.js` files since it's all standard production-ready configuration. However, if you do need to customize or add a new loader, this is where you would go.
+// Copy the object using merge b/c the baseClientWebpackConfig is a mutable global
+// If you want to use this object for client and server rendering configurations,
+// havaing a new object is essential.
+module.exports = merge({}, baseWebpackConfig, options)
+```
+
+This example is based on [an example project](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/webpack.config.js)
 
-Here is how you can modify webpack configuration:
+Webpacker gives you a default configuration file `config/webpack/webpack.config.js`, which, by default, you don't need to make any changes to `config/webpack/webpack.config.js` since it's a standard production-ready configuration. However, you will probably want to customize or add a new loader by modifying the webpack configuration, as shown above.
 
 You might add separate files to keep your code more organized.
 
@@ -325,6 +338,7 @@ Then `require` this file in your `config/webpack/webpack.config.js`:
 
 ```js
 // config/webpack/webpack.config.js
+// use the new NPM package name, `shakapacker`.
 const { webpackConfig, merge } = require('shakapacker')
 const customConfig = require('./custom')
 
@@ -346,7 +360,7 @@ console.log(JSON.stringify(webpackConfig, undefined, 2))
 
 ### Babel configuration
 
-By default, you will find the Webpacker preset in your `package.json`.
+By default, you will find the Webpacker preset in your `package.json`. Note, you need to use the new NPM package name, `shakapacker`.
 
 ```json
 "babel": {
@@ -358,6 +372,12 @@ By default, you will find the Webpacker preset in your `package.json`.
 
 Optionally, you can change your Babel configuration by removing these lines in your `package.json` and add [a Babel configuration file](https://babeljs.io/docs/en/config-files) in your project. For an example customization based on the original, see [Customizing Babel Config](./docs/customizing_babel_config.md).
 
+### SWC configuration
+
+You can try out experimental integration with the SWC loader. You can read more at [SWC usage docs](./docs/using_swc_loader.md).
+
+Please note that if you want opt-in to use SWC, you can skip [React](#react) integration instructions as it is supported out of the box.
+
 ### Integrations
 
 Webpacker out of the box supports JS and static assets (fonts, images etc.) compilation. To enable support for CoffeeScript or TypeScript install relevant packages:
@@ -533,7 +553,6 @@ const vueConfig = require('./rules/vue')
 module.exports = merge(vueConfig, webpackConfig)
 ```
 
-
 ### Custom Rails environments
 
 Out of the box Webpacker ships with - development, test and production environments in `config/webpacker.yml` however, in most production apps extra environments are needed as part of deployment workflow. Webpacker supports this out of the box from version 3.4.0+ onwards.
@@ -586,7 +605,7 @@ You can run following commands to upgrade Webpacker to the latest stable version
 
 ```bash
 # check your Gemfile for version restrictions
-bundle update webpacker
+bundle update shakapacker
 
 # overwrite your changes to the default install files and revert any unwanted changes from the install
 rails webpacker:install
@@ -605,7 +624,7 @@ yarn add shakapacker@next
 
 Also, consult the [CHANGELOG](./CHANGELOG.md) for additional upgrade links.
 
-## Paths
+### Paths
 
 By default, Webpacker ships with simple conventions for where the JavaScript app files and compiled webpack bundles will go in your Rails app. All these options are configurable from `config/webpacker.yml` file.
 
@@ -661,18 +680,17 @@ When compiling assets for production on a remote server, such as a continuous in
 
 If you are using a CDN setup, webpacker will use the configured [asset host](https://guides.rubyonrails.org/configuring.html#rails-general-configuration) value to prefix URLs for images or font icons which are included inside JS code or CSS. It is possible to override this value during asset compilation by setting the `WEBPACKER_ASSET_HOST` environment variable.
 
+## Example Apps
+* [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh)
+
 
 ## Troubleshooting
 
 See the doc page for [Troubleshooting](./docs/troubleshooting.md).
 
-
 ## Contributing
 
-[![Code Helpers](https://www.codetriage.com/shakacode/shakapacker/badges/users.svg)](https://www.codetriage.com/shakacode/shakapacker)
-
-We encourage you to contribute to Webpacker! See [CONTRIBUTING](CONTRIBUTING.md) for guidelines about how to proceed.
-
+We encourage you to contribute to Shakapacker/Webpacker! See [CONTRIBUTING](CONTRIBUTING.md) for guidelines about how to proceed. We have a [Slack discussion channel](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE).
 
 ## License
 

data/docs/customizing_babel_config.md

@@ -39,14 +39,14 @@ module.exports = function (api) {
           development: isDevelopmentEnv || isTestEnv,
           useBuiltIns: true
         } 
-      ],
+      ]
+    ].filter(Boolean),
+    plugins: [
       isProductionEnv && ['babel-plugin-transform-react-remove-prop-types', 
         { 
           removeImport: true 
         }
-      ]
-    ].filter(Boolean),
-    plugins: [
+      ],
       process.env.WEBPACK_SERVE && 'react-refresh/babel'
     ].filter(Boolean),
   }

data/docs/using_swc_loader.md

@@ -0,0 +1,151 @@
+# Using SWC Loader
+
+:warning: This feature is currently experimental. If you face any issues, please report at https://github.com/shakacode/shakapacker/issues.
+
+## About SWC
+
+[SWC (Speedy Web compiler)](https://swc.rs/) is a Rust-based compilation and bundler tool that can be used for Javascript and Typescript files. It claims to be 20x faster than Babel!
+
+It supports all ECMAScript features and it's designed to be a drop-in replacement for Babel and its plugins. Out of the box, it supports TS, JSX syntax, React fast refresh, and much more.
+
+For comparison between SWC and Babel, see the docs at https://swc.rs/docs/migrating-from-babel.
+
+## Switching your Shakapacker project to SWC
+
+In order to use SWC as your compiler today. You need to do two things:
+
+1. Make sure you've installed `@swc/core` and `swc-loader` packages.
+
+```
+yarn add -D @swc/core swc-loader
+```
+
+2. Add or change `webpacker_loader` value in your default `webpacker.yml` config to `swc`
+The default configuration of babel is done by using `package.json` to use the file within the `shakapacker` package.
+
+```json
+default: &default
+  source_path: app/javascript
+  source_entry_path: /
+  public_root_path: public
+  public_output_path: packs
+  cache_path: tmp/webpacker
+  webpack_compile_output: true
+
+  # Additional paths webpack should look up modules
+  # ['app/assets', 'engine/foo/app/assets']
+  additional_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  # Select loader to use, available options are 'babel' (default) or 'swc'
+  webpack_loader: 'swc'
+```
+
+## Usage
+
+### React
+
+React is supported out of the box, provided you use `.jsx` or `.tsx` file extension. Shakapacker config will correctly recognize those and tell SWC to parse the JSX syntax correctly. If you wish to customize the transform options to match any existing `@babel/preset-react` settings, you can do that through customizing loader options as described below. You can see available options at https://swc.rs/docs/configuration/compilation#jsctransformreact.
+
+### Typescript
+
+Typescript is supported out of the box, but certain features like decorators need to be enabled through the custom config. You can see available customizations options at https://swc.rs/docs/configuration/compilation, which you can apply through customizing loader options as described below.
+
+Please note that SWC is not using the settings from `.tsconfig` file. Any non-default settings you might have there will need to be applied to the custom loader config.
+
+## Customizing loader options
+
+You can see the default loader options at [swc/index.js](../package/swc/index.js).
+
+If you wish to customize the loader defaults further, for example, if you want to enable support for decorators or React fast refresh, you need to create a `swc.config.js` file in your app config folder.
+
+This file should have a single default export which is an object with an `options` key. Your customizations will be merged with default loader options. You can use this to override or add additional configurations.
+
+Inside the `options` key, you can use any options available to the SWC compiler. For the options reference, please refer to [official SWC docs](https://swc.rs/docs/configuration/compilation).
+
+See some examples below of potential `config/swc.config.js`.
+
+### Example: Enabling top level await and decorators
+
+
+```js
+const customConfig = {
+  options: {
+    jsc: {
+      parser: {
+        topLevelAwait: true,
+        decorators: true
+      }
+    }
+  }
+}
+
+module.exports = customConfig
+```
+
+### Example: Matching existing `@babel/present-env` config
+
+```js
+const { env } = require('shakapacker')
+
+const customConfig = {
+  options: {
+    jsc: {
+      transform: {
+        react: {
+          development: env.isDevelopment,
+          useBuiltins: true
+        }
+      }
+    }
+  }
+}
+
+module.exports = customConfig
+```
+
+### Example: Enabling React Fast Refresh
+
+:warning: Remember that you still need to add [@pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) to your webpack config. The setting below just replaces equivalent `react-refresh/babel` Babel plugin.
+
+
+```js
+const { env } = require('shakapacker')
+
+const customConfig = {
+  options: {
+    jsc: {
+      transform: {
+        react: {
+          refresh: env.isDevelopment && env.runningWebpackDevServer
+        }
+      }
+    }
+  }
+}
+
+module.exports = customConfig
+```
+
+### Example: Adding browserslist config
+
+```js
+
+const customConfig = {
+  options: {
+    env: {
+      targets: '> 0.25%, not dead'
+    }
+  }
+}
+
+module.exports = customConfig
+```
+
+
+## Known limitations
+
+- `browserslist` config at the moment is not being picked up automatically. [Related SWC issue](https://github.com/swc-project/swc/issues/3365). You can add your browserlist config through customizing loader options as outlined above.
+- Using `.swcrc` config file is currently not supported. You might face some issues when `.swcrc` config is diverging from the SWC options we're passing in the Webpack rule.

data/docs/v6_upgrade.md

@@ -11,12 +11,13 @@ Webpacker used to configure Webpack indirectly, which lead to a [complicated sec
 This means you have to configure integration with frameworks yourself, but webpack-merge helps with this. See this example for [Vue](https://github.com/shakacode/shakapacker#other-frameworks) and scroll to the bottom for [more examples](#examples-of-v5-to-v6).
 
 ## webpacker v6.0.0.rc.6 to shakapacker
-See example migration, [PR 27](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/pull/27).
+See an example migration here: [PR 27](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/pull/27).
           
 ### Update
 1. Peer dependencies. Run `yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader compression-webpack-plugin terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server`
-2. Update your webpack config for a single config file, `config/webpack/webpack.config.js`. 
-3. Update `babel.config.js` if you need JSX support. 
+1. Update any scripts that called `bin/webpack` or `bin/webpack-dev-server` to `bin/webpacker` or `bin/webpacker-dev-server`
+1. Update your webpack config for a single config file, `config/webpack/webpack.config.js`. 
+1. Update `babel.config.js` if you need JSX support. 
 
 ## How to upgrade to Webpacker v6 from v5
 1. Ensure you have a clean working git branch. You will be overwriting all your files and reverting the changes that you don't want.

data/lib/install/config/webpacker.yml

@@ -15,6 +15,9 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  # Select loader to use, available options are 'babel' (default) or 'swc'
+  webpack_loader: 'babel'
+
 development:
   <<: *default
   compile: true

data/lib/webpacker/compiler.rb

@@ -57,8 +57,8 @@ class Webpacker::Compiler
           Webpacker::Compiler - Slow setup for development
 
           Prepare JS assets with either:
-          1. Running `bin/webpack-dev-server`
-          2. Set `compile` to false in webpacker.yml and run `bin/webpack -w`
+          1. Running `bin/webpacker-dev-server`
+          2. Set `compile` to false in webpacker.yml and run `bin/webpacker -w`
         MSG
       end
 

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "6.0.0.rc.14".freeze
+  VERSION = "6.1.0.beta.0".freeze
 end

data/package/rules/babel.js

@@ -1,30 +1,32 @@
 const { resolve } = require('path')
 const { realpathSync } = require('fs')
+const { loaderMatches } = require('../utils/helpers')
 
 const {
   source_path: sourcePath,
-  additional_paths: additionalPaths
+  additional_paths: additionalPaths,
+  webpack_loader: webpackLoader
 } = require('../config')
 const { isProduction } = require('../env')
 
-module.exports = {
-  test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
-  include: [sourcePath, ...additionalPaths].map((p) => {
-    try {
-      return realpathSync(p)
-    } catch (e) {
-      return resolve(p)
-    }
-  }),
-  exclude: /node_modules/,
-  use: [
-    {
-      loader: require.resolve('babel-loader'),
-      options: {
-        cacheDirectory: true,
-        cacheCompression: isProduction,
-        compact: isProduction
+module.exports = loaderMatches(webpackLoader, 'babel', () => ({
+    test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
+    include: [sourcePath, ...additionalPaths].map((p) => {
+      try {
+        return realpathSync(p)
+      } catch (e) {
+        return resolve(p)
       }
-    }
-  ]
-}
+    }),
+    exclude: /node_modules/,
+    use: [
+      {
+        loader: require.resolve('babel-loader'),
+        options: {
+          cacheDirectory: true,
+          cacheCompression: isProduction,
+          compact: isProduction
+        }
+      }
+    ]
+  }))

data/package/rules/index.js

@@ -7,6 +7,7 @@ const rules = {
   css: require('./css'),
   sass: require('./sass'),
   babel: require('./babel'),
+  swc: require('./swc'),
   erb: require('./erb'),
   coffee: require('./coffee'),
   less: require('./less'),

data/package/rules/swc.js

@@ -0,0 +1,23 @@
+const { resolve } = require('path')
+const { realpathSync } = require('fs')
+const { loaderMatches } = require('../utils/helpers')
+const { getSwcLoaderConfig } = require('../swc')
+
+const {
+  source_path: sourcePath,
+  additional_paths: additionalPaths,
+  webpack_loader: webpackLoader
+} = require('../config')
+
+module.exports = loaderMatches(webpackLoader, 'swc', () => ({
+  test: /\.(ts|tsx|js|jsx|mjs|coffee)?(\.erb)?$/,
+  include: [sourcePath, ...additionalPaths].map((p) => {
+    try {
+      return realpathSync(p)
+    } catch (e) {
+      return resolve(p)
+    }
+  }),
+  exclude: /node_modules/,
+  use: ({ resource }) => getSwcLoaderConfig(resource)
+}))

data/package/swc/index.js

@@ -0,0 +1,50 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const { resolve } = require('path')
+const { existsSync } = require('fs')
+const { merge } = require('webpack-merge')
+
+const isJsxFile = (filename) => !!filename.match(/\.(jsx|tsx)?(\.erb)?$/)
+
+const isTypescriptFile = (filename) => !!filename.match(/\.(ts|tsx)?(\.erb)?$/)
+
+const getCustomConfig = () => {
+  const path = resolve('config', 'swc.config.js')
+  if (existsSync(path)) {
+    return require(path)
+  }
+  return {}
+}
+
+const getSwcLoaderConfig = (filenameToProcess) => {
+  const customConfig = getCustomConfig()
+  const defaultConfig = {
+    loader: require.resolve('swc-loader'),
+    options: {
+      jsc: {
+        parser: {
+          dynamicImport: true,
+          syntax: isTypescriptFile(filenameToProcess)
+            ? 'typescript'
+            : 'ecmascript',
+          [isTypescriptFile(filenameToProcess) ? 'tsx' : 'jsx']:
+            isJsxFile(filenameToProcess)
+        }
+      },
+      sourceMaps: true,
+      env: {
+        coreJs: '3.8',
+        loose: true,
+        exclude: ['transform-typeof-symbol'],
+        mode: 'entry'
+      }
+    }
+  }
+
+  return merge(defaultConfig, customConfig)
+}
+
+module.exports = {
+  getSwcLoaderConfig
+}

data/package/utils/helpers.js

@@ -27,7 +27,7 @@ const resolvedPath = (packageName) => {
   }
 }
 
-const moduleExists = (packageName) => (!!resolvedPath(packageName))
+const moduleExists = (packageName) => !!resolvedPath(packageName)
 
 const canProcess = (rule, fn) => {
   const modulePath = resolvedPath(rule)
@@ -39,6 +39,22 @@ const canProcess = (rule, fn) => {
   return null
 }
 
+const loaderMatches = (configLoader, loaderToCheck, fn) => {
+  if (configLoader !== loaderToCheck) {
+    return null
+  }
+
+  const loaderName = `${configLoader}-loader`
+
+  if (!moduleExists(loaderName)) {
+    throw new Error(
+      `Your webpacker config specified using ${configLoader}, but ${loaderName} package is not installed. Please install ${loaderName} first.`
+    )
+  }
+
+  return fn()
+}
+
 module.exports = {
   chdirTestApp,
   chdirCwd,
@@ -47,5 +63,6 @@ module.exports = {
   ensureTrailingSlash,
   canProcess,
   moduleExists,
-  resetEnv
+  resetEnv,
+  loaderMatches
 }

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shakapacker",
-  "version": "6.0.0-rc.14",
+  "version": "6.1.0-beta.0",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -18,7 +18,6 @@
     "@babel/runtime": "^7.15.4",
     "babel-loader": "^8.2.2",
     "compression-webpack-plugin": "^9.0.0",
-    "pnp-webpack-plugin": "^1.7.0",
     "terser-webpack-plugin": "^5.2.4",
     "webpack": "^5.53.0",
     "webpack-assets-manifest": "^5.0.6",
@@ -40,6 +39,7 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.0",
     "jest": "^27.2.1",
+    "swc-loader": "^0.1.15",
     "webpack": "^5.53.0",
     "webpack-assets-manifest": "^5.0.6",
     "webpack-merge": "^5.8.0"

data/test/mounted_app/test/dummy/config/webpacker.yml

@@ -5,6 +5,7 @@ default: &default
   source_entry_path: entrypoints
   public_output_path: packs
   cache_path: tmp/webpacker
+  webpack_loader: babel
 
   # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']

data/test/test_app/config/webpacker.yml

@@ -7,6 +7,7 @@ default: &default
   public_output_path: packs
   cache_path: tmp/webpacker
   webpack_compile_output: false
+  webpack_loader: babel
 
   # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']

data/yarn.lock

@@ -2841,6 +2841,15 @@ loader-utils@^1.4.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loader-utils@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
+  integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -3621,6 +3630,13 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swc-loader@^0.1.15:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/swc-loader/-/swc-loader-0.1.15.tgz#cb9c630ccfbb46dabc5aebc5560cced658e32992"
+  integrity sha512-cn1WPIeQJvXM4bbo3OwdEIapsQ4uUGOfyFj0h2+2+brT0k76DCGnZXDE2KmcqTd2JSQ+b61z2NPMib7eEwMYYw==
+  dependencies:
+    loader-utils "^2.0.0"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: shakapacker
 version: !ruby/object:Gem::Version
-  version: 6.0.0.rc.14
+  version: 6.1.0.beta.0
 platform: ruby
 authors:
 - David Heinemeier Hansson
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-01-21 00:00:00.000000000 Z
+date: 2022-01-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -143,6 +143,7 @@ files:
 - docs/deployment.md
 - docs/developing_webpacker.md
 - docs/troubleshooting.md
+- docs/using_swc_loader.md
 - docs/v6_upgrade.md
 - gemfiles/Gemfile-rails-edge
 - gemfiles/Gemfile-rails.5.2.x
@@ -220,6 +221,8 @@ files:
 - package/rules/raw.js
 - package/rules/sass.js
 - package/rules/stylus.js
+- package/rules/swc.js
+- package/swc/index.js
 - package/utils/get_style_rule.js
 - package/utils/helpers.js
 - rakelib/release.rake
@@ -269,7 +272,7 @@ homepage: https://github.com/shakacode/shakapacker
 licenses:
 - MIT
 metadata:
-  source_code_uri: https://github.com/shakacode/shakapacker/tree/v6.0.0-rc.14
+  source_code_uri: https://github.com/shakacode/shakapacker/tree/v6.1.0.beta.0
 post_install_message:
 rdoc_options: []
 require_paths: