webpacker-for-component 1.0.0 → 1.1.0

data/lib/webpacker-for-component/railtie.rb

@@ -0,0 +1,41 @@
+require "rails/railtie"
+
+require "webpacker-for-component/helper"
+require "webpacker-for-component/dev_server_proxy"
+
+class Webpacker::Engine < ::Rails::Engine
+  initializer "webpacker.proxy" do |app|
+    if Rails.env.development?
+      app.middleware.insert_before 0,
+        Rails::VERSION::MAJOR >= 5 ?
+        Webpacker::DevServerProxy : "Webpacker::DevServerProxy", ssl_verify_none: true
+    end
+  end
+
+  initializer "webpacker.helper" do |app|
+    ActiveSupport.on_load :action_controller do
+      ActionController::Base.helper Webpacker::Helper
+    end
+
+    ActiveSupport.on_load :action_view do
+      include Webpacker::Helper
+    end
+  end
+
+  initializer "webpacker.logger" do
+    config.after_initialize do |app|
+      if ::Rails.logger.respond_to?(:tagged)
+        Webpacker.logger = ::Rails.logger
+      else
+        Webpacker.logger = ActiveSupport::TaggedLogging.new(::Rails.logger)
+      end
+    end
+  end
+
+  initializer "webpacker.bootstrap" do
+    if defined?(Rails::Server) || defined?(Rails::Console)
+      Webpacker.bootstrap
+      Spring.after_fork { Webpacker.bootstrap } if defined?(Spring)
+    end
+  end
+end

data/lib/webpacker-for-component/version.rb

@@ -0,0 +1,4 @@
+module Webpacker
+  # Change the version in package.json too, please!
+  VERSION = "1.1.0"
+end

data/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "webpacker-for-component",
+  "version": "1.1.0",
+  "description": "Use Webpack to manage app-like JavaScript modules for component-based use",
+  "main": "package/index.js",
+  "files": [
+    "package"
+  ],
+  "engines": {
+    "node": ">=6.0.0",
+    "yarn": ">=0.25.2"
+  },
+  "dependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "coffee-loader": "^0.8.0",
+    "coffeescript": "^1.12.7",
+    "compression-webpack-plugin": "^1.0.0",
+    "css-loader": "^0.28.5",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "glob": "^7.1.2",
+    "js-yaml": "^3.9.1",
+    "node-sass": "^4.5.3",
+    "path-complete-extname": "^0.1.0",
+    "postcss-cssnext": "^3.0.2",
+    "postcss-loader": "^2.0.6",
+    "postcss-smart-import": "^0.7.5",
+    "rails-erb-loader": "^5.2.1",
+    "resolve-url-loader": "^2.1.0",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.5.5",
+    "webpack-manifest-plugin": "^1.3.1"
+  },
+  "devDependencies": {
+    "eslint": "^3.16.1",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.10.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint {package,lib}/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webpacker-for-component.git"
+  },
+  "author": "Thomas Gauthey",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/webpacker-for-component.git"
+  },
+  "homepage": "https://rubygems.org/gems/webpacker-for-component"
+}

data/package/asset_host.js

