webpacker 4.0.7 → 5.4.4

data/docs/typescript.md

@@ -1,55 +1,122 @@
-# Typescript
+# TypeScript
 
+## Installation
 
-## Typescript with React
+1. Run the TypeScript installer
 
-1. Setup react using Webpacker [react installer](../README.md#react). Then run the typescript installer
+```bash
+bundle exec rails webpacker:install:typescript
+```
+
+After that, a new file called `hello_typescript.ts` will be present in your `packs` directory (or rather the `source_entry_path` of your `webpacker.yml` configuration). You're now ready to write TypeScript. 
+
+## (Optional) Adding Compile-Time Type Checking
+
+The default installation only transpiles your TypeScript code using Babel. If you would like to enable type checking as part of the Webpack compilation process (i.e. fail the build if there are TS errors), you can do the following:
+
+1. Install the Fork TS Checker Webpack Plugin
+
+    ```sh
+    yarn add --dev fork-ts-checker-webpack-plugin
+    ```
+
+2. Then add it to your development environment config in `config/webpack/development.js`
+
+    ```js
+    const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+    const path = require("path");
+
+    environment.plugins.append(
+      "ForkTsCheckerWebpackPlugin",
+      new ForkTsCheckerWebpackPlugin({
+        typescript: {
+          configFile: path.resolve(__dirname, "../../tsconfig.json"),
+        },
+        async: false,
+      })
+    );
+    ```
+
+    If you are `fork-ts-checker-webpack-plugin` older than 5.0, the `tsconfig` option also needs to be specified:
+
+    ```js
+    const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+    const path = require("path");
+
+    environment.plugins.append(
+      "ForkTsCheckerWebpackPlugin",
+      new ForkTsCheckerWebpackPlugin({
+        // this is a relative path to your project's TypeScript config
+        tsconfig: path.resolve(__dirname, "../../tsconfig.json"),
+        // non-async so type checking will block compilation
+        async: false,
+      })
+    );
+    ```
+
+## Upgrading to 5.1
+
+If you update your App to `webpacker >= 5.1` and had TypeScript installed before, you need to add some new/remove some old configurations:
+
+1. Remove old packages:
+    - `yarn remove ts-loader`
+
+2. Add new packages:
+    - `yarn add @babel/preset-typescript`
+
+3. Remove old configuration files: 
+    - Delete this file: `config/webpack/loaders/typescript.js`
+
+4. Remove the following lines from `config/webpack/environment.js`:
+    - `const typescript = require('./loaders/typescript')`
+    - `environment.loaders.prepend('typescript', typescript)`
+
+5. Add the TypeScript preset to your `babel.config.js`:
+    - This line `['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]` has to be added as the last item to the `presets` array in your `babel.config.js`
+
+### Upgrading to 5.1 for Vue users
+
+1. Remove old packages:
+    - `yarn remove ts-loader pnp-webpack-plugin`
+
+2. Follow point 3 and 4 from the `TypeScript with Vue components` section
+
+## TypeScript with React
+
+1. Setup react using Webpacker [react installer](../README.md#react). Then run the TypeScript installer
 
 ```bash
 bundle exec rails webpacker:install:typescript
-yarn add @types/react @types/react-dom
 ```
 
-2. Rename the generated `hello_react.js` to `hello_react.tsx`. Make the file valid typescript and
-now you can use typescript, JSX with React.
+2. Rename the generated `hello_react.js` to `hello_react.tsx`. Make the file valid TypeScript and
+now you can use TypeScript, JSX with React.
 
-## Typescript with Vue components
+## TypeScript with Vue components
 
-1. Setup vue using Webpacker [vue installer](../README.md#vue). Then run the typescript installer
+1. Setup Vue using the Webpacker [Vue installer](../README.md#vue). Then run the TypeScript installer
 
 ```bash
 bundle exec rails webpacker:install:typescript
 ```
 
 2. Rename generated `hello_vue.js` to `hello_vue.ts`.
-3. Change generated `config/webpack/loaders/typescript.js` from
+3. Install the right Babel preset: `yarn add babel-preset-typescript-vue`
+4. Change the generated `babel.config.js` from
 
 ```js
-module.exports = {
-  test: /\.(ts|tsx)?(\.erb)?$/,
-  use: [{
-    loader: 'ts-loader'
-  }]
-}
+["@babel/preset-typescript", { "allExtensions": true, "isTSX": true }]
 ```
 
 to
 
 ```js
-module.exports = {
-  test: /\.(ts|tsx)?(\.erb)?$/,
-  use: [{
-    loader: 'ts-loader',
-    options: {
-      appendTsSuffixTo: [/\.vue$/]
-    }
-  }]
-}
+["babel-preset-typescript-vue", { "allExtensions": true, "isTSX": true }]
 ```
 
-and now you can use `<script lang="ts">` in your `.vue` component files.
+and now you can use `<script lang="ts">` in your `.vue` component files. See [the babel-preset-typescript-vue docs](https://www.npmjs.com/package/babel-preset-typescript-vue) for more info.
 
-## HTML templates with Typescript and Angular
+## HTML templates with TypeScript and Angular
 
 After you have installed Angular using `bundle exec rails webpacker:install:angular`
 you would need to follow these steps to add HTML templates support:

data/docs/webpack-dev-server.md

@@ -19,7 +19,7 @@ Now if you refresh your Rails view everything should work as expected.
 Webpacker out-of-the-box supports HMR with `webpack-dev-server` and
 you can toggle it by setting `dev_server/hmr` option inside `webpacker.yml`.
 
-Checkout this guide for more information:
+Check out this guide for more information:
 
 - https://webpack.js.org/configuration/dev-server/#devserver-hot
 
@@ -38,7 +38,7 @@ If you use Nginx in development to proxy requests to your Rails server from
 another domain, like `myapp.dev`, the Webpacker middleware will be able to
 forward requests for "packs" to the webpack dev server.
 
-If you're using `inline` mode behing Nginx, you may also need to provide the
+If you're using `inline` mode behind Nginx, you may also need to provide the
 hostname to webpack dev server so it can initiate the websocket connection for
 live reloading ([Webpack
 docs](https://webpack.js.org/configuration/dev-server/#devserver-public)).

data/docs/webpack.md

@@ -189,9 +189,10 @@ const { environment } = require('@rails/webpacker')
 const merge = require('webpack-merge')
 
 const myCssLoaderOptions = {
-  modules: true,
+  modules: {
+    localIdentName: '[name]__[local]___[hash:base64:5]'
+  },
   sourceMap: true,
-  localIdentName: '[name]__[local]___[hash:base64:5]'
 }
 
 const CSSLoader = environment.loaders.get('sass').use.find(el => el.loader === 'css-loader')
@@ -277,7 +278,7 @@ environment.splitChunks()
 environment.splitChunks((config) => Object.assign({}, config, { optimization: { splitChunks: false }}))
 ```
 
-Then use, `javascript_packs_with_chunks_tag` helper to include all the transpiled
+Then use the `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` helpers to include all the transpiled
 packs with the chunks in your view, which creates html tags for all the chunks.
 
 ```erb
@@ -304,6 +305,20 @@ get duplicated chunks on the page.
 
 For the old configuration with the CommonsChunkPlugin see below. **Note** that this functionality is deprecated in Webpack V4.
 
+#### Preloading
+
+Before preload or prefetch your assets, please read [https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content).
+
+Webpack also provide it's own methods for preload or prefetch [https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c](https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c).
+
+You can preload your assets with the `preload_pack_asset` helper if you have Rails >= 5.2.x.
+
+```erb
+<%= preload_pack_asset 'fonts/fa-regular-400.woff2' %>
+```
+
+**Warning:** You don't want to preload the css, you want to preload the fonts and images inside the css so that fonts, css, and images can all be downloaded in parallel instead of waiting for the browser to parse the css.
+
 ### Add common chunks (deprecated in Webpack V4)
 
 The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in the cache for later use. This results in page speed optimizations as the browser can quickly serve the shared code from the cache, rather than being forced to load a larger bundle whenever a new page is visited.

data/gemfiles/Gemfile-rails-edge

@@ -4,7 +4,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 gemspec path: "../"
 
-gem "rails", github: "rails/rails"
+gem "rails", github: "rails/rails", branch: "main"
 gem "arel", github: "rails/arel"
 gem "rake", ">= 11.1"
 gem "rack-proxy", require: false

data/gemfiles/{Gemfile-rails.4.2.x → Gemfile-rails.6.0.x}

@@ -2,7 +2,7 @@ source "https://rubygems.org"
 
 gemspec path: "../"
 
-gem "rails", "~> 4.2.0"
+gem "rails", "~> 6.0.0.rc2"
 gem "rake", ">= 11.1"
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"

data/lib/install/bin/webpack

@@ -7,7 +7,6 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"

data/lib/install/bin/webpack-dev-server

@@ -7,7 +7,6 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"

data/lib/install/coffee.rb

@@ -6,7 +6,7 @@ copy_file "#{__dir__}/loaders/coffee.js", Rails.root.join("config/webpack/loader
 say "Adding coffee loader to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "const coffee =  require('./loaders/coffee')\n",
-  after: "require('@rails/webpacker')\n"
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.loaders.prepend('coffee', coffee)\n",

data/lib/install/config/babel.config.js

@@ -18,7 +18,7 @@ module.exports = function(api) {
   return {
     presets: [
       isTestEnv && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           targets: {
             node: 'current'
@@ -26,7 +26,7 @@ module.exports = function(api) {
         }
       ],
       (isProductionEnv || isDevelopmentEnv) && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
@@ -37,32 +37,42 @@ module.exports = function(api) {
       ]
     ].filter(Boolean),
     plugins: [
-      require('babel-plugin-macros'),
-      require('@babel/plugin-syntax-dynamic-import').default,
-      isTestEnv && require('babel-plugin-dynamic-import-node'),
-      require('@babel/plugin-transform-destructuring').default,
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
       [
-        require('@babel/plugin-proposal-class-properties').default,
+        '@babel/plugin-proposal-class-properties',
         {
           loose: true
         }
       ],
       [
-        require('@babel/plugin-proposal-object-rest-spread').default,
+        '@babel/plugin-proposal-object-rest-spread',
         {
           useBuiltIns: true
         }
       ],
       [
-        require('@babel/plugin-transform-runtime').default,
+        '@babel/plugin-proposal-private-methods',
         {
-          helpers: false,
-          regenerator: true,
-          corejs: false
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-private-property-in-object',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false
         }
       ],
       [
-        require('@babel/plugin-transform-regenerator').default,
+        '@babel/plugin-transform-regenerator',
         {
           async: false
         }

data/lib/install/config/webpacker.yml

@@ -6,12 +6,11 @@ default: &default
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
-  webpack_compile_output: false
+  webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: []
+  additional_paths: []
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
@@ -52,9 +51,6 @@ development:
   <<: *default
   compile: true
 
-  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: true
-
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
@@ -69,6 +65,7 @@ development:
     disable_host_check: true
     use_local_ip: false
     quiet: false
+    pretty: false
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:

data/lib/install/elm.rb

@@ -6,7 +6,7 @@ copy_file "#{__dir__}/loaders/elm.js", Rails.root.join("config/webpack/loaders/e
 say "Adding elm loader to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "const elm =  require('./loaders/elm')\n",
-  after: "require('@rails/webpacker')\n"
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.loaders.prepend('elm', elm)\n",

data/lib/install/erb.rb

@@ -5,8 +5,8 @@ copy_file "#{__dir__}/loaders/erb.js", Rails.root.join("config/webpack/loaders/e
 
 say "Adding erb loader to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "const erb =  require('./loaders/erb')\n",
-  after: "require('@rails/webpacker')\n"
+  "const erb = require('./loaders/erb')\n",
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.loaders.prepend('erb', erb)\n",

data/lib/install/examples/angular/hello_angular/polyfills.ts

@@ -38,8 +38,8 @@
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
+import 'core-js/es/reflect';
+import 'core-js/proposals/reflect-metadata';
 
 
 /**

data/lib/install/examples/react/babel.config.js

@@ -18,15 +18,17 @@ module.exports = function(api) {
   return {
     presets: [
       isTestEnv && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           targets: {
             node: 'current'
-          }
-        }
+          },
+          modules: 'commonjs'
+        },
+        '@babel/preset-react'
       ],
       (isProductionEnv || isDevelopmentEnv) && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
@@ -36,7 +38,7 @@ module.exports = function(api) {
         }
       ],
       [
-        require('@babel/preset-react').default,
+        '@babel/preset-react',
         {
           development: isDevelopmentEnv || isTestEnv,
           useBuiltIns: true
@@ -44,24 +46,36 @@ module.exports = function(api) {
       ]
     ].filter(Boolean),
     plugins: [
-      require('babel-plugin-macros'),
-      require('@babel/plugin-syntax-dynamic-import').default,
-      isTestEnv && require('babel-plugin-dynamic-import-node'),
-      require('@babel/plugin-transform-destructuring').default,
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
       [
-        require('@babel/plugin-proposal-class-properties').default,
+        '@babel/plugin-proposal-class-properties',
         {
           loose: true
         }
       ],
       [
-        require('@babel/plugin-proposal-object-rest-spread').default,
+        '@babel/plugin-proposal-object-rest-spread',
         {
           useBuiltIns: true
         }
       ],
       [
-        require('@babel/plugin-transform-runtime').default,
+        '@babel/plugin-proposal-private-methods',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-private-property-in-object',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
         {
           helpers: false,
           regenerator: true,
@@ -69,13 +83,13 @@ module.exports = function(api) {
         }
       ],
       [
-        require('@babel/plugin-transform-regenerator').default,
+        '@babel/plugin-transform-regenerator',
         {
           async: false
         }
       ],
       isProductionEnv && [
-        require('babel-plugin-transform-react-remove-prop-types').default,
+        'babel-plugin-transform-react-remove-prop-types',
         {
           removeImport: true
         }

data/lib/install/examples/react/tsconfig.json

@@ -8,7 +8,8 @@
     "moduleResolution": "node",
     "sourceMap": true,
     "target": "es5",
-    "jsx": "react"
+    "jsx": "react",
+    "noEmit": true
   },
   "exclude": [
     "**/*.spec.ts",

data/lib/install/examples/svelte/app.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let name;
+</script>
+
+<style>
+  h1 {
+    color: #FF3E00;
+  }
+</style>
+
+<h1>Hello {name}!</h1>

data/lib/install/examples/svelte/hello_svelte.js

@@ -0,0 +1,20 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_svelte' %> (and
+// <%= stylesheet_pack_tag 'hello_svelte' %> if you have styles in your component)
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// All it does is render <div>Hello Svelte!</div> at the bottom of the page.
+
+import App from '../app.svelte'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new App({
+    target: document.body,
+    props: {
+      name: 'Svelte'
+    }
+  });
+
+  window.app = app;
+})
+

data/lib/install/examples/typescript/tsconfig.json

@@ -11,7 +11,8 @@
         "*": ["node_modules/*", "app/javascript/*"]
     },
     "sourceMap": true,
-    "target": "es5"
+    "target": "es5",
+    "noEmit": true
   },
   "exclude": [
     "**/*.spec.ts",

data/lib/install/loaders/elm.js

@@ -1,18 +1,21 @@
 const { resolve } = require('path')
 
 const isProduction = process.env.NODE_ENV === 'production'
+const isDevelopment = process.env.NODE_ENV === 'development'
 const elmSource = resolve(process.cwd())
 const elmBinary = `${elmSource}/node_modules/.bin/elm`
 
-const elmDefaultOptions = { cwd: elmSource, pathToElm: elmBinary }
-const developmentOptions = Object.assign({}, elmDefaultOptions, {
-  verbose: true,
-  debug: true
-})
+const options = { 
+  cwd: elmSource, 
+  pathToElm: elmBinary, 
+  optimize: isProduction, 
+  verbose: isDevelopment, 
+  debug: isDevelopment  
+}
 
 const elmWebpackLoader = {
   loader: 'elm-webpack-loader',
-  options: isProduction ? elmDefaultOptions : developmentOptions
+  options: options
 }
 
 module.exports = {

data/lib/install/loaders/svelte.js

@@ -0,0 +1,9 @@
+module.exports = {
+  test: /\.svelte(\.erb)?$/,
+  use: [{
+    loader: 'svelte-loader',
+    options: {
+      hotReload: false
+    }
+  }],
+}

data/lib/install/svelte.rb

@@ -0,0 +1,29 @@
+require "webpacker/configuration"
+
+say "Copying svelte loader to config/webpack/loaders"
+copy_file "#{__dir__}/loaders/svelte.js", Rails.root.join("config/webpack/loaders/svelte.js").to_s
+
+say "Adding svelte loader to config/webpack/environment.js"
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "const svelte = require('./loaders/svelte')\n",
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.prepend('svelte', svelte)\n",
+  before: "module.exports"
+
+say "Copying Svelte example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/svelte/hello_svelte.js",
+  "#{Webpacker.config.source_entry_path}/hello_svelte.js"
+
+say "Copying Svelte app file to #{Webpacker.config.source_path}"
+copy_file "#{__dir__}/examples/svelte/app.svelte",
+  "#{Webpacker.config.source_path}/app.svelte"
+
+say "Installing all Svelte dependencies"
+run "yarn add svelte svelte-loader"
+
+say "Updating webpack paths to include .svelte file extension"
+insert_into_file Webpacker.config.config_path, "- .svelte\n".indent(4), after: /\s+extensions:\n/
+
+say "Webpacker now supports Svelte 🎉", :green