Merge 2a17802 into 818f783

src/index.js

@@ -3,11 +3,14 @@ const observersMap = new WeakMap()
 
 /* Tools */
 
-const isObj = function(o) { return o && typeof o === 'object' }
+const isObj = function(o) { return o && typeof o === 'object' && !(o instanceof Date) }
 const isArray = Array.isArray
-const defineBubblingProperties = function(object, key, parent) {
+const defineBubblingProperties = function(object, key, parent, deep) {
     Object.defineProperty(object, '__key', { value: key, enumerable: false, configurable: true })
     Object.defineProperty(object, '__parent', { value: parent, enumerable: false, configurable: true })
+    deep && Object.entries(object).forEach(function([key, val]) {
+        if(isObj(val) && (!val.__key || !val.__parent)) defineBubblingProperties(object[key], key, object)
+    })
 }
 
 const batcher = {
@@ -109,10 +112,12 @@ const observe = function(obj, options = {}) {
 
             // If the new/old value are equal, return
             if((!isArray(obj) || prop !== 'length') && obj[prop] === value) return true
+            // Remember old value for handler
+            const oldValue = obj[prop]
             // If the deep flag is set we observe the newly set value
             obj[prop] = deep && isObj(value) ? observe(value, options) : value
             // If we defined a handler, we define the bubbling keys recursively on the new value
-            handler && deep && isObj(value) && defineBubblingProperties(obj[prop], prop, obj)
+            handler && deep && isObj(value) && defineBubblingProperties(obj[prop], prop, obj, deep)
 
             if(handler) {
                 // Retrieve the mutated properties chain & call the handler
@@ -122,7 +127,7 @@ const observe = function(obj, options = {}) {
                     ancestry.unshift(parent.__key)
                     parent = parent.__parent
                 }
-                handler(ancestry, value, proxy)
+                handler(ancestry, value, oldValue, proxy)
             }
 
             // If the prop is watched
@@ -150,16 +155,66 @@ const observe = function(obj, options = {}) {
         // Need this for binding es6 classes methods which are stored in the object prototype
         const methods = [
             ...Object.getOwnPropertyNames(obj),
-            ...Object.getOwnPropertyNames(Object.getPrototypeOf(obj))
+            ...Object.getPrototypeOf(obj) && ['String', 'Number', 'Object', 'Array', 'Boolean', 'Date'].indexOf(Object.getPrototypeOf(obj).constructor.name) < 0 ? Object.getOwnPropertyNames(Object.getPrototypeOf(obj)) : []
         ].filter(prop => prop != 'constructor' && typeof obj[prop] === 'function')
         methods.forEach(key => obj[key] = obj[key].bind(proxy))
     }
 
     return proxy
 }
 
+/* Observable */
+
+const Observable = Base => class extends Base {
+    constructor(data, options) {
+        super()
+        const store = observe(data || { }, options || { deep: true, batch: true })
+        return new Proxy(this, {
+            set: (obj, name, value) => {
+                if(typeof value === 'function') {
+                    this[name] = value
+                } else {
+                    store[name] = value
+                    if(this[name] === undefined) Object.defineProperty(this, name, { get: () => store[name], enumerable: true, configurable: true })
+                }
+                return true
+            },
+            deleteProperty: (obj, name) => {
+                delete store[name]
+                delete obj[name]
+                return true
+            }
+        })
+    }
+}
+
+/* Computable */
+
+const Computable = Base => class extends Base {
+    constructor() {
+        super()
+        Object.defineProperty(this, '__computed', { value: [ ], enumerable: false })
+    }
+    computed(fn) {
+        this.__computed.push(computed(fn))
+    }
+    dispose() {
+        while(this.__computed.length) dispose(this.__computed.pop())
+    }
+}
+
+/* container */
+
+const container = function(options) {
+    if(typeof options === 'function') options = { deep: true, batch: true, handler: options }
+    return observe({ }, options)
+}
+
 export default {
     observe,
     computed,
-    dispose
+    dispose,
+    Observable,
+    Computable,
+    container
 }