feat: add com

Author: fupengl

src/components/index.ts

@@ -3,3 +3,6 @@ export type { MakeGlobalApiOptions, MakeGlobalApiReturnType } from './make-globa
 
 export { default as CacheComponentDOM } from './cache-component-dom';
 export type { CacheComponentDOMProps } from './cache-component-dom';
+
+export { default as LoadScript } from './load-script';
+export { LoadScriptProps } from './load-script';

src/components/load-script/index.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import RPT from 'prop-types';
+
+export interface LoadScriptProps {
+  attributes: Partial<HTMLScriptElement>;
+  onCreate: () => void;
+  onError: () => void;
+  onLoad: () => void;
+  url: string;
+}
+
+class LoadScript extends React.Component<LoadScriptProps> {
+  static propTypes = {
+    attributes: RPT.object,
+    onCreate: RPT.func,
+    onError: RPT.func.isRequired,
+    onLoad: RPT.func.isRequired,
+    url: RPT.string.isRequired,
+  };
+
+  static defaultProps: Partial<LoadScriptProps> = {
+    onCreate: () => {},
+    onError: () => {},
+    onLoad: () => {},
+  };
+
+  static scriptObservers: {
+    [url: string]: {
+      [scriptLoaderId: string]: LoadScriptProps;
+    };
+  } = {};
+
+  static loadedScripts: Record<string, boolean> = {};
+
+  static erroredScripts: Record<string, boolean> = {};
+
+  static idCount = 0;
+
+  scriptLoaderId: string = '';
+
+  constructor(props: LoadScriptProps) {
+    super(props);
+    this.scriptLoaderId = `id${LoadScript.idCount++}`; // eslint-disable-line space-unary-ops, no-plusplus
+  }
+
+  componentDidMount() {
+    const { onError, onLoad, url } = this.props;
+
+    if (LoadScript.loadedScripts[url]) {
+      onLoad();
+      return;
+    }
+
+    if (LoadScript.erroredScripts[url]) {
+      onError();
+      return;
+    }
+
+    if (LoadScript.scriptObservers[url]) {
+      LoadScript.scriptObservers[url][this.scriptLoaderId] = this.props;
+      return;
+    }
+
+    LoadScript.scriptObservers[url] = {
+      [this.scriptLoaderId]: this.props,
+    };
+
+    this.createScript();
+  }
+
+  componentWillUnmount() {
+    const { url } = this.props;
+    const observers = LoadScript.scriptObservers[url];
+
+    if (observers) {
+      delete observers[this.scriptLoaderId];
+    }
+  }
+
+  createScript() {
+    const { onCreate, url, attributes } = this.props;
+    const script = document.createElement('script');
+
+    onCreate();
+
+    if (attributes) {
+      Object.keys(attributes).forEach((prop) => {
+        script.setAttribute(prop, attributes[prop as keyof HTMLScriptElement] as string);
+      });
+    }
+
+    script.src = url;
+
+    if (!script.hasAttribute('async')) {
+      script.async = true;
+    }
+
+    const callObserverFuncAndRemoveObserver = (
+      shouldRemoveObserver: (observer: LoadScriptProps) => boolean,
+    ) => {
+      const observers = LoadScript.scriptObservers[url];
+      Object.keys(observers).forEach((key) => {
+        if (shouldRemoveObserver(observers[key])) {
+          delete LoadScript.scriptObservers[url][this.scriptLoaderId];
+        }
+      });
+    };
+    script.onload = () => {
+      LoadScript.loadedScripts[url] = true;
+      callObserverFuncAndRemoveObserver((observer) => {
+        observer.onLoad();
+        return true;
+      });
+    };
+
+    script.onerror = () => {
+      LoadScript.erroredScripts[url] = true;
+      callObserverFuncAndRemoveObserver((observer) => {
+        observer.onError();
+        return true;
+      });
+    };
+
+    document.body.appendChild(script);
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default LoadScript;

src/hooks/index.ts

@@ -8,16 +8,12 @@ export { default as useMount } from './useMount';
 export { default as useUnmount } from './useUnmount';
 export { default as useSafeState } from './useSafeState';
 export { default as useMountedState } from './useMountedState';
-export { default as usePersistFn } from './usePersistFn';
 export { default as useUpdateEffect } from './useUpdateEffect';
 export { default as useForceUpdate } from './useForceUpdate';
 export { default as useDeepEffect } from './useDeepEffect';
 export { default as useControlledState } from './useControlledState';
 export { default as useDeepCompareMemoize } from './useDeepCompareMemoize';
 export { default as useDeepCompareEffect } from './useDeepCompareEffect';
-export { default as useMergeState } from './useMergeState';
-export { default as useBoolean } from './useBoolean';
-export { default as useToggle } from './useToggle';
 
 // bom
 export { default as useTimeout } from './useTimeout';
@@ -37,14 +33,21 @@ export { default as useSize } from './useSize';
 export { default as useSet } from './useSet';
 export { default as useMap } from './useMap';
 export { default as useError } from './useError';
+export { default as useMergeState } from './useMergeState';
+export { default as useBoolean } from './useBoolean';
+export { default as useToggle } from './useToggle';
+export { default as usePrevious } from './usePrevious';
 export { default as useCreation } from './useCreation';
+export { default as usePersistFn } from './usePersistFn';
 
 // async
 export { default as useAsync } from './useAsync';
 export { default as useAsyncFn } from './useAsyncFn';
 export { default as useAsyncRetry } from './useAsyncRetry';
 export { default as useUntil } from './useUntil';
+export { default as usePromise } from './usePromise';
 
+// event
 export { default as useDebounce } from './useDebounce';
 export { default as useDebounceEffect } from './useDebounceEffect';
 export { default as useDebounceFn } from './useDebounceFn';
@@ -53,4 +56,3 @@ export { default as useThrottleEffect } from './useThrottleEffect';
 export { default as useThrottleFn } from './useThrottleFn';
 export { default as useCounter } from './useCounter';
 export { default as useCountdown } from './useCountdown';
-export { default as usePrevious } from './usePrevious';

src/hooks/usePrevious.ts

@@ -2,6 +2,11 @@ import { useRef } from 'react';
 
 export type compareFunction<T> = (prev: T | undefined, next: T) => boolean;
 
+/**
+ * 使用上一次的状态
+ * @param state
+ * @param compare
+ */
 function usePrevious<T>(state: T, compare?: compareFunction<T>): T | undefined {
   const prevRef = useRef<T>();
   const curRef = useRef<T>();

src/hooks/usePromise.ts

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import useMountedState from './useMountedState';
+
+export type UsePromise = () => <T>(promise: Promise<T>) => Promise<T>;
+
+/**
+ * 包裹promise，组件卸载阻止更新视图
+ */
+const usePromise: UsePromise = () => {
+  const isMounted = useMountedState();
+  return useCallback(
+    (promise: Promise<any>) =>
+      new Promise<any>((resolve, reject) => {
+        const onValue = (value: any) => {
+          isMounted() && resolve(value);
+        };
+        const onError = (error: any) => {
+          isMounted() && reject(error);
+        };
+        promise.then(onValue, onError);
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+};
+
+export default usePromise;