Move out integration loaders (#1103)

CHANGELOG.md

@@ -1,3 +1,64 @@
+## [Unreleased]
+
+### Breaking changes
+
+If you are using react, vue, angular, elm, erb or coffeescript inside your
+`packs/` please re-run the integration installers as described in the README.
+
+```bash
+bundle exec rails webpacker:install:react
+bundle exec rails webpacker:install:vue
+bundle exec rails webpacker:install:angular
+bundle exec rails webpacker:install:elm
+bundle exec rails webpacker:install:erb
+bundle exec rails webpacker:install::coffee
+```
+
+Or simply copy required loaders used in your app into your `config/webpack/loaders/`
+directory and add it to webpack build from `config/webpack/environment.js`
+
+```js
+const erb =  require('./loaders/erb')
+const elm =  require('./loaders/elm')
+const typescript =  require('./loaders/typescript')
+const vue =  require('./loaders/vue')
+const coffee =  require('./loaders/coffee')
+
+environment.loaders.append('coffee', coffee)
+environment.loaders.append('vue', vue)
+environment.loaders.append('typescript', typescript)
+environment.loaders.append('elm', elm)
+environment.loaders.append('erb', erb)
+```
+
+### Added (npm module)
+
+- Upgrade gems and webpack dependencies
+
+- `postcss-import` in place of `postcss-smart-import`
+
+
+### Removed (npm module)
+
+- `postcss-smart-import`, `coffee-loader`, `url-loader`, `rails-erb-loader` as dependencies
+
+
+### Fixed (npm module)
+
+- Return native array type for `ConfigList` [#1098](https://github.com/rails/webpacker/pull/1098)
+
+
+### Added (Gem)
+
+- New `asset_pack_url` helper [#1102](https://github.com/rails/webpacker/pull/1102)
+
+- New installers for coffee and erb
+
+```bash
+bundle exec rails webpacker:install:erb
+bundle exec rails webpacker:install::coffee
+```
+
 ## [3.1.1] - 2017-12-11
 
 ### Fixed

README.md

@@ -30,6 +30,8 @@ in which case you may not even need the asset pipeline. This is mostly relevant
   - [Angular with TypeScript](#angular-with-typescript)
   - [Vue](#vue)
   - [Elm](#elm)
+  - [Coffeescript](#coffeescript)
+  - [Erb](#erb)
 - [Paths](#paths)
   - [Resolved](#resolved)
   - [Watched](#watched)
@@ -323,6 +325,25 @@ The Elm library and core packages will be added via Yarn and Elm itself.
 An example `Main.elm` app will also be added to your project in `app/javascript`
 so that you can experiment with Elm right away.
 
+### 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.
+
 
 ## Paths
 

docs/troubleshooting.md

@@ -99,3 +99,21 @@ Rails.application.config.assets.js_compressor = :uglifier
 #Rails.application.config.assets.js_compressor = :uglifier
 
 ```
+
+### Angular: WARNING in ./node_modules/@angular/core/esm5/core.js, Critical dependency: the request of a dependency is an expression
+
+To silent these warnings, please update `config/webpack/environment.js`
+
+```js
+// environment.js
+const webpack = require('webpack')
+const { resolve } = require('path')
+const { environment, config } = require('@rails/webpacker')
+
+environment.plugins.set('ContextReplacement',
+  new webpack.ContextReplacementPlugin(
+    /angular(\\|\/)core(\\|\/)(@angular|esm5)/,
+    resolve(config.source_path)
+  )
+)
+```

docs/webpack.md

@@ -145,6 +145,33 @@ environment.loaders.insert('svg', {
 }, { before: 'file' })
 ```
 
+
+### Url Loader
+
+```js
+// config/webpack/loaders/url.js
+
+const { assetHost } = require('@rails/webpacker')
+
+module.exports = {
+  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+  use: [{
+    loader: 'url-loader',
+    options: {
+      limit: 10000,
+      name: '[name]-[hash].[ext]',
+      publicPath: assetHost.publicPathWithHost
+    }
+  }]
+}
+
+// config/webpack/environment.js
+
+const { environment } = require('@rails/webpacker')
+
+environment.loaders.prepend('url', url)
+```
+
 ### Overriding Loader Options in webpack 3+ (for CSS Modules etc.)
 
 In webpack 3+, if you'd like to specify additional or different options for a loader, edit `config/webpack/environment.js` and provide an options object to override. This is similar to the technique shown above, but the following example shows specifically how to apply CSS Modules, which is what you may be looking for:

lib/install/angular.rb

@@ -1,5 +1,17 @@
 require "webpacker/configuration"
 
+say "Copying angular loader to config/webpack/loaders"
+copy_file "#{__dir__}/loaders/typescript.js", Rails.root.join("config/webpack/loaders/typescript.js").to_s
+
+say "Adding typescript loader to config/webpack/environment.js"
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "const typescript =  require('./loaders/typescript')\n",
+  after: "const { environment } = require('@rails/webpacker')\n"
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.append('typescript', typescript)\n",
+  before: "module.exports"
+
 say "Copying angular example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/angular/hello_angular.js", "#{Webpacker.config.source_entry_path}/hello_angular.js"
 

lib/install/coffee.rb

@@ -0,0 +1,22 @@
+require "webpacker/configuration"
+
+say "Copying coffee loader to config/webpack/loaders"
+copy_file "#{__dir__}/loaders/coffee.js", Rails.root.join("config/webpack/loaders/coffee.js").to_s
+
+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: "const { environment } = require('@rails/webpacker')\n"
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.append('coffee', coffee)\n",
+  before: "module.exports"
+
+say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/coffee/hello_coffee.coffee",
+  "#{Webpacker.config.source_entry_path}/hello_coffee.coffee"
+
+say "Installing all Coffeescript dependencies"
+run "yarn add [email protected] coffee-loader"
+
+say "Webpacker now supports Coffeeescript 🎉", :green

lib/install/elm.rb

@@ -1,5 +1,17 @@
 require "webpacker/configuration"
 
+say "Copying elm loader to config/webpack/loaders"
+copy_file "#{__dir__}/loaders/elm.js", Rails.root.join("config/webpack/loaders/elm.js").to_s
+
+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: "const { environment } = require('@rails/webpacker')\n"
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.append('elm', elm)\n",
+  before: "module.exports"
+
 say "Copying Elm example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/elm/hello_elm.js",
   "#{Webpacker.config.source_entry_path}/hello_elm.js"

lib/install/erb.rb

@@ -0,0 +1,22 @@
+require "webpacker/configuration"
+
+say "Copying vue loader to config/webpack/loaders"
+copy_file "#{__dir__}/loaders/erb.js", Rails.root.join("config/webpack/loaders/erb.js").to_s
+
+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: "const { environment } = require('@rails/webpacker')\n"
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.append('erb', erb)\n",
+  before: "module.exports"
+
+say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/erb/hello_erb.js.erb",
+  "#{Webpacker.config.source_entry_path}/hello_erb.js.erb"
+
+say "Installing all Erb dependencies"
+run "yarn add rails-erb-loader"
+
+say "Webpacker now supports Erb in JS 🎉", :green

lib/install/examples/coffee/hello_coffee.coffee

@@ -0,0 +1,4 @@
+# Run this example by adding <%%= javascript_pack_tag 'hello_coffee' %> to the head of your layout file,
+# like app/views/layouts/application.html.erb.
+
+console.log 'Hello world from coffeescript'

lib/install/examples/erb/hello_erb.js.erb

@@ -0,0 +1,6 @@
+// Run this example by adding <%%= javascript_pack_tag 'hello_erb' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+
+<% name = 'Erb' %>
+
+console.log('Hello world from <%= name %>')

package/rules/vue.js → lib/install/loaders/vue.js

@@ -1,4 +1,4 @@
-const { dev_server: devServer } = require('../config')
+const { dev_server: devServer } = require('@rails/webpacker').config
 
 const isProduction = process.env.NODE_ENV === 'production'
 const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))

lib/install/vue.rb

@@ -1,5 +1,17 @@
 require "webpacker/configuration"
 
+say "Copying vue loader to config/webpack/loaders"
+copy_file "#{__dir__}/loaders/vue.js", Rails.root.join("config/webpack/loaders/vue.js").to_s
+
+say "Adding vue loader to config/webpack/environment.js"
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "const vue =  require('./loaders/vue')\n",
+  after: "const { environment } = require('@rails/webpacker')\n"
+
+insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.append('vue', vue)\n",
+  before: "module.exports"
+
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/vue/hello_vue.js",
   "#{Webpacker.config.source_entry_path}/hello_vue.js"

lib/tasks/installers.rake

@@ -2,7 +2,9 @@ installers = {
   "Angular": :angular,
   "Elm": :elm,
   "React": :react,
-  "Vue": :vue
+  "Vue": :vue,
+  "Erb": :erb,
+  "Coffee": :coffee
 }.freeze
 
 namespace :webpacker do

lib/tasks/webpacker.rake

@@ -10,7 +10,9 @@ tasks = {
   "webpacker:install:react"           => "Installs and setup example React component",
   "webpacker:install:vue"             => "Installs and setup example Vue component",
   "webpacker:install:angular"         => "Installs and setup example Angular component",
-  "webpacker:install:elm"             => "Installs and setup example Elm component"
+  "webpacker:install:elm"             => "Installs and setup example Elm component",
+  "webpacker:install:erb"             => "Installs Erb loader with an example",
+  "webpacker:install:coffee"          => "Installs CoffeeScript loader with an example"
 }.freeze
 
 desc "Lists all available tasks in Webpacker"

package.json

@@ -20,7 +20,6 @@
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
-    "coffee-loader": "^0.9.0",
     "compression-webpack-plugin": "^1.0.1",
     "css-loader": "^0.28.7",
     "extract-text-webpack-plugin": "^3.0.2",
@@ -32,10 +31,8 @@
     "postcss-cssnext": "^3.0.2",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.9",
-    "rails-erb-loader": "^5.2.1",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",
-    "url-loader": "^0.6.2",
     "webpack": "^3.10.0",
     "webpack-manifest-plugin": "^1.3.2"
   },
@@ -53,9 +50,6 @@
       "<rootDir>/package"
     ]
   },
-  "peerDependencies": {
-    "coffeescript": ">= 1.12.7 || >= 2.x"
-  },
   "scripts": {
     "test": "jest",
     "lint": "eslint {package,lib}/"

package/environment.js

@@ -104,9 +104,7 @@ module.exports = class Environment {
 
       module: {
         strictExportPresence: true,
-        rules: [
-          { oneOf: this.loaders.values() }
-        ]
+        rules: this.loaders.values()
       },
 
       plugins: this.plugins.values(),

package/rules/index.js

@@ -1,23 +1,11 @@
 const babel = require('./babel')
-const coffee = require('./coffee')
-const elm = require('./elm')
-const erb = require('./erb')
 const file = require('./file')
-const url = require('./url')
 const css = require('./css')
 const sass = require('./sass')
-const typescript = require('./typescript')
-const vue = require('./vue')
 
 module.exports = {
-  url,
   babel,
-  coffee,
-  elm,
-  erb,
   css,
   sass,
-  typescript,
-  vue,
   file
 }