feat(hooks): destroy transient scope when unmount

Author: runjuu

src/hooks.ts

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { get } from 'lodash'
 
 import {
   Ayanami,
@@ -7,11 +8,19 @@ import {
   ScopeConfig,
   ActionMethodOfAyanami,
   ConstructorOf,
+  TransientScope,
 } from './core'
 
 export type HooksResult<M extends Ayanami<S>, S> = [Readonly<S>, ActionMethodOfAyanami<M, S>]
 
-export function useAyanamiInstance<M extends Ayanami<S>, S>(ayanami: M): HooksResult<M, S> {
+interface UseAyanamiInstanceConfig {
+  destroyWhenUnmount?: boolean
+}
+
+export function useAyanamiInstance<M extends Ayanami<S>, S>(
+  ayanami: M,
+  config?: UseAyanamiInstanceConfig,
+): HooksResult<M, S> {
   const ikari = React.useMemo(() => combineWithIkari(ayanami), [ayanami])
   const [state, setState] = React.useState<S>(() => ayanami.getState())
 
@@ -20,6 +29,17 @@ export function useAyanamiInstance<M extends Ayanami<S>, S>(ayanami: M): HooksRe
     return () => subscription.unsubscribe()
   }, [])
 
+  React.useEffect(
+    () => () => {
+      const isDestroyWhenUnmount = get(config, 'destroyWhenUnmount', false)
+
+      if (isDestroyWhenUnmount) {
+        ayanami.destroy()
+      }
+    },
+    [],
+  )
+
   return [state, ikari.triggerActions] as HooksResult<M, S>
 }
 
@@ -29,5 +49,10 @@ export function useAyanami<M extends Ayanami<S>, S>(
 ): M extends Ayanami<infer SS> ? HooksResult<M, SS> : HooksResult<M, S> {
   const ayanami = React.useMemo(() => getInstanceWithScope(A, config), [A])
 
-  return useAyanamiInstance<M, S>(ayanami) as any
+  const useAyanamiInstanceConfig = React.useMemo((): UseAyanamiInstanceConfig => {
+    const scope = get(config, 'scope', false)
+    return { destroyWhenUnmount: scope === TransientScope }
+  }, [])
+
+  return useAyanamiInstance<M, S>(ayanami, useAyanamiInstanceConfig) as any
 }

test/specs/hooks.spec.tsx

@@ -1,6 +1,6 @@
 import { Injectable } from '@asuka/di'
 import * as React from 'react'
-import { act, create, ReactTestInstance } from 'react-test-renderer'
+import { act, create, ReactTestInstance, ReactTestRenderer } from 'react-test-renderer'
 import { Observable } from 'rxjs'
 import { map, withLatestFrom } from 'rxjs/operators'
 
@@ -152,9 +152,10 @@ describe('Hooks spec:', () => {
     describe('TransientScope will isolate state and actions', () => {
       let count: () => string | ReactTestInstance
       let click: (action: CountAction) => void
+      let testRenderer: ReactTestRenderer
 
       beforeEach(() => {
-        const testRenderer = create(<CountComponent scope={TransientScope} />)
+        testRenderer = create(<CountComponent scope={TransientScope} />)
 
         count = () => testRenderer.root.findByType('span').children[0]
         click = (action: CountAction) =>
@@ -177,6 +178,12 @@ describe('Hooks spec:', () => {
         click(CountAction.MINUS)
         expect(count()).toBe('-1')
       })
+
+      it('should destroy when component unmount', () => {
+        const spy = jest.spyOn(Ayanami.prototype, 'destroy')
+        act(() => testRenderer.unmount())
+        expect(spy.mock.calls.length).toBe(1)
+      })
     })
   })
 })