webpacker-react-on-rails 2.0

data/Rakefile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList["test/**/*_test.rb"]
+  t.verbose = true
+end
+
+task default: :test

data/lib/install/angular.rb

@@ -0,0 +1,18 @@
+require "webpacker/configuration"
+
+puts "Copying angular loader to config/webpack/loaders"
+copy_file "#{__dir__}/config/loaders/installers/angular.js", "config/webpack/loaders/angular.js"
+
+puts "Copying angular example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/angular/hello_angular.js", "#{Webpacker::Configuration.entry_path}/hello_angular.js"
+
+puts "Copying hello_angular app to #{Webpacker::Configuration.source_path}"
+directory "#{__dir__}/examples/angular/hello_angular", "#{Webpacker::Configuration.source_path}/hello_angular"
+
+puts "Copying tsconfig.json to the Rails root directory for typescript"
+copy_file "#{__dir__}/examples/angular/tsconfig.json", "tsconfig.json"
+
+puts "Installing all angular dependencies"
+run "yarn add typescript ts-loader core-js zone.js rxjs @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic"
+
+puts "Webpacker now supports angular and typescript 🎉"

data/lib/install/bin/webpack-dev-server.tt

@@ -0,0 +1,71 @@
+<%= shebang %>
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+require "socket"
+
+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_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/#{NODE_ENV}.js")
+
+LISTEN_IP_ADDR  = "0.0.0.0"
+
+def args(key)
+  index = ARGV.index(key)
+  index ? ARGV[index + 1] : nil
+end
+
+begin
+  dev_server = YAML.load_file(CONFIG_FILE)[RAILS_ENV]["dev_server"]
+
+  HOSTNAME        = args('--host') || dev_server["host"]
+  PORT            = args('--port') || dev_server["port"]
+  HTTPS           = ARGV.include?('--https') || dev_server["https"]
+  DEV_SERVER_ADDR = "http#{"s" if HTTPS}://#{HOSTNAME}:#{PORT}"
+
+rescue Errno::ENOENT, NoMethodError
+  $stdout.puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
+  $stdout.puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+begin
+  server = TCPServer.new(LISTEN_IP_ADDR, PORT)
+  server.close
+
+rescue Errno::EADDRINUSE
+  $stdout.puts "Another program is running on port #{PORT}. Set a new port in #{CONFIG_FILE} for dev_server"
+  exit!
+end
+
+# Delete supplied host and port CLI arguments
+["--host", "--port"].each do |arg|
+  ARGV.delete(args(arg))
+  ARGV.delete(arg)
+end
+
+newenv = {
+  "NODE_PATH" => NODE_MODULES_PATH.shellescape,
+  "ASSET_HOST" => DEV_SERVER_ADDR.shellescape
+}.freeze
+
+if Gem.win_platform?
+  # Workaround for yarn not playing nicely with path separators
+  cmdline = ["#{NODE_MODULES_PATH}/.bin/webpack-dev-server", "--progress", "--color", "--config",
+WEBPACK_CONFIG, "--host", LISTEN_IP_ADDR, "--port", PORT.to_s] + ARGV
+else
+  cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config",
+WEBPACK_CONFIG, "--host", LISTEN_IP_ADDR, "--port", PORT.to_s] + ARGV
+end
+
+Dir.chdir(APP_PATH) do
+  exec newenv, *cmdline
+end

data/lib/install/bin/webpack.tt

@@ -0,0 +1,32 @@
+<%= shebang %>
+$stdout.sync = true
+
+require "shellwords"
+
+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__)
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
+
+unless File.exist?(WEBPACK_CONFIG)
+  puts "Webpack configuration not found."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+if Gem.win_platform?
+  # Workaround for yarn not playing nicely with path separators
+  cmdline = ["#{NODE_MODULES_PATH}/.bin/webpack", "--config", WEBPACK_CONFIG] + ARGV
+else
+  cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
+end
+
+Dir.chdir(APP_PATH) do
+  exec newenv, *cmdline
+end

data/lib/install/config/.babelrc

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

data/lib/install/config/.postcssrc.yml

@@ -0,0 +1,3 @@
+plugins:
+  postcss-smart-import: {}
+  postcss-cssnext: {}

data/lib/install/config/loaders/core/assets.js

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

data/lib/install/config/loaders/core/babel.js

@@ -0,0 +1,5 @@
+module.exports = {
+  test: /\.js(\.erb)?$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader'
+}

data/lib/install/config/loaders/core/coffee.js

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

data/lib/install/config/loaders/core/erb.js

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

data/lib/install/config/loaders/core/sass.js

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

data/lib/install/config/loaders/installers/angular.js

@@ -0,0 +1,4 @@
+module.exports = {
+  test: /\.ts$/,
+  loader: 'ts-loader'
+}

data/lib/install/config/loaders/installers/elm.js

