shakapacker 6.0.2 → 6.1.0.beta.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 92baeec1396c0616c20a1aad6d7b45f81776c825c684cf585ca2511602b9f60e
4
- data.tar.gz: 91f7b0d550b5334d6284636b984bdb55f9feb5cd72211254be5c50b4afae2b27
3
+ metadata.gz: 4167db4aea00b8ed494df2151cb5fd7ad414dc6617e8c1b0ee5537d461c7c968
4
+ data.tar.gz: 7cc1c3c5f9c5a39801ac1801b252ee609e01a6c06508541b64d30fadcf7464ed
5
5
  SHA512:
6
- metadata.gz: 5ccc02bd10d28bf68b1b38fba51769c71c23aa874f5922516c9804088d179163fd25b8ac5e2da48325d5fbdffe65467c409848ef5086551ffee60c8021fcb444
7
- data.tar.gz: e035005d2e37ccad4a0bdd7cde26059fc1dd00d840d8d487866de0f175c083d26a6c427eb663065d4190a47608bf7572c29752c2d1ce52a50986504bee0c8970
6
+ metadata.gz: 56ce966357cbf20bcf9fb92839e94988a9f91768118aca2960ec53b0b0ed377df04b0bbb6801e885a9011eafa63655537dc36c63a50eda6cca4d46cba319beee
7
+ data.tar.gz: 163807c57c4e543967a58a3dc96630d92d50fd798bac7d78536c39eaf055281c150922e98e66ad5af5e41daf3b2739b48a0cc5d1285f3251f875fda3581389f4
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- shakapacker (6.0.0.rc.13)
4
+ shakapacker (6.0.0)
5
5
  activesupport (>= 5.2)
6
6
  rack-proxy (>= 0.6.1)
7
7
  railties (>= 5.2)
