Expose creation of shallow state using function

src/kaiku.ts

@@ -443,7 +443,10 @@ const removeDependencies = (dependee: Dependee) => {
   }
 }
 
-const createState = <T extends object>(obj: T, shallow = false): State<T> => {
+const internalCreateState = <T extends object>(
+  obj: T,
+  shallow: boolean
+): State<T> => {
   const id = ++nextObjectId
 
   const isArray = Array.isArray(obj)
@@ -574,6 +577,12 @@ const createState = <T extends object>(obj: T, shallow = false): State<T> => {
   return proxy as State<T>
 }
 
+const createState = <T extends object>(obj: T): State<T> =>
+  internalCreateState(obj, false)
+
+const createShallowState = <T extends object>(obj: T): State<T> =>
+  internalCreateState(obj, true)
+
 const unwrap = <T>(state: State<T>): T => {
   return state[UNWRAP]
 }
@@ -673,7 +682,7 @@ const useEffect = (fn: () => void | (() => void)) => {
   componentEffects.push(effect)
 }
 
-const useState = <T extends object>(
+const internalUseState = <T extends object>(
   initialState: T,
   shallow = false
 ): State<T> => {
@@ -695,15 +704,21 @@ const useState = <T extends object>(
     return states[componentStateIndex]
   }
 
-  const componentState = createState(initialState, shallow)
+  const componentState = internalCreateState(initialState, shallow)
 
   states.push(componentState)
 
   return componentState
 }
 
+const useState = <T extends object>(initialState: T): State<T> =>
+  internalUseState(initialState)
+
+const useShallowState = <T extends object>(initialState: T): State<T> =>
+  internalUseState(initialState, true)
+
 const useRef = <T>(initialValue?: T): Ref<T> =>
-  useState({ current: initialValue })
+  internalUseState({ current: initialValue }, true)
 
 //
 //  Node utilities
@@ -830,14 +845,14 @@ const createClassComponentInstance = <
   classInstance.render = classInstance.render.bind(classInstance)
 
   if (typeof classInstance.state !== 'undefined') {
-    classInstance.state = createState(classInstance.state) as any
+    classInstance.state = internalCreateState(classInstance.state, false) as any
   }
   const instance: ClassComponentInstance<PropertiesT, StateT> = {
     id_: id,
     tag_: ClassComponentTag,
     context_: context,
     instance: classInstance,
-    props_: createState(descriptor.props_, true),
+    props_: internalCreateState(descriptor.props_, true),
     parentElement_: null,
     nextSibling_: null,
     child: null,
@@ -871,7 +886,7 @@ const createFunctionComponentInstance = <PropertiesT extends DefaultProps>(
     tag_: FunctionComponentTag,
     context_: context,
     func: descriptor.func,
-    props_: createState(descriptor.props_, true),
+    props_: internalCreateState(descriptor.props_, true),
     parentElement_: null,
     nextSibling_: null,
     child: null,
@@ -1676,9 +1691,11 @@ export {
   jsx,
   render,
   useState,
+  useShallowState,
   useRef,
   useEffect,
   createState,
+  createShallowState,
   immutable,
   unwrap,
 }

test/kaiku.spec.tsx

@@ -32,8 +32,10 @@ const {
   Fragment,
   render,
   createState,
+  createShallowState,
   useEffect,
   useState,
+  useShallowState,
   useRef,
   Component,
   immutable,
@@ -43,8 +45,10 @@ const {
   Component: typeof kaiku.Component
   render: typeof kaiku.render
   createState: typeof kaiku.createState
+  createShallowState: typeof kaiku.createShallowState
   useEffect: typeof kaiku.useEffect
   useState: typeof kaiku.useState
+  useShallowState: typeof kaiku.useShallowState
   useRef: typeof kaiku.useRef
   immutable: typeof kaiku.immutable
 }
@@ -2162,12 +2166,11 @@ describe('kaiku', () => {
   })
 
   it('should trigger effect using array method after item is pushed', async () => {
+    const effectCallCounter = jest.fn()
     const state = createState({
       arr: [] as number[],
     })
 
-    const effectCallCounter = jest.fn()
-
     useEffect(() => {
       const result = state.arr.map((item) => item * 2)
       effectCallCounter(result)
@@ -2179,4 +2182,61 @@ describe('kaiku', () => {
     await nextTick()
     expect(effectCallCounter).toHaveBeenCalledTimes(2)
   })
+
+  it('should not track deep state changes made to shallow state', async () => {
+    const effectCallCounter = jest.fn()
+    const state = createShallowState({
+      foo: {
+        a: 0,
+        b: 1,
+      },
+      bar: 'a',
+    })
+
+    useEffect(() => {
+      effectCallCounter(JSON.stringify(state))
+    })
+
+    expect(effectCallCounter).toHaveBeenCalledTimes(1)
+
+    state.bar = 'b'
+    await nextTick()
+    expect(effectCallCounter).toHaveBeenCalledTimes(2)
+
+    state.foo.a = 123
+    await nextTick()
+    expect(effectCallCounter).toHaveBeenCalledTimes(2)
+  })
+
+  it('should not track deep state changes made to shallow sub-state of a normal state', async () => {
+    const effectCallCounter = jest.fn()
+    const subState = createShallowState({
+      foo: {
+        a: 0,
+        b: 1,
+      },
+    })
+    const state = createState({
+      subState,
+      bar: 'a',
+    })
+
+    useEffect(() => {
+      effectCallCounter(JSON.stringify(state))
+    })
+
+    expect(effectCallCounter).toHaveBeenCalledTimes(1)
+
+    state.bar = 'b'
+    await nextTick()
+    expect(effectCallCounter).toHaveBeenCalledTimes(2)
+
+    state.subState.foo.a = 123
+    await nextTick()
+    expect(effectCallCounter).toHaveBeenCalledTimes(2)
+
+    state.subState.foo = { a: 3, b: 4 }
+    await nextTick()
+    expect(effectCallCounter).toHaveBeenCalledTimes(3)
+  })
 })