wip: deep computed operator

Author: eddort

packages/dotto.x/computed/container.js

@@ -15,7 +15,9 @@ export const createContainer = (cb, emit, invalidate) => {
     emit,
     invalidate,
     unbind() {
-      listeners.forEach(sub => run_all(Object.values(sub)))
+      listeners.forEach(sub => {
+        run_all([...Object.values(sub), sub[DEEP_HANDLER] || (() => {})])
+      })
       listeners.clear()
       destroys.forEach(sub => run_all(Object.values(sub)))
       destroys.clear()

packages/dotto.x/computed/deep.js

@@ -18,25 +18,14 @@ export const deep = (store, query) => {
 
   let listenerBox = listeners.get(store)
   if (listenerBox && listenerBox[DEEP_HANDLER]) return store.get(query)
-
-  if (listenerBox) {
-    listenerBox[DEEP_HANDLER] = change(store, emit)
-    let filtered = Object.entries(listenerBox).filter(
-      ([key]) => key !== DEEP_HANDLER
+  listeners.set(store, { [DEEP_HANDLER]: change(store, emit) })
+  if (listenerBox) run_all(Object.values(listenerBox))
+  if (!destroys.has(store)) {
+    destroys.set(
+      store,
+      onOff(store, () => invalidate(true))
     )
-    // eslint-disable-next-line array-callback-return
-    filtered.map(([key, cb]) => {
-      cb()
-      delete listenerBox[key]
-    })
-  } else {
-    listeners.set(store, { [DEEP_HANDLER]: change(store, emit) })
   }
 
-  destroys.set(
-    store,
-    onOff(store, () => invalidate(true))
-  )
-
   return store.get(query)
 }

packages/dotto.x/computed/deep.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
 import { createStore } from '../create-store'
 import { computed } from './computed'
 import { deep } from './deep'
@@ -100,7 +101,8 @@ it('deep store from computed', () => {
 
   let store = createStore<Deep>({ some: { deep: 1 } })
   let someDeep = computed(() => deep(store, 'some.deep'))
-  let unsub = computed(() => deep(someDeep)).listen(value => {
+  let nextDeep = computed(() => deep(someDeep))
+  let unsub = nextDeep.listen(value => {
     data.push(value)
   })
 
@@ -111,6 +113,7 @@ it('deep store from computed', () => {
 
   expect(data).toEqual([2, 3, 4, 5])
   expect(someDeep.get()).toBe(5)
+  expect(nextDeep.get()).toBe(5)
   unsub()
 })
 
@@ -128,7 +131,6 @@ it('prevent watch', () => {
   let someDeep = computed(() => take(store, 'some.deep'))
   let unsub = computed(() => {
     let value = take(someDeep)
-    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
     return value * deep(store, 'some.test')
   }).listen(value => {
     data.push(value)
@@ -143,3 +145,178 @@ it('prevent watch', () => {
   expect(someDeep.get()).toBe(5)
   unsub()
 })
+
+it('prevents diamond dependency problem', () => {
+  let store = createStore({ count: 0 })
+  let values: string[] = []
+
+  let a = computed(() => {
+    return 'a' + deep(store, 'count')
+  })
+
+  let b = computed(() => {
+    return 'b' + deep(store, 'count')
+  })
+
+  let combined = computed(() => {
+    return take(a) + take(b)
+  })
+
+  let unsubscribe = combined.subscribe(v => {
+    values.push(v)
+  })
+
+  expect(values).toEqual(['a0b0'])
+
+  store.set('count', 1)
+  expect(values).toEqual(['a0b0', 'a1b1'])
+
+  unsubscribe()
+})
+
+
+it('prevent watchss', () => {
+  type Deep = {
+    some: {
+      deep: number
+      test: number
+    }
+  }
+
+  let data: (number | undefined)[] = []
+
+  let store = createStore<Deep>({ some: { deep: 1, test: 2 } })
+  let someDeep = computed(() => take(store, 'some.deep'))
+  let unsub = computed(() => {
+    let value = deep(someDeep)
+    return value * deep(store, 'some.test')
+  }).listen(value => {
+    data.push(value)
+  })
+
+  store.set('some.deep', 2)
+  store.set('some.deep', 3)
+  store.set('some.deep', 4)
+  store.set('some.deep', 5)
+
+  expect(data).toEqual([4, 6, 8, 10])
+  expect(someDeep.get()).toBe(5)
+  unsub()
+})
+
+it('works without reactive', () => {
+  expect.assertions(1)
+  let store = createStore({
+    some: { deep: { path: 3, test: 2, some: 4 } }
+  })
+
+  let pathMult = computed(() => {
+    let path = deep(store, 'some.deep.path')
+    return path * 2
+  })
+
+  let nextDataGetter = computed(() => {
+    return pathMult.get() / 2
+  })
+
+  let unsub2 = nextDataGetter.subscribe(val => {
+    expect(val).toBe(3)
+  })
+  store.set('some.deep.path', 4)
+  store.set('some.deep.path', 5)
+  unsub2()
+})
+
+//!!!!
+
+it('re-listen: when listener is last - container will destroy', () => {
+  let events: number[] = []
+  let store = createStore({ count: 0 })
+
+  let mult = computed(() => {
+    let count = deep(store, 'count')
+    return count
+  })
+
+  let unbind = mult.listen(num => {
+    events.push(num)
+  })
+
+  store.set('count', 1)
+  store.set('count', 2)
+  store.set('count', 3)
+
+  unbind()
+
+  let unbind2 = mult.listen(num => {
+    events.push(num)
+  })
+
+  store.set('count', 12)
+  store.set('count', 22)
+  store.set('count', 32)
+
+  unbind2()
+  expect(events).toEqual([1, 2, 3, 12, 22, 32])
+})
+
+it('re-listen: when store is off', () => {
+  let events: number[] = []
+  let store = createStore({ count: 0 })
+
+  let mult = computed(() => {
+    let count = deep(store, 'count')
+    return count
+  })
+
+  mult.listen(num => {
+    events.push(num)
+  })
+
+  store.set('count', 1)
+  store.set('count', 2)
+  store.set('count', 3)
+
+  store.off()
+  let unbind2 = mult.listen(num => {
+    events.push(num)
+  })
+  store.set('count', 12)
+  store.set('count', 22)
+  store.set('count', 32)
+
+  unbind2()
+  expect(events).toEqual([1, 2, 3, 12, 22, 32])
+})
+
+it.skip('re-listen: when on of many stores are off', () => {
+  let events: number[] = []
+  let store = createStore({ count: 0 })
+  let store2 = createStore({ count: 0 })
+
+  let mult = computed(() => {
+    return deep(store, 'count') + deep(store2, 'count')
+  })
+
+  mult.listen(num => {
+    events.push(num)
+  })
+
+  store.set('count', 1)
+  store.set('count', 2)
+  store.set('count', 3)
+
+  store.off()
+
+  store2.set('count', 12)
+  store2.set('count', 22)
+  store2.set('count', 32)
+
+  store2.off()
+
+  store2.set('count', 12)
+  store2.set('count', 22)
+  store2.set('count', 32)
+
+  expect(events).toEqual([1, 2, 3, 15, 25, 35])
+})

packages/dotto.x/computed/readable.js

@@ -53,9 +53,7 @@ export const readable = (cb, createContainer) => {
     get(reactive) {
       if (reactive) return cb()
       let targetContainer = target()
-
       if (!targetContainer) return cb()
-
       return decorate(cb, () => {
         targetContainer.silent = true
         return () => (targetContainer.silent = false)

packages/dotto.x/create-atom/lifecycle.test.ts

@@ -21,6 +21,16 @@ describe('atom lifecycle', () => {
     run_all([unsubHook, unsubAtom])
   })
 
+  it('onCreate (do not call)', () => {
+    let events: string[] = []
+    let atom = createAtom(2)
+    let unsubAtom = atom.subscribe(() => {})
+    let unsubHook = onCreate(atom, () => events.push('ok'))
+    atom.subscribe(() => {})
+    expect(events).toEqual([])
+    run_all([unsubHook, unsubAtom])
+  })
+
   it('onOff (from listen)', () => {
     let events: string[] = []
     let atom = createAtom(2)

packages/dotto.x/package.json

@@ -107,7 +107,7 @@
       "name": "Computed",
       "path": "./computed/index.js",
       "import": "{ computed }",
-      "limit": "617B"
+      "limit": "631B"
     },
     {
       "name": "all",