Merge pull request #377 from cyfaboop/master

improve hook types

Author: yisar

src/hook.ts

@@ -1,16 +1,18 @@
-import { update, isFn, getCurrentFiber } from "./reconcile"
+import { update, isFn, getCurrentFiber } from './reconcile'
 import {
   DependencyList,
   Reducer,
   IFiber,
   Dispatch,
   SetStateAction,
   EffectCallback,
-  HookTypes,
   RefObject,
-  IEffect,
   FreNode,
-} from "./type"
+  HookList,
+  HookEffect,
+  HookReducer,
+  HookMemo,
+} from './type'
 
 const EMPTY_ARR = []
 
@@ -28,15 +30,15 @@ export const useReducer = <S, A>(
   reducer?: Reducer<S, A>,
   initState?: S
 ): [S, Dispatch<A>] => {
-  const [hook, current]: [any, IFiber] = getHook<S>(cursor++)
+  const [hook, current]: [any, IFiber] = getHook<HookReducer>(cursor++)
   if (hook.length === 0) {
     hook[0] = initState
     hook[1] = (value: A | Dispatch<A>) => {
       let v = reducer
         ? reducer(hook[0], value as any)
         : isFn(value)
-          ? value(hook[0])
-          : value
+        ? value(hook[0])
+        : value
       if (hook[0] !== v) {
         hook[0] = v
         update(current)
@@ -47,31 +49,31 @@ export const useReducer = <S, A>(
 }
 
 export const useEffect = (cb: EffectCallback, deps?: DependencyList): void => {
-  return effectImpl(cb, deps!, "effect")
+  return effectImpl(cb, deps!, 'effect')
 }
 
 export const useLayout = (cb: EffectCallback, deps?: DependencyList): void => {
-  return effectImpl(cb, deps!, "layout")
+  return effectImpl(cb, deps!, 'layout')
 }
 
 const effectImpl = (
   cb: EffectCallback,
   deps: DependencyList,
-  key: HookTypes
+  key: 'effect' | 'layout'
 ): void => {
-  const [hook, current] = getHook(cursor++)
+  const [hook, current] = getHook<HookEffect>(cursor++)
   if (isChanged(hook[1], deps)) {
     hook[0] = cb
     hook[1] = deps
-    current.hooks[key].push(hook)
+    current.hooks[key].push(hook as Required<HookEffect>)
   }
 }
 
 export const useMemo = <S = Function>(
   cb: () => S,
   deps?: DependencyList
 ): S => {
-  const hook = getHook<S>(cursor++)[0]
+  const hook = getHook<HookMemo>(cursor++)[0]
   if (isChanged(hook[1], deps!)) {
     hook[1] = deps
     return (hook[0] = cb())
@@ -90,39 +92,37 @@ export const useRef = <T>(current: T): RefObject<T> => {
   return useMemo(() => ({ current }), [])
 }
 
-export const getHook = <S = Function | undefined, Dependency = any>(
-  cursor: number
-): [[S, Dependency], IFiber] => {
+export const getHook = <T extends HookList = HookList>(cursor: number) => {
   const current: IFiber<any> = getCurrentFiber()
   const hooks =
     current.hooks || (current.hooks = { list: [], effect: [], layout: [] })
   if (cursor >= hooks.list.length) {
-    hooks.list.push([] as IEffect)
+    hooks.list.push([] as any)
   }
-  return [(hooks.list[cursor] as unknown) as [S, Dependency], current]
+  return [hooks.list[cursor], current] as unknown as [Partial<T>, IFiber]
 }
 
 export type ContextType<T> = {
-  ({ value, children }: { value: T, children: FreNode }): FreNode;
-  initialValue: T;
+  ({ value, children }: { value: T; children: FreNode }): FreNode
+  initialValue: T
 }
 
-type SubscriberCb = () => void;
+type SubscriberCb = () => void
 
 export const createContext = <T>(initialValue: T): ContextType<T> => {
   const contextComponent: ContextType<T> = ({ value, children }) => {
     const valueRef = useRef(value)
     const subscribers = useMemo(() => new Set<SubscriberCb>(), EMPTY_ARR)
 
     if (valueRef.current !== value) {
-      valueRef.current = value;
+      valueRef.current = value
       subscribers.forEach((subscriber) => subscriber())
     }
 
     return children
   }
-  contextComponent.initialValue = initialValue;
-  return contextComponent;
+  contextComponent.initialValue = initialValue
+  return contextComponent
 }
 
 export const useContext = <T>(contextType: ContextType<T>): T => {
@@ -132,16 +132,19 @@ export const useContext = <T>(contextType: ContextType<T>): T => {
 
   useEffect(() => {
     return () => subscribersSet && subscribersSet.delete(triggerUpdate)
-  }, EMPTY_ARR);
+  }, EMPTY_ARR)
 
   let contextFiber = getCurrentFiber().parent
   while (contextFiber && contextFiber.type !== contextType) {
     contextFiber = contextFiber.parent
   }
 
   if (contextFiber) {
-    const hooks = contextFiber.hooks.list as unknown as [[RefObject<T>], [Set<SubscriberCb>]]
-    const [[value], [subscribers]] = hooks;
+    const hooks = contextFiber.hooks.list as unknown as [
+      [RefObject<T>],
+      [Set<SubscriberCb>]
+    ]
+    const [[value], [subscribers]] = hooks
 
     subscribersSet = subscribers.add(triggerUpdate)
 
@@ -151,6 +154,10 @@ export const useContext = <T>(contextType: ContextType<T>): T => {
   }
 }
 
-export const isChanged = (a: DependencyList, b: DependencyList) => {
-  return !a || a.length !== b.length || b.some((arg, index) => !Object.is(arg, a[index]))
+export const isChanged = (a: DependencyList | undefined, b: DependencyList) => {
+  return (
+    !a ||
+    a.length !== b.length ||
+    b.some((arg, index) => !Object.is(arg, a[index]))
+  )
 }

src/reconcile.ts

@@ -5,7 +5,7 @@ import {
   Attributes,
   HTMLElementEx,
   FreNode,
-  IEffect,
+  HookEffect,
 } from './type'
 import { createElement } from './dom'
 import { resetCursor } from './hook'
@@ -158,7 +158,7 @@ function clone(a, b) {
 
 export const arrayfy = arr => (!arr ? [] : isArr(arr) ? arr : [arr])
 
-const side = (effects: IEffect[]): void => {
+const side = (effects: HookEffect[]): void => {
   effects.forEach(e => e[2] && e[2]())
   effects.forEach(e => (e[2] = e[0]()))
   effects.length = 0

src/type.ts

@@ -30,15 +30,19 @@ export interface FreElement<P extends Attributes = any, T = string> {
 
 export type HookTypes = 'list' | 'effect' | 'layout'
 
-export interface IHook {
-  list: IEffect[]
-  layout: IEffect[]
-  effect: IEffect[]
+export interface Hooks {
+  list: HookList[]
+  layout: HookEffect[]
+  effect: HookEffect[]
 }
-
-export type IRef = (
-  e: HTMLElement | undefined
-) => void | { current?: HTMLElement }
+export type HookList = HookMemo | HookEffect | HookReducer
+export type HookMemo<V = any> = [value: V, deps: DependencyList]
+export type HookEffect = [
+  cb: EffectCallback,
+  deps: DependencyList,
+  cleanup?: () => any
+]
+export type HookReducer<V = any, A = any> = [value: V, dispatch: Dispatch<A>]
 
 export interface IFiber<P extends Attributes = any> {
   key?: string
@@ -51,15 +55,14 @@ export interface IFiber<P extends Attributes = any> {
   sibling?: IFiber<P>
   child?: IFiber<P>
   ref?: Ref<HTMLElement | undefined>
-  hooks: IHook
+  hooks?: Hooks
   action: any
   props: P
   lane: number
   isComp: boolean
 }
 
 export type HTMLElementEx = HTMLElement & { last: IFiber | null }
-export type IEffect = [Function?, number?, cleanup?: Function]
 
 export type FreText = string | number
 export type FreNode =
@@ -72,7 +75,7 @@ export type FreNode =
 export type SetStateAction<S> = S | ((prevState: S) => S)
 export type Dispatch<A> = (value: A) => void
 export type Reducer<S, A> = (prevState: S, action: A) => S
-export type EffectCallback = () => void | (() => void | undefined)
+export type EffectCallback = () => any | (() => () => any)
 export type DependencyList = ReadonlyArray<unknown>
 
 export interface PropsWithChildren {