data/README.md CHANGED
@@ -41,6 +41,7 @@ Discussion forums to discuss debugging and troubleshooting tips. Please open iss
41
41
  - [Development](#development)
42
42
  - [Webpack Configuration](#webpack-configuration)
43
43
  - [Babel configuration](#babel-configuration)
44
+ - [SWC configuration](#swc-configuration)
44
45
  - [Integrations](#integrations)
45
46
  - [React](#react)
46
47
  - [Typescript](#typescript)
@@ -371,6 +372,12 @@ By default, you will find the Webpacker preset in your `package.json`. Note, you
371
372
 
372
373
  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).
373
374
 
375
+ ### SWC configuration
376
+
377
+ You can try out experimental integration with the SWC loader. You can read more at [SWC usage docs](./docs/using_swc_loader.md).
378
+
379
+ 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.
380
+
374
381
  ### Integrations
375
382
 
376
383
  Webpacker out of the box supports JS and static assets (fonts, images etc.) compilation. To enable support for CoffeeScript or TypeScript install relevant packages:
@@ -0,0 +1,151 @@
1
+ # Using SWC Loader
2
+
3
+ :warning: This feature is currently experimental. If you face any issues, please report at https://github.com/shakacode/shakapacker/issues.
4
+
5
+ ## About SWC
6
+
7
+ [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!
8
+
9
+ 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.
10
+
11
+ For comparison between SWC and Babel, see the docs at https://swc.rs/docs/migrating-from-babel.
12
+
13
+ ## Switching your Shakapacker project to SWC
14
+
15
+ In order to use SWC as your compiler today. You need to do two things:
16
+
17
+ 1. Make sure you've installed `@swc/core` and `swc-loader` packages.
18
+
19
+ ```
20
+ yarn add -D @swc/core swc-loader
21
+ ```
22
+
23
+ 2. Add or change `webpacker_loader` value in your default `webpacker.yml` config to `swc`
24
+ The default configuration of babel is done by using `package.json` to use the file within the `shakapacker` package.
25
+
26
+ ```json
27
+ default: &default
28
+ source_path: app/javascript
29
+ source_entry_path: /
30
+ public_root_path: public
31
+ public_output_path: packs
32
+ cache_path: tmp/webpacker
33
+ webpack_compile_output: true
34
+
35
+ # Additional paths webpack should look up modules
36
+ # ['app/assets', 'engine/foo/app/assets']
37
+ additional_paths: []
38
+
39
+ # Reload manifest.json on all requests so we reload latest compiled packs
40
+ cache_manifest: false
41
+
42
+ # Select loader to use, available options are 'babel' (default) or 'swc'
43
+ webpack_loader: 'swc'
44
+ ```
45
+
46
+ ## Usage
47
+
48
+ ### React
49
+
50
+ 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.
51
+
52
+ ### Typescript
53
+
54
+ 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.
55
+
56
+ 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.
57
+
58
+ ## Customizing loader options
59
+
60
+ You can see the default loader options at [swc/index.js](../package/swc/index.js).
61
+
62
+ 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.
63
+
64
+ 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.
65
+
66
+ 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).
67
+
68
+ See some examples below of potential `config/swc.config.js`.
69
+
70
+ ### Example: Enabling top level await and decorators
71
+
72
+
73
+ ```js
74
+ const customConfig = {
75
+ options: {
76
+ jsc: {
77
+ parser: {
78
+ topLevelAwait: true,
79
+ decorators: true
80
+ }
81
+ }
82
+ }
83
+ }
84
+
85
+ module.exports = customConfig
86
+ ```
87
+
88
+ ### Example: Matching existing `@babel/present-env` config
89
+
90
+ ```js
91
+ const { env } = require('shakapacker')
92
+
93
+ const customConfig = {
94
+ options: {
95
+ jsc: {
96
+ transform: {
97
+ react: {
98
+ development: env.isDevelopment,
99
+ useBuiltins: true
100
+ }
101
+ }
102
+ }
103
+ }
104
+ }
105
+
106
+ module.exports = customConfig
107
+ ```
108
+
109
+ ### Example: Enabling React Fast Refresh
110
+
111
+ :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.
112
+
113
+
114
+ ```js
115
+ const { env } = require('shakapacker')
116
+
117
+ const customConfig = {
118
+ options: {
119
+ jsc: {
120
+ transform: {
121
+ react: {
122
+ refresh: env.isDevelopment && env.runningWebpackDevServer
123
+ }
124
+ }
125
+ }
126
+ }
127
+ }
128
+
129
+ module.exports = customConfig
130
+ ```
131
+
132
+ ### Example: Adding browserslist config
133
+
134
+ ```js
135
+
136
+ const customConfig = {
137
+ options: {
138
+ env: {
139
+ targets: '> 0.25%, not dead'
140
+ }
141
+ }
142
+ }
143
+
144
+ module.exports = customConfig
145
+ ```
146
+
147
+
148
+ ## Known limitations
149
+
150
+ - `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.
151
+ - 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.
@@ -15,6 +15,9 @@ default: &default
15
15
  # Reload manifest.json on all requests so we reload latest compiled packs
16
16
  cache_manifest: false
17
17
 
18
+ # Select loader to use, available options are 'babel' (default) or 'swc'
19
+ webpack_loader: 'babel'
20
+
18
21
  development:
19
22
  <<: *default
20
23
  compile: true
@@ -1,4 +1,4 @@
1
1
  module Webpacker
2
2
  # Change the version in package.json too, please!
3
- VERSION = "6.0.2".freeze
3
+ VERSION = "6.1.0.beta.0".freeze
4
4
  end
@@ -1,30 +1,32 @@
1
1
  const { resolve } = require('path')
2
2
  const { realpathSync } = require('fs')
3
+ const { loaderMatches } = require('../utils/helpers')
3
4
 
4
5
  const {
5
6
  source_path: sourcePath,
6
- additional_paths: additionalPaths
7
+ additional_paths: additionalPaths,
8
+ webpack_loader: webpackLoader
7
9
  } = require('../config')
8
10
  const { isProduction } = require('../env')
9
11
 
10
- module.exports = {
11
- test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
12
- include: [sourcePath, ...additionalPaths].map((p) => {
13
- try {
14
- return realpathSync(p)
15
- } catch (e) {
16
- return resolve(p)
17
- }
18
- }),
19
- exclude: /node_modules/,
20
- use: [
21
- {
22
- loader: require.resolve('babel-loader'),
23
- options: {
24
- cacheDirectory: true,
25
- cacheCompression: isProduction,
26
- compact: isProduction
12
+ module.exports = loaderMatches(webpackLoader, 'babel', () => ({
13
+ test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
14
+ include: [sourcePath, ...additionalPaths].map((p) => {
15
+ try {
16
+ return realpathSync(p)
17
+ } catch (e) {
18
+ return resolve(p)
27
19
  }
28
- }
29
- ]
30
- }
20
+ }),
21
+ exclude: /node_modules/,
22
+ use: [
23
+ {
24
+ loader: require.resolve('babel-loader'),
25
+ options: {
26
+ cacheDirectory: true,
27
+ cacheCompression: isProduction,
28
+ compact: isProduction
29
+ }
30
+ }
31
+ ]
32
+ }))
@@ -7,6 +7,7 @@ const rules = {
7
7
  css: require('./css'),
8
8
  sass: require('./sass'),
9
9
  babel: require('./babel'),
10
+ swc: require('./swc'),
10
11
  erb: require('./erb'),
11
12
  coffee: require('./coffee'),
12
13
  less: require('./less'),
@@ -0,0 +1,23 @@
1
+ const { resolve } = require('path')
2
+ const { realpathSync } = require('fs')
3
+ const { loaderMatches } = require('../utils/helpers')
4
+ const { getSwcLoaderConfig } = require('../swc')
5
+
6
+ const {
7
+ source_path: sourcePath,
8
+ additional_paths: additionalPaths,
9
+ webpack_loader: webpackLoader
10
+ } = require('../config')
11
+
12
+ module.exports = loaderMatches(webpackLoader, 'swc', () => ({
13
+ test: /\.(ts|tsx|js|jsx|mjs|coffee)?(\.erb)?$/,
14
+ include: [sourcePath, ...additionalPaths].map((p) => {
15
+ try {
16
+ return realpathSync(p)
17
+ } catch (e) {
18
+ return resolve(p)
19
+ }
20
+ }),
21
+ exclude: /node_modules/,
22
+ use: ({ resource }) => getSwcLoaderConfig(resource)
23
+ }))
@@ -0,0 +1,50 @@
1
+ /* eslint global-require: 0 */
2
+ /* eslint import/no-dynamic-require: 0 */
3
+
4
+ const { resolve } = require('path')
5
+ const { existsSync } = require('fs')
6
+ const { merge } = require('webpack-merge')
7
+
8
+ const isJsxFile = (filename) => !!filename.match(/\.(jsx|tsx)?(\.erb)?$/)
9
+
10
+ const isTypescriptFile = (filename) => !!filename.match(/\.(ts|tsx)?(\.erb)?$/)
11
+
12
+ const getCustomConfig = () => {
13
+ const path = resolve('config', 'swc.config.js')
14
+ if (existsSync(path)) {
15
+ return require(path)
16
+ }
17
+ return {}
18
+ }
19
+
20
+ const getSwcLoaderConfig = (filenameToProcess) => {
21
+ const customConfig = getCustomConfig()
22
+ const defaultConfig = {
23
+ loader: require.resolve('swc-loader'),
24
+ options: {
25
+ jsc: {
26
+ parser: {
27
+ dynamicImport: true,
28
+ syntax: isTypescriptFile(filenameToProcess)
29
+ ? 'typescript'
30
+ : 'ecmascript',
31
+ [isTypescriptFile(filenameToProcess) ? 'tsx' : 'jsx']:
32
+ isJsxFile(filenameToProcess)
33
+ }
34
+ },
35
+ sourceMaps: true,
36
+ env: {
37
+ coreJs: '3.8',
38
+ loose: true,
39
+ exclude: ['transform-typeof-symbol'],
40
+ mode: 'entry'
41
+ }
42
+ }
43
+ }
44
+
45
+ return merge(defaultConfig, customConfig)
46
+ }
47
+
48
+ module.exports = {
49
+ getSwcLoaderConfig
50
+ }
@@ -27,7 +27,7 @@ const resolvedPath = (packageName) => {
27
27
  }
28
28
  }
29
29
 
30
- const moduleExists = (packageName) => (!!resolvedPath(packageName))
30
+ const moduleExists = (packageName) => !!resolvedPath(packageName)
31
31
 
32
32
  const canProcess = (rule, fn) => {
33
33
  const modulePath = resolvedPath(rule)
@@ -39,6 +39,22 @@ const canProcess = (rule, fn) => {
39
39
  return null
40
40
  }
41
41
 
42
+ const loaderMatches = (configLoader, loaderToCheck, fn) => {
43
+ if (configLoader !== loaderToCheck) {
44
+ return null
45
+ }
46
+
47
+ const loaderName = `${configLoader}-loader`
48
+
49
+ if (!moduleExists(loaderName)) {
50
+ throw new Error(
51
+ `Your webpacker config specified using ${configLoader}, but ${loaderName} package is not installed. Please install ${loaderName} first.`
52
+ )
53
+ }
54
+
55
+ return fn()
56
+ }
57
+
42
58
  module.exports = {
43
59
  chdirTestApp,
44
60
  chdirCwd,
@@ -47,5 +63,6 @@ module.exports = {
47
63
  ensureTrailingSlash,
48
64
  canProcess,
49
65
  moduleExists,
50
- resetEnv
66
+ resetEnv,
67
+ loaderMatches
51
68
  }
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shakapacker",
3
- "version": "6.0.2",
3
+ "version": "6.1.0-beta.0",
4
4
  "description": "Use webpack to manage app-like JavaScript modules in Rails",
5
5
  "main": "package/index.js",
6
6
  "files": [
@@ -39,6 +39,7 @@
39
39
  "eslint-plugin-jsx-a11y": "^6.4.1",
40
40
  "eslint-plugin-react": "^7.26.0",
41
41
  "jest": "^27.2.1",
42
+ "swc-loader": "^0.1.15",
42
43
  "webpack": "^5.53.0",
43
44
  "webpack-assets-manifest": "^5.0.6",
44
45
  "webpack-merge": "^5.8.0"
@@ -5,6 +5,7 @@ default: &default
5
5
  source_entry_path: entrypoints
6
6
  public_output_path: packs
7
7
  cache_path: tmp/webpacker
8
+ webpack_loader: babel
8
9
 
9
10
  # Additional paths webpack should look up modules
10
11
  # ['app/assets', 'engine/foo/app/assets']
@@ -7,6 +7,7 @@ default: &default
7
7
  public_output_path: packs
8
8
  cache_path: tmp/webpacker
9
9
  webpack_compile_output: false
10
+ webpack_loader: babel
10
11
 
11
12
  # Additional paths webpack should look up modules
12
13
  # ['app/assets', 'engine/foo/app/assets']
data/yarn.lock CHANGED
@@ -2841,6 +2841,15 @@ loader-utils@^1.4.0:
2841
2841
  emojis-list "^3.0.0"
2842
2842
  json5 "^1.0.1"
2843
2843
 
2844
+ loader-utils@^2.0.0:
2845
+ version "2.0.2"
2846
+ resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
2847
+ integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
2848
+ dependencies:
2849
+ big.js "^5.2.2"
2850
+ emojis-list "^3.0.0"
2851
+ json5 "^2.1.2"
2852
+
2844
2853
  locate-path@^2.0.0:
2845
2854
  version "2.0.0"
2846
2855
  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:
3621
3630
  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
3622
3631
  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
3623
3632
 
3633
+ swc-loader@^0.1.15:
3634
+ version "0.1.15"
3635
+ resolved "https://registry.yarnpkg.com/swc-loader/-/swc-loader-0.1.15.tgz#cb9c630ccfbb46dabc5aebc5560cced658e32992"
3636
+ integrity sha512-cn1WPIeQJvXM4bbo3OwdEIapsQ4uUGOfyFj0h2+2+brT0k76DCGnZXDE2KmcqTd2JSQ+b61z2NPMib7eEwMYYw==
3637
+ dependencies:
3638
+ loader-utils "^2.0.0"
3639
+
3624
3640
  symbol-tree@^3.2.4:
3625
3641
  version "3.2.4"
3626
3642
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: shakapacker
3
3
  version: !ruby/object:Gem::Version
4
- version: 6.0.2
4
+ version: 6.1.0.beta.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - David Heinemeier Hansson
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2022-01-25 00:00:00.000000000 Z
13
+ date: 2022-01-28 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: activesupport
@@ -143,6 +143,7 @@ files:
143
143
  - docs/deployment.md
144
144
  - docs/developing_webpacker.md
145
145
  - docs/troubleshooting.md
146
+ - docs/using_swc_loader.md
146
147
  - docs/v6_upgrade.md
147
148
  - gemfiles/Gemfile-rails-edge
148
149
  - gemfiles/Gemfile-rails.5.2.x
@@ -220,6 +221,8 @@ files:
220
221
  - package/rules/raw.js
221
222
  - package/rules/sass.js
222
223
  - package/rules/stylus.js
224
+ - package/rules/swc.js
225
+ - package/swc/index.js
223
226
  - package/utils/get_style_rule.js
224
227
  - package/utils/helpers.js
225
228
  - rakelib/release.rake
@@ -269,7 +272,7 @@ homepage: https://github.com/shakacode/shakapacker
269
272
  licenses:
270
273
  - MIT
271
274
  metadata:
272
- source_code_uri: https://github.com/shakacode/shakapacker/tree/v6.0.2
275
+ source_code_uri: https://github.com/shakacode/shakapacker/tree/v6.1.0.beta.0
273
276
  post_install_message:
274
277
  rdoc_options: []
275
278
  require_paths:
@@ -281,9 +284,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
281
284
  version: 2.7.0
282
285
  required_rubygems_version: !ruby/object:Gem::Requirement
283
286
  requirements:
284
- - - ">="
287
+ - - ">"
285
288
  - !ruby/object:Gem::Version
286
- version: '0'
289
+ version: 1.3.1
287
290
  requirements: []
288
291
  rubygems_version: 3.2.32
289
292
  signing_key: