webpacker 3.1.1 → 3.2.0

data/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

data/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"

data/lib/tasks/webpacker/check_node.rake

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

data/lib/webpacker/compiler.rb

@@ -65,7 +65,12 @@ class Webpacker::Compiler
     end
 
     def default_watched_paths
-      ["#{config.source_path}/**/*", "yarn.lock", "package.json", "config/webpack/**/*"].freeze
+      [
+        *config.resolved_paths_globbed,
+        "#{config.source_path.relative_path_from(Rails.root)}/**/*",
+        "yarn.lock", "package.json",
+        "config/webpack/**/*"
+      ].freeze
     end
 
     def compilation_digest_path

data/lib/webpacker/configuration.rb

@@ -21,6 +21,14 @@ class Webpacker::Configuration
     root_path.join(fetch(:source_path))
   end
 
+  def resolved_paths
+    fetch(:resolved_paths)
+  end
+
+  def resolved_paths_globbed
+    resolved_paths.map { |p| "#{p}/**/*" }
+  end
+
   def source_entry_path
     source_path.join(fetch(:source_entry_path))
   end

data/lib/webpacker/helper.rb

@@ -1,6 +1,6 @@
 module Webpacker::Helper
-  # Computes the full path for a given Webpacker asset.
-  # Return relative path using manifest.json and passes it to asset_url helper
+  # Computes the relative path for a given Webpacker asset.
+  # Return relative path using manifest.json and passes it to asset_path helper
   # This will use asset_path internally, so most of their behaviors will be the same.
   #
   # Example:
@@ -9,6 +9,18 @@ module Webpacker::Helper
   def asset_pack_path(name, **options)
     asset_path(Webpacker.manifest.lookup!(name), **options)
   end
+
+  # Computes the absolute path for a given Webpacker asset.
+  # Return absolute path using manifest.json and passes it to asset_url helper
+  # This will use asset_url internally, so most of their behaviors will be the same.
+  #
+  # Example:
+  #
+  #   <%= asset_pack_url 'calendar.css' %> # => "http://example.com/packs/calendar-1016838bab065ae1e122.css"
+  def asset_pack_url(name, **options)
+    asset_url(Webpacker.manifest.lookup!(name), **options)
+  end
+
   # Creates a script tag that references the named pack file, as compiled by webpack per the entries list
   # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
   # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "3.1.1".freeze
+  VERSION = "3.2.0".freeze
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -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",
@@ -30,17 +29,15 @@
     "node-sass": "^4.7.2",
     "path-complete-extname": "^0.1.0",
     "postcss-cssnext": "^3.0.2",
+    "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.9",
-    "postcss-smart-import": "^0.7.5",
-    "rails-erb-loader": "^5.2.1",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.8.1",
+    "webpack": "^3.10.0",
     "webpack-manifest-plugin": "^1.3.2"
   },
   "devDependencies": {
-    "eslint": "^4.11.0",
+    "eslint": "^4.13.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
@@ -53,9 +50,6 @@
       "<rootDir>/package"
     ]
   },
