Extendable base environment config and new API's (#884)

Author: gauravtiwari

.travis.yml

@@ -24,6 +24,7 @@ install:
   - yarn
 script:
   - yarn lint
+  - yarn test
   - bundle exec rubocop
   - bundle exec rake test
 matrix:

lib/install/examples/vue/hello_vue.js

@@ -1,7 +1,7 @@
 /* eslint no-console: 0 */
 // Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
-// <%= stylesheet_pack_tag 'hello_vue' %> if you set extractStyles to true
-// in config/webpack/loaders/vue.js) to the head of your layout file,
+// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
+// to the head of your layout file,
 // like app/views/layouts/application.html.erb.
 // All it does is render <div>Hello Vue</div> at the bottom of the page.
 

lib/install/template.rb

@@ -1,7 +1,7 @@
 # Install Webpacker
 copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
 
-say "Copying webpack core config and loaders"
+puts "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
 say "Copying .postcssrc.yml to app root directory"

package.json

@@ -42,13 +42,18 @@
     "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"
+    "eslint-plugin-react": "^6.10.0",
+    "jest": "^21.2.1"
+  },
+  "jest": {
+    "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",
+    "roots": ["<rootDir>/package"]
   },
   "peerDependencies": {
     "coffeescript": ">= 1.12.7 || >= 2.x"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "lint": "eslint {package,lib}/"
   },
   "repository": {

package/asset_host.js

@@ -1,11 +1,10 @@
 const config = require('./config')
 const { resolve } = require('path')
 
-function removeOuterSlashes(string) {
-  return string.replace(/^\/*/, '').replace(/\/*$/, '')
-}
+const removeOuterSlashes = string =>
+  string.replace(/^\/*/, '').replace(/\/*$/, '')
 
-function formatPublicPath(host = '', path = '') {
+const formatPublicPath = (host = '', path = '') => {
   let formattedHost = removeOuterSlashes(host)
   if (formattedHost && !/^http/i.test(formattedHost)) {
     formattedHost = `//${formattedHost}`

package/config_types/__tests__/config_list.js

@@ -0,0 +1,123 @@
+/* global test expect */
+
+const ConfigList = require('../config_list')
+
+test('new', () => {
+  const list = new ConfigList()
+  expect(list).toBeInstanceOf(ConfigList)
+  expect(list).toBeInstanceOf(Array)
+})
+
+test('set', () => {
+  const list = new ConfigList()
+  expect(list.set('key', 'value')).toEqual([{ key: 'key', value: 'value' }])
+})
+
+test('get', () => {
+  const list = new ConfigList()
+  list.set('key', 'value')
+  expect(list.get('key')).toEqual('value')
+})
+
+test('append', () => {
+  const list = new ConfigList()
+  list.set('key', 'value')
+  expect(list.append('key1', 'value1')).toEqual([
+    { key: 'key', value: 'value' },
+    { key: 'key1', value: 'value1' }
+  ])
+})
+
+test('prepend', () => {
+  const list = new ConfigList()
+  list.set('key', 'value')
+  expect(list.prepend('key1', 'value1')).toEqual([
+    { key: 'key1', value: 'value1' },
+    { key: 'key', value: 'value' }
+  ])
+})
+
+test('insert without position', () => {
+  const list = new ConfigList()
+  list.set('key', 'value')
+
+  expect(list.insert('key1', 'value1')).toEqual([
+    { key: 'key', value: 'value' },
+    { key: 'key1', value: 'value1' }
+  ])
+
+  expect(list.insert('key2', 'value2')).toEqual([
+    { key: 'key', value: 'value' },
+    { key: 'key1', value: 'value1' },
+    { key: 'key2', value: 'value2' }
+  ])
+})
+
+test('insert before an item', () => {
+  const list = new ConfigList()
+  list.set('key', 'value')
+  list.set('key1', 'value1')
+
+  expect(list.insert('key2', 'value2', { before: 'key' })).toEqual([
+    { key: 'key2', value: 'value2' },
+    { key: 'key', value: 'value' },
+    { key: 'key1', value: 'value1' }
+  ])
+
+  expect(list.insert('key3', 'value3', { before: 'key2' })).toEqual([
+    { key: 'key3', value: 'value3' },
+    { key: 'key2', value: 'value2' },
+    { key: 'key', value: 'value' },
+    { key: 'key1', value: 'value1' }
+  ])
+})
+
+test('insert after an item', () => {
+  const list = new ConfigList()
+  list.set('key', 'value')
+  list.set('key1', 'value1')
+
+  expect(list.insert('key2', 'value2', { after: 'key' })).toEqual([
+    { key: 'key', value: 'value' },
+    { key: 'key2', value: 'value2' },
+    { key: 'key1', value: 'value1' }
+  ])
+
+  expect(list.insert('key3', 'value3', { after: 'key2' })).toEqual([
+    { key: 'key', value: 'value' },
+    { key: 'key2', value: 'value2' },
+    { key: 'key3', value: 'value3' },
+    { key: 'key1', value: 'value1' }
+  ])
+})
+
+test('delete', () => {
+  const list = new ConfigList()
+  list.set('key', 'value')
+  list.set('key1', 'value1')
+  expect(list.delete('key')).toEqual([{ key: 'key1', value: 'value1' }])
+  expect(list.delete('key1')).toEqual([])
+})
+
+test('getIndex', () => {
+  const list = new ConfigList()
+  list.set('key', 'value')
+  list.set('key1', 'value1')
+  expect(list.getIndex('key')).toEqual(0)
+  expect(list.getIndex('key2')).toEqual(-1)
+  expect(() => list.getIndex('key2', true)).toThrow('Item key2 not found')
+})
+
+test('values', () => {
+  const list = new ConfigList()
+  list.set('key', 'value')
+  list.set('key1', 'value1')
+  expect(list.values()).toEqual(['value', 'value1'])
+})
+
+test('keys', () => {
+  const list = new ConfigList()
+  list.set('key', 'value')
+  list.set('key1', 'value1')
+  expect(list.keys()).toEqual(['key', 'key1'])
+})

package/config_types/__tests__/config_object.js

@@ -0,0 +1,43 @@
+/* global test expect */
+
+const ConfigObject = require('../config_object')
+
+test('new', () => {
+  const object = new ConfigObject()
+  expect(object).toBeInstanceOf(ConfigObject)
+  expect(object).toBeInstanceOf(Object)
+})
+
+test('set', () => {
+  const object = new ConfigObject()
+  expect(object.set('key', 'value')).toEqual({ key: 'value' })
+})
+
+test('get', () => {
+  const object = new ConfigObject()
+  object.set('key', 'value')
+  object.set('key1', 'value1')
+  expect(object.get('key')).toEqual('value')
+})
+
+test('delete', () => {
+  const object = new ConfigObject()
+  object.set('key', { key1: 'value' })
+  expect(object.delete('key.key1')).toEqual({ key: {} })
+  expect(object.delete('key')).toEqual({})
+})
+
+test('toObject', () => {
+  const object = new ConfigObject()
+  object.set('key', 'value')
+  object.set('key1', 'value1')
+  expect(object.toObject()).toEqual({ key: 'value', key1: 'value1' })
+})
+
+test('merge', () => {
+  const object = new ConfigObject()
+  object.set('foo', {})
+  expect(object.merge({ key: 'foo', value: 'bar' })).toEqual(
+    { foo: {}, key: 'foo', value: 'bar' }
+  )
+})

package/config_types/config_list.js

@@ -0,0 +1,79 @@
+/**
+  * @class
+  * @extends { Array }
+*/
+class ConfigList extends Array {
+  get(key) {
+    const index = this.getIndex(key, true)
+    return this[index].value
+  }
+
+  set(key, value) {
+    return this.add({ key, value })
+  }
+
+  append(key, value) {
+    return this.set(key, value)
+  }
+
+  prepend(key, value) {
+    return this.add({ key, value }, 'prepend')
+  }
+
+  insert(key, value, pos = {}) {
+    if (!(pos.before || pos.after)) return this.append(key, value)
+
+    const currentIndex = this.getIndex(key)
+    if (currentIndex >= 0) this.splice(currentIndex, 1)
+
+    let newIndex = this.getIndex(pos.before || pos.after)
+    if (pos.after) newIndex += 1
+
+    this.splice(newIndex, 0, { key, value })
+    return this
+  }
+
+  delete(key) {
+    const index = this.getIndex(key, true)
+    this.splice(index, 1)
+    return this
+  }
+
+  getIndex(key, shouldThrow = false) {
+    const index = this.findIndex(entry =>
+      (
+        entry === key ||
+        entry.key === key ||
+        (entry.constructor && entry.constructor.name === key)
+      )
+    )
+
+    if (shouldThrow && index < 0) throw new Error(`Item ${key} not found`)
+    return index
+  }
+
+  add({ key, value }, strategy = 'append') {
+    const index = this.getIndex(key)
+    if (index >= 0) this.delete(key)
+
+    switch (strategy) {
+      case 'prepend':
+        this.unshift({ key, value })
+        break
+      default:
+        this.push({ key, value })
+    }
+
+    return this
+  }
+
+  values() {
+    return this.map(item => item.value)
+  }
+
+  keys() {
+    return this.map(item => item.key)
+  }
+}
+
+module.exports = ConfigList

package/config_types/config_object.js

@@ -0,0 +1,54 @@
+const objectify = require('../utils/objectify')
+const deepAssign = require('../utils/deep_assign')
+const deepMerge = require('../utils/deep_merge')
+const { isStrPath, prettyPrint } = require('../utils/helpers')
+
+/**
+  * @class
+  * @extends { Object }
+*/
+class ConfigObject extends Object {
+  constructor(props = {}) {
+    super()
+    this.merge(props)
+  }
+
+  get(key) {
+    return isStrPath(key) ? objectify(key, this) : this[key]
+  }
+
+  set(key, value) {
+    Object.assign(this, deepAssign(this, key, value))
+    return this
+  }
+
+  delete(key) {
+    let obj = this
+    let propKey = key
+
+    if (isStrPath(key)) {
+      const keys = key.split('.')
+      propKey = keys.pop()
+      const parentObjPath = keys.join('.')
+      obj = objectify(parentObjPath, this)
+    }
+
+    if (!obj) throw new Error(`Prop not found: ${key} in ${prettyPrint(obj)}`)
+    delete obj[propKey]
+
+    return this
+  }
+
+  toObject() {
+    const object = {}
+    Object.keys(this).forEach(key => (object[key] = this[key]))
+    return object
+  }
+
+  merge(config) {
+    Object.assign(this, deepMerge(this, config))
+    return this
+  }
+}
+
+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
+}