webpacker 3.0.1 → 3.0.2

data/docs/testing.md

@@ -1,5 +1,108 @@
 # Testing
 
+## Karma setup for Typescript
+
+Webpacker does not setup `Karma` by default, so you've to manually install it along with its dependencies as per your need. Following things marked as optional can be used to fancify the test results (Recommended).
+
+```js
+// package.json
+"scripts": {
+  "test": "NODE_ENV=test karma start"
+},
+"dependencies": {
+  "typescript": "^2.5.2",
+  "ts-loader": "^2.3.7"
+},
+"devDependencies": {
+  "karma": "^1.7.1",
+  "karma-webpack": "^2.0.4",
+  "karma-chrome-launcher": "^2.2.0",
+  "karma-jquery": "^0.2.2",
+  "karma-jasmine": "^1.1.0",
+  "karma-jasmine-jquery": "^0.1.1",
+  "jasmine-core": "^2.8.0",
+  [optional] "karma-coverage": "^1.1.1",
+  [optional] "karma-coverage-istanbul-reporter": "^1.3.0",
+  [optional] "karma-spec-reporter": "0.0.31",
+  [optional] "istanbul-instrumenter-loader": "^3.0.0",
+}
+```
+
+It is beneficial to use the same webpack configuration file (generated by webpacker) in Karma configuration to avoid redundancy. Following line tells Karma not to write transpiled source files onto filesystem while testing to avoid `Error: EACCES: permission denied, mkdir '/_karma_webpack_' ` error.
+
+```js
+// config/webpack/test.js
+const { environment } = require('@rails/webpacker')
+environment.plugins.get('Manifest').opts.writeToFileEmit = process.env.NODE_ENV !== 'test'
+module.exports = environment
+```
+
+Finally, update `karma.conf.js` to read the same `test.js` file. Then inject a new rule a.k.a. loader in the existing ones (needed only if you have installed `istanbul-instrumenter-loader`) to generate a coverage report under `/coverage` directory. Rest of the things are mandatory (few marked as optional wherever appropriate).
+
+```js
+// karma.conf.js
+const webpackConfig = require('./config/webpack/test.js')
+webpackConfig.module.rules.push({
+  test: /\.ts$/,
+  enforce: "post",
+  loader: "istanbul-instrumenter-loader",
+  query: {
+    esModules: true
+  },
+  exclude: ["node_modules", /\.test\.ts$/]
+}) /* optional */
+
+module.exports = function(config) {
+  config.set({
+    basePath: "",
+    frameworks: ["jquery-3.2.1", "jasmine-jquery", "jasmine"],
+    plugins: [
+      "karma-jquery",
+      "karma-jasmine-jquery",
+      "karma-jasmine",
+      "karma-webpack",
+      "karma-chrome-launcher",
+      "karma-coverage-istanbul-reporter" /* optional */,
+      "karma-spec-reporter" /* optional */
+    ],
+    files: (function () {
+      let files = [ "/* add spec files */" ]
+      for (let entry in webpackConfig.entry) {
+        files.push({
+          pattern: webpackConfig.entry[entry],
+          watched: true,
+          included: false,
+          served: true
+        })
+      }
+      return files;
+    })(),
+    exclude: [],
+    webpack: webpackConfig,
+    preprocessors: (function() {
+      let preprocessors = {
+        "/* add spec files */" : ["webpack"]
+      }
+      for (let entry in webpackConfig.entry) {
+        preprocessors[webpackConfig.entry[entry]] = ["webpack"]
+      }
+      return preprocessors;
+    })(),
+    mime: { "text/x-typescript": ["ts"] },
+    reporters: ["progress", "coverage-istanbul" /* optional */],
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly', 'text-summary' ],
+      fixWebpackSourcePaths: true
+    } /* optional */,
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ["Chrome"],
+    singleRun: true
+  });
+};
+```
 
 ## Lazy compilation
 

data/docs/typescript.md

