webpacker 3.2.2 → 3.3.0

data/docs/docker.md

@@ -11,7 +11,7 @@ services:
     build: .
     env_file:
       - '.env.docker'
-    command: bundle exec webpack-dev-server
+    command: ./bin/webpack-dev-server
     volumes:
       - .:/webpacker-example-app
     ports:

data/docs/typescript.md

@@ -3,7 +3,7 @@
 
 ## Typescript with React
 
-1. Setup react using Webpacker [react installer](#react). Then 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
@@ -13,6 +13,41 @@ 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.
 
+## Typescript with Vue components
+
+1. Setup vue using 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
+
+```js
+module.exports = {
+  test: /\.(ts|tsx)?(\.erb)?$/,
+  use: [{
+    loader: 'ts-loader'
+  }]
+}
+```
+
+to
+
+```js
+module.exports = {
+  test: /\.(ts|tsx)?(\.erb)?$/,
+  use: [{
+    loader: 'ts-loader',
+    options: {
+      appendTsSuffixTo: [/\.vue$/]
+    }
+  }]
+}
+```
+
+and now you can use `<script lang="ts">` in your `.vue` component files.
 
 ## HTML templates with Typescript and Angular
 

data/{exe → lib/install/bin}/webpack

@@ -3,6 +3,13 @@
 ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
 ENV["NODE_ENV"] ||= ENV["RAILS_ENV"]
 
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
 require "webpacker"
 require "webpacker/webpack_runner"
 Webpacker::WebpackRunner.run(ARGV)

data/{exe → lib/install/bin}/webpack-dev-server

@@ -3,6 +3,13 @@
 ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
 ENV["NODE_ENV"] ||= ENV["RAILS_ENV"]
 
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
 require "webpacker"
 require "webpacker/dev_server_runner"
 Webpacker::DevServerRunner.run(ARGV)

data/lib/install/binstubs.rb

@@ -0,0 +1,4 @@
+say "Copying binstubs"
+directory "#{__dir__}/bin", "bin"
+
+chmod "bin", 0755 & ~File.umask, verbose: false

data/lib/install/config/webpacker.yml

@@ -18,6 +18,9 @@ default: &default
     - .sass
     - .scss
     - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
     - .png
     - .svg
     - .gif

data/lib/install/loaders/erb.js

@@ -5,7 +5,7 @@ module.exports = {
   use: [{
     loader: 'rails-erb-loader',
     options: {
-      runner: 'bin/rails runner'
+      runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
     }
   }]
 }

data/lib/install/template.rb

@@ -13,8 +13,7 @@ copy_file "#{__dir__}/config/.babelrc", ".babelrc"
 say "Creating JavaScript app source directory"
 directory "#{__dir__}/javascript", Webpacker.config.source_path
 
-say "Installing binstubs"
-run "bundle binstubs webpacker"
+apply "#{__dir__}/binstubs.rb"
 
 say "Adding configurations"
 

data/lib/install/typescript.rb

@@ -41,6 +41,6 @@ copy_file "#{__dir__}/examples/typescript/hello_typescript.ts",
   "#{Webpacker.config.source_entry_path}/hello_typescript.ts"
 
 say "Installing all typescript dependencies"
-run "yarn add typescript ts-loader #{additional_packages}"
+run "yarn add typescript ts-loader@3.5.0 #{additional_packages}"
 
 say "Webpacker now supports typescript 🎉", :green

data/lib/tasks/webpacker.rake

@@ -5,6 +5,7 @@ tasks = {
   "webpacker:check_node"              => "Verifies if Node.js is installed",
   "webpacker:check_yarn"              => "Verifies if Yarn is installed",
   "webpacker:check_binstubs"          => "Verifies that webpack & webpack-dev-server are present",
+  "webpacker:binstubs"                => "Installs Webpacker binstubs in this application",
   "webpacker:verify_install"          => "Verifies if Webpacker is installed",
   "webpacker:yarn_install"            => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn",
   "webpacker:install:react"           => "Installs and setup example React component",

data/lib/tasks/webpacker/binstubs.rake

@@ -0,0 +1,12 @@
+binstubs_template_path = File.expand_path("../../install/binstubs.rb", __dir__).freeze
+
+namespace :webpacker do
+  desc "Installs Webpacker binstubs in this application"
+  task binstubs: [:check_node, :check_yarn] do
+    if Rails::VERSION::MAJOR >= 5
+      exec "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{binstubs_template_path}"
+    else
+      exec "#{RbConfig.ruby} ./bin/rake rails:template LOCATION=#{binstubs_template_path}"
+    end
+  end
+end

data/lib/tasks/webpacker/check_binstubs.rake

@@ -1,7 +1,7 @@
 namespace :webpacker do
   desc "Verifies that webpack & webpack-dev-server are present."
   task :check_binstubs do
-    unless Bundler.which(Gem.win_platform? ? "webpack.bat" : "webpack")
+    unless File.exist?("bin/webpack")
       $stderr.puts "webpack binstubs not found.\n"\
            "Have you run rails webpacker:install ?\n"\
            "Make sure the bin directory or binstubs are not included in .gitignore\n"\

data/lib/webpacker.rb

@@ -19,6 +19,7 @@ module Webpacker
 end
 
 require "webpacker/instance"
+require "webpacker/env"
 require "webpacker/configuration"
 require "webpacker/manifest"
 require "webpacker/compiler"

data/lib/webpacker/compiler.rb

@@ -53,7 +53,7 @@ class Webpacker::Compiler
     def run_webpack
       logger.info "Compiling…"
 
-      sterr, stdout, status = Open3.capture3(webpack_env, "bundle exec webpack")
+      sterr, stdout, status = Open3.capture3(webpack_env, "#{RbConfig.ruby} ./bin/webpack")
 
       if status.success?
         logger.info "Compiled all packs in #{config.public_output_path}"
@@ -78,6 +78,8 @@ class Webpacker::Compiler
     end
 
     def webpack_env
-      env.merge("NODE_ENV" => @webpacker.env, "WEBPACKER_ASSET_HOST" => ActionController::Base.helpers.compute_asset_host)
+      env.merge("NODE_ENV"                    => @webpacker.env,
+                "WEBPACKER_ASSET_HOST"        => ActionController::Base.helpers.compute_asset_host,
+                "WEBPACKER_RELATIVE_URL_ROOT" => ActionController::Base.relative_url_root)
     end
 end

data/lib/webpacker/dev_server_runner.rb

@@ -14,7 +14,7 @@ module Webpacker
     private
       def load_config
         @config_file = File.join(@app_path, "config/webpacker.yml")
-        dev_server = YAML.load_file(@config_file)[ENV["RAILS_ENV"]]["dev_server"]
+        dev_server = YAML.load_file(@config_file)[ENV["NODE_ENV"]]["dev_server"]
 
         @hostname          = dev_server["host"]
         @port              = dev_server["port"]

data/lib/webpacker/env.rb

@@ -0,0 +1,39 @@
+class Webpacker::Env
+  DEFAULT = "production".freeze
+
+  delegate :config_path, :logger, to: :@webpacker
+
+  def self.inquire(webpacker)
+    new(webpacker).inquire
+  end
+
+  def initialize(webpacker)
+    @webpacker = webpacker
+  end
+
+  def inquire
+    fallback_env_warning unless current
+    (current || DEFAULT).inquiry
+  end
+
+  private
+    def current
+      (ENV["NODE_ENV"] || Rails.env).presence_in(available_environments)
+    end
+
+    def fallback_env_warning
+      logger.info "NODE_ENV=#{ENV["NODE_ENV"]} and RAILS_ENV=#{Rails.env} environment is not defined in config/webpacker.yml, falling back to #{DEFAULT} environment"
+    end
+
+    def available_environments
+      if config_path.exist?
+        YAML.load(config_path.read).keys
+      else
+        [].freeze
+      end
+    rescue Psych::SyntaxError => e
+      raise "YAML syntax error occurred while parsing #{config_path}. " \
+            "Please note that YAML must be consistently indented using spaces. Tabs are not allowed. " \
+            "Error: #{e.message}"
+    end
+end

data/lib/webpacker/instance.rb

@@ -8,9 +8,7 @@ class Webpacker::Instance
   end
 
   def env
-    (ENV["NODE_ENV"].presence_in(available_environments) ||
-      Rails.env.presence_in(available_environments) ||
-        "production".freeze).inquiry
+    @env ||= Webpacker::Env.inquire self
   end
 
   def config
@@ -32,13 +30,4 @@ class Webpacker::Instance
   def commands
     @commands ||= Webpacker::Commands.new self
   end
-
-  private
-    def available_environments
-      if config_path.exist?
-        YAML.load(config_path.read).keys
-      else
-        [].freeze
-      end
-    end
 end

data/lib/webpacker/version.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -20,7 +20,7 @@
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
-    "compression-webpack-plugin": "^1.1.6",
+    "compression-webpack-plugin": "^1.1.10",
     "css-loader": "^0.28.9",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.6",

data/package/__tests__/config.js

@@ -1,12 +1,12 @@
 /* global test expect, describe */
 
-const chdirApp = () => process.chdir('test/test_app')
-const chdirCwd = () => process.chdir(process.cwd())
-chdirApp()
+const { chdirTestApp, chdirCwd } = require('../utils/helpers')
+
+chdirTestApp()
 
 const config = require('../config')
 
-describe('Webpacker.yml config', () => {
+describe('Config', () => {
   afterAll(chdirCwd)
 
   test('should return extensions as listed in app config', () => {
@@ -15,6 +15,9 @@ describe('Webpacker.yml config', () => {
       '.sass',
       '.scss',
       '.css',
+      '.module.sass',
+      '.module.scss',
+      '.module.css',
       '.png',
       '.svg',
       '.gif',

data/package/__tests__/dev_server.js

@@ -0,0 +1,26 @@
+/* global test expect, describe */
+
+const { chdirTestApp, chdirCwd } = require('../utils/helpers')
+
+chdirTestApp()
+
+describe('DevServer', () => {
+  beforeEach(() => jest.resetModules())
+  afterAll(chdirCwd)
+
+  test('with NODE_ENV set to development', () => {
+    process.env.NODE_ENV = 'development'
+    process.env.WEBPACKER_DEV_SERVER_HOST = '0.0.0.0'
+    process.env.WEBPACKER_DEV_SERVER_PORT = 5000
+
+    const devServer = require('../dev_server')
+    expect(devServer).toBeDefined()
+    expect(devServer.host).toEqual('0.0.0.0')
+    expect(devServer.port).toEqual('5000')
+  })
+
+  test('with NODE_ENV set to production', () => {
+    process.env.NODE_ENV = 'production'
+    expect(require('../dev_server')).toEqual({})
+  })
+})

data/package/__tests__/env.js

@@ -0,0 +1,28 @@
+/* global test expect, describe */
+
+const { chdirTestApp, chdirCwd } = require('../utils/helpers')
+
+chdirTestApp()
+
+describe('Env', () => {
+  beforeEach(() => jest.resetModules())
+  afterAll(chdirCwd)
+
+  test('with NODE_ENV set to development', () => {
+    process.env.NODE_ENV = 'development'
+    expect(require('../env')).toEqual('development')
+  })
+
+  test('with undefined NODE_ENV and RAILS_ENV set to development', () => {
+    delete process.env.NODE_ENV
+    process.env.RAILS_ENV = 'development'
+    expect(require('../env')).toEqual('development')
+  })
+
+  test('with a non-standard environment', () => {
+    process.env.NODE_ENV = 'foo'
+    process.env.RAILS_ENV = 'foo'
+    expect(require('../env')).toEqual('production')
+    delete process.env.RAILS_ENV
+  })
+})

data/package/__tests__/index.js

@@ -0,0 +1,31 @@
+/* global test expect, describe */
+
+const { chdirTestApp, chdirCwd } = require('../utils/helpers')
+
+chdirTestApp()
+
+describe('Webpacker', () => {
+  beforeEach(() => jest.resetModules())
+  afterAll(chdirCwd)
+
+  test('with NODE_ENV set to development', () => {
+    process.env.NODE_ENV = 'development'
+    const { environment } = require('../index')
+    expect(environment.toWebpackConfig()).toMatchObject({
+      devServer: {
+        host: 'localhost',
+        port: 3035
+      }
+    })
+  })
+
+  test('with a non-standard env', () => {
+    process.env.NODE_ENV = 'staging'
+    process.env.RAILS_ENV = 'staging'
+    const { environment } = require('../index')
+    expect(environment.toWebpackConfig()).toMatchObject({
+      devtool: 'nosources-source-map',
+      stats: 'normal'
+    })
+  })
+})

data/package/config.js

@@ -3,41 +3,25 @@ const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 const deepMerge = require('./utils/deep_merge')
 const { isArray } = require('./utils/helpers')
+const env = require('./env')
 
-const defaultFilePath = require.resolve('../lib/install/config/webpacker.yml')
-const filePath = resolve('config', 'webpacker.yml')
+const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
+const configPath = resolve('config', 'webpacker.yml')
 
-const environment = process.env.NODE_ENV || 'development'
-const defaultConfig = safeLoad(readFileSync(defaultFilePath), 'utf8')[environment]
-const appConfig = safeLoad(readFileSync(filePath), 'utf8')[environment]
+const getConfig = () => {
+  const defaults = safeLoad(readFileSync(defaultConfigPath), 'utf8')[env]
+  const app = safeLoad(readFileSync(configPath), 'utf8')[env]
 
-if (isArray(appConfig.extensions) && appConfig.extensions.length) {
-  delete defaultConfig.extensions
-} else {
-  /* eslint no-console: 0 */
-  console.warn('No extensions specified in webpacker.yml, using default extensions\n')
-}
-
-const config = deepMerge(defaultConfig, appConfig)
+  if (isArray(app.extensions) && app.extensions.length) {
+    delete defaults.extensions
+  }
 
-const isBoolean = str => /^true/.test(str) || /^false/.test(str)
+  const config = deepMerge(defaults, app)
 
-const fetch = key =>
-  (isBoolean(process.env[key]) ? JSON.parse(process.env[key]) : process.env[key])
+  config.outputPath = resolve('public', config.public_output_path)
+  config.publicPath = `/${config.public_output_path}/`.replace(/([^:]\/)\/+/g, '$1')
 
-const devServer = (key) => {
-  const envValue = fetch(`WEBPACKER_DEV_SERVER_${key.toUpperCase().replace(/_/g, '')}`)
-  if (typeof envValue === 'undefined' || envValue === null) return config.dev_server[key]
-  return envValue
+  return config
 }
 
-if (config.dev_server) {
-  Object.keys(config.dev_server).forEach((key) => {
-    config.dev_server[key] = devServer(key)
-  })
-}
-
-config.outputPath = resolve('public', config.public_output_path)
-config.publicPath = `/${config.public_output_path}/`.replace(/([^:]\/)\/+/g, '$1')
-
-module.exports = config
+module.exports = getConfig()