@@ -0,0 +1,20 @@
+const path = require('path')
+const { env } = require('../configuration.js')
+
+const elmSource = path.resolve(process.cwd())
+const elmMake = `${elmSource}/node_modules/.bin/elm-make`
+const elmDefaultOptions = `cwd=${elmSource}&pathToMake=${elmMake}`
+
+const loaderOptions = () => {
+  if (env.NODE_ENV === 'production') {
+    return `elm-webpack-loader?${elmDefaultOptions}`
+  }
+
+  return `elm-hot-loader!elm-webpack-loader?${elmDefaultOptions}&verbose=true&warn=true&debug=true`
+}
+
+module.exports = {
+  test: /\.elm$/,
+  exclude: [/elm-stuff/, /node_modules/],
+  loader: loaderOptions()
+}

data/lib/install/config/loaders/installers/react.js

@@ -0,0 +1,5 @@
+module.exports = {
+  test: /\.(js|jsx)?(\.erb)?$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader'
+}

data/lib/install/config/loaders/installers/vue.js

@@ -0,0 +1,41 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const { env } = require('../configuration.js')
+
+// Change it to false if you prefer Vue styles to be inlined by javascript in runtime
+const extractStyles = false
+
+const cssLoader = [
+  { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
+  { loader: 'postcss-loader', options: { sourceMap: true } },
+  'resolve-url-loader'
+]
+const sassLoader = cssLoader.concat([
+  { loader: 'sass-loader', options: { sourceMap: true, indentedSyntax: true } }
+])
+const scssLoader = cssLoader.concat([
+  { loader: 'sass-loader', options: { sourceMap: true } }
+])
+
+function vueStyleLoader(loader) {
+  if (extractStyles) {
+    return ExtractTextPlugin.extract({
+      fallback: 'vue-style-loader',
+      use: loader
+    })
+  }
+  return ['vue-style-loader'].concat(loader)
+}
+
+module.exports = {
+  test: /\.vue$/,
+  loader: 'vue-loader',
+  options: {
+    loaders: {
+      js: 'babel-loader',
+      file: 'file-loader',
+      css: vueStyleLoader(cssLoader),
+      scss: vueStyleLoader(scssLoader),
+      sass: vueStyleLoader(sassLoader)
+    }
+  }
+}

data/lib/install/config/webpack/configuration.js

@@ -0,0 +1,45 @@
+// 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', 'webpacker.yml')
+const loadersDir = join(__dirname, 'loaders')
+const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]
+
+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', settings.public_output_path),
+  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
+}
+
+let resolvedModules = [
+  resolve(settings.source_path),
+  'node_modules'
+]
+
+if (settings.resolved_paths && Array.isArray(settings.resolved_paths)) {
+  resolvedModules = resolvedModules.concat(settings.resolved_paths)
+}
+
+module.exports = {
+  settings,
+  resolvedModules,
+  env,
+  loadersDir,
+  output
+}

data/lib/install/config/webpack/development.js

@@ -0,0 +1,31 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
+const merge = require('webpack-merge')
+const sharedConfig = require('./shared.js')
+const { settings, output } = require('./configuration.js')
+
+module.exports = merge(sharedConfig, {
+  devtool: 'cheap-eval-source-map',
+
+  output: {
+    pathinfo: true
+  },
+
+  devServer: {
+    clientLogLevel: 'none',
+    https: settings.dev_server.https,
+    host: settings.dev_server.host,
+    port: settings.dev_server.port,
+    contentBase: output.path,
+    publicPath: output.publicPath,
+    compress: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    historyApiFallback: true,
+    watchOptions: {
+      ignored: /node_modules/
+    },
+    stats: {
+      errorDetails: true
+    }
+  }
+})

data/lib/install/config/webpack/production.js

@@ -0,0 +1,35 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
+/* eslint global-require: 0 */
+
+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' },
+  devtool: 'source-map',
+  stats: 'normal',
+
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      minimize: true,
+      sourceMap: true,
+
+      compress: {
+        warnings: false
+      },
+
+      output: {
+        comments: false
+      }
+    }),
+
+    new CompressionPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
+    })
+  ]
+})

data/lib/install/config/webpack/shared.js

@@ -0,0 +1,53 @@
+// 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, dirname, join, relative, resolve } = require('path')
+const { sync } = require('glob')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const ManifestPlugin = require('webpack-manifest-plugin')
+const extname = require('path-complete-extname')
+const { env, settings, output, loadersDir, resolvedModules } = require('./configuration.js')
+
+const extensionGlob = `**/*{${settings.extensions.join(',')}}*`
+const entryPath = join(settings.source_path, settings.source_entry_path)
+const packPaths = sync(join(entryPath, extensionGlob))
+
+module.exports = {
+  entry: packPaths.reduce(
+    (map, entry) => {
+      const localMap = map
+      const namespace = relative(join(entryPath), dirname(entry))
+      localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)
+      return localMap
+    }, {}
+  ),
+
+  output: {
+    filename: '[name].js',
+    path: output.path,
+  },
+
+  module: {
+    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({
+      writeToFileEmit: true
+    })
+  ],
+
+  resolve: {
+    extensions: settings.extensions,
+    modules: resolvedModules
+  },
+
+  resolveLoader: {
+    modules: ['node_modules']
+  }
+}