@codeleap/store 4.3.3 → 4.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/store",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,7 +9,7 @@
     "directory": "packages/store"
   },
   "devDependencies": {
-    "@codeleap/config": "4.3.3",
+    "@codeleap/config": "4.3.5",
     "ts-node-dev": "1.1.8"
   },
   "scripts": {

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/store",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/array.ts

@@ -0,0 +1,26 @@
+import { WritableAtom } from "nanostores"
+
+export function arrayHandler<T extends any[]>(store: WritableAtom<T>) {
+  return new Proxy([], {
+    get(target, p, receiver){
+      const val = store.get()
+
+      const property = val[p]
+
+      if(typeof property == 'function') {
+        return (...args) => {
+          const r =  val[p](...args)
+
+          store.set(val)
+          
+          return r
+        }
+      }
+
+      return property
+    }
+  })
+}
+
+
+export const arrayOps = Object.getOwnPropertyNames(Array.prototype)

package/src/globalState.ts

@@ -1,8 +1,9 @@
 import { useStore } from '@nanostores/react'
 import { setPersistentEngine, persistentAtom } from '@nanostores/persistent'
-import { atom } from 'nanostores'
+import { atom, WritableAtom } from 'nanostores'
 import { GlobalState, GlobalStateConfig, StateSelector } from './types'
 import { stateAssign, useStateSelector } from './utils'
+import { arrayHandler, arrayOps } from './array'
 
 const defaultConfig: GlobalStateConfig = {
   persistKey: null,
@@ -36,6 +37,22 @@ export function globalState<T>(value: T, config: GlobalStateConfig = defaultConf
         }
       }
 
+      if(prop == 'reset'){
+        return Reflect.get(target, 'set', receiver)
+      }
+      
+      if(arrayOps.includes(prop as string)){
+        const currentValue = target.get()
+        
+        if(!Array.isArray(currentValue)) {
+          throw new Error('Cannot call array methods on a non array store')
+        }
+
+        const handle =  arrayHandler(target as WritableAtom<any[]>)
+
+        return Reflect.get(handle, prop, receiver)
+      }
+
       return Reflect.get(target, prop, receiver)
     }
   }) as unknown as GlobalState<T>

package/src/index.ts

@@ -1,3 +1,3 @@
 export * from './globalState'
 export * from './types'
-export * from './utils'
+export * from './utils'

package/src/tests/globalState.spec.ts

@@ -0,0 +1,69 @@
+import { expect, test } from "bun:test"
+import {globalState} from '../globalState'
+
+test("store.set()", () => {
+  const store = globalState(1)
+
+  store.set(4)
+
+  expect(store.get()).toBe(4)
+})
+
+test("store.set() with object", () => {
+  const store = globalState({
+    a: 1,
+    b: "Test"
+  })
+
+  store.set({
+    a: 4
+  })
+
+  expect(store.get().a).toBe(4)
+})
+
+test("store.reset() with object", () => {
+  const store = globalState({
+    a: 1,
+    b: "Test"
+  })
+
+  store.reset({
+    a: 4,
+    b: "Changed"
+  })
+
+  const newVal = store.get()
+  expect(newVal.a).toBe(4)
+  expect(newVal.b).toBe('Changed')
+})
+
+test('store array methods', () => {
+  const store = globalState([] as number[])
+
+  store.push(10)
+  store.unshift(100)
+
+  const doubled = store.map(v => v * 2)
+
+  const val = store.get()
+  
+  expect(val[0]).toBe(100)
+  expect(val[1]).toBe(10)
+
+  expect(doubled[0]).toBe(200)
+  expect(doubled[1]).toBe(20)
+})
+
+test("store.listen()", () => {
+  const store = globalState(1)
+
+  store.listen((current, prev) => {
+      expect(current).toBe(4)
+      expect(prev).toBe(1)
+  })
+
+  store.set(4)
+
+  expect(store.get()).toBe(4)
+})

