Merge pull request #722 from asaletnik/railtie_fix

Update Railtie file_watcher / reloaders implementation

Author: Robert Mosolgo

lib/react/rails/railtie.rb

@@ -33,9 +33,13 @@ class Railtie < ::Rails::Railtie
         end
 
         # Rails checks these objects for changes:
-        app.reloaders << app.config.file_watcher.new([], reload_paths) {}
+        react_reloader = app.config.file_watcher.new([], reload_paths) do
+          React::ServerRendering.reset_pool
+        end
+        app.reloaders << react_reloader
+
         # Reload renderers in dev when files change
-        config.to_prepare { React::ServerRendering.reset_pool }
+        config.to_prepare { react_reloader.execute_if_updated }
       end
 
       # Include the react-rails view helper lazily

test/dummy/.babelrc

@@ -1,3 +1,16 @@
 {
-  "presets": ["env", "react"]
+  "presets": [
+    [
+      "env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": "> 1%",
+          "uglify": true
+        },
+        "useBuiltIns": true
+      }
+    ],
+    "react"
+  ]
 }

test/dummy/bin/webpack

@@ -5,36 +5,28 @@ require "shellwords"
 require "yaml"
 
 ENV["RAILS_ENV"] ||= "development"
-RAILS_ENV   = ENV["RAILS_ENV"]
+RAILS_ENV = ENV["RAILS_ENV"]
 
 ENV["NODE_ENV"] ||= RAILS_ENV
-NODE_ENV    = ENV["NODE_ENV"]
+NODE_ENV = ENV["NODE_ENV"]
 
-APP_PATH               = File.expand_path("../", __dir__)
-CONFIG_PATH            = File.join(APP_PATH, "config/webpack/paths.yml")
-DEV_SERVER_CONFIG_PATH = File.join(APP_PATH, "config/webpack/development.server.yml")
+APP_PATH = File.expand_path("../", __dir__)
 
-begin
-  paths            = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
-  dev_server       = YAML.load(File.read(DEV_SERVER_CONFIG_PATH))[NODE_ENV]
-
-  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
-  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
-
-  if NODE_ENV == "development" && dev_server["enabled"]
-    puts "Warning: webpack-dev-server is currently enabled in #{DEV_SERVER_CONFIG_PATH}. " \
-      "Disable to serve assets directly from public/packs directory"
-  end
+def load_yaml_config(config_file)
+  YAML.load_file(File.join(APP_PATH, config_file))[NODE_ENV]
 rescue Errno::ENOENT, NoMethodError
-  puts "Configuration not found in config/webpack/paths.yml or config/webpack/development.server.yml."
+  puts "Configuration not found in #{config_file}."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
-WEBPACK_BIN    = "#{NODE_MODULES_PATH}/.bin/webpack"
-WEBPACK_CONFIG = "#{WEBPACK_CONFIG_PATH}/#{NODE_ENV}.js"
+paths = load_yaml_config("config/webpack/paths.yml")
+NODE_MODULES_PATH = File.join(APP_PATH, paths["node_modules"])
+WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "#{NODE_ENV}.js")
+
+newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
 
 Dir.chdir(APP_PATH) do
-  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG}" \
-    " #{ARGV.join(" ")}"
+  exec newenv, *cmdline
 end

test/dummy/bin/webpack-dev-server

@@ -10,24 +10,26 @@ RAILS_ENV = ENV["RAILS_ENV"]
 ENV["NODE_ENV"] ||= RAILS_ENV
 NODE_ENV = ENV["NODE_ENV"]
 
-APP_PATH    = File.expand_path("../", __dir__)
-CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
+APP_PATH = File.expand_path("../", __dir__)
 
-begin
-  paths = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
-
-  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
-  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
-
-  WEBPACK_BIN       = "#{NODE_MODULES_PATH}/.bin/webpack-dev-server"
-  DEV_SERVER_CONFIG = "#{WEBPACK_CONFIG_PATH}/development.server.js"
+def load_yaml_config(config_file)
+  YAML.load_file(File.join(APP_PATH, config_file))[NODE_ENV]
 rescue Errno::ENOENT, NoMethodError
