Skip to content

Commit 70e3b0a

Browse files
committed
test(webpacker) add test for webpack-based component loading
1 parent 2565539 commit 70e3b0a

36 files changed

+4831
-18
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
Gemfile.lock
33
*.log
44
test/dummy/tmp
5+
test/dummy/public/packs
56
gemfiles/*.lock
67
*.swp
78
/vendor/react

Appraisals

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,13 @@ appraise "rails-4.2-sprockets_4" do
4242
gem 'rails', '~> 4.2.1'
4343
gem "sprockets", "~> 4.0.x"
4444
gem "turbolinks", "~> 2.5.0"
45+
gem "webpacker", github: "rails/webpacker"
4546
end
4647

4748
appraise "rails-5" do
4849
gem 'rails', '~> 5.0.0'
4950
gem "turbolinks", "~> 5.0.0"
51+
gem "webpacker", github: "rails/webpacker"
5052
end
5153

5254
appraise "rails-5-no_sprockets" do

gemfiles/rails_4.2_sprockets_4.gemfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@ source "http://rubygems.org"
55
gem "rails", "~> 4.2.1"
66
gem "sprockets", "~> 4.0.x"
77
gem "turbolinks", "~> 2.5.0"
8+
gem "webpacker", :github => "rails/webpacker"
89

910
gemspec :path => "../"

gemfiles/rails_5.gemfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ source "http://rubygems.org"
44

55
gem "rails", "~> 5.0.0"
66
gem "turbolinks", "~> 5.0.0"
7+
gem "webpacker", :github => "rails/webpacker"
78

89
gemspec :path => "../"

test/dummy/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env", "react"]
3+
}

test/dummy/.postcssrc.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
plugins:
2+
postcss-smart-import: {}
3+
precss: {}
4+
autoprefixer: {}
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
class PackComponentsController < ApplicationController
2+
def show
3+
end
4+
end
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
var React = require("react")
2+
3+
export default class ExportDefaultComponent extends React.Component {
4+
render() {
5+
return <h1>Export Default</h1>
6+
}
7+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
Component: function(props) { return <h2>Named Export</h2> }
3+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = function(props) {
2+
return <h2>Exports</h2>
3+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var ctx = require.context("components", true)
2+
var ReactRailsUJS = require("../../../../../react_ujs/index")
3+
ReactRailsUJS.loadContext(ctx)
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<%= javascript_pack_tag "application" %>
2+
3+
<!-- Test each way of exporting a component -->
4+
<%= react_component("export_default_component") %>
5+
<%= react_component("named_export_component.Component") %>
6+
<%= react_component("subfolder/exports_component") %>

test/dummy/bin/webpack

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
#!/usr/bin/env ruby
2+
$stdout.sync = true
3+
4+
require "shellwords"
5+
require "yaml"
6+
7+
ENV["RAILS_ENV"] ||= "development"
8+
RAILS_ENV = ENV["RAILS_ENV"]
9+
10+
ENV["NODE_ENV"] ||= RAILS_ENV
11+
NODE_ENV = ENV["NODE_ENV"]
12+
13+
APP_PATH = File.expand_path("../", __dir__)
14+
CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
15+
DEV_SERVER_CONFIG_PATH = File.join(APP_PATH, "config/webpack/development.server.yml")
16+
17+
begin
18+
paths = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
19+
dev_server = YAML.load(File.read(DEV_SERVER_CONFIG_PATH))[NODE_ENV]
20+
21+
NODE_MODULES_PATH = File.join(APP_PATH.shellescape, paths["node_modules"])
22+
WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
23+
24+
if NODE_ENV == "development" && dev_server["enabled"]
25+
puts "Warning: webpack-dev-server is currently enabled in #{DEV_SERVER_CONFIG_PATH}. " \
26+
"Disable to serve assets directly from public/packs directory"
27+
end
28+
rescue Errno::ENOENT, NoMethodError
29+
puts "Configuration not found in config/webpack/paths.yml or config/webpack/development.server.yml."
30+
puts "Please run bundle exec rails webpacker:install to install webpacker"
31+
exit!
32+
end
33+
34+
WEBPACK_BIN = "#{NODE_MODULES_PATH}/.bin/webpack"
35+
WEBPACK_CONFIG = "#{WEBPACK_CONFIG_PATH}/#{NODE_ENV}.js"
36+
37+
Dir.chdir(APP_PATH) do
38+
exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG}" \
39+
" #{ARGV.join(" ")}"
40+
end

test/dummy/bin/webpack-dev-server

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
#!/usr/bin/env ruby
2+
$stdout.sync = true
3+
4+
require "shellwords"
5+
require "yaml"
6+
7+
ENV["RAILS_ENV"] ||= "development"
8+
RAILS_ENV = ENV["RAILS_ENV"]
9+
10+
ENV["NODE_ENV"] ||= RAILS_ENV
11+
NODE_ENV = ENV["NODE_ENV"]
12+
13+
APP_PATH = File.expand_path("../", __dir__)
14+
CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
15+
16+
begin
17+
paths = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
18+
19+
NODE_MODULES_PATH = File.join(APP_PATH.shellescape, paths["node_modules"])
20+
WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
21+
22+
WEBPACK_BIN = "#{NODE_MODULES_PATH}/.bin/webpack-dev-server"
23+
DEV_SERVER_CONFIG = "#{WEBPACK_CONFIG_PATH}/development.server.js"
24+
rescue Errno::ENOENT, NoMethodError
25+
puts "Configuration not found in config/webpacker/paths.yml."
26+
puts "Please run bundle exec rails webpacker:install to install webpacker"
27+
exit!
28+
end
29+
30+
Dir.chdir(APP_PATH) do
31+
exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
32+
"--config #{DEV_SERVER_CONFIG}"
33+
end

test/dummy/bin/webpack-watcher

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#!/usr/bin/env ruby
2+
3+
ENV['RAILS_ENV'] ||= 'development'
4+
ENV['NODE_ENV'] ||= ENV['RAILS_ENV']
5+
6+
BIN_PATH = File.expand_path('.', __dir__)
7+
8+
Dir.chdir(BIN_PATH) do
9+
exec "./webpack --watch --progress --color #{ARGV.join(" ")}"
10+
end

test/dummy/bin/yarn

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#!/usr/bin/env ruby
2+
VENDOR_PATH = File.expand_path('..', __dir__)
3+
Dir.chdir(VENDOR_PATH) do
4+
begin
5+
exec "yarnpkg #{ARGV.join(" ")}"
6+
rescue Errno::ENOENT
7+
puts "Yarn executable was not detected in the system."
8+
puts "Download Yarn at https://yarnpkg.com/en/docs/install"
9+
end
10+
end

test/dummy/config/routes.rb

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@
77
get :inline_component
88
end
99
end
10+
11+
resource :pack_component, only: :show
1012
end
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Common configuration for webpacker loaded from config/webpack/paths.yml
2+
3+
const { join, resolve } = require('path')
4+
const { env } = require('process')
5+
const { safeLoad } = require('js-yaml')
6+
const { readFileSync } = require('fs')
7+
8+
const configPath = resolve('config', 'webpack')
9+
const loadersDir = join(__dirname, 'loaders')
10+
const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]
11+
const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV]
12+
const publicPath = env.NODE_ENV !== 'production' && devServer.enabled ?
13+
`http://${devServer.host}:${devServer.port}/` : `/${paths.entry}/`
14+
15+
module.exports = {
16+
devServer,
17+
env,
18+
paths,
19+
loadersDir,
20+
publicPath
21+
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Note: You must restart bin/webpack-watcher for changes to take effect
2+
3+
const merge = require('webpack-merge')
4+
const sharedConfig = require('./shared.js')
5+
6+
module.exports = merge(sharedConfig, {
7+
devtool: 'sourcemap',
8+
9+
stats: {
10+
errorDetails: true
11+
},
12+
13+
output: {
14+
pathinfo: true
15+
}
16+
})
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Note: You must restart bin/webpack-dev-server for changes to take effect
2+
3+
const { resolve } = require('path')
4+
const merge = require('webpack-merge')
5+
const devConfig = require('./development.js')
6+
const { devServer, publicPath, paths } = require('./configuration.js')
7+
8+
module.exports = merge(devConfig, {
9+
devServer: {
10+
host: devServer.host,
11+
port: devServer.port,
12+
compress: true,
13+
historyApiFallback: true,
14+
contentBase: resolve(paths.output, paths.entry),
15+
publicPath
16+
}
17+
})
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Restart webpack-dev-server if you make changes here
2+
default: &default
3+
enabled: true
4+
host: localhost
5+
port: 8080
6+
7+
development:
8+
<<: *default
9+
10+
test:
11+
<<: *default
12+
enabled: false
13+
14+
production:
15+
<<: *default
16+
enabled: false
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const { env, publicPath } = require('../configuration.js')
2+
3+
module.exports = {
4+
test: /\.(jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
5+
use: [{
6+
loader: 'file-loader',
7+
options: {
8+
publicPath,
9+
name: env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name].[ext]'
10+
}
11+
}]
12+
}
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
test: /\.js(\.erb)?$/,
3+
exclude: /node_modules/,
4+
loader: 'babel-loader',
5+
options: {
6+
presets: [
7+
['env', { modules: false }]
8+
]
9+
}
10+
}
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
test: /\.coffee(\.erb)?$/,
3+
loader: 'coffee-loader'
4+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
test: /\.erb$/,
3+
enforce: 'pre',
4+
exclude: /node_modules/,
5+
loader: 'rails-erb-loader',
6+
options: {
7+
runner: 'DISABLE_SPRING=1 bin/rails runner'
8+
}
9+
}
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
test: /\.(js|jsx)?(\.erb)?$/,
3+
exclude: /node_modules/,
4+
loader: 'babel-loader',
5+
options: {
6+
presets: [
7+
'react',
8+
['env', { modules: false }]
9+
]
10+
}
11+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const ExtractTextPlugin = require('extract-text-webpack-plugin')
2+
3+
module.exports = {
4+
test: /\.(scss|sass|css)$/i,
5+
use: ExtractTextPlugin.extract({
6+
fallback: 'style-loader',
7+
use: ['css-loader', 'postcss-loader', 'sass-loader']
8+
})
9+
}

test/dummy/config/webpack/paths.yml

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Restart webpack-watcher or webpack-dev-server if you make changes here
2+
default: &default
3+
config: config/webpack
4+
entry: packs
5+
output: public
6+
manifest: manifest.json
7+
node_modules: node_modules
8+
source: app/javascript
9+
extensions:
10+
- .coffee
11+
- .js
12+
- .jsx
13+
- .ts
14+
- .vue
15+
- .sass
16+
- .scss
17+
- .css
18+
- .png
19+
- .svg
20+
- .gif
21+
- .jpeg
22+
23+
development:
24+
<<: *default
25+
26+
test:
27+
<<: *default
28+
manifest: manifest-test.json
29+
30+
production:
31+
<<: *default
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* eslint global-require: 0 */
2+
// Note: You must run bin/webpack for changes to take effect
3+
4+
const webpack = require('webpack')
5+
const merge = require('webpack-merge')
6+
const CompressionPlugin = require('compression-webpack-plugin')
7+
const sharedConfig = require('./shared.js')
8+
9+
module.exports = merge(sharedConfig, {
10+
output: { filename: '[name]-[chunkhash].js' },
11+
12+
plugins: [
13+
new webpack.optimize.UglifyJsPlugin(),
14+
new CompressionPlugin({
15+
asset: '[path].gz[query]',
16+
algorithm: 'gzip',
17+
test: /\.(js|css|svg|eot|ttf|woff|woff2)$/
18+
})
19+
]
20+
})

0 commit comments

Comments
 (0)