Merge pull request #26 from dottostack/feat/atomic

feat: atomic store

Author: eddort

packages/dotto.x/computed/container.js

@@ -27,7 +27,11 @@ export const createContainer = (cb, emit, invalidate) => {
         return unbind
       })
 
-      if (!listenerBox[query]) listenerBox[query] = store.watch(query, emit)
+      if (!listenerBox[query]) {
+        listenerBox[query] = store.watch
+          ? store.watch(query, emit)
+          : store.listen(emit)
+      }
     },
     call() {
       return decorate(cb, () => {

packages/dotto.x/computed/take.d.ts

@@ -1,10 +1,16 @@
 /* eslint-disable no-shadow */
 import type { ReadableStore } from './computed'
+import type { DotXStore } from '../create-store'
+import type { ResolveType } from '../utils/get'
+import type { DotXAtom } from '../create-atom'
 
-import { DotXStore } from '../create-store'
-import { ResolveType } from '../utils/get'
+export function take<Sub extends ReadableStore>(
+  dep: Sub
+): ReturnType<Sub['get']>
 
-export function take<Sub extends ReadableStore>(dep: Sub): ReturnType<Sub['get']>
+export function take<Data>(
+  dep: DotXAtom<Data>,
+): Data
 
 export function take<Data, Query extends string>(
   dep: DotXStore<Data>,

packages/dotto.x/create-atom/index.d.ts

@@ -0,0 +1,32 @@
+export type DotXAtom<State> = {
+  /**
+   * Get store value.
+   *
+   * ```js
+   * store.get('some.value')
+   * ```
+   *
+   * @param path Path with dots to your data.
+   */
+  get(): State
+
+  set(payload: State): State
+
+  listen(cb: (value: State) => void): () => void
+  subscribe(cb: (value: State) => void): () => void
+
+  off(): void
+}
+
+/**
+ * Define simple store.
+ *
+ * ```js
+ * const store = createStore({ some: { path: 0 } })
+ * ```
+ *
+ * @param name Name of your initializing store.
+ * @param initial Your initial data or interface.
+ * @returns The store object with methods to subscribe, get and set.
+ */
+export function createAtom<State>(initial?: State = {}): DotXAtom<State>

packages/dotto.x/create-atom/index.js

@@ -0,0 +1,37 @@
+export const createAtom = (data = {}) => {
+  let listenners = []
+  let store = {
+    lc: 0,
+    set(value) {
+      data = value
+      store._emit()
+      return data
+    },
+    get() {
+      return data
+    },
+    _emit() {
+      for (let listener of listenners) {
+        listener(data)
+      }
+    },
+    listen(cb) {
+      store.lc = listenners.push(cb)
+      return () => {
+        listenners.splice(listenners.indexOf(cb), 1)
+        store.lc--
+        if (!store.lc) store.off()
+      }
+    },
+    subscribe(cb) {
+      let unbind = store.listen(cb)
+      cb(data)
+      return unbind
+    },
+    off() {
+      listenners = []
+      store.lc = 0
+    }
+  }
+  return store
+}

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

@@ -0,0 +1,47 @@
+import { jest } from '@jest/globals'
+
+import { computed, take } from '../computed'
+import { createAtom } from './index'
+
+jest.useFakeTimers()
+
+describe('atom:', () => {
+  it('listen', async () => {
+    expect.assertions(2)
+    let store = createAtom({ some: { path: 0 } })
+    let unbind = store.listen(value => {
+      expect(value).toBe(store.get())
+    })
+
+    store.set({ some: { path: 1 } })
+    store.set({ some: { path: 2 } })
+    unbind()
+  })
+
+  it('subscribe', () => {
+    expect.assertions(3)
+    let store = createAtom({ some: { path: 0 } })
+    let unbind = store.subscribe(value => {
+      expect(value).toBe(store.get())
+    })
+
+    store.set({ some: { path: 1 } })
+    store.set({ some: { path: 2 } })
+    unbind()
+  })
+
+  it('use computed function', () => {
+    let events: number[] = []
+    let time = createAtom(1)
+    let num = computed(() => {
+      return 10 + take(time)
+    })
+    let unsub = num.subscribe(value => {
+      events.push(value)
+    })
+    time.set(2)
+    time.set(3)
+    expect(events).toEqual([11, 12, 13])
+    unsub()
+  })
+})

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

@@ -0,0 +1,98 @@
+import { onChange, onCreate, onGet, onOff, onSet } from '../lifecycle'
+import { run_all } from '../utils/run_all'
+import { createAtom } from './index'
+
+describe('atom lifecycle', () => {
+  it('onCreate (from listen)', () => {
+    let events: string[] = []
+    let atom = createAtom(2)
+    let unsubHook = onCreate(atom, () => events.push('ok'))
+    let unsubAtom = atom.listen(() => {})
+    expect(events).toEqual(['ok'])
+    run_all([unsubHook, unsubAtom])
+  })
+
+  it('onCreate (from subscribe)', () => {
+    let events: string[] = []
+    let atom = createAtom(2)
+    let unsubHook = onCreate(atom, () => events.push('ok'))
+    let unsubAtom = atom.subscribe(() => {})
+    expect(events).toEqual(['ok'])
+    run_all([unsubHook, unsubAtom])
+  })
+
+  it('onOff (from listen)', () => {
+    let events: string[] = []
+    let atom = createAtom(2)
+    let unsubHook = onOff(atom, () => events.push('ok'))
+    let unsubAtom = atom.listen(() => {})
+    unsubAtom()
+    expect(events).toEqual(['ok'])
+    unsubHook()
+  })
+
+  it('onOff (from subscribe)', () => {
+    let events: string[] = []
+    let atom = createAtom(2)
+    let unsubHook = onOff(atom, () => events.push('ok'))
+    let unsubAtom = atom.subscribe(() => {})
+    unsubAtom()
+    expect(events).toEqual(['ok'])
+    unsubHook()
+  })
+
+  it('onSet', () => {
+    let events: string[] = []
+    let atom = createAtom(2)
+    let unsubHook = onSet(atom, () => events.push('ok'))
+    atom.set(3)
+    expect(events).toEqual(['ok'])
+    unsubHook()
+  })
+
+  it('onSet (abort)', () => {
+    let events: string[] = []
+    let atom = createAtom(2)
+    let unsubHook = onSet(atom, (_, { methods }) => {
+      methods.abort()
+    })
+    atom.listen(() => {
+      events.push('i will never call')
+    })
+    atom.set(3)
+    expect(events).toEqual([])
+    unsubHook()
+  })
+
+  it('onChange', () => {
+    let events: string[] = []
+    let atom = createAtom(2)
+    let unsubHook = onChange(atom, () => events.push('ok'))
+    atom.set(3)
+    expect(events).toEqual(['ok'])
+    unsubHook()
+  })
+
+  it('onChange (abort)', () => {
+    let events: string[] = []
+    let atom = createAtom(2)
+    let unsubHook = onChange(atom, (_, { methods }) => {
+      methods.abort()
+    })
+    atom.listen(() => {
+      events.push('i will never call')
+    })
+    atom.set(3)
+    expect(events).toEqual([])
+    unsubHook()
+  })
+
+  it('onGet', () => {
+    let events: string[] = []
+    let atom = createAtom(2)
+    let unsubHook = onGet(atom, () => events.push('ok'))
+    atom.get()
+    expect(events).toEqual(['ok'])
+    unsubHook()
+  })
+})

packages/dotto.x/effect/index.d.ts

@@ -1,7 +1,8 @@
-import { DotXStore } from '../create-store'
-import { ReadableStore } from '../computed'
+import type { DotXStore } from '../create-store'
+import type { ReadableStore } from '../computed'
+import type { DotXAtom } from '../create-atom'
 
-type EffectDep<Data> = DotXStore<Data> | ReadableStore<Data>
+type EffectDep<Data> = DotXStore<Data> | ReadableStore<Data> | DotXAtom
 
 export function effect(store: EffectDep<any>, cb: () => void): () => void
 

packages/dotto.x/effect/index.js

@@ -13,6 +13,7 @@ export const effect = (deps, cb) => {
     if (dep._run) {
       unbinds.push(dep.listen(handle))
     } else {
+      // TODO listen
       unbinds.push(onOff(dep, handle))
     }
     return unbinds

packages/dotto.x/index.d.ts

@@ -1,12 +1,12 @@
 export * from './create-store'
+export * from './create-atom'
 
 export * from './computed'
 export { mount } from './mount'
+export { update } from './update'
 
 export { task, allTasks } from './task'
 export { ResolveType } from './utils/get'
 
 export { effect } from './effect'
 export { bind, BindedStore } from './bind'
-export { watchDeep } from './watch-deep'
-export { deep } from './deep'

packages/dotto.x/index.js

@@ -1,11 +1,11 @@
+export { createAtom } from './create-atom'
 export { createStore } from './create-store'
 
 export { computed, take } from './computed'
 export { mount } from './mount'
+export { update } from './update'
 
 export { task, allTasks } from './task'
 
 export { effect } from './effect'
 export { bind } from './bind'
-export { watchDeep } from './watch-deep'
-export { deep } from './deep'