-  "peerDependencies": {
-    "coffeescript": ">= 1.12.7 || >= 2.x"
-  },
   "scripts": {
     "test": "jest",
     "lint": "eslint {package,lib}/"

data/package/__tests__/environment.js

@@ -0,0 +1,74 @@
+/* global test expect, describe, afterAll, beforeEach */
+
+// environment.js expects to find config/webpacker.yml and resolved modules from
+// the root of a Rails project
+
+const chdirApp = () => process.chdir('test/test_app')
+const chdirCwd = () => process.chdir(process.cwd())
+chdirApp()
+
+const { resolve } = require('path')
+const rules = require('../rules')
+const { ConfigList } = require('../config_types')
+const Environment = require('../environment')
+
+describe('Environment', () => {
+  afterAll(chdirCwd)
+
+  let environment
+
+  describe('toWebpackConfig', () => {
+    beforeEach(() => {
+      environment = new Environment()
+    })
+
+    test('should return entry', () => {
+      const config = environment.toWebpackConfig()
+      expect(config.entry.application).toEqual(resolve('app', 'javascript', 'packs', 'application.js'))
+    })
+
+    test('should return output', () => {
+      const config = environment.toWebpackConfig()
+      expect(config.output.filename).toEqual('[name]-[chunkhash].js')
+      expect(config.output.chunkFilename).toEqual('[name]-[chunkhash].chunk.js')
+      expect(config.output.path).toEqual(resolve('public', 'packs-test'))
+      expect(config.output.publicPath).toEqual('/packs-test/')
+    })
+
+    test('should return default loader rules for each file in config/loaders', () => {
+      const config = environment.toWebpackConfig()
+      const defaultRules = Object.keys(rules)
+      const configRules = config.module.rules
+
+      expect(defaultRules.length).toBeGreaterThan(1)
+      expect(configRules.length).toEqual(defaultRules.length)
+    })
+
+    test('should return default plugins', () => {
+      const config = environment.toWebpackConfig()
+      expect(config.plugins.length).toEqual(4)
+    })
+
+    test('should return default resolveLoader', () => {
+      const config = environment.toWebpackConfig()
+      expect(config.resolveLoader.modules).toEqual(['node_modules'])
+    })
+
+    test('should return default resolve.modules with additions', () => {
+      const config = environment.toWebpackConfig()
+      expect(config.resolve.modules).toEqual([
+        resolve('app', 'javascript'),
+        resolve('app/assets'),
+        resolve('/etc/yarn'),
+        'node_modules'
+      ])
+    })
+
+    test('returns plugins property as Array', () => {
+      const config = environment.toWebpackConfig()
+
+      expect(config.plugins).toBeInstanceOf(Array)
+      expect(config.plugins).not.toBeInstanceOf(ConfigList)
+    })
+  })
+})

data/package/config.js

@@ -28,4 +28,7 @@ if (config.dev_server) {
   })
 }
 
+config.outputPath = resolve('public', config.public_output_path)
+config.publicPath = `/${config.public_output_path}/`.replace(/([^:]\/)\/+/g, '$1')
+
 module.exports = config

data/package/config_types/config_list.js

