webpacker 4.3.0 → 5.0.0

data/docs/css.md

@@ -213,11 +213,10 @@ const { environment } = require('@rails/webpacker')
 
 // resolve-url-loader must be used before sass-loader
 environment.loaders.get('sass').use.splice(-1, 0, {
-  loader: 'resolve-url-loader',
-  options: {
-    attempts: 1
-  }
+  loader: 'resolve-url-loader'
 });
+
+module.exports = environment
 ```
 
 ## Working with TypeScript

data/docs/deployment.md

@@ -13,8 +13,8 @@ By default the output will look like this in different environments:
   <script src="http://localhost:8080/calendar-0bd141f6d9360cf4a7f5.js"></script>
   <link rel="stylesheet" media="screen" href="http://localhost:8080/calendar-dc02976b5f94b507e3b6.css">
   <!-- In production or development mode -->
-  <script src="/packs/calendar-0bd141f6d9360cf4a7f5.js"></script>
-  <link rel="stylesheet" media="screen" href="/packs/calendar-dc02976b5f94b507e3b6.css">
+  <script src="/packs/js/calendar-0bd141f6d9360cf4a7f5.js"></script>
+  <link rel="stylesheet" media="screen" href="/packs/css/calendar-dc02976b5f94b507e3b6.css">
 ```
 
 

data/docs/docker.md

@@ -1,6 +1,6 @@
 # Docker
 
-To setup webpacker with a dockerized Rails application is trivial.
+To setup webpacker with a dockerized Rails application.
 
 First, add a new service for webpacker in docker-compose.yml:
 
@@ -9,8 +9,10 @@ version: '3'
 services:
   webpacker:
     build: .
-    env_file:
-      - '.env.docker'
+    environment:
+      - NODE_ENV=development
+      - RAILS_ENV=development
+      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
     command: ./bin/webpack-dev-server
     volumes:
       - .:/webpacker-example-app
@@ -18,15 +20,6 @@ services:
       - '3035:3035'
 ```
 
-Second, change the webpack-dev-server host to the service name of the docker-compose in config/webpacker.yml:
-
-```yaml
-development:
-  <<: *default
-  dev_server:
-    host: webpacker
-```
-
 add nodejs and yarn as dependencies in Dockerfile,
 
 ```dockerfile
@@ -53,12 +46,19 @@ RUN curl -sL https://deb.nodesource.com/setup_8.x | bash \
 # Rest of the commands....
 ```
 
-and create an env file to load environment variables from:
+then add the webpacker host name environment variable to the web/app service:
 
-```env
-NODE_ENV=development
-RAILS_ENV=development
-WEBPACKER_DEV_SERVER_HOST=0.0.0.0
+```Dockerfile
+  web:
+    build:
+      context: .
+    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
+    volumes:
+      - .:/usr/src/app
+    ports:
+      - "3000:3000"
+    environment:
+      - WEBPACKER_DEV_SERVER_HOST=webpacker
 ```
 
 Lastly, rebuild your container:

data/docs/engines.md

