Add Webpacker 3 test app

Author: BookOfGreg

test/dummy_webpacker3/.babelrc

@@ -1,16 +1,18 @@
 {
   "presets": [
-    [
-      "env",
-      {
-        "modules": false,
-        "targets": {
-          "browsers": "> 1%",
-          "uglify": true
-        },
-        "useBuiltIns": true
-      }
-    ],
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": "> 1%",
+        "uglify": true
+      },
+      "useBuiltIns": true
+    }],
     "react"
+  ],
+
+  "plugins": [
+    "syntax-dynamic-import",
+    ["transform-class-properties", { "spec": true }]
   ]
 }

test/dummy_webpacker3/.gitignore

@@ -0,0 +1,2 @@
+/public/packs
+/node_modules

test/dummy_webpacker3/app/javascript/packs/application.js

@@ -1,5 +1,5 @@
 var ctx = require.context("components", true)
-var ReactRailsUJS = require("../../../../../react_ujs/index")
+var ReactRailsUJS = require("react_ujs")
 ReactRailsUJS.useContext(ctx)
 var React = require("react")
 

test/dummy_webpacker3/app/javascript/packs/server_rendering.js

@@ -1,5 +1,5 @@
 // By default, this pack is loaded for server-side rendering.
 // It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
 var componentRequireContext = require.context("components", true)
-var ReactRailsUJS = require("../../../../../react_ujs/index")
+var ReactRailsUJS = require("react_ujs")
 ReactRailsUJS.useContext(componentRequireContext)

test/dummy_webpacker3/bin/webpack

@@ -10,21 +10,17 @@ RAILS_ENV = ENV["RAILS_ENV"]
 ENV["NODE_ENV"] ||= RAILS_ENV
 NODE_ENV = ENV["NODE_ENV"]
 
-APP_PATH = File.expand_path("../", __dir__)
+APP_PATH          = File.expand_path("../", __dir__)
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.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_file}."
+unless File.exist?(WEBPACK_CONFIG)
+  puts "Webpack configuration not found."
   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"], "#{NODE_ENV}.js")
-
-newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
 cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
 
 Dir.chdir(APP_PATH) do

test/dummy_webpacker3/bin/webpack-dev-server

@@ -10,24 +10,32 @@ RAILS_ENV = ENV["RAILS_ENV"]
 ENV["NODE_ENV"] ||= RAILS_ENV
 NODE_ENV = ENV["NODE_ENV"]
 
-APP_PATH = File.expand_path("../", __dir__)
+APP_PATH          = File.expand_path("../", __dir__)
+CONFIG_FILE       = File.join(APP_PATH, "config/webpacker.yml")
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/development.js")
+
+def args(key)
+  index = ARGV.index(key)
+  index ? ARGV[index + 1] : nil
+end
+
+begin
+  dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"]
+
+  DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{args('--host') || dev_server["host"]}:#{args('--port') || dev_server["port"]}"
 
-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_file}."
+  puts "Webpack dev_server 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
+}.freeze
 
-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

test/dummy_webpacker3/config/application.rb

@@ -5,11 +5,6 @@
 require "action_controller/railtie"
 require "action_mailer/railtie"
 
-# Test no-sprockets environment by testing the gemfile name
-if SprocketsHelpers.available?
-  require "sprockets/railtie"
-end
-
 require "rails/test_unit/railtie"
 
 # Make sure gems in development group are required, for example, react-rails and turbolinks.
@@ -35,9 +30,5 @@ class Application < Rails::Application
     config.react.server_renderer_options = {
       replay_console: true,
     }
-
-    if SprocketsHelpers.available?
-      config.assets.enabled = true
-    end
   end
 end

test/dummy_webpacker3/config/environments/development.rb

@@ -18,9 +18,4 @@
 
   # Print deprecation notices to the Rails logger.
   config.active_support.deprecation = :log
-
-  # Debug mode disables concatenation and preprocessing of assets.
-  # This option may cause significant delays in view rendering with a large
-  # number of complex assets.
-  config.assets.debug = true
 end

test/dummy_webpacker3/config/environments/test.rb

@@ -9,9 +9,6 @@
   # we need this to reload the jsx transformer when different version is dropped in
   config.cache_classes = false
   config.reload_plugins = true
-  if SprocketsHelpers.available?
-    config.assets.cache_store = :null_store
-  end
 
   # Do not eager load code on boot. This avoids loading your whole application
   # just for the purpose of running a single test. If you are using a tool that

test/dummy_webpacker3/config/webpack/configuration.js

@@ -1,14 +1,13 @@
-// Common configuration for webpacker loaded from config/webpack/paths.yml
+// Common configuration for webpacker loaded from config/webpacker.yml
 
 const { join, resolve } = require('path')
 const { env } = require('process')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 
-const configPath = resolve('config', 'webpack')
+const configPath = resolve('config', 'webpacker.yml')
 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 settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]
 
 function removeOuterSlashes(string) {
   return string.replace(/^\/*/, '').replace(/\/*$/, '')
@@ -24,14 +23,13 @@ function formatPublicPath(host = '', path = '') {
 }
 
 const output = {
-  path: resolve('public', paths.output),
-  publicPath: formatPublicPath(env.ASSET_HOST, paths.output)
+  path: resolve('public', settings.public_output_path),
+  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
 }
 
 module.exports = {
-  devServer,
+  settings,
   env,
-  paths,
   loadersDir,
   output
 }