improve dot notation

Author: mfbx9da4

observableStateTree/dotNotation.tsx

@@ -3,10 +3,16 @@ import { createDotNotationProxy } from './dotNotationProxy'
 
 export const createStore = (initial: any) => {
   const { get, set, listen } = createStateTree(initial)
-  const specialKeys = new Set(['val', 'listen'])
-  const onGet = (key: string, path: string[]) => {
-    if (key === 'val') return get(path)
-    if (key === 'listen') return (callback: Callback) => listen(path, callback)
+  const listenKey = Symbol()
+  const valKey = Symbol()
+  const specialKeys = new Set([valKey, listenKey])
+  const onGet = (key: symbol, path: string[]) => {
+    if (key === valKey) return get(path)
+    if (key === listenKey) return (callback: Callback) => listen(path, callback)
+  }
+  return {
+    tree: createDotNotationProxy(onGet, set, specialKeys) as any,
+    listen: (node: any, callback: Callback) => node[listenKey](callback),
+    val: (node: any) => node[valKey],
   }
-  return createDotNotationProxy(onGet, set, specialKeys) as any
 }

observableStateTree/dotNotationProxy.ts

@@ -1,22 +1,25 @@
 export const createDotNotationProxy = (
-  onGet: (key: string, path: string[]) => unknown,
+  onGet: (key: symbol, path: string[]) => unknown,
   onSet: (path: string[], value: unknown) => void,
-  specialKeys: Set<string>,
+  specialKeys: Set<symbol>,
   path: string[] = []
 ): typeof Proxy => {
   return new Proxy(
     {},
     {
-      get: (target, key: string) => {
+      get: (target, key: string | symbol) => {
+        if (typeof key === 'string') {
+          return createDotNotationProxy(onGet, onSet, specialKeys, [...path, key])
+        }
         if (specialKeys.has(key)) return onGet(key, path)
-        return createDotNotationProxy(onGet, onSet, specialKeys, [...path, key])
+        throw new Error('symbol keys are not supported')
       },
-      set: (target: any, key: string, value: unknown) => {
-        if (specialKeys.has(key)) {
-          throw new Error(`sorry you may not use "${key}" as a key`)
+      set: (target: any, key: string | symbol, value: unknown) => {
+        if (typeof key === 'string') {
+          onSet([...path, key], value)
+          return true
         }
-        onSet([...path, key], value)
-        return true
+        throw new Error('symbol keys are not supported')
       },
     }
   )

pages/dotNotationExample.tsx

@@ -3,21 +3,21 @@ import { createStore } from '../observableStateTree/dotNotation'
 
 const test = () => {
   console.clear()
-  const tree = createStore({ a: { b: { c: 1, d: 1 } } })
+  const { tree, listen, val } = createStore({ a: { b: { c: 1, d: 1 } } })
   // the tree behaves like a normal object e.g
-  console.log('tree', tree.val)
+  console.log('tree', val(tree))
   // prints the object 👉 { a: { b: { c : 1, d: 1 } } }
 
   // we can setup listeners
-  const destroyRoot = tree.listen((root: any) => console.log('root', root))
+  const destroyRoot = listen(tree, (root: any) => console.log('root', root))
   // on initial setup prints the full tree 👉 root { a: { b: { c: 1, d: 1 } } }
-  const destroyA = tree.a.listen((a: any) => console.log('a', a))
+  const destroyA = listen(tree.a, (a: any) => console.log('a', a))
   // 👉 a { b: { c: 1 } }
-  const destroyB = tree.a.b.listen((b: any) => console.log('b', b))
+  const destroyB = listen(tree.a.b, (b: any) => console.log('b', b))
   // 👉 b { c: 1 }
-  const destroyC = tree.a.b.c.listen((c: any) => console.log('c', c))
+  const destroyC = listen(tree.a.b.c, (c: any) => console.log('c', c))
   // 👉 c 1
-  const destroyD = tree.a.b.c.listen((d: any) => console.log('d', d))
+  const destroyD = listen(tree.a.b.c, (d: any) => console.log('d', d))
   // 👉 d 1
 
   // should also support sending the prev value
@@ -36,7 +36,7 @@ const test = () => {
 
   // 🙋‍♂️
   // 2. Modifying a parent notifies the relevant children listeners.
-  tree.a = { ...tree.a.val }
+  tree.a = { ...val(tree.a) }
   // 👉 a { b: { c: 2 } }
   // a is fired but b, c and d are not fired
   tree.a = { e: 1 }