feat(useevent & useupdatemanager): add useEvent and useUpdateManager

packages/hooks/src/context.ts

@@ -0,0 +1,27 @@
+import { createContext } from 'react';
+import { eventCenter, Events } from '@tarojs/taro';
+
+export interface IEvents extends Events {
+  display: () => string[];
+  callbacks: {
+    [_: string]: any;
+  };
+}
+
+export interface IEventContext {
+  eventBus: IEvents;
+}
+
+export function wrapperEvent(namespace: string, eventName: string): string {
+  return namespace ? `${namespace}.${eventName}` : eventName;
+}
+
+(eventCenter as IEvents).display = () => {
+  return Object.keys((eventCenter as IEvents).callbacks);
+};
+
+const EventBus = createContext<IEventContext>({
+  eventBus: eventCenter as IEvents,
+});
+
+export { EventBus as context };

packages/hooks/src/useEvent/index.md

@@ -0,0 +1,40 @@
+---
+title: useEvent
+nav:
+  title: Hooks
+  path: /hooks
+  order: 2
+group:
+  title: 基础
+  path: /basic
+---
+
+# useEvent
+
+获取当前环境值
+
+## 何时使用
+
+当需要获取当前环境值做一些判断时
+
+## API
+
+```jsx | pure
+() => Taro.ENV_TYPE;
+```
+
+## 返回值说明
+
+| 返回值 | 说明       | 类型       |
+| ------ | ---------- | ---------- |
+| env    | 当前环境值 | `ENV_TYPE` |
+
+## 代码演示
+
+<code src="@pages/useEnv" />
+
+## Hook 支持度
+
+| 微信小程序 | H5  | ReactNative |
+| :--------: | :-: | :---------: |
+|     ✔️     | ✔️  |     ✔️      |

packages/hooks/src/useEvent/index.ts

@@ -0,0 +1,103 @@
+import { useCallback, useContext, useReducer, useRef } from 'react';
+import { context, wrapperEvent } from '../context';
+
+export interface IEventQueue {
+  [_: string]: (() => void)[];
+}
+
+export interface IState {
+  eventQueue: IEventQueue;
+  eventNameQueue: string[];
+}
+
+export enum IActionType {
+  ON = 'on',
+  OFF = 'off',
+  TRIGGER = 'trigger',
+  ONCE = 'once',
+  ADD = 'add',
+  CLEAR = 'clear',
+}
+
+export interface IAction {
+  type: IActionType;
+  payload: string | string[] | null;
+}
+
+export const safeNamespace = ['__taro', 'at'];
+
+const initState: IState = {
+  eventQueue: {},
+  eventNameQueue: [],
+};
+
+function useEvent(namespace: string) {
+  const { eventBus } = useContext(context);
+
+  const setListener = useCallback(() => {}, []);
+
+  const removeListener = useCallback(() => {}, []);
+
+  const emitEvent = useCallback(() => {}, []);
+
+  const clearListener = useCallback((eventName?: string) => {
+    const { eventNameQueue, eventQueue } = state;
+    if (!eventNameQueue) {
+      console.warn('there is no event to clear');
+      return;
+    }
+    const realEventName = eventName && wrapperEvent(namespace, eventName);
+    if (!realEventName || !eventNameQueue.includes(realEventName)) {
+      console.warn(
+        "you don't provide eventName, it will remove all listener. Thoese listeners will be remove: ",
+      );
+      console.table(eventQueue);
+    }
+
+    if (realEventName && eventNameQueue.includes(realEventName)) {
+      console.log('Thoese listeners will be remove: ');
+      console.table({
+        [eventName as string]: eventQueue[realEventName],
+      });
+      dispatch({
+        type: IActionType.CLEAR,
+        payload: realEventName,
+      });
+    }
+  }, []);
+
+  const safeRemoveEvents = useCallback(() => {}, []);
+
+  const reducer = useCallback(
+    (state: IState, { type, payload }: IAction): IState => {
+      switch (type) {
+        case IActionType.CLEAR:
+          if (!payload) {
+            eventBus.off();
+          } else {
+            eventBus.off(payload as string);
+          }
+          return {
+            ...state,
+          };
+        default:
+          return state;
+      }
+    },
+    [],
+  );
+  const [state, dispatch] = useReducer(reducer, initState);
+
+  return [
+    state,
+    {
+      dispatch,
+      setListener,
+      removeListener,
+      emitEvent,
+      clearListener,
+    },
+  ];
+}
+
+export default useEvent;

packages/hooks/src/useUpdateManager/index.md

@@ -0,0 +1,40 @@
+---
+title: useUpdateManager
+nav:
+  title: Hooks
+  path: /hooks
+  order: 2
+group:
+  title: 基础
+  path: /basic
+---
+
+# useUpdateManager
+
+获取当前环境值
+
+## 何时使用
+
+当需要获取当前环境值做一些判断时
+
+## API
+
+```jsx | pure
+() => Taro.ENV_TYPE;
+```
+
+## 返回值说明
+
+| 返回值 | 说明       | 类型       |
+| ------ | ---------- | ---------- |
+| env    | 当前环境值 | `ENV_TYPE` |
+
+## 代码演示
+
+<code src="@pages/useEnv" />
+
+## Hook 支持度
+
+| 微信小程序 | H5  | ReactNative |
+| :--------: | :-: | :---------: |
+|     ✔️     | ✔️  |     ✔️      |

packages/hooks/src/useUpdateManager/index.ts

@@ -0,0 +1,38 @@
+import { ENV_TYPE, getUpdateManager, UpdateManager } from '@tarojs/taro';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import useEnv from '../useEnv';
+
+export interface Options {
+  applyUpdate: () => void;
+}
+
+export type Result = UpdateManager | {};
+
+function useUpdateManager({
+  applyUpdate,
+  onCheckForUpdate,
+  onUpdateReady,
+  onUpdateFailed,
+}: UpdateManager): Result {
+  const env = useEnv();
+  const updateManager = useRef<Result>({});
+
+  useEffect(() => {
+    if (env === ENV_TYPE.WEAPP) {
+      const updateManagerInstance = getUpdateManager();
+      addEventListener(updateManagerInstance);
+      updateManager.current = getUpdateManager();
+    }
+  }, []);
+
+  const addEventListener = useCallback((updateManagerInstance) => {
+    updateManagerInstance.applyUpdate = applyUpdate;
+    updateManagerInstance.onCheckForUpdate = onCheckForUpdate;
+    updateManagerInstance.onUpdateReady = onUpdateReady;
+    updateManagerInstance.onUpdateFailed = onUpdateFailed;
+  }, []);
+
+  return updateManager;
+}
+
+export default useUpdateManager;