shakapacker 7.3.0.beta.1 → 8.0.0.pre.rc.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (231) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintignore +1 -1
  3. data/.eslintrc.js +29 -8
  4. data/.github/PULL_REQUEST_TEMPLATE.md +10 -3
  5. data/.github/workflows/dummy.yml +6 -1
  6. data/.github/workflows/generator.yml +14 -18
  7. data/.github/workflows/node.yml +56 -0
  8. data/.github/workflows/ruby.yml +29 -17
  9. data/.node-version +1 -1
  10. data/.rubocop.yml +1 -0
  11. data/CHANGELOG.md +56 -5
  12. data/README.md +101 -48
  13. data/Rakefile +1 -7
  14. data/docs/customizing_babel_config.md +2 -2
  15. data/docs/deployment.md +13 -6
  16. data/docs/react.md +7 -13
  17. data/docs/troubleshooting.md +4 -4
  18. data/docs/using_esbuild_loader.md +1 -1
  19. data/docs/using_swc_loader.md +1 -1
  20. data/docs/v6_upgrade.md +1 -1
  21. data/docs/v8_upgrade.md +148 -0
  22. data/gemfiles/Gemfile-rails.7.1.x +12 -0
  23. data/jest.config.js +4 -0
  24. data/lib/install/config/shakapacker.yml +2 -2
  25. data/lib/install/template.rb +36 -30
  26. data/lib/shakapacker/base_strategy.rb +2 -1
  27. data/lib/shakapacker/compiler.rb +6 -21
  28. data/lib/shakapacker/configuration.rb +2 -46
  29. data/lib/shakapacker/deprecation_helper.rb +0 -78
  30. data/lib/shakapacker/dev_server.rb +1 -16
  31. data/lib/shakapacker/dev_server_runner.rb +2 -21
  32. data/lib/shakapacker/env.rb +1 -1
  33. data/lib/shakapacker/helper.rb +3 -3
  34. data/lib/shakapacker/instance.rb +1 -3
  35. data/lib/shakapacker/manifest.rb +1 -1
  36. data/lib/shakapacker/railtie.rb +7 -0
  37. data/lib/shakapacker/runner.rb +4 -18
  38. data/lib/shakapacker/utils/manager.rb +58 -0
  39. data/lib/shakapacker/utils/misc.rb +0 -12
  40. data/lib/shakapacker/version.rb +1 -1
  41. data/lib/shakapacker/version_checker.rb +9 -30
  42. data/lib/shakapacker/webpack_runner.rb +2 -21
  43. data/lib/shakapacker.rb +0 -2
  44. data/lib/tasks/shakapacker/check_binstubs.rake +12 -26
  45. data/lib/tasks/shakapacker/check_manager.rake +3 -8
  46. data/lib/tasks/shakapacker/info.rake +6 -15
  47. data/package/babel/preset.js +15 -15
  48. data/package/config.js +15 -19
  49. data/package/dev_server.js +4 -4
  50. data/package/env.js +19 -17
  51. data/package/environments/base.js +41 -24
  52. data/package/environments/development.js +6 -6
  53. data/package/environments/production.js +16 -16
  54. data/package/environments/test.js +1 -1
  55. data/package/esbuild/index.js +6 -6
  56. data/package/index.d.ts +0 -2
  57. data/package/index.js +17 -46
  58. data/package/rules/babel.js +6 -8
  59. data/package/rules/coffee.js +2 -2
  60. data/package/rules/css.js +1 -1
  61. data/package/rules/erb.js +4 -4
  62. data/package/rules/esbuild.js +5 -7
  63. data/package/rules/file.js +14 -7
  64. data/package/rules/index.js +11 -11
  65. data/package/rules/jscommon.js +8 -5
  66. data/package/rules/less.js +10 -9
  67. data/package/rules/raw.js +1 -1
  68. data/package/rules/sass.js +4 -4
  69. data/package/rules/stylus.js +12 -7
  70. data/package/rules/swc.js +5 -7
  71. data/package/swc/index.js +10 -10
  72. data/package/utils/configPath.js +3 -18
  73. data/package/utils/defaultConfigPath.js +1 -1
  74. data/package/utils/{get_style_rule.js → getStyleRule.js} +6 -6
  75. data/package/utils/helpers.js +2 -43
  76. data/package/utils/inliningCss.js +4 -3
  77. data/package/utils/snakeToCamelCase.js +5 -0
  78. data/package/webpackDevServerConfig.js +28 -25
  79. data/package.json +12 -18
  80. data/prettier.config.js +4 -0
  81. data/shakapacker.gemspec +1 -1
  82. data/spec/dummy/app/javascript/packs/application.js +1 -1
  83. data/spec/dummy/config/application.rb +3 -0
  84. data/spec/dummy/config/initializers/react_on_rails.rb +2 -2
  85. data/spec/dummy/config/shakapacker.yml +3 -4
  86. data/spec/dummy/config/webpack/commonWebpackConfig.js +0 -1
  87. data/spec/dummy/config/webpack/webpack.config.js +1 -1
  88. data/spec/dummy/package.json +2 -1
  89. data/spec/dummy/yarn.lock +2 -3
  90. data/spec/fixtures/github_url_package-lock.v1.json +1 -1
  91. data/spec/fixtures/github_url_package-lock.v2.json +2 -2
  92. data/spec/fixtures/github_url_package.json +1 -1
  93. data/spec/fixtures/github_url_pnpm-lock.v7.yaml +1 -1
  94. data/spec/fixtures/github_url_pnpm-lock.v8.yaml +1 -1
  95. data/spec/fixtures/github_url_yarn.v1.lock +1 -1
  96. data/spec/fixtures/github_url_yarn.v2.lock +2 -2
  97. data/spec/generator_specs/e2e_template/template.rb +15 -28
  98. data/spec/generator_specs/generator_spec.rb +6 -136
  99. data/spec/mounted_app/test/dummy/config/webpacker.yml +0 -1
  100. data/spec/shakapacker/compiler_spec.rb +1 -3
  101. data/spec/shakapacker/configuration_spec.rb +4 -56
  102. data/spec/shakapacker/dev_server_runner_spec.rb +19 -102
  103. data/spec/shakapacker/dev_server_spec.rb +1 -16
  104. data/spec/shakapacker/engine_rake_tasks_spec.rb +1 -16
  105. data/spec/shakapacker/helper_spec.rb +3 -3
  106. data/spec/shakapacker/instance_spec.rb +1 -3
  107. data/spec/shakapacker/rake_tasks_spec.rb +2 -14
  108. data/spec/shakapacker/shakapacker_spec.rb +0 -1
  109. data/spec/shakapacker/test_app/config/shakapacker_css_extract_ignore_order_warnings.yml +0 -1
  110. data/spec/shakapacker/test_app/config/shakapacker_manifest_path.yml +0 -1
  111. data/spec/shakapacker/test_app/config/shakapacker_nested_entries.yml +0 -1
  112. data/spec/shakapacker/test_app/config/shakapacker_other_location.yml +0 -1
  113. data/spec/shakapacker/test_app/package.json +2 -1
  114. data/spec/shakapacker/utils_manager_spec.rb +125 -0
  115. data/spec/shakapacker/version_checker_spec.rb +5 -5
  116. data/spec/shakapacker/webpack_runner_spec.rb +19 -28
  117. data/spec/support/package_json_helpers.rb +7 -4
  118. data/test/helpers.js +67 -0
  119. data/test/package/config.test.js +50 -0
  120. data/test/package/dev_server.test.js +44 -0
  121. data/test/package/development.test.js +43 -0
  122. data/test/package/env.test.js +57 -0
  123. data/test/package/environments/base.test.js +105 -0
  124. data/test/package/environments/development.test.js +50 -0
  125. data/test/package/environments/production.test.js +106 -0
  126. data/test/package/index.test.js +45 -0
  127. data/test/package/production.test.js +32 -0
  128. data/test/package/rules/babel.test.js +58 -0
  129. data/test/package/rules/esbuild.test.js +59 -0
  130. data/test/package/rules/file.test.js +81 -0
  131. data/test/package/rules/index.test.js +7 -0
  132. data/test/package/rules/raw.test.js +12 -0
  133. data/test/package/rules/swc.test.js +59 -0
  134. data/test/package/staging.test.js +31 -0
  135. data/test/package/test.test.js +28 -0
  136. data/yarn.lock +1278 -421
  137. metadata +50 -100
  138. data/.github/workflows/jest.yml +0 -33
  139. data/.github/workflows/js-lint.yml +0 -33
  140. data/.github/workflows/rubocop.yml +0 -28
  141. data/.github/workflows/ruby-backward-compatibility.yml +0 -51
  142. data/lib/install/package.json +0 -15
  143. data/lib/tasks/shakapacker/check_yarn.rake +0 -34
  144. data/lib/tasks/shakapacker/yarn_install.rake +0 -24
  145. data/lib/tasks/webpacker/binstubs.rake +0 -9
  146. data/lib/tasks/webpacker/check_binstubs.rake +0 -9
  147. data/lib/tasks/webpacker/check_node.rake +0 -9
  148. data/lib/tasks/webpacker/check_yarn.rake +0 -9
  149. data/lib/tasks/webpacker/clean.rake +0 -9
  150. data/lib/tasks/webpacker/clobber.rake +0 -11
  151. data/lib/tasks/webpacker/compile.rake +0 -9
  152. data/lib/tasks/webpacker/info.rake +0 -9
  153. data/lib/tasks/webpacker/install.rake +0 -9
  154. data/lib/tasks/webpacker/verify_config.rake +0 -9
  155. data/lib/tasks/webpacker/verify_install.rake +0 -9
  156. data/lib/tasks/webpacker/yarn_install.rake +0 -9
  157. data/lib/tasks/webpacker.rake +0 -20
  158. data/lib/webpacker/dev_server_runner.rb +0 -9
  159. data/lib/webpacker/webpack_runner.rb +0 -9
  160. data/lib/webpacker.rb +0 -4
  161. data/package/__tests__/config-bc.js +0 -27
  162. data/package/__tests__/config.js +0 -46
  163. data/package/__tests__/dev_server-bc.js +0 -46
  164. data/package/__tests__/dev_server.js +0 -46
  165. data/package/__tests__/development-bc.js +0 -66
  166. data/package/__tests__/development.js +0 -66
  167. data/package/__tests__/env-bc.js +0 -59
  168. data/package/__tests__/env.js +0 -59
  169. data/package/__tests__/index-bc.js +0 -22
  170. data/package/__tests__/index.js +0 -46
  171. data/package/__tests__/production-bc.js +0 -51
  172. data/package/__tests__/production.js +0 -51
  173. data/package/__tests__/staging-bc.js +0 -53
  174. data/package/__tests__/staging.js +0 -53
  175. data/package/__tests__/test-bc.js +0 -43
  176. data/package/__tests__/test.js +0 -43
  177. data/package/environments/__tests__/base-bc.js +0 -107
  178. data/package/environments/__tests__/base.js +0 -107
  179. data/package/environments/__tests__/development.js +0 -53
  180. data/package/environments/__tests__/production.js +0 -92
  181. data/package/rules/__tests__/__utils__/webpack.js +0 -50
  182. data/package/rules/__tests__/babel.js +0 -63
  183. data/package/rules/__tests__/esbuild.js +0 -64
  184. data/package/rules/__tests__/file.js +0 -79
  185. data/package/rules/__tests__/index.js +0 -7
  186. data/package/rules/__tests__/raw.js +0 -18
  187. data/package/rules/__tests__/swc.js +0 -63
  188. data/package/utils/snakeToCamelCase +0 -7
  189. data/spec/backward_compatibility_specs/command_spec.rb +0 -116
  190. data/spec/backward_compatibility_specs/compiler_spec.rb +0 -59
  191. data/spec/backward_compatibility_specs/compiler_strategy_spec.rb +0 -24
  192. data/spec/backward_compatibility_specs/configuration_spec.rb +0 -294
  193. data/spec/backward_compatibility_specs/dev_server_runner_spec.rb +0 -206
  194. data/spec/backward_compatibility_specs/dev_server_spec.rb +0 -47
  195. data/spec/backward_compatibility_specs/digest_strategy_spec.rb +0 -38
  196. data/spec/backward_compatibility_specs/engine_rake_tasks_spec.rb +0 -67
  197. data/spec/backward_compatibility_specs/env_spec.rb +0 -23
  198. data/spec/backward_compatibility_specs/helper_spec.rb +0 -243
  199. data/spec/backward_compatibility_specs/instance_spec.rb +0 -31
  200. data/spec/backward_compatibility_specs/manifest_spec.rb +0 -100
  201. data/spec/backward_compatibility_specs/mtime_strategy_spec.rb +0 -55
  202. data/spec/backward_compatibility_specs/rake_tasks_spec.rb +0 -41
  203. data/spec/backward_compatibility_specs/spec_helper_initializer.rb +0 -24
  204. data/spec/backward_compatibility_specs/webpack_runner_spec.rb +0 -86
  205. data/spec/backward_compatibility_specs/webpacker_spec.rb +0 -41
  206. data/spec/backward_compatibility_specs/webpacker_test_app/.gitignore +0 -2
  207. data/spec/backward_compatibility_specs/webpacker_test_app/Rakefile +0 -3
  208. data/spec/backward_compatibility_specs/webpacker_test_app/app/packs/entrypoints/application.js +0 -10
  209. data/spec/backward_compatibility_specs/webpacker_test_app/app/packs/entrypoints/generated/something.js +0 -2
  210. data/spec/backward_compatibility_specs/webpacker_test_app/app/packs/entrypoints/multi_entry.css +0 -4
  211. data/spec/backward_compatibility_specs/webpacker_test_app/app/packs/entrypoints/multi_entry.js +0 -4
  212. data/spec/backward_compatibility_specs/webpacker_test_app/bin/webpacker +0 -13
  213. data/spec/backward_compatibility_specs/webpacker_test_app/bin/webpacker-dev-server +0 -13
  214. data/spec/backward_compatibility_specs/webpacker_test_app/config/application.rb +0 -11
  215. data/spec/backward_compatibility_specs/webpacker_test_app/config/environment.rb +0 -4
  216. data/spec/backward_compatibility_specs/webpacker_test_app/config/initializers/inspect_autoload_paths.rb +0 -1
  217. data/spec/backward_compatibility_specs/webpacker_test_app/config/webpack/webpack.config.js +0 -0
  218. data/spec/backward_compatibility_specs/webpacker_test_app/config/webpacker.yml +0 -83
  219. data/spec/backward_compatibility_specs/webpacker_test_app/config/webpacker_css_extract_ignore_order_warnings.yml +0 -84
  220. data/spec/backward_compatibility_specs/webpacker_test_app/config/webpacker_defaults_fallback.yml +0 -11
  221. data/spec/backward_compatibility_specs/webpacker_test_app/config/webpacker_manifest_path.yml +0 -80
  222. data/spec/backward_compatibility_specs/webpacker_test_app/config/webpacker_nested_entries.yml +0 -83
  223. data/spec/backward_compatibility_specs/webpacker_test_app/config/webpacker_no_precompile.yml +0 -7
  224. data/spec/backward_compatibility_specs/webpacker_test_app/config/webpacker_other_location.yml +0 -85
  225. data/spec/backward_compatibility_specs/webpacker_test_app/config/webpacker_public_root.yml +0 -18
  226. data/spec/backward_compatibility_specs/webpacker_test_app/config.ru +0 -5
  227. data/spec/backward_compatibility_specs/webpacker_test_app/package.json +0 -13
  228. data/spec/backward_compatibility_specs/webpacker_test_app/public/packs/manifest.json +0 -58
  229. data/spec/backward_compatibility_specs/webpacker_test_app/some.config.js +0 -0
  230. data/spec/backward_compatibility_specs/webpacker_test_app/tmp/shakapacker/last-compilation-digest-production +0 -1
  231. data/spec/backward_compatibility_specs/webpacker_test_app/yarn.lock +0 -11
