Revert to old API and extend native arrays and objects

Author: gauravtiwari

lib/install/config/webpack/development.js

@@ -1,3 +1,3 @@
 const environment = require('./environment')
 
-module.exports = environment.config
+module.exports = environment.toWebpackConfig()

lib/install/config/webpack/production.js

@@ -1,3 +1,3 @@
 const environment = require('./environment')
 
-module.exports = environment.config
+module.exports = environment.toWebpackConfig()

lib/install/config/webpack/test.js

@@ -1,3 +1,3 @@
 const environment = require('./environment')
 
-module.exports = environment.config
+module.exports = environment.toWebpackConfig()

package.json

@@ -35,8 +35,7 @@
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
     "webpack": "^3.5.5",
-    "webpack-manifest-plugin": "^1.3.1",
-    "webpack-merge": "^4.1.0"
+    "webpack-manifest-plugin": "^1.3.1"
   },
   "devDependencies": {
     "eslint": "^3.16.1",

package/config-types/config-list.js

@@ -0,0 +1,58 @@
+/**
+  * @class
+  * @extends { Array }
+*/
+
+class ConfigList extends Array {
+  set(key, value, pos = 'bottom') {
+    const index = this.index(key)
+    if (index >= 0) this.delete(key)
+    return this.add({ key, value }, pos)
+  }
+
+  get(key) {
+    if (this.index(key) < 0) throw new Error(`Item ${key} not found in the list`)
+    return this[this.index(key)].value
+  }
+
+  insertAtPos(index, item) {
+    return this.splice(index, 0, item)
+  }
+
+  delete(key) {
+    const index = this.index(key)
+    if (index) return this.splice(index, 1)
+    return this
+  }
+
+  index(key) {
+    return this.findIndex(entry =>
+      (
+        entry === key ||
+        entry.key === key ||
+        (entry.constructor && entry.constructor.name === key)
+      )
+    )
+  }
+
+  values() {
+    return this.map(item => item.value)
+  }
+
+  keys() {
+    return this.map(item => item.key)
+  }
+
+  add(item, pos) {
+    if (pos === 'top') {
+      this.unshift(item)
+    } else if (typeof pos === 'number') {
+      this.insertAtPos(pos, item)
+    } else {
+      this.push(item)
+    }
+    return this
+  }
+}
+
+module.exports = ConfigList

package/config-types/config-object.js

@@ -0,0 +1,35 @@
+const deepMerge = require('./utils')
+
+/**
+  * @class
+  * @extends { Object }
+*/
+
+class ConfigObject extends Object {
+  get(key) {
+    return this[key]
+  }
+
+  set(key, value) {
+    this[key] = value
+    return this
+  }
+
+  delete(key) {
+    if (!this[key]) throw new Error(`Config prop ${key} not found`)
+    delete this[key]
+    return this
+  }
+
+  toObject() {
+    const object = {}
+    Object.keys(this).forEach(key => (object[key] = this[key]))
+    return object
+  }
+
+  merge(config) {
+    return Object.assign(this, deepMerge(this, config))
+  }
+}
+
+module.exports = ConfigObject

package/config-types/index.js

@@ -0,0 +1,7 @@
+const ConfigObject = require('./config-object')
+const ConfigList = require('./config-list')
+
+module.exports = {
+  ConfigObject,
+  ConfigList
+}

package/config-types/utils.js

@@ -0,0 +1,29 @@
+const isObject = value => (
+  typeof value === 'object' &&
+  value !== null &&
+  (value.length === undefined || value.length === null)
+)
+
+const isArray = value => Array.isArray(value)
+
+const isEqual = (target, source) => JSON.stringify(target) === JSON.stringify(source)
+
+const deepMerge = (target, source) => {
+  if (!target) return source
+  if (!source) return target
+  if (isEqual(target, source)) return source
+  if (isArray(target) && isArray(source)) return [...new Set([...target, ...source])]
+  if (!(isObject(target) && isObject(source))) return source
+
+  return [...Object.keys(target), ...Object.keys(source)].reduce(
+    (result, key) =>
+      (Object.assign(
+        {},
+        result,
+        { [key]: deepMerge(target[key], source[key]) }
+      )),
+    {}
+  )
+}
+
+module.exports = deepMerge

package/environment.js

@@ -6,133 +6,99 @@ const { sync } = require('glob')
 const extname = require('path-complete-extname')
 
 const webpack = require('webpack')
-const merge = require('webpack-merge')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 
+const { ConfigList, ConfigObject } = require('./config-types')
 const rules = require('./rules')
+const config = require('./config')
 const assetHost = require('./asset_host')
-const {
-  source_path: sourcePath,
-  resolved_paths: resolvedPaths,
-  source_entry_path: sourceEntryPath,
-  extensions
-} = require('./config')
-
-const getBaseLoaders = () =>
-  Object.values(rules).map(rule => rule)
-
-const getBaseResolvedModules = () => {
-  const result = []
-  result.push(resolve(sourcePath))
-  result.push('node_modules')
-  if (resolvedPaths) {
-    resolvedPaths.forEach(path => result.push(path))
-  }
+
+const getLoaderList = () => {
+  const result = new ConfigList()
+  Object.entries(rules).forEach(([key, rule]) => result.set(key, rule))
+  return result
+}
+
+const getPluginList = () => {
+  const result = new ConfigList()
+  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
 }
 
 const 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(',')}}`
 }
 
 const getEntryObject = () => {
-  const result = {}
+  const result = new ConfigObject()
   const glob = getExtensionsGlob()
-  const entryPath = join(sourcePath, sourceEntryPath)
-  const entryPaths = sync(join(entryPath, glob))
-  entryPaths.forEach((path) => {
-    const namespace = relative(join(entryPath), dirname(path))
+  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)
+    result.set(name, resolve(path))
   })
   return result
 }
 
-const makeArray = obj => (Array.isArray(obj) ? obj : [obj])
+const getModulePaths = () => {
+  let result = new ConfigList()
+  result.set('source', resolve(config.source_path))
+  result.set('node_modules', 'node_modules')
+  if (config.resolved_paths) {
+    result = result.concat(config.resolved_paths)
+  }
+  return result
+}
 
-module.exports = class Environment {
-  constructor() {
-    this.mergeOptions = {
-      entry: 'append',
-      'module.rules': 'append',
-      plugins: 'append'
+const getBaseConfig = () =>
+  new ConfigObject().merge({
+    output: {
+      filename: '[name]-[chunkhash].js',
+      chunkFilename: '[name]-[chunkhash].chunk.js',
+      path: assetHost.path,
+      publicPath: assetHost.publicPath
+    },
+
+    resolve: {
+      extensions: config.extensions
+    },
+
+    resolveLoader: {
+      modules: ['node_modules']
     }
+  })
 
-    this.config = {
-      entry: getEntryObject(),
-
-      output: {
-        filename: '[name]-[chunkhash].js',
-        chunkFilename: '[name]-[chunkhash].chunk.js',
-        path: assetHost.path,
-        publicPath: assetHost.publicPath
-      },
-
-      module: {
-        rules: getBaseLoaders()
-      },
-
-      plugins: [
-        new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))),
-        new ExtractTextPlugin('[name]-[contenthash].css'),
-        new ManifestPlugin({ publicPath: assetHost.publicPath, writeToFileEmit: true })
-      ],
-
-      resolve: {
-        extensions,
-        modules: getBaseResolvedModules()
-      },
-
-      resolveLoader: {
-        modules: ['node_modules']
-      }
-    }
+module.exports = class Environment {
+  constructor() {
+    this.loaders = getLoaderList()
+    this.plugins = getPluginList()
+    this.config = getBaseConfig()
+    this.entry = getEntryObject()
+    this.resolvedModules = getModulePaths()
   }
 
-  addEntry(entry) {
-    this.mergeConfig({
-      entry: makeArray(entry)
-    })
-  }
+  toWebpackConfig() {
+    return this.config.merge({
+      entry: this.entry.toObject(),
 
-  addRule(rule) {
-    this.mergeConfig({
       module: {
-        rules: makeArray(rule)
-      }
-    })
-  }
+        rules: this.loaders.values()
+      },
 
-  addPlugin(plugin) {
-    this.mergeConfig({
-      plugins: makeArray(plugin)
-    })
-  }
+      plugins: this.plugins.values(),
 
-  addResolvedModule(module) {
-    this.mergeConfig({
       resolve: {
-        modules: makeArray(module)
+        modules: this.resolvedModules.values()
       }
     })
   }
-
-  addLoader(ruleName, loader) {
-    makeArray(ruleName).forEach(rule => this.updateRule(rule, { use: makeArray(loader) }))
-  }
-
-  updateRule(name, options = {}) {
-    const rule = rules[name]
-    if (!rule) throw new Error(`Rule ${name} not found in ${JSON.stringify(rules, null, 2)}`)
-    this.addRule(merge.smart(rule, options))
-  }
-
-  mergeConfig(config) {
-    this.config = merge.smartStrategy(this.mergeOptions)(this.config, config)
-    return this.config
-  }
 }