test(webpacker) add test for webpack-based component loading

Author: rmosolgo

.gitignore

@@ -2,6 +2,7 @@
 Gemfile.lock
 *.log
 test/dummy/tmp
+test/dummy/public/packs
 gemfiles/*.lock
 *.swp
 /vendor/react

Appraisals

@@ -42,11 +42,13 @@ appraise "rails-4.2-sprockets_4" do
   gem 'rails', '~> 4.2.1'
   gem "sprockets", "~> 4.0.x"
   gem "turbolinks", "~> 2.5.0"
+  gem "webpacker", github: "rails/webpacker"
 end
 
 appraise "rails-5" do
   gem 'rails', '~> 5.0.0'
   gem "turbolinks", "~> 5.0.0"
+  gem "webpacker", github: "rails/webpacker"
 end
 
 appraise "rails-5-no_sprockets" do

gemfiles/rails_4.2_sprockets_4.gemfile

@@ -5,5 +5,6 @@ source "http://rubygems.org"
 gem "rails", "~> 4.2.1"
 gem "sprockets", "~> 4.0.x"
 gem "turbolinks", "~> 2.5.0"
+gem "webpacker", :github => "rails/webpacker"
 
 gemspec :path => "../"

gemfiles/rails_5.gemfile

@@ -4,5 +4,6 @@ source "http://rubygems.org"
 
 gem "rails", "~> 5.0.0"
 gem "turbolinks", "~> 5.0.0"
+gem "webpacker", :github => "rails/webpacker"
 
 gemspec :path => "../"

test/dummy/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react"]
+}

test/dummy/.postcssrc.yml

@@ -0,0 +1,4 @@
+plugins:
+  postcss-smart-import: {}
+  precss: {}
+  autoprefixer: {}

test/dummy/app/controllers/pack_components_controller.rb

@@ -0,0 +1,4 @@
+class PackComponentsController < ApplicationController
+  def show
+  end
+end

test/dummy/app/javascript/components/export_default_component.js

@@ -0,0 +1,7 @@
+var React = require("react")
+
+export default class ExportDefaultComponent extends React.Component {
+  render() {
+    return <h1>Export Default</h1>
+  }
+}

test/dummy/app/javascript/components/named_export_component.js

@@ -0,0 +1,3 @@
+module.exports = {
+  Component: function(props) { return <h2>Named Export</h2> }
+}

test/dummy/app/javascript/components/subfolder/exports_component.js

@@ -0,0 +1,3 @@
+module.exports = function(props) {
+  return <h2>Exports</h2>
+}

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

@@ -0,0 +1,3 @@
+var ctx = require.context("components", true)
+var ReactRailsUJS = require("../../../../../react_ujs/index")
+ReactRailsUJS.loadContext(ctx)

test/dummy/app/views/pack_components/show.html.erb

@@ -0,0 +1,6 @@
+<%= javascript_pack_tag "application" %>
+
+<!-- Test each way of exporting a component -->
+<%= react_component("export_default_component") %>
+<%= react_component("named_export_component.Component") %>
+<%= react_component("subfolder/exports_component") %>

test/dummy/bin/webpack

@@ -0,0 +1,40 @@
+#!/usr/bin/env ruby
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+
+ENV["RAILS_ENV"] ||= "development"
+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")
+DEV_SERVER_CONFIG_PATH = File.join(APP_PATH, "config/webpack/development.server.yml")
+
+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
+rescue Errno::ENOENT, NoMethodError
+  puts "Configuration not found in config/webpack/paths.yml or config/webpack/development.server.yml."
+  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"
+
+Dir.chdir(APP_PATH) do
+  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG}" \
+    " #{ARGV.join(" ")}"
+end

test/dummy/bin/webpack-dev-server

@@ -0,0 +1,33 @@
+#!/usr/bin/env ruby
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+
+ENV["RAILS_ENV"] ||= "development"
+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")
+
+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"
+rescue Errno::ENOENT, NoMethodError
+  puts "Configuration not found in config/webpacker/paths.yml."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+Dir.chdir(APP_PATH) do
+  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
+    "--config #{DEV_SERVER_CONFIG}"
+end

test/dummy/bin/webpack-watcher

@@ -0,0 +1,10 @@
+#!/usr/bin/env ruby
+
+ENV['RAILS_ENV'] ||= 'development'
+ENV['NODE_ENV'] ||= ENV['RAILS_ENV']
+
+BIN_PATH = File.expand_path('.', __dir__)
+
+Dir.chdir(BIN_PATH) do
+  exec "./webpack --watch --progress --color #{ARGV.join(" ")}"
+end

test/dummy/bin/yarn

@@ -0,0 +1,10 @@
+#!/usr/bin/env ruby
+VENDOR_PATH = File.expand_path('..', __dir__)
+Dir.chdir(VENDOR_PATH) do
+  begin
+    exec "yarnpkg #{ARGV.join(" ")}"
+  rescue Errno::ENOENT
+    puts "Yarn executable was not detected in the system."
+    puts "Download Yarn at https://yarnpkg.com/en/docs/install"
+  end
+end

test/dummy/config/routes.rb

@@ -7,4 +7,6 @@
       get :inline_component
     end
   end
+
+  resource :pack_component, only: :show
 end

test/dummy/config/webpack/configuration.js

@@ -0,0 +1,21 @@
+// Common configuration for webpacker loaded from config/webpack/paths.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 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}/`
+
+module.exports = {
+  devServer,
+  env,
+  paths,
+  loadersDir,
+  publicPath
+}

test/dummy/config/webpack/development.js

@@ -0,0 +1,16 @@
+// Note: You must restart bin/webpack-watcher for changes to take effect
+
+const merge = require('webpack-merge')
+const sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig, {
+  devtool: 'sourcemap',
+
+  stats: {
+    errorDetails: true
+  },
+
+  output: {
+    pathinfo: true
+  }
+})

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

@@ -0,0 +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')
+
+module.exports = merge(devConfig, {
+  devServer: {
+    host: devServer.host,
+    port: devServer.port,
+    compress: true,
+    historyApiFallback: true,
+    contentBase: resolve(paths.output, paths.entry),
+    publicPath
+  }
+})

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

@@ -0,0 +1,16 @@
+# Restart webpack-dev-server if you make changes here
+default: &default
+  enabled: true
+  host: localhost
+  port: 8080
+
+development:
+  <<: *default
+
+test:
+  <<: *default
+  enabled: false
+
+production:
+  <<: *default
+  enabled: false

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

@@ -0,0 +1,12 @@
+const { env, publicPath } = require('../configuration.js')
+
+module.exports = {
+  test: /\.(jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
+  use: [{
+    loader: 'file-loader',
+    options: {
+      publicPath,
+      name: env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name].[ext]'
+    }
+  }]
+}

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

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

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

@@ -0,0 +1,4 @@
+module.exports = {
+  test: /\.coffee(\.erb)?$/,
+  loader: 'coffee-loader'
+}

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

@@ -0,0 +1,9 @@
+module.exports = {
+  test: /\.erb$/,
+  enforce: 'pre',
+  exclude: /node_modules/,
+  loader: 'rails-erb-loader',
+  options: {
+    runner: 'DISABLE_SPRING=1 bin/rails runner'
+  }
+}

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

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

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

@@ -0,0 +1,9 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+module.exports = {
+  test: /\.(scss|sass|css)$/i,
+  use: ExtractTextPlugin.extract({
+    fallback: 'style-loader',
+    use: ['css-loader', 'postcss-loader', 'sass-loader']
+  })
+}

test/dummy/config/webpack/paths.yml

@@ -0,0 +1,31 @@
+# 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
+  extensions:
+    - .coffee
+    - .js
+    - .jsx
+    - .ts
+    - .vue
+    - .sass
+    - .scss
+    - .css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+
+development:
+  <<: *default
+
+test:
+  <<: *default
+  manifest: manifest-test.json
+
+production:
+  <<: *default

test/dummy/config/webpack/production.js

@@ -0,0 +1,20 @@
+/* eslint global-require: 0 */
+// Note: You must run bin/webpack for changes to take effect
+
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const CompressionPlugin = require('compression-webpack-plugin')
+const sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig, {
+  output: { filename: '[name]-[chunkhash].js' },
+
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin(),
+    new CompressionPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: /\.(js|css|svg|eot|ttf|woff|woff2)$/
+    })
+  ]
+})