wip: work on removing mergeDeep dep

Author: lmiller1990

src/mount.ts

@@ -175,8 +175,9 @@ export function mount(
   }
 
   if (global?.components) {
-    for (const key of Object.keys(global.components))
+    for (const key of Object.keys(global.components)) {
       app.component(key, global.components[key])
+    }
   }
 
   if (global?.directives) {

src/utils.ts

@@ -1,12 +1,63 @@
-import isString from 'lodash/isString'
 import mergeWith from 'lodash/mergeWith'
 
 import { GlobalMountOptions } from './types'
 
+const isString = (val: unknown): val is string => typeof val === 'string'
+
+function deepMerge(...objects: object[]) {
+  const isObject = (obj: any) => obj && typeof obj === 'object'
+
+  function deepMergeInner(target: object, source: object) {
+    Object.keys(source).forEach((key: string) => {
+      const targetValue = target[key]
+      const sourceValue = source[key]
+
+      if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+        target[key] = targetValue.concat(sourceValue)
+      } else if (isObject(targetValue) && isObject(sourceValue)) {
+        target[key] = deepMergeInner(
+          Object.assign({}, targetValue),
+          sourceValue
+        )
+      } else {
+        target[key] = sourceValue
+      }
+    })
+
+    return target
+  }
+
+  if (objects.length < 2) {
+    throw new Error(
+      'deepMerge: this function expects at least 2 objects to be provided'
+    )
+  }
+
+  if (objects.some((object) => !isObject(object))) {
+    throw new Error('deepMerge: all values should be of type "object"')
+  }
+
+  const target = objects.shift()
+  let source: object
+
+  while ((source = objects.shift())) {
+    deepMergeInner(target, source)
+  }
+
+  return target
+}
+
 function mergeGlobalProperties(
   configGlobal: GlobalMountOptions = {},
   mountGlobal: GlobalMountOptions = {}
 ): GlobalMountOptions {
+  // const merged: GlobalMountOptions = deepMerge(configGlobal, mountGlobal)
+  // merged.components = {
+  //   ...mountGlobal.components,
+  //   ...configGlobal.components
+  // }
+  // console.log(merged)
+  // return merged
   return mergeWith(
     {},
     configGlobal,
@@ -24,6 +75,7 @@ function mergeGlobalProperties(
       }
     }
   )
+  // return mountGlobal
 }
 
 export { isString, mergeGlobalProperties }

tests/config.spec.ts

@@ -1,3 +1,5 @@
+import { h } from 'vue'
+
 import { config, mount } from '../src'
 import Hello from './components/Hello.vue'
 
@@ -15,16 +17,24 @@ describe('config', () => {
 
   describe('components', () => {
     const Component = {
-      template: '<div>{{ msg }} <hello/></div>',
+      components: { Hello },
+      template: '<div>{{ msg }} <Hello /></div>',
       props: ['msg']
     }
 
     it('allows setting components globally', () => {
-      config.global.components = { Hello }
+      const HelloOverride = {
+        name: 'HelloOverride',
+        props: ['msg'],
+        render() {
+          return () => h('div', `${this.msg} Hello world override`)
+        }
+      }
+      config.global.components = { Hello: HelloOverride }
       const wrapper1 = mount(Component, { props: { msg: 'Wrapper1' } })
       const wrapper2 = mount(Component, { props: { msg: 'Wrapper2' } })
-      expect(wrapper1.text()).toEqual('Wrapper1 Hello world')
-      expect(wrapper2.text()).toEqual('Wrapper2 Hello world')
+      expect(wrapper1.text()).toEqual('Wrapper1 Hello world override')
+      expect(wrapper2.text()).toEqual('Wrapper2 Hello world override')
     })
 
     it('allows overwriting globally set component config on a per mount instance', () => {