allow the observation of symbol keyed and function valued props (except well known symbols)

Author: solkimicreb

package-lock.json

@@ -4,25 +4,24 @@ import {
 } from '../reactionRunner'
 import { proxyToRaw } from '../internals'
 
-const getPrototypeOf = Object.getPrototypeOf
 const hasOwnProperty = Object.prototype.hasOwnProperty
 
 const instrumentations = {
   has (key) {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     registerRunningReactionForOperation({ target, key, type: 'has' })
     return proto.has.apply(target, arguments)
   },
   get (key) {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     registerRunningReactionForOperation({ target, key, type: 'get' })
     return proto.get.apply(target, arguments)
   },
   add (key) {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     const hadKey = proto.has.call(target, key)
     // forward the operation before queueing reactions
     const result = proto.add.apply(target, arguments)
@@ -33,7 +32,7 @@ const instrumentations = {
   },
   set (key, value) {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     const hadKey = proto.has.call(target, key)
     const oldValue = proto.get.call(target, key)
     // forward the operation before queueing reactions
@@ -47,7 +46,7 @@ const instrumentations = {
   },
   delete (key) {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     const hadKey = proto.has.call(target, key)
     const oldValue = proto.get ? proto.get.call(target, key) : undefined
     // forward the operation before queueing reactions
@@ -59,7 +58,7 @@ const instrumentations = {
   },
   clear () {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     const hadItems = target.size !== 0
     const oldTarget = target instanceof Map ? new Map(target) : new Set(target)
     // forward the operation before queueing reactions
@@ -71,37 +70,37 @@ const instrumentations = {
   },
   forEach () {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     registerRunningReactionForOperation({ target, type: 'iterate' })
     return proto.forEach.apply(target, arguments)
   },
   keys () {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     registerRunningReactionForOperation({ target, type: 'iterate' })
     return proto.keys.apply(target, arguments)
   },
   values () {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     registerRunningReactionForOperation({ target, type: 'iterate' })
     return proto.values.apply(target, arguments)
   },
   entries () {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     registerRunningReactionForOperation({ target, type: 'iterate' })
     return proto.entries.apply(target, arguments)
   },
   [Symbol.iterator] () {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     registerRunningReactionForOperation({ target, type: 'iterate' })
     return proto[Symbol.iterator].apply(target, arguments)
   },
   get size () {
     const target = proxyToRaw.get(this)
-    const proto = getPrototypeOf(this)
+    const proto = Reflect.getPrototypeOf(this)
     registerRunningReactionForOperation({ target, type: 'iterate' })
     return Reflect.get(proto, 'size', target)
   }

src/builtIns/collections.js

@@ -7,12 +7,18 @@ import {
 } from './reactionRunner'
 
 const hasOwnProperty = Object.prototype.hasOwnProperty
+const wellKnownSymbols = new Set(
+  Object.getOwnPropertyNames(Symbol)
+    .map(key => Symbol[key])
+    .filter(value => typeof value === 'symbol')
+)
 
 // intercept get operations on observables to know which reaction uses their properties
 function get (target, key, receiver) {
   const result = Reflect.get(target, key, receiver)
-  // do not register (observable.prop -> reaction) pairs for these cases
-  if (typeof key === 'symbol' || typeof result === 'function') {
+  // do not register (observable.prop -> reaction) pairs for well known symbols
+  // these symbols are frequently retrieved in low level JavaScript under the hood
+  if (typeof key === 'symbol' && wellKnownSymbols.has(key)) {
     return result
   }
   // register and save (observable.prop -> runningReaction)
@@ -40,10 +46,6 @@ function get (target, key, receiver) {
 
 function has (target, key) {
   const result = Reflect.has(target, key)
-  // do not register (observable.prop -> reaction) pairs for these cases
-  if (typeof key === 'symbol') {
-    return result
-  }
   // register and save (observable.prop -> runningReaction)
   registerRunningReactionForOperation({ target, key, type: 'has' })
   return result
@@ -66,13 +68,11 @@ function set (target, key, value, receiver) {
   const oldValue = target[key]
   // execute the set operation before running any reaction
   const result = Reflect.set(target, key, value, receiver)
-  // do not queue reactions if it is a symbol keyed property
-  // or the target of the operation is not the raw receiver
+  // do not queue reactions if the target of the operation is not the raw receiver
   // (possible because of prototypal inheritance)
-  if (typeof key === 'symbol' || target !== proxyToRaw.get(receiver)) {
+  if (target !== proxyToRaw.get(receiver)) {
     return result
   }
-
   // queue a reaction if it's a new property or its value changed
   if (!hadKey) {
     queueReactionsForOperation({ target, key, value, receiver, type: 'add' })
@@ -95,8 +95,8 @@ function deleteProperty (target, key) {
   const oldValue = target[key]
   // execute the delete operation before running any reaction
   const result = Reflect.deleteProperty(target, key)
-  // only queue reactions for non symbol keyed property delete which resulted in an actual change
-  if (typeof key !== 'symbol' && hadKey) {
+  // only queue reactions for delete operations which resulted in an actual change
+  if (hadKey) {
     queueReactionsForOperation({ target, key, oldValue, type: 'delete' })
   }
   return result

src/handlers.js

@@ -2,75 +2,75 @@ import {
   registerReactionForOperation,
   getReactionsForOperation,
   releaseReaction
-} from './store';
+} from './store'
 
 // reactions can call each other and form a call stack
-const reactionStack = [];
-let isDebugging = false;
+const reactionStack = []
+let isDebugging = false
 
-export function runAsReaction(reaction, fn, context, args) {
+export function runAsReaction (reaction, fn, context, args) {
   // do not build reactive relations, if the reaction is unobserved
   if (reaction.unobserved) {
-    return Reflect.apply(fn, context, args);
+    return Reflect.apply(fn, context, args)
   }
 
   // only run the reaction if it is not already in the reaction stack
   // TODO: improve this to allow explicitly recursive reactions
   if (reactionStack.indexOf(reaction) === -1) {
     // release the (obj -> key -> reactions) connections
     // and reset the cleaner connections
-    releaseReaction(reaction);
+    releaseReaction(reaction)
 
     try {
       // set the reaction as the currently running one
       // this is required so that we can create (observable.prop -> reaction) pairs in the get trap
-      reactionStack.push(reaction);
-      return Reflect.apply(fn, context, args);
+      reactionStack.push(reaction)
+      return Reflect.apply(fn, context, args)
     } finally {
       // always remove the currently running flag from the reaction when it stops execution
-      reactionStack.pop();
+      reactionStack.pop()
     }
   }
 }
 
 // register the currently running reaction to be queued again on obj.key mutations
-export function registerRunningReactionForOperation(operation) {
+export function registerRunningReactionForOperation (operation) {
   // get the current reaction from the top of the stack
-  const runningReaction = reactionStack[reactionStack.length - 1];
+  const runningReaction = reactionStack[reactionStack.length - 1]
   if (runningReaction) {
-    debugOperation(runningReaction, operation);
-    registerReactionForOperation(runningReaction, operation);
+    debugOperation(runningReaction, operation)
+    registerReactionForOperation(runningReaction, operation)
   }
 }
 
-export function queueReactionsForOperation(operation) {
+export function queueReactionsForOperation (operation) {
   // iterate and queue every reaction, which is triggered by obj.key mutation
-  getReactionsForOperation(operation).forEach(queueReaction, operation);
+  getReactionsForOperation(operation).forEach(queueReaction, operation)
 }
 
-function queueReaction(reaction) {
-  debugOperation(reaction, this);
+function queueReaction (reaction) {
+  debugOperation(reaction, this)
   // queue the reaction for later execution or run it immediately
   if (typeof reaction.scheduler === 'function') {
-    reaction.scheduler(reaction);
+    reaction.scheduler(reaction)
   } else if (typeof reaction.scheduler === 'object') {
-    reaction.scheduler.add(reaction);
+    reaction.scheduler.add(reaction)
   } else {
-    reaction();
+    reaction()
   }
 }
 
-function debugOperation(reaction, operation) {
+function debugOperation (reaction, operation) {
   if (reaction.debugger && !isDebugging) {
     try {
-      isDebugging = true;
-      reaction.debugger(operation);
+      isDebugging = true
+      reaction.debugger(operation)
     } finally {
-      isDebugging = false;
+      isDebugging = false
     }
   }
 }
 
-export function hasRunningReaction() {
-  return reactionStack.length > 0;
+export function hasRunningReaction () {
+  return reactionStack.length > 0
 }