@@ -196,5 +196,18 @@ config.middleware.use(
   urls: ["/my-engine-packs"], root: "my_engine/public"
 )
 ```
+or if you prefer to keep your engine-related configuration within the engine itself
+
+```ruby
+# my-engine-root/lib/my-engine/engine.rb
+module MyEngine
+  class Engine < ::Rails:Engine
+    config.app_middleware.use(
+      Rack::Static,
+      urls: ["/my-engine-packs"], root: "my_engine/public"
+    )
+  end
+end
+```
 
 **NOTE:** in the example above we assume that your `public_output_path` is set to `my-engine-packs` in your engine's `webpacker.yml`.

data/docs/integrations.md

@@ -0,0 +1,220 @@
+# Integrations
+
+Webpacker ships with basic out-of-the-box integration for React, Angular, Vue and Elm.
+You can see a list of available commands/tasks by running `bundle exec rails webpacker`:
+
+## React
+
+To use Webpacker with [React](https://facebook.github.io/react/), create a
+new Rails 5.1+ app using `--webpack=react` option:
+
+```bash
+# Rails 5.1+
+rails new myapp --webpack=react
+```
+
+(or run `bundle exec rails webpacker:install:react` in an existing Rails app already
+setup with Webpacker).
+
+The installer will add all relevant dependencies using Yarn, changes
+to the configuration files, and an example React component to your
+project in `app/javascript/packs` so that you can experiment with React right away.
+
+
+## Angular with TypeScript
+
+To use Webpacker with [Angular](https://angular.io/), create a
+new Rails 5.1+ app using `--webpack=angular` option:
+
+```bash
+# Rails 5.1+
+rails new myapp --webpack=angular
+```
+
+(or run `bundle exec rails webpacker:install:angular` on a Rails app already
+setup with Webpacker).
+
+The installer will add the TypeScript and Angular core libraries using Yarn alongside
+a few changes to the configuration files. An example component written in
+TypeScript will also be added to your project in `app/javascript` so that
+you can experiment with Angular right away.
+
+By default, Angular uses a JIT compiler for development environment. This
+compiler is not compatible with restrictive CSP (Content Security
+Policy) environments like Rails 5.2+. You can use Angular AOT compiler
+in development with the [@ngtools/webpack](https://www.npmjs.com/package/@ngtools/webpack#usage) plugin.
+
+Alternatively if you're using Rails 5.2+ you can enable `unsafe-eval` rule for your
+development environment. This can be done in the `config/initializers/content_security_policy.rb`
+with the following code:
+
+```ruby
+Rails.application.config.content_security_policy do |policy|
+  if Rails.env.development?
+    policy.script_src :self, :https, :unsafe_eval
+  else
+    policy.script_src :self, :https
+  end
+end
+```
+
+
+## Vue
+
+To use Webpacker with [Vue](https://vuejs.org/), create a
+new Rails 5.1+ app using `--webpack=vue` option:
+
+```bash
+# Rails 5.1+
+rails new myapp --webpack=vue
+```
+(or run `bundle exec rails webpacker:install:vue` on a Rails app already setup with Webpacker).
+
+The installer will add Vue and its required libraries using Yarn alongside
+automatically applying changes needed to the configuration files. An example component will
+be added to your project in `app/javascript` so that you can experiment with Vue right away.
+
+If you're using Rails 5.2+ you'll need to enable `unsafe-eval` rule for your development environment.
+This can be done in the `config/initializers/content_security_policy.rb` with the following
+configuration:
+
+```ruby
+Rails.application.config.content_security_policy do |policy|
+  if Rails.env.development?
+    policy.script_src :self, :https, :unsafe_eval
+  else
+    policy.script_src :self, :https
+  end
+end
+```
+You can read more about this in the [Vue docs](https://vuejs.org/v2/guide/installation.html#CSP-environments).
+
+### Lazy loading integration
+
+See [docs/es6](docs/es6.md) to know more about Webpack and Webpacker configuration.
+
+For instance, you can lazy load Vue JS components:
+
+Before:
+```js
+import Vue from 'vue'
+import { VCard } from 'vuetify/lib'
+
+Vue.component('VCard', VCard)
+```
+
+After:
+```js
+import Vue from 'vue'
+
+// With destructuring assignment
+Vue.component('VCard', import('vuetify/lib').then(({ VCard }) => VCard)
+
+// Or without destructuring assignment
+Vue.component('OtherComponent', () => import('./OtherComponent'))
+```
+
+You can use it in a Single File Component as well:
+
+```html
+<template>
+  ...
+</template>
+
+<script>
+export default {
+  components: {
+    OtherComponent: () => import('./OtherComponent')
+  }
+}
+</script>
+```
+
+By wrapping the import function into an arrow function, Vue will execute it only when it gets requested, loading the module in that moment.
+
+##### Automatic registration
+
+```js
+/**
+ * The following block of code may be used to automatically register your
+ * Vue components. It will recursively scan this directory for the Vue
+ * components and automatically register them with their "basename".
+ *
+ * Eg. ./components/OtherComponent.vue -> <other-component></other-component>
+ * Eg. ./UI/ButtonComponent.vue -> <button-component></button-component>
+ */
+
+const files = require.context('./', true, /\.vue$/i)
+files.keys().map(key => {
+  const component = key.split('/').pop().split('.')[0]
+
+  // With Lazy Loading
+  Vue.component(component, () => import(`${key}`))
+
+  // Or without Lazy Loading
+  Vue.component(component, files(key).default)
+})
+```
+
+## Elm
+
+To use Webpacker with [Elm](http://elm-lang.org), create a
+new Rails 5.1+ app using `--webpack=elm` option:
+
+```
+# Rails 5.1+
+rails new myapp --webpack=elm
+```
+
+(or run `bundle exec rails webpacker:install:elm` on a Rails app already setup with Webpacker).
+
+The Elm library and its core packages will be added via Yarn and Elm.
+An example `Main.elm` app will also be added to your project in `app/javascript`
+so that you can experiment with Elm right away.
+
+## Svelte
+
+To use Webpacker with [Svelte](https://svelte.dev), create a
+new Rails 5.1+ app using `--webpack=svelte` option:
+
+```
+# Rails 5.1+
+rails new myapp --webpack=svelte
+```
+
+(or run `bundle exec rails webpacker:install:svelte` on a Rails app already setup with Webpacker).
+
+Please play with the [Svelte Tutorial](https://svelte.dev/tutorial/basics) or learn more about its API at https://svelte.dev/docs
+
+## Stimulus
+
+To use Webpacker with [Stimulus](http://stimulusjs.org), create a
+new Rails 5.1+ app using `--webpack=stimulus` option:
+
+```
+# Rails 5.1+
+rails new myapp --webpack=stimulus
+```
+
+(or run `bundle exec rails webpacker:install:stimulus` on a Rails app already setup with Webpacker).
+
+Please read [The Stimulus Handbook](https://stimulusjs.org/handbook/introduction) or learn more about its source code at https://github.com/stimulusjs/stimulus
+
+## CoffeeScript
+
+To add [CoffeeScript](http://coffeescript.org/) support,
+run `bundle exec rails webpacker:install:coffee` on a Rails app already
+setup with Webpacker.
+
+An example `hello_coffee.coffee` file will also be added to your project
+in `app/javascript/packs` so that you can experiment with CoffeeScript right away.
+
+## Erb
+
+To add [Erb](https://apidock.com/ruby/ERB) support in your JS templates,
+run `bundle exec rails webpacker:install:erb` on a Rails app already
+setup with Webpacker.
+
+An example `hello_erb.js.erb` file will also be added to your project
+in `app/javascript/packs` so that you can experiment with Erb-flavoured
+javascript right away.

data/docs/typescript.md

@@ -7,7 +7,6 @@
 
 ```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
@@ -27,7 +26,7 @@ bundle exec rails webpacker:install:typescript
 
 ```js
 module.exports = {
-  test: /\.(ts|tsx)?(\.erb)?$/,
+  test: /\.tsx?(\.erb)?$/,
   use: [{
     loader: 'ts-loader'
   }]
@@ -40,7 +39,7 @@ to
 const PnpWebpackPlugin = require('pnp-webpack-plugin');
 
 module.exports = {
-  test: /\.(ts|tsx)?(\.erb)?$/,
+  test: /\.tsx?(\.erb)?$/,
   use: [{
     loader: 'ts-loader',
     options: PnpWebpackPlugin.tsLoaderOptions({

data/lib/install/loaders/svelte.js

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

data/lib/install/template.rb

@@ -1,7 +1,7 @@
 # Install Webpacker
 copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
 
-puts "Copying webpack core config"
+say "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
 say "Copying postcss.config.js to app root directory"

data/lib/tasks/webpacker/check_node.rake

@@ -1,3 +1,4 @@
+require "semantic_range"
 namespace :webpacker do
   desc "Verifies if Node.js is installed"
   task :check_node do
@@ -6,19 +7,25 @@ namespace :webpacker do
       raise Errno::ENOENT if node_version.blank?
 
       pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
-      node_requirement = JSON.parse(pkg_path.read)["engines"]["node"]
+      node_range = JSON.parse(pkg_path.read)["engines"]["node"]
+      is_valid = SemanticRange.satisfies?(node_version, node_range) rescue false
+      semver_major = node_version[/\d+/] rescue nil
+      is_unstable = semver_major.to_i.odd? rescue false
 
-      requirement = Gem::Requirement.new(node_requirement)
-      version = Gem::Version.new(node_version.strip.tr("v", ""))
+      if is_unstable
+        $stderr.puts "Warning: you are using an unstable release of Node.js (#{node_version}). If you encounter issues with Node.js, consider switching to an Active LTS release. More info: https://docs.npmjs.com/try-the-latest-stable-version-of-node"
+      end
 
-      unless requirement.satisfied_by?(version)
-        $stderr.puts "Webpacker requires Node.js #{requirement} and you are using #{version}"
+      unless is_valid
+        $stderr.puts "Webpacker requires Node.js \"#{node_range}\" and you are using #{node_version}"
         $stderr.puts "Please upgrade Node.js https://nodejs.org/en/download/"
-        $stderr.puts "Exiting!" && exit!
+        $stderr.puts "Exiting!"
+        exit!
       end
     rescue Errno::ENOENT
       $stderr.puts "Node.js not installed. Please download and install Node.js https://nodejs.org/en/download/"
-      $stderr.puts "Exiting!" && exit!
+      $stderr.puts "Exiting!"
+      exit!
     end
   end
 end

data/lib/tasks/webpacker/check_yarn.rake

@@ -1,3 +1,4 @@
+require "semantic_range"
 namespace :webpacker do
   desc "Verifies if Yarn is installed"
   task :check_yarn do
@@ -6,19 +7,25 @@ namespace :webpacker do
       raise Errno::ENOENT if yarn_version.blank?
 
       pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
-      yarn_requirement = JSON.parse(pkg_path.read)["engines"]["yarn"]
+      yarn_range = JSON.parse(pkg_path.read)["engines"]["yarn"]
+      is_valid = SemanticRange.satisfies?(yarn_version, yarn_range) rescue false
+      is_unsupported = SemanticRange.satisfies?(yarn_version, ">=2.0.0") rescue false
 
-      requirement = Gem::Requirement.new(yarn_requirement)
-      version = Gem::Version.new(yarn_version)
-
-      unless requirement.satisfied_by?(version)
-        $stderr.puts "Webpacker requires Yarn #{requirement} and you are using #{version}"
-        $stderr.puts "Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/"
-        $stderr.puts "Exiting!" && exit!
+      unless is_valid
+        $stderr.puts "Webpacker requires Yarn \"#{yarn_range}\" and you are using #{yarn_version}"
+        if is_unsupported
+          $stderr.puts "This version of Webpacker does not support Yarn #{yarn_version}. Please downgrade to a supported version of Yarn https://yarnpkg.com/lang/en/docs/install/"
+          $stderr.puts "For information on using Webpacker with Yarn 2.0, see https://github.com/rails/webpacker/issues/2112"
+        else
+          $stderr.puts "Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/"
+        end
+        $stderr.puts "Exiting!"
+        exit!
       end
     rescue Errno::ENOENT
       $stderr.puts "Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/"
-      $stderr.puts "Exiting!" && exit!
+      $stderr.puts "Exiting!"
+      exit!
     end
   end
 end