data/README.md CHANGED
@@ -1,8 +1,9 @@
1
- # Shakapacker (v7)
1
+ # Shakapacker (v8)
2
2
 
3
3
  _Official, actively maintained successor to [rails/webpacker](https://github.com/rails/webpacker).ShakaCode stands behind the long-term maintenance and development of this project for the Rails community._
4
4
 
5
5
  * ⚠️ See the [6-stable](https://github.com/shakacode/shakapacker/tree/6-stable) branch for Shakapacker v6.x code and documentation. :warning:
6
+ * See [V8 Upgrade](./docs/v8_upgrade.md) for upgrading from the v7 release.
6
7
  * See [V7 Upgrade](./docs/v7_upgrade.md) for upgrading from the v6 release.
7
8
  * See [V6 Upgrade](./docs/v6_upgrade.md) for upgrading from v5 or prior v6 releases.
8
9
 
@@ -51,8 +52,6 @@ Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=
51
52
  - [Optional support](#optional-support)
52
53
  - [Installation](#installation)
53
54
  - [Rails v6+](#rails-v6)
54
- - [Using alternative package managers](#using-alternative-package-managers)
55
- - [Note for Yarn v2 usage](#note-for-yarn-v2-usage)
56
55
  - [Concepts](#concepts)
57
56
  - [Usage](#usage)
58
57
  - [Configuration and Code](#configuration-and-code)
@@ -98,16 +97,16 @@ Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=
98
97
 
99
98
  ## Prerequisites
100
99
 
101
- - Ruby 2.6+
100
+ - Ruby 2.7+
102
101
  - Rails 5.2+
103
- - Node.js 12.13.0+ || 14+
104
- - Yarn
102
+ - Node.js 14+
105
103
 
106
104
  ## Features
107
105
  - Rails view helpers that fully support Webpack output, including HMR and code splitting.
108
106
  - Convenient but not required webpack configuration. The only requirement is that your webpack configuration creates a manifest.
109
107
  - HMR with the `shakapacker-dev-server`, such as for hot-reloading React!
110
108
  - Automatic code splitting using multiple entry points to optimize JavaScript downloads.
109
+ - Support for [NPM](https://www.npmjs.com/package/npm), Yarn ([classic](https://classic.yarnpkg.com/lang/en/) and [berry](https://yarnpkg.com/getting-started)), [PNPM](https://pnpm.io/), and [Bun](https://bun.sh/)
111
110
  - [Webpack v5+](https://webpack.js.org/)
112
111
  - ES6 with [babel](https://babeljs.io/), [SWC](https://swc.rs/), or [Esbuild](https://github.com/privatenumber/esbuild-loader)
113
112
  - Asset compression, source-maps, and minification
@@ -147,40 +146,45 @@ Then run the following to install Shakapacker:
147
146
 
148
147
  Before initiating the installation process, ensure you have committed all the changes. While installing Shakapacker, there might be some conflict between the existing file content and what Shakapacker tries to copy. You can either approve all the prompts for overriding these files or use the `FORCE=true` environment variable before the installation command to force the override without any prompt.
149
148
 
150
- When `package.json` and/or `yarn.lock` changes, such as when pulling down changes to your local environment in team settings, be sure to keep your NPM packages up-to-date:
149
+ Shakapacker uses the [`package_json`](https://github.com/shakacode/package_json) gem to handle updating the `package.json` and interacting with the underlying package manager of choice for managing dependencies and running commands; the package manager is managed using the [`packageManager`](https://nodejs.org/api/packages.html#packagemanager) property in the `package.json`, otherwise falling back to the value of `PACKAGE_JSON_FALLBACK_MANAGER` if set or otherwise `npm`.
151
150
 
152
- ```bash
153
- yarn
154
- ```
155
-
156
- Note, in v6+, most JS packages are peer dependencies. Thus, the installer will add the packages:
157
-
158
- ```bash
159
- yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader \
160
- compression-webpack-plugin terser-webpack-plugin \
161
- webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server
162
- ```
163
-
164
- Previously, these "webpack" and "babel" packages were direct dependencies for `shakapacker`. By
165
- making these peer dependencies, you have control over the versions used in your webpack and babel configs.
166
-
167
- ### Using alternative package managers
151
+ If `packageManager` is not set when running `shakapacker:install`, Shakapacker will set it based on the lockfile and the result of calling `--version` on the inferred manager; if no lockfile is present, then `npm` be used unless you choose to explicitly set the `PACKAGE_JSON_FALLBACK_MANAGER` to your preferred package manager.
168
152
 
169
- There is experimental support for using package managers besides Yarn classic for managing JavaScript dependencies using the [`package_json`](https://github.com/G-Rath/package_json) gem.
170
-
171
- This can be enabled by setting the environment variable `SHAKAPACKER_USE_PACKAGE_JSON_GEM` to `true`; Shakapacker will then use the `package_json` gem which in turn will look for the [`packageManager`](https://nodejs.org/api/packages.html#packagemanager) property in the `package.json` or otherwise the `PACKAGE_JSON_FALLBACK_MANAGER` environment variable to determine which manager to use, defaulting to `npm` if neither are found.
153
+ > **Note**
154
+ >
155
+ > The `packageManager` property is only used to determine the package manager to use, based primarily on its name.
156
+ > The version (if present) is only used to determine if Yarn Classic or Yarn Berry should be used, but is otherwise
157
+ > _not_ checked, nor is [`corepack`](https://nodejs.org/api/corepack.html) used to ensure that the package manager is installed.
158
+ >
159
+ > It is up to the developer to ensure that the desired package manager is actually install at the right version, which can be done
160
+ > using `corepack` or by other means.
172
161
 
173
162
  See [here](https://github.com/G-Rath/package_json#specifying-a-package-manager) for a list of the supported package managers and more information; note that `package_json` does not handle ensuring the manager is installed.
174
163
 
175
- > **Note**
176
- >
177
- > The rest of the documentation assumes that `package_json` is not being used, and so always references `yarn` - you should instead use the package manager of your choice for these commands.
164
+ > [NOTE]
165
+ >
166
+ > The rest of the documentation will only reference `npm` when providing commands such as to install optional packages except in cases where
167
+ > a particular package manager requires a very different command; otherwise it should be safe to just replace `npm` with the name of your
168
+ > preferred package manager when running the command
178
169
 
179
- ### Note for Yarn v2 usage
170
+ Note, in v6+, most JS packages are peer dependencies. Thus, the installer will add the packages:
180
171
 
181
- If you are using Yarn v2 (berry), please note that PnP modules are not supported unless you're using `SHAKAPACKER_USE_PACKAGE_JSON_GEM`.
172
+ - `@babel/core`
173
+ - `@babel/plugin-transform-runtime`
174
+ - `@babel/preset-env`
175
+ - `@babel/runtime`
176
+ - `babel-loader`
177
+ - `compression-webpack-plugin`
178
+ - `terser-webpack-plugin`
179
+ - `webpack`
180
+ - `webpack-assets-manifest`
181
+ - `webpack-cli`
182
+ - `webpack-merge`
183
+ - `webpack-sources`
184
+ - `webpack-dev-server`
182
185
 
183
- To use Shakapacker with Yarn v2, make sure you set `nodeLinker: node-modules` in your `.yarnrc.yml` file as per the [Yarn docs](https://yarnpkg.com/getting-started/migration#step-by-step) to opt out of Plug'n'Play behavior.
186
+ Previously, these "webpack" and "babel" packages were direct dependencies for `shakapacker`. By
187
+ making these peer dependencies, you have control over the versions used in your webpack and babel configs.
184
188
 
185
189
  ## Concepts
186
190
 
@@ -578,8 +582,11 @@ console.log(JSON.stringify(webpackConfig, undefined, 2))
578
582
  You may want to modify the rules in the default configuration. For instance, if you are using a custom svg loader, you may want to remove `.svg` from the default file loader rules. You can search and filter the default rules like so:
579
583
 
580
584
  ```js
581
- const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
582
- svgRule.test = svgRule.test.filter(t => !t.test('.svg'))
585
+ const fileRule = config.module.rules.find(rule => rule.test.test('.svg'));
586
+ // removing svg from asset file rule's test RegExp
587
+ fileRule.test = /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2)$/
588
+ // changing the rule type from 'asset/resource' to 'asset'. See https://webpack.js.org/guides/asset-modules/
589
+ fileRule.type = 'asset'
583
590
  ```
584
591
 
585
592
  ### Babel configuration
@@ -621,13 +628,13 @@ See also [Customizing Babel Config](./docs/customizing_babel_config.md) for an e
621
628
  #### TypeScript
622
629
 
623
630
  ```bash
624
- yarn add typescript @babel/preset-typescript
631
+ npm install typescript @babel/preset-typescript
625
632
  ```
626
633
 
627
634
  Babel won’t perform any type-checking on TypeScript code. To optionally use type-checking run:
628
635
 
629
636
  ```bash
630
- yarn add fork-ts-checker-webpack-plugin
637
+ npm install fork-ts-checker-webpack-plugin
631
638
  ```
632
639
 
633
640
  Add tsconfig.json
@@ -668,7 +675,7 @@ module.exports = generateWebpackConfig({
668
675
  To enable CSS support in your application, add the following packages:
669
676
 
670
677
  ```bash
671
- yarn add css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
678
+ npm install css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
672
679
  ```
673
680
 
674
681
  Optionally, add the `CSS` extension to webpack config for easy resolution.
@@ -692,36 +699,55 @@ then add the relevant pre-processors:
692
699
  #### Postcss
693
700
 
694
701
  ```bash
695
- yarn add postcss postcss-loader
702
+ npm install postcss postcss-loader
696
703
  ```
697
704
 
698
705
  Optionally add these two plugins if they are required in your `postcss.config.js`:
699
706
  ```bash
700
- yarn add postcss-preset-env postcss-flexbugs-fixes
707
+ npm install postcss-preset-env postcss-flexbugs-fixes
701
708
  ```
702
709
 
703
710
  #### Sass
704
711
 
705
712
  ```bash
706
- yarn add sass sass-loader
713
+ npm install sass-loader
714
+ ```
715
+
716
+ You will also need to install [Dart Sass](https://github.com/sass/dart-sass), [Node Sass](https://github.com/sass/node-sass) or [Sass Embedded](https://github.com/sass/embedded-host-node) to pick the implementation to use. sass-loader will automatically pick an implementation based on installed packages.
717
+
718
+ Please refer to [sass-loader documentation](https://www.npmjs.com/package/sass-loader) and individual packages repos for more information on all the options.
719
+
720
+ ##### Dart Sass
721
+ ```bash
722
+ npm install sass
723
+ ```
724
+
725
+ ##### Node Sass
726
+ ```bash
727
+ npm install node-sass
728
+ ```
729
+
730
+ ##### Sass Embedded
731
+ ```bash
732
+ npm install sass-embedded
707
733
  ```
708
734
 
709
735
  #### Less
710
736
 
711
737
  ```bash
712
- yarn add less less-loader
738
+ npm install less less-loader
713
739
  ```
714
740
 
715
741
  #### Stylus
716
742
 
717
743
  ```bash
718
- yarn add stylus stylus-loader
744
+ npm install stylus stylus-loader
719
745
  ```
720
746
 
721
747
  #### CoffeeScript
722
748
 
723
749
  ```bash
724
- yarn add coffeescript coffee-loader
750
+ npm install coffeescript coffee-loader
725
751
  ```
726
752
 
727
753
  #### Other frameworks
@@ -821,16 +847,24 @@ bundle update shakapacker
821
847
  # overwrite your changes to the default install files and revert any unwanted changes from the install
822
848
  rails shakapacker:install
823
849
 
824
- # yarn 1 instructions
850
+ # using npm
851
+ npm install shakapacker@latest
852
+ npm install webpack-dev-server@latest
853
+
854
+ # using yarn classic
825
855
  yarn upgrade shakapacker --latest
826
856
  yarn upgrade webpack-dev-server --latest
827
857
 
828
- # yarn 2 instructions
858
+ # using yarn berry
829
859
  yarn up shakapacker@latest
830
860
  yarn up webpack-dev-server@latest
831
861
 
862
+ # using pnpm
863
+ pnpm up shakapacker@latest
864
+ pnpm up webpack-dev-server@latest
865
+
832
866
  # Or to install the latest release (including pre-releases)
833
- yarn add shakapacker@next
867
+ npm install shakapacker@next
834
868
  ```
835
869
 
836
870
  Also, consult the [CHANGELOG](./CHANGELOG.md) for additional upgrade links.
@@ -880,7 +914,9 @@ import 'stylesheets/main'
880
914
  import 'images/rails.png'
881
915
  ```
882
916
 
883
- Assets put in these folders will have their directory stripped just like with the `source_path`. For example:
917
+ Assets put in these folders will also have their path stripped just like with the `source_path`.
918
+
919
+ Example:
884
920
 
885
921
  A file in `app/assets/images/image.svg` with `additional_paths: ['app/assets']` will result in `static/images/image.svg`
886
922
 
@@ -895,7 +931,24 @@ Shakapacker hooks up a new `shakapacker:compile` task to `assets:precompile`, wh
895
931
 
896
932
  This behavior is optional & can be disabled by either setting a `SHAKAPACKER_PRECOMPILE` environment variable to `false`, `no`, `n`, or `f`, or by setting a `shakapacker_precompile` key in your `shakapacker.yml` to `false`. ([source code](./lib/shakapacker/configuration.rb#L34))
897
933
 
898
- When compiling assets for production on a remote server, such as a continuous integration environment, it's recommended to use `yarn install --frozen-lockfile` to install NPM packages on the remote host to ensure that the installed packages match the `yarn.lock` file.
934
+ When compiling assets for production on a remote server, such as a continuous integration environment, it's recommended to ensure the exact versions specified in your lockfile are installed:
935
+
936
+ ```
937
+ # using npm
938
+ npm ci
939
+
940
+ # using yarn classic
941
+ yarn install --frozen-lockfile
942
+
943
+ # using yarn berry
944
+ yarn install --immutable
945
+
946
+ # using pnpm
947
+ pnpm install --frozen-lockfile
948
+
949
+ # using bun
950
+ bun install --frozen-lockfile
951
+ ```
899
952
 
900
953
  If you are using a CDN setup, Shakapacker does NOT use the `ASSET_HOST` environment variable to prefix URLs for assets during bundle compilation. You must use the `SHAKAPACKER_ASSET_HOST` environment variable instead (`WEBPACKER_ASSET_HOST` if you're using any version of Webpacker or Shakapacker before Shakapacker v7).
901
954
 
data/Rakefile CHANGED
@@ -14,12 +14,6 @@ namespace :run_spec do
14
14
  sh("bundle exec rspec spec/shakapacker/*_spec.rb")
15
15
  end
16
16
 
17
- desc "Run backward compatibility specs"
18
- task :gem_bc do
19
- puts "Running Shakapacker gem specs for backward compatibility"
20
- sh("bundle exec rspec spec/backward_compatibility_specs/*_spec.rb")
21
- end
22
-
23
17
  desc "Run specs in the dummy app"
24
18
  task :dummy do
25
19
  puts "Running dummy app specs"
@@ -41,7 +35,7 @@ namespace :run_spec do
41
35
  end
42
36
 
43
37
  desc "Run all specs"
44
- task all_specs: %i[gem gem_bc dummy generator] do
38
+ task all_specs: %i[gem dummy generator] do
45
39
  puts "Completed all RSpec tests"
46
40
  end
47
41
  end
@@ -20,8 +20,8 @@ This example shows how you can create an object and apply _additional_ presets a
20
20
  To use this example file,
21
21
 
22
22
  ```
23
- yarn add react react-dom @babel/preset-react
24
- yarn add --dev @pmmmwh/react-refresh-webpack-plugin react-refresh
23
+ npm install react react-dom @babel/preset-react
24
+ npm install --dev @pmmmwh/react-refresh-webpack-plugin react-refresh
25
25
  ```
26
26
 
27
27
  ```js
data/docs/deployment.md CHANGED
@@ -24,7 +24,7 @@ We're essentially doing the following here:
24
24
  * Adding the Heroku NodeJS and Ruby buildpacks for your app. This allows the `npm` or `yarn` executables to properly function when compiling your app - as well as Ruby.
25
25
  * Pushing your code to Heroku and kicking off the deployment
26
26
 
27
- Your production build process is responsible for running `yarn install` before `rake assets:precompile`. For example, if you are on Heroku, the `heroku/nodejs` buildpack must run **prior** to the `heroku/ruby` buildpack for precompilation to run successfully.
27
+ Your production build process is responsible for installing your JavaScript dependencies before `rake assets:precompile`. For example, if you are on Heroku, the `heroku/nodejs` buildpack must run **prior** to the `heroku/ruby` buildpack for precompilation to run successfully.
28
28
 
29
29
  ## Nginx
30
30
 
@@ -100,18 +100,25 @@ Make sure you have your public output path (default `public/packs`), the shakapa
100
100
  append :linked_dirs, "log", "tmp/pids", "tmp/cache", "tmp/sockets", "tmp/shakapacker", "public/packs", ".bundle", "node_modules"
101
101
  ```
102
102
 
103
- If you have `node_modules` added to `:linked_dirs` you'll need to run yarn install before `deploy:assets:precompile`, so you can add this code snippet at the bottom deploy.rb
103
+ If you have `node_modules` added to `:linked_dirs` you'll need to install your JavaScript dependencies before `deploy:assets:precompile`; you can use `package_json` to do this generically:
104
104
 
105
105
  ```ruby
106
- before "deploy:assets:precompile", "deploy:yarn_install"
106
+ before "deploy:assets:precompile", "deploy:js_install"
107
107
  namespace :deploy do
108
- desc "Run rake yarn install"
109
- task :yarn_install do
108
+ desc "Run rake js install"
109
+ task :js_install do
110
+ require "package_json"
111
+
112
+ # this will use the package manager specified via `packageManager`, or otherwise fallback to `npm`
113
+ native_js_install_command = PackageJson.read.manager.native_install_command(frozen: true).join(" ")
114
+
110
115
  on roles(:web) do
111
116
  within release_path do
112
- execute("cd #{release_path} && yarn install --silent --no-progress --no-audit --no-optional")
117
+ execute("cd #{release_path} && #{native_js_install_command}")
113
118
  end
114
119
  end
115
120
  end
116
121
  end
117
122
  ```
123
+
124
+ You can also replace the use of `package_json` with the underlying native install command for your preferred package manager.
data/docs/react.md CHANGED
@@ -2,12 +2,6 @@
2
2
 
3
3
  These steps describe creating a Rails/React app, using Shakapacker as the bundler.
4
4
 
5
- Before starting, ensure that you have Yarn installed, for example:
6
-
7
- ```shell
8
- npm i -g yarn
9
- ```
10
-
11
5
  ## Easy Setup
12
6
  If you'd like easy integration of React with Ruby on Rails, see [React on Rails](https://github.com/shakacode/react_on_rails).
13
7
 
@@ -24,8 +18,8 @@ Create a new Rails app as per the [installation instructions in the README](http
24
18
  Add React, as well as the necessary libraries to enable CSS support in your application:
25
19
 
26
20
  ```shell
27
- yarn add react react-dom @babel/preset-react
28
- yarn add css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
21
+ npm install react react-dom @babel/preset-react
22
+ npm install css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
29
23
  ```
30
24
 
31
25
  Update the Babel configuration in the `package.json` file:
@@ -52,7 +46,7 @@ In `config/shakapacker.yml` set `hmr` is set to `true`.
52
46
  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):
53
47
 
54
48
  ```shell
55
- yarn add --dev react-refresh @pmmmwh/react-refresh-webpack-plugin
49
+ npm install --dev react-refresh @pmmmwh/react-refresh-webpack-plugin
56
50
  ```
57
51
 
58
52
  Alter `config/webpack/webpack.config.js` like so:
@@ -142,8 +136,8 @@ cd myapp
142
136
  bundle add shakapacker --strict
143
137
  ./bin/bundle install
144
138
  ./bin/rails shakapacker:install
145
- yarn add react react-dom @babel/preset-react
146
- yarn add css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
139
+ npm install react react-dom @babel/preset-react
140
+ npm install css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin
147
141
  ```
148
142
 
149
143
  2. Generate a controller
@@ -192,7 +186,7 @@ hmr: true
192
186
  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):
193
187
 
194
188
  ```shell
195
- yarn add --dev react-refresh @pmmmwh/react-refresh-webpack-plugin
189
+ npm install --dev react-refresh @pmmmwh/react-refresh-webpack-plugin
196
190
  ```
197
191
 
198
192
  9. Alter `config/webpack/webpack.config.js` like so:
@@ -226,7 +220,7 @@ module.exports = webpackConfig;
226
220
  - },
227
221
  ```
228
222
 
229
- 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):
223
+ 11. Create a `babel.config.js` file in the project root and add the following [sample code](https://github.com/shakacode/shakapacker/blob/main/docs/customizing_babel_config.md#react-configuration):
230
224
  ```js
231
225
  module.exports = function (api) {
232
226
  const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
@@ -18,9 +18,9 @@
18
18
  4. You can also pass additional options to the command to run the webpack-dev-server and start the webpack-dev-server with the option `--debug-shakapacker`
19
19
 
20
20
  ## Incorrect peer dependencies
21
- The latest version of Shakapacker uses peer dependencies to make upgrading easier. However, there's a catch.
22
-
23
- If you fail to update peer dependencies, you'll see an easy-to-overlook warning from `yarn install`.
21
+ Shakapacker uses peer dependencies to make it easier to manage what versions are being used for your app, which is especially
22
+ useful for patching security vulnerabilities. However, not all package managers will actually enforce these versions - notably,
23
+ Yarn will omit a warning rather than erroring if you forget to update a peer dependency:
24
24
 
25
25
  ```
26
26
  warning " > shakapacker@6.1.1" has incorrect peer dependency "compression-webpack-plugin@^9.0.0".
@@ -31,7 +31,7 @@ This omission resulted in an error in the browser:
31
31
  Failed to load resource: net::ERR_CONTENT_DECODING_FAILED
32
32
  ```
33
33
 
34
- The error was caused by an old version of the peer dependency webpack-compression-plugin.
34
+ The error was caused by an old version of the peer dependency `webpack-compression-plugin`.
35
35
 
36
36
  So, be sure to investigate warnings from `yarn install`!
37
37
 
@@ -24,7 +24,7 @@ To use esbuild as your transpiler today. You need to do two things:
24
24
  1. Make sure you've installed `esbuild` and `esbuild-loader` packages.
25
25
 
26
26
  ```
27
- yarn add esbuild esbuild-loader
27
+ npm install esbuild esbuild-loader
28
28
  ```
29
29
 
30
30
  2. Add or change `shakapacker_loader` value in your default `shakapacker.yml` config to `esbuild`
@@ -19,7 +19,7 @@ In order to use SWC as your compiler today. You need to do two things:
19
19
  1. Make sure you've installed `@swc/core` and `swc-loader` packages.
20
20
 
21
21
  ```
22
- yarn add @swc/core swc-loader
22
+ npm install @swc/core swc-loader
23
23
  ```
24
24
 
25
25
  2. Add or change `webpack_loader` value in your default `shakapacker.yml` config to `swc`
data/docs/v6_upgrade.md CHANGED
@@ -140,7 +140,7 @@ _If you're on webpacker v5, follow [how to upgrade to webpacker v6.0.0.rc.6 from
140
140
  ```
141
141
  See customization example the [Customizing Babel Config](./customizing_babel_config.md) for React configuration.
142
142
 
143
- 1. `extensions` was removed from the `webpacker.yml` file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for [Webpack Configuration](https://github.com/shakacode/shakapacker/blob/master/README.md#webpack-configuration)
143
+ 1. `extensions` was removed from the `webpacker.yml` file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for [Webpack Configuration](https://github.com/shakacode/shakapacker/blob/main/README.md#webpack-configuration)
144
144
 
145
145
  ```js
146
146
  {
@@ -0,0 +1,148 @@
1
+ # Upgrading from Shakapacker v7 to v8
2
+
3
+ The majority of the breaking changes in v8 were about dropping deprecated
4
+ functions and features, along with switching to be agnostic about what package
5
+ manager is used to manage JavaScript dependencies.
6
+
7
+ Support for Ruby 2.6 and Node v12 has also been dropped since they're very old
8
+ at this point.
9
+
10
+ ## The `packageManager` property in `package.json` is used to determine the package manager
11
+
12
+ The biggest functional change in v8, `shakapacker` is now able to work with any
13
+ of the major JavaScript package managers thanks to the
14
+ [`package_json`](https://github.com/shakacode/package_json) gem which uses the
15
+ [`packageManager`](https://nodejs.org/api/packages.html#packagemanager) property
16
+ in the `package.json`.
17
+
18
+ In alignment with the behaviour of Node and `corepack`, in the absence of the
19
+ `packageManager` property `npm` will be used as the package manager so as part
20
+ of upgrading you will want to ensure that is set to `yarn@<version>` if you want
21
+ to continue using Yarn.
22
+
23
+ An error will be raised in the presences of a lockfile other than
24
+ `package-lock.json` if this property is not set with the recommended value to
25
+ use, but it important the property is set to ensure all tooling uses the right
26
+ package manager.
27
+
28
+ The `check_yarn` rake task has also been renamed to `check_manager` to reflect
29
+ this change.
30
+
31
+ Check out the [installation section](../README.md#installation) of the readme
32
+ for more details.
33
+
34
+ ## Usages of `webpacker` must now be `shakapacker`
35
+
36
+ The `webpacker` spelling was deprecated in v7 and has now been completely
37
+ removed in v8 - this includes constants, environment variables, and rake tasks.
38
+
39
+ If you are still using references to `webpacker`, see the
40
+ [v7 Upgrade Guide](../docs/v7_upgrade.md) for how to migrate.
41
+
42
+ ## JavaScript dependencies are no longer installed automatically as part of `assets:precompile`
43
+
44
+ You will now need to ensure your dependencies are installed before compiling
45
+ assets.
46
+
47
+ Some platforms like Heroku will install dependencies automatically but if you're
48
+ using a tool like `capistrano` to deploy to servers you can enhance the
49
+ `assets:precompile` command like so:
50
+
51
+ ```ruby
52
+ namespace :assets do
53
+ desc "Ensures that dependencies required to compile assets are installed"
54
+ task install_dependencies: :environment do
55
+ # npm v6+
56
+ raise if File.exist?("package.json") && !(system "npm ci")
57
+
58
+ # yarn v1.x (classic)
59
+ raise if File.exist?("package.json") && !(system "yarn install --immutable")
60
+
61
+ # yarn v2+ (berry)
62
+ raise if File.exist?("package.json") && !(system "yarn install --frozen-lockfile")
63
+
64
+ # bun v1+
65
+ raise if File.exist?("package.json") && !(system "bun install --frozen-lockfile")
66
+
67
+ # pnpm v6+
68
+ raise if File.exist?("package.json") && !(system "pnpm install --frozen-lockfile")
69
+ end
70
+ end
71
+
72
+ Rake::Task["assets:precompile"].enhance ["assets:install_dependencies"]
73
+ ```
74
+
75
+ This allows more flexibility than what `shakapacker` could provide - for
76
+ example, you might only want to do an immutable install if you're in CI.
77
+
78
+ ## `ensure_consistent_versioning` is now enabled by default
79
+
80
+ This has `shakapacker` check that the versions of the installed Ruby gem and
81
+ JavaScript package are compatible; this should only be impactful for codebases
82
+ that are not using lockfiles.
83
+
84
+ ## Usages of `globalMutableWebpackConfig` must be replaced with `generateWebpackConfig()`
85
+
86
+ The function will return the same object with less risk:
87
+
88
+ ```js
89
+ // before
90
+ const { globalMutableWebpackConfig, merge } = require('shakapacker');
91
+
92
+ const customConfig = {
93
+ module: {
94
+ rules: [
95
+ {
96
+ test: require.resolve('jquery'),
97
+ loader: 'expose-loader',
98
+ options: { exposes: ['$', 'jQuery'] }
99
+ }
100
+ ]
101
+ }
102
+ };
103
+
104
+ module.exports = merge(globalMutableWebpackConfig, customConfig);
105
+ ```
106
+
107
+ ```js
108
+ // after
109
+ const { generateWebpackConfig } = require('shakapacker');
110
+
111
+ const customConfig = {
112
+ module: {
113
+ rules: [
114
+ {
115
+ test: require.resolve('jquery'),
116
+ loader: 'expose-loader',
117
+ options: { exposes: ['$', 'jQuery'] }
118
+ }
119
+ ]
120
+ }
121
+ };
122
+
123
+ // you can also pass your config directly to the generator function to have it merged in!
124
+ module.exports = merge(generateWebpackConfig(), customConfig);
125
+ ```
126
+
127
+ ## `additional_paths` are now stripped just like with `source_path`
128
+
129
+ This means going forward asset paths should be same regardless of their source:
130
+
131
+ ```erb
132
+ <%# before %>
133
+ <%= image_pack_tag('marketing/images/people_looking_happy.png') %>
134
+
135
+ <%# after %>
136
+ <%= image_pack_tag('image/people_looking_happy.png') %>
137
+ ```
138
+
139
+ ## Misc. removals
140
+
141
+ In addition to the above, v8 has also removed a number of miscellaneous
142
+ functions that no one is probably using anyway but technically could have been
143
+ including:
144
+
145
+ - `isArray` js utility function (just use `Array.isArray` directly)
146
+ - `relative_url_root` config getter (it was never used)
147
+ - `verify_file_existance` method (use `verify_file_existence` instead)
148
+ - `https` option for `webpack-dev-server` (use `server: 'https'` instead)
@@ -0,0 +1,12 @@
1
+ source "https://rubygems.org"
2
+
3
+ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
4
+
5
+ gemspec path: "../"
6
+
7
+ gem "rails", '~>7.1.0'
8
+ gem "arel", github: "rails/arel"
9
+ gem "rake", ">= 11.1"
10
+ gem "rack-proxy", require: false
11
+ gem "rspec-rails", "~> 6.0.0"
12
+ gem "byebug"
data/jest.config.js ADDED
@@ -0,0 +1,4 @@
1
+ module.exports = {
2
+ roots: ["<rootDir>/test"],
3
+ testPathIgnorePatterns: ["/__fixtures__/", "/__utils__/"]
4
+ }
@@ -39,8 +39,8 @@ default: &default
39
39
  # Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
40
40
  webpack_loader: 'babel'
41
41
 
42
- # 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
43
- ensure_consistent_versioning: false
42
+ # Raises an error if there is a mismatch in the shakapacker gem and npm package being used
43
+ ensure_consistent_versioning: true
44
44
 
45
45
  # Select whether the compiler will use SHA digest ('digest' option) or most most recent modified timestamp ('mtime') to determine freshness
46
46
  compiler_strategy: digest