@@ -3,6 +3,8 @@
   * @extends { Array }
 */
 class ConfigList extends Array {
+  static get [Symbol.species]() { return Array }
+
   get(key) {
     const index = this.getIndex(key, true)
     return this[index].value

data/package/environment.js

@@ -15,7 +15,6 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const { ConfigList, ConfigObject } = require('./config_types')
 const rules = require('./rules')
 const config = require('./config')
-const assetHost = require('./asset_host')
 
 const getLoaderList = () => {
   const result = new ConfigList()
@@ -28,7 +27,7 @@ const getPluginList = () => {
   result.append('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
   result.append('CaseSensitivePaths', new CaseSensitivePathsPlugin())
   result.append('ExtractText', new ExtractTextPlugin('[name]-[contenthash].css'))
-  result.append('Manifest', new ManifestPlugin({ publicPath: assetHost.publicPath, writeToFileEmit: true }))
+  result.append('Manifest', new ManifestPlugin({ publicPath: config.publicPath, writeToFileEmit: true }))
   return result
 }
 
@@ -56,10 +55,10 @@ const getEntryObject = () => {
 const getModulePaths = () => {
   const result = new ConfigList()
   result.append('source', resolve(config.source_path))
-  result.append('node_modules', 'node_modules')
   if (config.resolved_paths) {
-    config.resolved_paths.forEach(path => result.append(basename(path), path))
+    config.resolved_paths.forEach(path => result.append(path, resolve(path)))
   }
+  result.append('node_modules', 'node_modules')
   return result
 }
 
@@ -68,8 +67,8 @@ const getBaseConfig = () =>
     output: {
       filename: '[name]-[chunkhash].js',
       chunkFilename: '[name]-[chunkhash].chunk.js',
-      path: assetHost.path,
-      publicPath: assetHost.publicPath
+      path: config.outputPath,
+      publicPath: config.publicPath
     },
 
     resolve: {
@@ -104,9 +103,7 @@ module.exports = class Environment {
 
       module: {
         strictExportPresence: true,
-        rules: [
-          { oneOf: this.loaders.values() }
-        ]
+        rules: this.loaders.values()
       },
 
       plugins: this.plugins.values(),

data/package/environments/development.js

@@ -1,7 +1,6 @@
 const webpack = require('webpack')
 const Environment = require('../environment')
-const { dev_server: devServer } = require('../config')
-const assetHost = require('../asset_host')
+const { dev_server: devServer, outputPath: contentBase, publicPath } = require('../config')
 
 module.exports = class extends Environment {
   constructor() {
@@ -27,11 +26,11 @@ module.exports = class extends Environment {
         port: devServer.port,
         https: devServer.https,
         hot: devServer.hmr,
-        contentBase: assetHost.path,
+        contentBase,
         inline: devServer.inline,
         useLocalIp: devServer.use_local_ip,
         public: devServer.public,
-        publicPath: assetHost.publicPath,
+        publicPath,
         historyApiFallback: {
           disableDotRule: true
         },

data/package/index.js

@@ -5,7 +5,6 @@ const { resolve } = require('path')
 const { existsSync } = require('fs')
 const Environment = require('./environment')
 const config = require('./config')
-const assetHost = require('./asset_host')
 const loaders = require('./rules')
 
 const createEnvironment = () => {
@@ -17,5 +16,5 @@ const createEnvironment = () => {
 const environment = createEnvironment()
 
 module.exports = {
-  environment, config, assetHost, loaders, Environment
+  environment, config, loaders, Environment
 }

data/package/rules/file.js

@@ -1,6 +1,5 @@
 const { join } = require('path')
 const { source_path } = require('../config')
-const assetHost = require('../asset_host')
 
 module.exports = {
   exclude: /\.(js|jsx|coffee|ts|tsx|vue|elm|scss|sass|css|html|json)?(\.erb)?$/,
@@ -8,8 +7,7 @@ module.exports = {
     loader: 'file-loader',
     options: {
       name: '[path][name]-[hash].[ext]',
-      context: join(source_path),
-      publicPath: assetHost.publicPathWithHost
+      context: join(source_path)
     }
   }]
 }

data/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
 }

data/test/compiler_test.rb

@@ -13,6 +13,17 @@ class CompilerTest < Minitest::Test
     assert Webpacker.compiler.send(:webpack_env)["FOO"] == "BAR"
   end
 
+  def test_default_watched_paths
+    assert_equal Webpacker.compiler.send(:default_watched_paths), [
+      "app/assets/**/*",
+      "/etc/yarn/**/*",
+      "test/test_app/app/javascript/**/*",
+      "yarn.lock",
+      "package.json",
+      "config/webpack/**/*"
+    ]
+  end
+
   def test_freshness
     assert Webpacker.compiler.stale?
     assert !Webpacker.compiler.fresh?

data/test/configuration_test.rb

@@ -26,6 +26,14 @@ class ConfigurationTest < Webpacker::Test
     assert_equal Webpacker.config.cache_path.to_s, cache_path
   end
 
+  def test_resolved_paths
+    assert_equal Webpacker.config.resolved_paths, ["app/assets", "/etc/yarn"]
+  end
+
+  def test_resolved_paths_globbed
+    assert_equal Webpacker.config.resolved_paths_globbed, ["app/assets/**/*", "/etc/yarn/**/*"]
+  end
+
   def test_extensions
     webpacker_yml = YAML.load_file("lib/install/config/webpacker.yml")
     assert_equal Webpacker.config.extensions, webpacker_yml["default"]["extensions"]

data/test/helper_test.rb

@@ -8,6 +8,9 @@ class HelperTest < ActionView::TestCase
   def setup
     @request = Class.new do
       def send_early_hints(links) end
+      def base_url
+        "https://example.com"
+      end
     end.new
   end
 
@@ -16,6 +19,11 @@ class HelperTest < ActionView::TestCase
     assert_equal "/packs/bootstrap-c38deda30895059837cf.css", asset_pack_path("bootstrap.css")
   end
 
+  def test_asset_pack_url
+    assert_equal "https://example.com/packs/bootstrap-300631c4f0e0f9c865bc.js", asset_pack_url("bootstrap.js")
+    assert_equal "https://example.com/packs/bootstrap-c38deda30895059837cf.css", asset_pack_url("bootstrap.css")
+  end
+
   def test_javascript_pack_tag
     assert_equal \
       %(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js"></script>),

data/test/test_app/app/javascript/packs/application.js

@@ -0,0 +1,10 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+console.log('Hello World from Webpacker')