fix(hooks): dynamic update scope issue

dynamic update useAyanami’s Scope didn’t update ayanami instance

Author: runjuu

src/core/scope/__test__/scope.spec.ts

@@ -33,25 +33,24 @@ describe('Scope spec:', () => {
 
       scopes.forEach((scope) => {
         class Test {}
-        expect(getInstanceWithScope(Test, { scope })).toBeInstanceOf(Test)
+        expect(getInstanceWithScope(Test, scope)).toBeInstanceOf(Test)
       })
     })
 
     it('should always return same instance if same scope', () => {
       const scope = 'scope'
       class Test {}
 
-      expect(getInstanceWithScope(Test, { scope })).toBe(getInstanceWithScope(Test, { scope }))
+      expect(getInstanceWithScope(Test, scope)).toBe(getInstanceWithScope(Test, scope))
     })
 
     it('should always return new instance if scope is TransientScope', () => {
       class Test {}
 
-      expect(getInstanceWithScope(Test, { scope: TransientScope })).toBeInstanceOf(Test)
+      expect(getInstanceWithScope(Test, TransientScope)).toBeInstanceOf(Test)
 
       expect(
-        getInstanceWithScope(Test, { scope: TransientScope }) ===
-          getInstanceWithScope(Test, { scope: TransientScope }),
+        getInstanceWithScope(Test, TransientScope) === getInstanceWithScope(Test, TransientScope),
       ).toBeFalsy()
     })
 
@@ -76,10 +75,10 @@ describe('Scope spec:', () => {
         }
 
         it('should return same instance whether scope is same or not', () => {
-          const b = getInstanceWithScope(B, { scope: 'b' })
-          const c1 = getInstanceWithScope(C, { scope: 'c1' })
-          const c2 = getInstanceWithScope(C, { scope: 'c2' })
-          const d = getInstanceWithScope(D, { scope: 'c2' })
+          const b = getInstanceWithScope(B, 'b')
+          const c1 = getInstanceWithScope(C, 'c1')
+          const c2 = getInstanceWithScope(C, 'c2')
+          const d = getInstanceWithScope(D, 'c2')
 
           expect(b.a).toBeInstanceOf(A)
           expect(b.a).toBe(c1.a)
@@ -104,17 +103,17 @@ describe('Scope spec:', () => {
 
         it('should return same instance if is same scope', () => {
           const scope = 'scope'
-          const b = getInstanceWithScope(B, { scope })
-          const c = getInstanceWithScope(C, { scope })
+          const b = getInstanceWithScope(B, scope)
+          const c = getInstanceWithScope(C, scope)
 
           expect(b.a).toBeInstanceOf(A)
           expect(b.a).toBe(c.a)
         })
 
         it('should return different instance if is different scope', () => {
-          const b = getInstanceWithScope(B, { scope: 'b' })
-          const c1 = getInstanceWithScope(C, { scope: 'c1' })
-          const c2 = getInstanceWithScope(C, { scope: 'c2' })
+          const b = getInstanceWithScope(B, 'b')
+          const c1 = getInstanceWithScope(C, 'c1')
+          const c2 = getInstanceWithScope(C, 'c2')
 
           expect(b.a).toBeInstanceOf(A)
           expect(c1.a).toBeInstanceOf(A)

src/core/scope/index.ts

@@ -1,5 +1,4 @@
 import { InjectableFactory, ValueProvider } from '@asuka/di'
-import { get } from 'lodash'
 
 import { ConstructorOf } from '../types'
 import { ScopeConfig } from './type'
@@ -12,13 +11,14 @@ export const TransientScope = Symbol('scope:transient')
 
 export const SingletonScope = Symbol('scope:singleton')
 
-export function getInstanceWithScope<T>(constructor: ConstructorOf<T>, config?: ScopeConfig): T {
-  const scope = get(config, 'scope', SingletonScope)
-
+export function getInstanceWithScope<T>(
+  constructor: ConstructorOf<T>,
+  scope: ScopeConfig['scope'] = SingletonScope,
+): T {
   const providers = getSameScopeInjectionParams(constructor).map(
     (sameScopeInjectionParam): ValueProvider => ({
       provide: sameScopeInjectionParam,
-      useValue: getInstanceWithScope(sameScopeInjectionParam, { scope }),
+      useValue: getInstanceWithScope(sameScopeInjectionParam, scope),
     }),
   )
 

src/hooks.ts

@@ -21,13 +21,19 @@ export function useAyanamiInstance<M extends Ayanami<S>, S>(
   ayanami: M,
   config?: UseAyanamiInstanceConfig,
 ): HooksResult<M, S> {
+  const ayanamiRef = React.useRef(ayanami)
   const ikari = React.useMemo(() => combineWithIkari(ayanami), [ayanami])
   const [state, setState] = React.useState<S>(() => ayanami.getState())
 
+  if (ayanamiRef.current !== ayanami) {
+    ayanamiRef.current = ayanami
+    setState(ayanami.getState())
+  }
+
   React.useEffect(() => {
     const subscription = ayanami.getState$().subscribe(setState)
     return () => subscription.unsubscribe()
-  }, [])
+  }, [ayanami])
 
   React.useEffect(
     () => () => {
@@ -37,7 +43,7 @@ export function useAyanamiInstance<M extends Ayanami<S>, S>(
         ayanami.destroy()
       }
     },
-    [],
+    [ayanami, config],
   )
 
   return [state, ikari.triggerActions] as HooksResult<M, S>
@@ -47,12 +53,12 @@ export function useAyanami<M extends Ayanami<S>, S>(
   A: ConstructorOf<M>,
   config?: ScopeConfig,
 ): M extends Ayanami<infer SS> ? HooksResult<M, SS> : HooksResult<M, S> {
-  const ayanami = React.useMemo(() => getInstanceWithScope(A, config), [A])
+  const scope = get(config, 'scope')
+  const ayanami = React.useMemo(() => getInstanceWithScope(A, scope), [scope])
 
   const useAyanamiInstanceConfig = React.useMemo((): UseAyanamiInstanceConfig => {
-    const scope = get(config, 'scope', false)
     return { destroyWhenUnmount: scope === TransientScope }
-  }, [])
+  }, [scope])
 
   return useAyanamiInstance<M, S>(ayanami, useAyanamiInstanceConfig) as any
 }

test/specs/hooks.spec.tsx

@@ -185,5 +185,33 @@ describe('Hooks spec:', () => {
         expect(spy.mock.calls.length).toBe(1)
       })
     })
+
+    describe('Dynamic update scope', () => {
+      const testRenderer = create(<CountComponent scope={1} />)
+      const count = () => testRenderer.root.findByType('span').children[0]
+      const click = (action: CountAction) =>
+        act(() => testRenderer.root.findByProps({ id: action }).props.onClick())
+
+      it(`should use same Ayanami at each update if scope didn't change`, () => {
+        testRenderer.update(<CountComponent scope={1} />)
+        click(CountAction.ADD)
+        expect(count()).toBe('1')
+      })
+
+      it(`should use new scope's Ayanami if scope changed`, () => {
+        testRenderer.update(<CountComponent scope={2} />)
+        click(CountAction.MINUS)
+        expect(count()).toBe('-1')
+      })
+
+      it(`should update state to corresponding one`, () => {
+        testRenderer.update(<CountComponent scope={1} />)
+        expect(count()).toBe('1')
+        testRenderer.update(<CountComponent scope={2} />)
+        expect(count()).toBe('-1')
+        testRenderer.update(<CountComponent scope={3} />)
+        expect(count()).toBe('0')
+      })
+    })
   })
 })