@@ -0,0 +1,21 @@
+const config = require('./config')
+const { resolve } = require('path')
+
+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}/`
+}
+
+module.exports = {
+  path: resolve('public', config.public_output_path),
+  publicPath: `/${config.public_output_path}/`.replace(/([^:]\/)\/+/g, '$1'),
+  publicPathWithHost: formatPublicPath(process.env.ASSET_HOST, config.public_output_path)
+}

data/package/config.js

@@ -0,0 +1,8 @@
+const { resolve } = require('path')
+const { safeLoad } = require('js-yaml')
+const { readFileSync } = require('fs')
+
+const filePath = resolve('config', 'webpacker.yml')
+const config = safeLoad(readFileSync(filePath), 'utf8')
+
+module.exports = config[process.env.NODE_ENV]

data/package/environment.js

@@ -0,0 +1,95 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const config = require('./config')
+const assetHost = require('./asset_host')
+
+const { basename, dirname, join, relative, resolve } = require('path')
+const { sync } = require('glob')
+const extname = require('path-complete-extname')
+
+const webpack = require('webpack')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const ManifestPlugin = require('webpack-manifest-plugin')
+
+function getLoaderMap() {
+  const result = new Map()
+  const paths = sync(resolve(__dirname, 'loaders', '*.js'))
+  paths.forEach((path) => {
+    const name = basename(path, extname(path))
+    result.set(name, require(path))
+  })
+  return result
+}
+
+function getPluginMap() {
+  const result = new Map()
+  result.set('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
+  result.set('ExtractText', new ExtractTextPlugin('[name]-[contenthash].css'))
+  result.set('Manifest', new ManifestPlugin({ publicPath: assetHost.publicPath, writeToFileEmit: true }))
+  return result
+}
+
+function getExtensionsGlob() {
+  const { extensions } = config
+  if (!extensions.length) {
+    throw new Error('You must configure at least one extension to compile in webpacker.yml')
+  }
+  return extensions.length === 1 ? `**/${extensions[0]}` : `**/*{${extensions.join(',')}}`
+}
+
+function getEntryObject() {
+  const result = {}
+  const glob = getExtensionsGlob()
+  const rootPath = join(config.source_path, config.source_entry_path)
+  const paths = sync(join(rootPath, glob))
+  paths.forEach((path) => {
+    const namespace = relative(join(rootPath), dirname(path))
+    const name = join(namespace, basename(path, extname(path)))
+    result[name] = resolve(path)
+  })
+  return result
+}
+
+function getModulePaths() {
+  let result = [resolve(config.source_path), 'node_modules']
+  if (config.resolved_paths) {
+    result = result.concat(config.resolved_paths)
+  }
+  return result
+}
+
+module.exports = class Environment {
+  constructor() {
+    this.loaders = getLoaderMap()
+    this.plugins = getPluginMap()
+  }
+
+  toWebpackConfig() {
+    return {
+      entry: getEntryObject(),
+
+      output: {
+        filename: '[name]-[chunkhash].js',
+        chunkFilename: '[name]-[chunkhash].chunk.js',
+        path: assetHost.path,
+        publicPath: assetHost.publicPath
+      },
+
+      module: {
+        rules: Array.from(this.loaders.values())
+      },
+
+      plugins: Array.from(this.plugins.values()),
+
+      resolve: {
+        extensions: config.extensions,
+        modules: getModulePaths()
+      },
+
+      resolveLoader: {
+        modules: ['node_modules']
+      }
+    }
+  }
+}

data/package/environments/development.js

@@ -0,0 +1,46 @@
+const Environment = require('../environment')
+const { dev_server } = require('../config')
+const assetHost = require('../asset_host')
+const webpack = require('webpack')
+
+module.exports = class extends Environment {
+  constructor() {
+    super()
+
+    if (dev_server.hmr) {
+      this.plugins.set('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
+      this.plugins.set('NamedModules', new webpack.NamedModulesPlugin())
+    }
+  }
+
+  toWebpackConfig() {
+    const result = super.toWebpackConfig()
+    if (dev_server.hmr) {
+      result.output.filename = '[name]-[hash].js'
+    }
+    result.output.pathinfo = true
+    result.devtool = 'cheap-eval-source-map'
+    result.devServer = {
+      host: dev_server.host,
+      port: dev_server.port,
+      https: dev_server.https,
+      hot: dev_server.hmr,
+      contentBase: assetHost.path,
+      publicPath: assetHost.publicPath,
+      clientLogLevel: 'none',
+      compress: true,
+      historyApiFallback: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*'
+      },
+      overlay: true,
+      watchOptions: {
+        ignored: /node_modules/
+      },
+      stats: {
+        errorDetails: true
+      }
+    }
+    return result
+  }
+}

data/package/environments/production.js

@@ -0,0 +1,34 @@
+const Environment = require('../environment')
+const webpack = require('webpack')
+const CompressionPlugin = require('compression-webpack-plugin')
+
+module.exports = class extends Environment {
+  constructor() {
+    super()
+
+    this.plugins.set('ModuleConcatenation', new webpack.optimize.ModuleConcatenationPlugin())
+
+    this.plugins.set('UglifyJs', new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      }
+    }))
+
+    this.plugins.set('Compression', new CompressionPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
+    }))
+  }
+
+  toWebpackConfig() {
+    const result = super.toWebpackConfig()
+    result.devtool = 'source-map'
+    result.stats = 'normal'
+    return result
+  }
+}

data/package/environments/test.js

@@ -0,0 +1,3 @@
+const Environment = require('../environment')
+
+module.exports = class extends Environment {}

data/package/index.js

@@ -0,0 +1,16 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const Environment = require('./environment')
+const { resolve } = require('path')
+const { existsSync } = require('fs')
+
+function createEnvironment() {
+  const path = resolve(__dirname, 'environments', `${process.env.NODE_ENV}.js`)
+  const constructor = existsSync(path) ? require(path) : Environment
+  return new constructor()
+}
+
+const environment = createEnvironment()
+
+module.exports = { environment, Environment }

data/package/loaders/babel.js

@@ -0,0 +1,11 @@
+const { join } = require('path')
+const { cache_path } = require('../config')
+
+module.exports = {
+  test: /\.(js|jsx)?(\.erb)?$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    cacheDirectory: join(cache_path, 'babel-loader')
+  }
+}

data/package/loaders/coffee.js

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

data/package/loaders/elm.js

@@ -0,0 +1,19 @@
+const { resolve } = require('path')
+
+const elmSource = resolve(process.cwd())
+const elmMake = `${elmSource}/node_modules/.bin/elm-make`
+const elmDefaultOptions = `cwd=${elmSource}&pathToMake=${elmMake}`
+
+const loaderOptions = () => {
+  if (process.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(\.erb)?$/,
+  exclude: [/elm-stuff/, /node_modules/],
+  loader: loaderOptions()
+}

data/package/loaders/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/package/loaders/file.js

@@ -0,0 +1,15 @@
+const config = require('../config')
+const assetHost = require('../asset_host')
+const { join } = require('path')
+
+module.exports = {
+  test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
+  use: [{
+    loader: 'file-loader',
+    options: {
+      name: '[path][name]-[hash].[ext]',
+      context: join(config.source_path),
+      publicPath: assetHost.publicPathWithHost
+    }
+  }]
+}

data/package/loaders/style.js

@@ -0,0 +1,31 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const path = require('path')
+const config = require('../config')
+
+const postcssConfigPath = path.resolve(process.cwd(), '.postcssrc.yml')
+const isProduction = process.env.NODE_ENV === 'production'
+const extractCSS = !(config.dev_server && config.dev_server.hmr)
+
+const extractOptions = {
+  fallback: 'style-loader',
+  use: [
+    { loader: 'css-loader', options: { minimize: isProduction } },
+    { loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfigPath } } },
+    'resolve-url-loader',
+    { loader: 'sass-loader', options: { sourceMap: true } }
+  ]
+}
+
+// For production extract styles to a separate bundle
+const extractCSSLoader = {
+  test: /\.(scss|sass|css)$/i,
+  use: ExtractTextPlugin.extract(extractOptions)
+}
+
+// For hot-reloading use regular loaders
+const inlineCSSLoader = {
+  test: /\.(scss|sass|css)$/i,
+  use: ['style-loader'].concat(extractOptions.use)
+}
+
+module.exports = isProduction || extractCSS ? extractCSSLoader : inlineCSSLoader