shakapacker 6.0.2 → 6.1.0.beta.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 92baeec1396c0616c20a1aad6d7b45f81776c825c684cf585ca2511602b9f60e
-  data.tar.gz: 91f7b0d550b5334d6284636b984bdb55f9feb5cd72211254be5c50b4afae2b27
+  metadata.gz: 4167db4aea00b8ed494df2151cb5fd7ad414dc6617e8c1b0ee5537d461c7c968
+  data.tar.gz: 7cc1c3c5f9c5a39801ac1801b252ee609e01a6c06508541b64d30fadcf7464ed
 SHA512:
-  metadata.gz: 5ccc02bd10d28bf68b1b38fba51769c71c23aa874f5922516c9804088d179163fd25b8ac5e2da48325d5fbdffe65467c409848ef5086551ffee60c8021fcb444
-  data.tar.gz: e035005d2e37ccad4a0bdd7cde26059fc1dd00d840d8d487866de0f175c083d26a6c427eb663065d4190a47608bf7572c29752c2d1ce52a50986504bee0c8970
+  metadata.gz: 56ce966357cbf20bcf9fb92839e94988a9f91768118aca2960ec53b0b0ed377df04b0bbb6801e885a9011eafa63655537dc36c63a50eda6cca4d46cba319beee
+  data.tar.gz: 163807c57c4e543967a58a3dc96630d92d50fd798bac7d78536c39eaf055281c150922e98e66ad5af5e41daf3b2739b48a0cc5d1285f3251f875fda3581389f4

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

@@ -41,6 +41,7 @@ Discussion forums to discuss debugging and troubleshooting tips. Please open iss
   - [Development](#development)
   - [Webpack Configuration](#webpack-configuration)
   - [Babel configuration](#babel-configuration)
+  - [SWC configuration](#swc-configuration)
   - [Integrations](#integrations)
     - [React](#react)
     - [Typescript](#typescript)
@@ -371,6 +372,12 @@ By default, you will find the Webpacker preset in your `package.json`. Note, you
 
 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:

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/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/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "6.0.2".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.2",
+  "version": "6.1.0-beta.0",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -39,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.2
+  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-25 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.2
+  source_code_uri: https://github.com/shakacode/shakapacker/tree/v6.1.0.beta.0
 post_install_message:
 rdoc_options: []
 require_paths:
@@ -281,9 +284,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: 2.7.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.2.32
 signing_key: