feat(umi-plugin-react): support use string[] in scripts and headScrip…

…ts configuration (#2416) * feat: scripts support string Array * doc: scripts
umijs · May 14, 2019 · 6ed5ecf · 6ed5ecf
1 parent 36347c4
commit 6ed5ecf
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 26 deletions.
diff --git a/docs/plugin/umi-plugin-react.md b/docs/plugin/umi-plugin-react.md
@@ -299,13 +299,13 @@ export default {
 
 ### scripts
 
-* Type：`Array(Object)`
+* Type：`Array(Object) or Array(String)`
 
 Replace in `<body>`, after umi.js, use <%= PUBLIC_PATH %> specifies the publicPath
 
 ### headScripts
 
-* Type：`Array(Object)`
+* Type：`Array(Object) or Array(String)`
 
 Replace in `<head>`, before umi.js, use <%= PUBLIC_PATH %> specifies the publicPath
 

diff --git a/docs/zh/plugin/umi-plugin-react.md b/docs/zh/plugin/umi-plugin-react.md
@@ -308,13 +308,13 @@ export default {
 
 ### scripts
 
-* 类型：`Array(Object)`
+* 类型：`Array(Object)` 或者 `Array(String)` <Badge text="1.8.0+"/>
 
 放在 `<body>` 里，在 umi.js 之后，可使用 <%= PUBLIC_PATH %> 指向 publicPath
 
 ### headScripts
 
-* 类型：`Array(Object)`
+* 类型：`Array(Object)` 或者 `Array(String)` <Badge text="1.8.0+"/>
 
 放在 `<head>` 里，在 umi.js 之前，可使用 <%= PUBLIC_PATH %> 指向 publicPath
 

diff --git a/packages/umi-plugin-react/package.json b/packages/umi-plugin-react/package.json
@@ -44,5 +44,8 @@
       "src/plugins/pwa/registerServiceWorker.js",
       "src/plugins/title/TitleWrapper.js"
     ]
+  },
+  "devDependencies": {
+    "umi-types": "^0.3.3"
   }
 }
diff --git a/packages/umi-plugin-react/src/plugins/headScripts.js b/packages/umi-plugin-react/src/plugins/headScripts.js
diff --git a/packages/umi-plugin-react/src/plugins/headScripts.ts b/packages/umi-plugin-react/src/plugins/headScripts.ts
@@ -0,0 +1,14 @@
+import { IApi } from 'umi-types';
+import getScripts, { ScriptConfig } from '../utils/getScripts';
+
+export default function(api: IApi, option: ScriptConfig) {
+  api.onOptionChange(newOption => {
+    option = newOption;
+    api.rebuildHTML();
+    api.refreshBrowser();
+  });
+
+  api.addHTMLHeadScript(() => {
+    return getScripts(option);
+  });
+}
diff --git a/packages/umi-plugin-react/src/plugins/scripts.js b/packages/umi-plugin-react/src/plugins/scripts.js
diff --git a/packages/umi-plugin-react/src/plugins/scripts.ts b/packages/umi-plugin-react/src/plugins/scripts.ts
@@ -0,0 +1,14 @@
+import { IApi } from 'umi-types';
+import getScripts, { ScriptConfig } from '../utils/getScripts';
+
+export default function(api: IApi, option: ScriptConfig) {
+  api.onOptionChange(newOption => {
+    option = newOption;
+    api.rebuildHTML();
+    api.refreshBrowser();
+  });
+
+  api.addHTMLScript(() => {
+    return getScripts(option);
+  });
+}
diff --git a/packages/umi-plugin-react/src/utils/getScripts.test.js b/packages/umi-plugin-react/src/utils/getScripts.test.js
@@ -0,0 +1,85 @@
+import getScripts from './getScripts';
+
+describe('scripts plugin', () => {
+  it('getScripts string', () => {
+    const option1 = [];
+    const option2 = [
+      'https://gw.alipayobjects.com/as/g/h5-lib/lottie-web/5.3.4/lottie.min.js',
+    ];
+    const option3 = [`console.log(1);`];
+    const option4 = [
+      'https://gw.alipayobjects.com/as/g/h5-lib/lottie-web/5.3.4/lottie.min.js',
+      `alert(1);`,
+    ];
+
+    expect(getScripts(option1)).toEqual([]);
+    expect(getScripts(option2)).toEqual([
+      {
+        src:
+          'https://gw.alipayobjects.com/as/g/h5-lib/lottie-web/5.3.4/lottie.min.js',
+      },
+    ]);
+    expect(getScripts(option3)).toEqual([
+      {
+        content: 'console.log(1);',
+      },
+    ]);
+    expect(getScripts(option4)).toEqual([
+      {
+        src:
+          'https://gw.alipayobjects.com/as/g/h5-lib/lottie-web/5.3.4/lottie.min.js',
+      },
+      {
+        content: 'alert(1);',
+      },
+    ]);
+  });
+
+  it('getScripts object', () => {
+    const option2 = [
+      {
+        src:
+          'https://gw.alipayobjects.com/as/g/h5-lib/lottie-web/5.3.4/lottie.min.js',
+        crossOrigin: 'anonymous',
+      },
+      'alert(1);',
+      'https://gw.alipayobjects.com/as/g/h5-lib/lottie-web/5.3.4/lottie.min.js',
+    ];
+
+    expect(getScripts(option2)).toEqual([
+      {
+        src:
+          'https://gw.alipayobjects.com/as/g/h5-lib/lottie-web/5.3.4/lottie.min.js',
+        crossOrigin: 'anonymous',
+      },
+      {
+        content: 'alert(1);',
+      },
+      {
+        src:
+          'https://gw.alipayobjects.com/as/g/h5-lib/lottie-web/5.3.4/lottie.min.js',
+      },
+    ]);
+  });
+
+  it('getScripts other', () => {
+    const option2 = [
+      null,
+      'console.log(1);',
+      'https://gw.alipayobjects.com/as/g/h5-lib/lottie-web/5.3.4/lottie.min.js',
+      '',
+      undefined,
+      {},
+    ];
+
+    expect(getScripts(option2)).toEqual([
+      {
+        content: 'console.log(1);',
+      },
+      {
+        src:
+          'https://gw.alipayobjects.com/as/g/h5-lib/lottie-web/5.3.4/lottie.min.js',
+      },
+    ]);
+  });
+});
diff --git a/packages/umi-plugin-react/src/utils/getScripts.ts b/packages/umi-plugin-react/src/utils/getScripts.ts
@@ -0,0 +1,25 @@
+const isEmpty = require('lodash/isEmpty');
+
+interface IScript extends Partial<HTMLScriptElement> {
+  content?: string;
+}
+
+export type ScriptConfig = Array<IScript | string>;
+
+// 方便测试
+export default (option: ScriptConfig) => {
+  if (Array.isArray(option) && option.length > 0) {
+    return option
+      .filter(script => !isEmpty(script))
+      .map(aScript => {
+        if (typeof aScript === 'string') {
+          return /^(http:|https:)?\/\//.test(aScript)
+            ? { src: aScript }
+            : { content: aScript };
+        }
+        // [{ content: '', async: true, crossOrigin: true }]
+        return aScript;
+      });
+  }
+  return [];
+};