@@ -28,6 +28,7 @@ yarn add ts-loader typescript @types/react @types/react-dom
   "exclude": [
     "**/*.spec.ts",
     "node_modules",
+    "vendor",
     "public"
   ],
   "compileOnSave": false
@@ -55,7 +56,7 @@ yarn add html-loader
 2. Add html-loader to `config/webpack/environment.js`
 
 ```js
-environment.loaders.add('html', {
+environment.loaders.set('html', {
   test: /\.html$/,
   use: [{
     loader: 'html-loader',

data/docs/webpack-dev-server.md

@@ -17,7 +17,7 @@ Now if you refresh your rails view everything should work as expected.
 ## HOT module replacement
 
 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.
+you can toggle it by setting `dev_server/hmr` option inside `webpacker.yml`.
 
 Checkout this guide for more information:
 
@@ -30,3 +30,46 @@ more information:
 
 **Note:** Don't forget to disable `HMR` if you are not running `webpack-dev-server`
 otherwise you will get not found error for stylesheets.
+
+
+## Nginx
+
+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
+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)).
+
+To do so, set the `public` option in `config/webpacker.yml`:
+
+```yaml
+development:
+  # ...
+  dev_server:
+    # ...
+    public: myapp.dev
+```
+
+You may also need to add the following location block to your local Nginx server
+configuration for your Rails app.
+
+```
+server {
+    listen 80;
+    server_name myapp.dev
+
+    # Proxy webpack dev server websocket requests
+    location /sockjs-node {
+        proxy_redirect off;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_pass http://127.0.0.1:3035; # change to match your webpack-dev-server host
+    }
+
+    # ...
+}
+```

data/docs/webpack.md

@@ -8,7 +8,7 @@ production environments in `config/webpack/*.js`. You can configure each individ
 environment in their respective files or configure them all in the base
 `config/webpack/environment.js` file.
 
-By default, you shouldn't have to make any changes to `config/webpack/*.js`
+By default, you don't need to make any changes to `config/webpack/*.js`
 files since it's all standard production-ready configuration. However,
 if you do need to customize or add a new loader, this is where you would go.
 
@@ -36,6 +36,14 @@ const customConfig = require('./custom')
 module.exports = merge(environment.toWebpackConfig(), customConfig)
 ```
 
+If you need access to configs within Webpacker's configuration, you can import them like this:
+```js
+const config = require('@rails/webpacker/package/config');
+const asset_host = require('@rails/webpacker/package/asset_host');
+
+console.log(asset_host.publicPathWithHost);
+```
+
 **Note:** You will have to merge custom config to all env where you want that config
 to be available. In above case, it will be applied to development environment.
 
@@ -78,6 +86,34 @@ babelLoader.options.cacheDirectory = false
 module.exports = environment
 ```
 
+### 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:
+
+```javascript
+const { environment } = require('@rails/webpacker')
+const merge = require('webpack-merge')
+
+const myCssLoaderOptions = {
+  modules: true,
+  sourceMap: true,
+  localIdentName: '[name]__[local]___[hash:base64:5]'
+}
+
+const CSSLoader = environment.loaders.get('style').use.find(el => el.loader === 'css-loader')
+
+CSSLoader.options = merge(CSSLoader.options, myCssLoaderOptions)
+
+module.exports = environment
+```
+
+See [issue #756](https://github.com/rails/webpacker/issues/756#issuecomment-327148547) for additional discussion of this.
+
+For this to work, don't forget to use the `stylesheet_pack_tag`, for example:
+
+```
+<%= stylesheet_pack_tag 'YOUR_PACK_NAME_HERE' %>
+```
 
 ## Plugins
 

data/exe/webpack

@@ -0,0 +1,8 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"] ||= ENV["RAILS_ENV"]
+
+require "webpacker"
+require "webpacker/webpack_runner"
+Webpacker::WebpackRunner.run(ARGV)

data/exe/webpack-dev-server

@@ -0,0 +1,8 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"] ||= ENV["RAILS_ENV"]
+
+require "webpacker"
+require "webpacker/dev_server_runner"
+Webpacker::DevServerRunner.run(ARGV)

data/lib/install/config/webpacker.yml

@@ -10,7 +10,7 @@ default: &default
   # ['app/assets', 'engine/foo/app/assets']
   resolved_paths: []
 
-  # Reload manifest.json on all requests so we reload latest compiled packs
+  # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
   extensions:
@@ -33,11 +33,18 @@ development:
   <<: *default
   compile: true
 
+  # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
+    https: false
     host: localhost
     port: 3035
+    public: localhost:3035
     hmr: false
-    https: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    disable_host_check: true
+    use_local_ip: false
 
 test:
   <<: *default

data/lib/install/elm.rb

@@ -1,13 +1,14 @@
 require "webpacker/configuration"
 
-puts "Copying elm example entry file to #{Webpacker.config.source_entry_path}"
-copy_file "#{__dir__}/examples/elm/Main.elm", "#{Webpacker.config.source_entry_path}/Main.elm"
-
-puts "Copying elm app file to #{Webpacker.config.source_entry_path}"
+puts "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"
+  "#{Webpacker.config.source_entry_path}/hello_elm.js"
+
+puts "Copying Elm app file to #{Webpacker.config.source_path}"
+copy_file "#{__dir__}/examples/elm/Main.elm",
+  "#{Webpacker.config.source_path}/Main.elm"
 
-puts "Installing all elm dependencies"
+puts "Installing all Elm dependencies"
 run "yarn add elm elm-webpack-loader"
 run "yarn add --dev elm-hot-loader"
 run "yarn run elm package install -- --yes"
@@ -15,10 +16,11 @@ run "yarn run elm package install -- --yes"
 puts "Updating Webpack paths to include Elm file extension"
 insert_into_file Webpacker.config.config_path, "    - .elm\n", after: /extensions:\n/
 
-puts "Updating elm source location"
-gsub_file "elm-package.json", /\"\.\"\n/, %("#{Webpacker.config.source_entry_path}"\n)
+puts "Updating Elm source location"
+gsub_file "elm-package.json", /\"\.\"\n/,
+  %("#{Webpacker.config.source_path.relative_path_from(Rails.root)}"\n)
 
 puts "Updating .gitignore to include elm-stuff folder"
 insert_into_file ".gitignore", "/elm-stuff\n", before: "/node_modules\n"
 
-puts "Webpacker now supports elm 🎉"
+puts "Webpacker now supports Elm 🎉"

data/lib/install/examples/elm/hello_elm.js

@@ -1,7 +1,8 @@
-// Run this example by adding <%= javascript_pack_tag "hello_elm" %> to the head of your layout
-// file, like app/views/layouts/application.html.erb. It will render "Hello Elm!" within the page.
+// Run this example by adding <%= javascript_pack_tag "hello_elm" %> to the
+// head of your layout file, like app/views/layouts/application.html.erb.
+// It will render "Hello Elm!" within the page.
 
-import Elm from './Main'
+import Elm from '../Main'
 
 document.addEventListener('DOMContentLoaded', () => {
   const target = document.createElement('div')

data/lib/install/examples/vue/hello_vue.js

@@ -6,7 +6,7 @@
 // All it does is render <div>Hello Vue</div> at the bottom of the page.
 
 import Vue from 'vue'
-import App from './app.vue'
+import App from '../app.vue'
 
 document.addEventListener('DOMContentLoaded', () => {
   document.body.appendChild(document.createElement('hello'))

data/lib/install/template.rb

@@ -13,10 +13,8 @@ copy_file "#{__dir__}/config/.babelrc", ".babelrc"
 puts "Creating javascript app source directory"
 directory "#{__dir__}/javascript", Webpacker.config.source_path
 
-puts "Copying binstubs"
-directory "#{__dir__}/bin", "bin"
-
-chmod "bin", 0755 & ~File.umask, verbose: false
+puts "Installing binstubs"
+run "bundle binstubs webpacker"
 
 if File.exists?(".gitignore")
   append_to_file ".gitignore", <<-EOS
@@ -27,7 +25,7 @@ EOS
 end
 
 puts "Installing all JavaScript dependencies"
-run "yarn add @rails/webpacker"
+run "yarn add @rails/webpacker coffeescript@1.12.7"
 
 puts "Installing dev server for live reloading"
 run "yarn add --dev webpack-dev-server"

data/lib/install/vue.rb

@@ -1,12 +1,14 @@
 require "webpacker/configuration"
 
 puts "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"
+copy_file "#{__dir__}/examples/vue/hello_vue.js",
+  "#{Webpacker.config.source_entry_path}/hello_vue.js"
 
-puts "Copying vue app file to #{Webpacker.config.source_entry_path}"
-copy_file "#{__dir__}/examples/vue/app.vue", "#{Webpacker.config.source_entry_path}/app.vue"
+puts "Copying Vue app file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/vue/app.vue",
+  "#{Webpacker.config.source_path}/app.vue"
 
-puts "Installing all vue dependencies"
+puts "Installing all Vue dependencies"
 run "yarn add vue vue-loader vue-template-compiler"
 
-puts "Webpacker now supports vue.js 🎉"
+puts "Webpacker now supports Vue.js 🎉"

data/lib/tasks/webpacker/check_node.rake

@@ -2,9 +2,12 @@ namespace :webpacker do
   desc "Verifies if Node.js is installed"
   task :check_node do
     begin
-      node_version = `node -v`
-      node_version = `nodejs -v` if node_version.blank?
-      raise Errno::ENOENT if node_version.blank?
+      begin
+        node_version = `node -v`
+      rescue Errno::ENOENT
+        node_version = `nodejs -v`
+        raise Errno::ENOENT if node_version.blank?
+      end
 
       pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
       node_requirement = JSON.parse(pkg_path.read)["engines"]["node"]

data/lib/webpacker/configuration.rb

@@ -45,6 +45,10 @@ class Webpacker::Configuration
     root_path.join(fetch(:cache_path))
   end
 
+  def extensions
+    fetch(:extensions)
+  end
+
   private
     def fetch(key)
       data.fetch(key, defaults[key])

data/lib/webpacker/dev_server.rb

@@ -1,4 +1,8 @@
 class Webpacker::DevServer
+  # Configure dev server connection timeout (in seconds), default: 0.01
+  # Webpacker.dev_server.connect_timeout = 1
+  mattr_accessor(:connect_timeout) { 0.01 }
+
   delegate :config, to: :@webpacker
 
   def initialize(webpacker)
@@ -6,14 +10,19 @@ class Webpacker::DevServer
   end
 
   def running?
-    Socket.tcp(host, port, connect_timeout: 1).close
+    Socket.tcp(host, port, connect_timeout: connect_timeout).close
     true
-  rescue Errno::ECONNREFUSED, NoMethodError
+  rescue
     false
   end
 
   def hot_module_replacing?
-    fetch(:hmr)
+    case fetch(:hmr)
+    when true, "true"
+      true
+    else
+      false
+    end
   end
 
   def host
@@ -25,7 +34,12 @@ class Webpacker::DevServer
   end
 
   def https?
-    fetch(:https)
+    case fetch(:https)
+    when true, "true"
+      true
+    else
+      false
+    end
   end
 
   def protocol
@@ -38,7 +52,7 @@ class Webpacker::DevServer
 
   private
     def fetch(key)
-      config.dev_server.fetch(key, defaults[key])
+      ENV["WEBPACKER_DEV_SERVER_#{key.upcase}"] || config.dev_server.fetch(key, defaults[key])
     end
 
     def defaults