-  puts "Configuration not found in config/webpacker/paths.yml."
+  puts "Configuration not found in #{config_file}."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
+paths = load_yaml_config("config/webpack/paths.yml")
+NODE_MODULES_PATH = File.join(APP_PATH, paths["node_modules"])
+WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "development.server.js")
+
+dev_server = load_yaml_config("config/webpack/development.server.yml")
+DEV_SERVER_HOST = "http#{"s" if dev_server["https"]}://#{dev_server["host"]}:#{dev_server["port"]}"
+
+newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape, "ASSET_HOST" => DEV_SERVER_HOST.shellescape }
+cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
+
 Dir.chdir(APP_PATH) do
-  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
-    "--config #{DEV_SERVER_CONFIG}"
+  exec newenv, *cmdline
 end

test/dummy/config/webpack/configuration.js

@@ -9,13 +9,29 @@ const configPath = resolve('config', 'webpack')
 const loadersDir = join(__dirname, 'loaders')
 const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]
 const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV]
-const publicPath = env.NODE_ENV !== 'production' && devServer.enabled ?
-  `http://${devServer.host}:${devServer.port}/` : `/${paths.entry}/`
+
+function removeOuterSlashes(string) {
+  return string.replace(/^\/*/, '').replace(/\/*$/, '')
+}
+
+function formatPublicPath(host = '', path = '') {
+  let formattedHost = removeOuterSlashes(host)
+  if (formattedHost && !/^http/i.test(formattedHost)) {
+    formattedHost = `//${formattedHost}`
+  }
+  const formattedPath = removeOuterSlashes(path)
+  return `${formattedHost}/${formattedPath}/`
+}
+
+const output = {
+  path: resolve('public', paths.output),
+  publicPath: formatPublicPath(env.ASSET_HOST, paths.output)
+}
 
 module.exports = {
   devServer,
   env,
   paths,
   loadersDir,
-  publicPath
+  output
 }

test/dummy/config/webpack/development.js

@@ -1,4 +1,4 @@
-// Note: You must restart bin/webpack-watcher for changes to take effect
+// Note: You must restart bin/webpack-dev-server for changes to take effect
 
 const merge = require('webpack-merge')
 const sharedConfig = require('./shared.js')

test/dummy/config/webpack/development.server.js

@@ -1,17 +1,17 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 
-const { resolve } = require('path')
 const merge = require('webpack-merge')
 const devConfig = require('./development.js')
-const { devServer, publicPath, paths } = require('./configuration.js')
+const { devServer, output } = require('./configuration.js')
 
 module.exports = merge(devConfig, {
   devServer: {
     host: devServer.host,
     port: devServer.port,
+    contentBase: output.path,
+    publicPath: output.publicPath,
     compress: true,
-    historyApiFallback: true,
-    contentBase: resolve(paths.output, paths.entry),
-    publicPath
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    historyApiFallback: true
   }
 })

test/dummy/config/webpack/development.server.yml

@@ -1,4 +1,5 @@
-# Restart webpack-dev-server if you make changes here
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
 default: &default
   enabled: true
   host: localhost

test/dummy/config/webpack/loaders/assets.js

@@ -1,7 +1,7 @@
 const { env, publicPath } = require('../configuration.js')
 
 module.exports = {
-  test: /\.(jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
+  test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
   use: [{
     loader: 'file-loader',
     options: {

test/dummy/config/webpack/loaders/babel.js

@@ -1,10 +1,5 @@
 module.exports = {
   test: /\.js(\.erb)?$/,
   exclude: /node_modules/,
-  loader: 'babel-loader',
-  options: {
-    presets: [
-      ['env', { modules: false }]
-    ]
-  }
+  loader: 'babel-loader'
 }

test/dummy/config/webpack/loaders/erb.js

@@ -4,6 +4,6 @@ module.exports = {
   exclude: /node_modules/,
   loader: 'rails-erb-loader',
   options: {
-    runner: 'DISABLE_SPRING=1 bin/rails runner'
+    runner: 'bin/rails runner'
   }
 }

test/dummy/config/webpack/loaders/react.js

@@ -1,11 +1,5 @@
 module.exports = {
   test: /\.(js|jsx)?(\.erb)?$/,
   exclude: /node_modules/,
-  loader: 'babel-loader',
-  options: {
-    presets: [
-      'react',
-      ['env', { modules: false }]
-    ]
-  }
+  loader: 'babel-loader'
 }

test/dummy/config/webpack/loaders/sass.js

@@ -1,9 +1,15 @@
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const { env } = require('../configuration.js')
 
 module.exports = {
   test: /\.(scss|sass|css)$/i,
   use: ExtractTextPlugin.extract({
     fallback: 'style-loader',
-    use: ['css-loader', 'postcss-loader', 'sass-loader']
+    use: [
+      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
+      { loader: 'postcss-loader', options: { sourceMap: true } },
+      'resolve-url-loader',
+      { loader: 'sass-loader', options: { sourceMap: true } }
+    ]
   })
 }

test/dummy/config/webpack/paths.yml

@@ -1,11 +1,12 @@
-# Restart webpack-watcher or webpack-dev-server if you make changes here
-default: &default
-  config: config/webpack
-  entry: packs
-  output: public
-  manifest: manifest.json
-  node_modules: node_modules
-  source: app/javascript
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default            # ~ = Rails.root
+  source: app/javascript     # ~/:source
+  entry: packs               # ~/:source/:entry
+  output: packs              # ~/public/:output
+  manifest: manifest.json    # ~/public/:output/:manifest
+  config: config/webpack     # ~/:config
+  node_modules: node_modules # ~/:node_modules
   extensions:
     - .coffee
     - .js
@@ -19,6 +20,7 @@ default: &default
     - .svg
     - .gif
     - .jpeg
+    - .jpg
 
 development:
   <<: *default

test/dummy/config/webpack/production.js

@@ -1,5 +1,6 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
 /* eslint global-require: 0 */
-// Note: You must run bin/webpack for changes to take effect
 
 const webpack = require('webpack')
 const merge = require('webpack-merge')
@@ -14,7 +15,7 @@ module.exports = merge(sharedConfig, {
     new CompressionPlugin({
       asset: '[path].gz[query]',
       algorithm: 'gzip',
-      test: /\.(js|css|svg|eot|ttf|woff|woff2)$/
+      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
     })
   ]
 })

test/dummy/config/webpack/shared.js

@@ -1,40 +1,47 @@
-// Note: You must restart bin/webpack-watcher for changes to take effect
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
 const webpack = require('webpack')
-const { basename, join, resolve } = require('path')
+const { basename, dirname, join, relative, resolve } = require('path')
 const { sync } = require('glob')
-const { readdirSync } = require('fs')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 const extname = require('path-complete-extname')
-const { env, paths, publicPath, loadersDir } = require('./configuration.js')
+const { env, paths, output, loadersDir } = require('./configuration.js')
 
-const extensionGlob = `*{${paths.extensions.join(',')}}*`
+const extensionGlob = `**/*{${paths.extensions.join(',')}}*`
 const packPaths = sync(join(paths.source, paths.entry, extensionGlob))
 
 module.exports = {
   entry: packPaths.reduce(
     (map, entry) => {
       const localMap = map
-      localMap[basename(entry, extname(entry))] = resolve(entry)
+      const namespace = relative(join(paths.source, paths.entry), dirname(entry))
+      localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)
       return localMap
     }, {}
   ),
 
-  output: { filename: '[name].js', path: resolve(paths.output, paths.entry) },
+  output: {
+    filename: '[name].js',
+    path: output.path,
+    publicPath: output.publicPath
+  },
 
   module: {
-    rules: readdirSync(loadersDir).map(file => (
-      require(join(loadersDir, file))
-    ))
+    rules: sync(join(loadersDir, '*.js')).map(loader => require(loader))
   },
 
   plugins: [
     new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
     new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
-    new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true })
+    new ManifestPlugin({
+      fileName: paths.manifest,
+      publicPath: output.publicPath,
+      writeToFileEmit: true
+    })
   ],
 
   resolve: {

test/dummy/config/webpack/test.js

@@ -1,4 +1,4 @@
-// Note: You must restart bin/webpack-watcher for changes to take effect
+// Note: You must restart bin/webpack-dev-server for changes to take effect
 
 const merge = require('webpack-merge')
 const sharedConfig = require('./shared.js')