fix(useExternal): add an attribute (option.type) to specify the type of external resource

packages/hooks/src/useExternal/demo/demo1.tsx

@@ -20,12 +20,16 @@ export default () => {
         Status: <b>{status}</b>
       </p>
       <p>
-        Response: <i>{status === 'ready' ? TEST_SCRIPT.start() : '-'}</i>
+        Response: <i>{status === 'ready' ? TEST_SCRIPT?.start() : '-'}</i>
       </p>
       <button type="button" style={{ marginRight: 8 }} onClick={() => toggle()}>
         toggle
       </button>
-      <button type="button" style={{ marginRight: 8 }} onClick={() => unload()}>
+      <button type="button" style={{ marginRight: 8 }} onClick={() => { 
+        unload();
+        // Maybe you wanna remove the global variables or functions after run unload()
+        TEST_SCRIPT = undefined;
+      }}>
         unload
       </button>
       <button type="button" style={{ marginRight: 8 }} onClick={() => load()}>

packages/hooks/src/useExternal/demo/demo4.tsx

@@ -15,7 +15,8 @@ export default () => {
   const [path, setPath] = React.useState('https://picsum.photos/200/100');
 
   const [status] = useExternal(path, {
-    target: ref,
+    type: 'img',
+    target: ref
   });
 
   return (

packages/hooks/src/useExternal/index.en-US.md

@@ -55,6 +55,7 @@ const [status, { toggle, unload, load }] = useExternal(path: string, options?: O
 
 | Params     | Description                                  | Type     | Default |
 |------------|----------------------------------------------|----------|---------|
+| type | The type of extarnal resources which need to load, support `js`/`css`/`img`  | `string` | -      |
 | async | The async properties of extarnal resources `<script>` | `boolean` | true       |
 | media | The media properties of extarnal resources `<link>`, support `all`/`screen`/`print`/`handheld` | `string` | all       |
 | target | The DOM or Refs of container which need to load the `<img>` | `HTMLElement` \| `(() => HTMLElement)` \| `MutableRefObject` | -      |

packages/hooks/src/useExternal/index.ts

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, useMemo } from 'react';
 import { getTargetElement, BasicTarget } from '../utils/dom';
 
 export interface Options {
+  type?: 'js' | 'css' | 'img';
   media?: HTMLLinkElement['media'];
   async?: boolean;
   target?: BasicTarget;
@@ -38,7 +39,7 @@ export default function useExternal(path: string, options?: Options): [Status, A
     setStatus('loading');
     // Create external element
     const pathname = path.replace(/[|#].*$/, '');
-    if (/(^css!|\.css$)/.test(pathname)) {
+    if (options?.type === 'css' || /(^css!|\.css$)/.test(pathname)) {
       // css
       ref.current = document.createElement('link');
       ref.current.rel = 'stylesheet';
@@ -53,14 +54,14 @@ export default function useExternal(path: string, options?: Options): [Status, A
       }
       ref.current.setAttribute('data-status', 'loading');
       document.head.appendChild(ref.current);
-    } else if (/(^js!|\.js$)/.test(pathname)) {
+    } else if (options?.type === 'js' || /(^js!|\.js$)/.test(pathname)) {
       // javascript
       ref.current = document.createElement('script');
       ref.current.src = path;
       ref.current.async = options?.async === undefined ? true : options?.async;
       ref.current.setAttribute('data-status', 'loading');
       document.body.appendChild(ref.current);
-    } else {
+    } else if (options?.type === 'img' || /(^img!|\.(png|gif|jpg|svg|webp)$)/.test(pathname)) {
       // image
       ref.current = document.createElement('img');
       ref.current.src = path;
@@ -70,7 +71,16 @@ export default function useExternal(path: string, options?: Options): [Status, A
       if (wrapper) {
         wrapper.appendChild(ref.current);
       }
+    }else{
+      // do nothing
+      console.error(
+        "Cannot infer the type of external resource, and please provide a type ('js' | 'css' | 'img'). " +
+          "Refer to the https://ahooks.js.org/hooks/dom/use-external/#options"
+      )
     }
+
+    if(!ref.current) return
+
     // Bind setAttribute Event
     const setAttributeFromEvent = (event: Event) => {
       ref.current?.setAttribute('data-status', event.type === 'load' ? 'ready' : 'error');
@@ -83,10 +93,8 @@ export default function useExternal(path: string, options?: Options): [Status, A
     ref.current.addEventListener('load', setStateFromEvent);
     ref.current.addEventListener('error', setStateFromEvent);
     return () => {
-      if (ref.current) {
-        ref.current.removeEventListener('load', setStateFromEvent);
-        ref.current.removeEventListener('error', setStateFromEvent);
-      }
+      ref.current?.removeEventListener('load', setStateFromEvent);
+      ref.current?.removeEventListener('error', setStateFromEvent);
     };
   }, [path, active]);
 

packages/hooks/src/useExternal/index.zh-CN.md

@@ -55,6 +55,7 @@ const [status, { toggle, unload, load }] = useExternal(path: string, options?: O
 
 | 参数     | 说明                                  | 类型     | 默认值 |
 |------------|----------------------------------------------|----------|---------|
+| type | 需引入外部资源的类型，支持 `js`/`css`/`img`  | `string` | -      |
 | async | 引入外链脚本的 `<script>` 的 async 属性 | `boolean` | true       |
 | media | 引入外链样式表 `<link>` 的 media 属性, 如 `all`/`screen`/`print`/`handheld` | `string` | all       |
 | target | 需插入外部图片资源 `<img>` 的父容器 DOM 节点或者 Refs  | `HTMLElement` \| `(() => HTMLElement)` \| `MutableRefObject` | -      |

public/useExternal/test-external-script.js

@@ -1,5 +1,5 @@
-const TEST_SCRIPT = {
-  start: () => {
+window.TEST_SCRIPT = {
+  start: function () {
     return 'Hello World';
   },
 };