package/src/tests/slice.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from "bun:test"
+import {globalState} from '../globalState'
+import { createStateSlice } from "../utils"
+
+test("slice selects consistently", () => {
+  const store = globalState({
+    a: 1,
+    b: "Test"
+  })
+
+  const slice = createStateSlice(store, 
+    v => v.a
+  )
+
+  store.set({
+    a: 4
+  })
+
+  expect(slice.get()).toBe(4)
+
+  store.set({
+    a: 10
+  })
+
+  expect(slice.get()).toBe(10)
+})
+
+test("slice sets consistently", () => {
+  const store = globalState({
+    a: 1,
+    b: "Test"
+  })
+
+  const slice = createStateSlice(store, 
+    v => v.a,
+    v => ({ a: v })
+  )
+
+  slice.set(4)
+
+  expect(slice.get()).toBe(4)
+  expect(store.get().a).toBe(4)
+
+  slice.set(10)
+
+  expect(slice.get()).toBe(10)
+  expect(store.get().a).toBe(10)
+})

package/src/types.ts

@@ -3,10 +3,15 @@ import { PersistentStore, PersistentEvents, PersistentEvent } from '@nanostores/
 
 export type StateSelector<S, R> = (state: S) => R
 
-export type GlobalState<T> = Omit<WritableAtom<T>, 'set'> & {
+export type GlobalState<T> = Omit<WritableAtom<T>,'set'> & {
   use: <Selected = T>(selector?: StateSelector<T, Selected>) => Selected
-  set: (newValue: Partial<T>) => T
-}
+  
+  set: T extends Record<string, any> ?  (newValue: Partial<T>) => T : WritableAtom<T>['set']
+  
+  reset: WritableAtom<T>['set']
+} & (
+  T extends any[] ? Array<T[number]> : {}
+)
 
 export type GlobalStateConfig = {
   persistKey?: string

package/src/utils.ts

@@ -1,37 +1,51 @@
 import { useStore } from '@nanostores/react'
-import { Store } from 'nanostores'
+import { WritableStore } from 'nanostores'
+import { useMemo } from 'react'
 
-export const createStateSelector = <T, R>(
-  store: Store<T>,
-  selector: (state: T) => R
+export function stateAssign<T>(newValue: Partial<T>, stateValue: T): T {
+  if (
+    typeof stateValue === "object" && stateValue !== null
+  ) {
+    return {
+      ...stateValue,
+      ...newValue,
+    } as T
+  }  
+  
+  return newValue as T
+  
+}
+
+export const createStateSlice = <T, R>(
+  store: WritableStore<T>,
+  selector: (state: T) => R,
+  deselector?: (result: R) => T extends Record<string, any> ? Partial<T> : T
 ) => ({
   get: () => selector(store.get()),
   listen: (listener: (value: R) => void) => {
     return store.listen((state) => {
       listener(selector(state))
     })
+  },
+  set(v: R) {
+    
+    if(!deselector) {
+      throw new Error('[createStateSelector] deselector must be implemented to call set on state slices')
+    }
+
+    const parsed = deselector(v)
+    
+    const newValue = stateAssign(parsed, store.get())
+
+    store.set(newValue)
   }
-} as Store)
+} as WritableStore<R>)
 
 export function useStateSelector<T, R>(
-  store: Store<T>,
+  store: WritableStore<T>,
   selector: (state: T) => R
 ): R {
-  return useStore(createStateSelector(store, selector))
-}
+  const slice = useMemo(() => createStateSlice(store, selector), [selector])
 
-export function stateAssign<T>(newValue: Partial<T>, stateValue: T): T {
-  if (Array.isArray(stateValue)) {
-    return [
-      ...stateValue,
-      ...(Array.isArray(newValue) ? newValue : [newValue]),
-    ] as T
-  } else if (typeof stateValue === "object" && stateValue !== null) {
-    return {
-      ...stateValue,
-      ...newValue,
-    } as T
-  } else {
-    return newValue as T
-  }
+  return useStore(slice)
 }