feat: loadJs/Css supports parallel

fritx · fritx · commit fbe0cebdd836 · 2020-04-20T23:20:34.000+08:00
diff --git a/public/code/genji.jsx b/public/code/genji.jsx
@@ -1,5 +1,7 @@
-await loadJs('https://unpkg.com/react-redux')
-await loadJs('https://unpkg.com/genjijs-umd/dist/index.min.js')
+await loadJs([
+  'https://unpkg.com/react-redux@7.2.0/dist/react-redux.js',
+  'https://unpkg.com/genjijs-umd@0.3.0/dist/index.min.js',
+])
 
 let { Provider, useSelector, useDispatch } = ReactRedux
 
diff --git a/public/code/index.yml b/public/code/index.yml
@@ -1,4 +1,3 @@
-- hello-world.jsx
 - vue-at-gh119.js
 - vue-at-element-2.x-input.js
 - vue-at-element-1.x-input.js
@@ -12,3 +11,4 @@
 - react-editor-sizing.jsx
 - react-editor.jsx
 - use-model.jsx
+- hello-world.jsx
diff --git a/public/code/react-editor-sizing.jsx b/public/code/react-editor-sizing.jsx
@@ -1,5 +1,7 @@
-await loadJs('https://unpkg.com/react-editor')
-await loadJs('https://unpkg.com/react-drag-sizing')
+await loadJs([
+  'https://unpkg.com/react-editor',
+  'https://unpkg.com/react-drag-sizing',
+])
 
 let { Editor } = ReactEditor
 let { DragSizing } = ReactDragSizing
diff --git a/public/code/use-model.jsx b/public/code/use-model.jsx
@@ -1,5 +1,7 @@
-await loadJs('https://unpkg.com/immer')
-await loadJs('https://unpkg.com/react-editor')
+await loadJs([
+  'https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js',
+  'https://unpkg.com/react-editor@2.0.0-alpha.5/dist/index.js',
+])
 
 let { produce } = immer
 let { Button } = Antd
diff --git a/public/code/vue-threejs.js b/public/code/vue-threejs.js
@@ -1,8 +1,8 @@
-// await loadJs('https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js')
-await loadJs('https://unpkg.com/vue@2.6.11/dist/vue.min.js')
-
-// await loadJs('https://unpkg.com/three@0.81.2/build/three.min.js')
-await loadJs('https://unpkg.com/three@0.115.0/build/three.min.js')
+await loadJs([
+  'https://unpkg.com/vue@2.6.11/dist/vue.min.js',
+  // 'https://unpkg.com/three@0.81.2/build/three.min.js',
+  'https://unpkg.com/three@0.115.0/build/three.min.js',
+])
 
 // await loadJs('https://unpkg.com/vue-threejs@0.2.0-alpha.1/lib/VueThreejs.umd.min.js')
 await loadJs('https://unpkg.com/vue-threejs@0.2.0-alpha.1/lib/VueThreejs.umd.js')
diff --git a/src/gallery/Gallery.tsx b/src/gallery/Gallery.tsx
@@ -52,8 +52,12 @@ export let Gallery: React.FC = () => {
                         onError={handleImageError}
                       />
                     }
-                    onClick={() => {
-                      history.push(`/playground/${id}`);
+                    onClick={e => {
+                      if (e.metaKey) {
+                        window.open(`/#/playground/${id}`);
+                      } else {
+                        history.push(`/playground/${id}`);
+                      }
                     }}
                   >
                     <Card.Meta
diff --git a/src/playground/util.tsx b/src/playground/util.tsx
@@ -40,7 +40,10 @@ export let loadJsForceUmd = async ({
   appendJs(code);
 };
 
-export let loadJs = (url: string) => {
+export let loadJs = (url: string | string[]): Promise<void> => {
+  if (Array.isArray(url)) {
+    return Promise.all(url.map(loadJs)).then(() => undefined);
+  }
   return new Promise((resolve, reject) => {
     let el = document.createElement('script');
     el.src = url;
@@ -54,7 +57,10 @@ export let loadJs = (url: string) => {
   });
 };
 
-export let loadCss = (url: string) => {
+export let loadCss = (url: string | string[]): Promise<void> => {
+  if (Array.isArray(url)) {
+    return Promise.all(url.map(loadCss)).then(() => undefined);
+  }
   return new Promise((resolve, reject) => {
     let el = document.createElement('link');
     el.rel = 'stylesheet';

-Original file line number
+Diff line change
@@ @@ -1,5 +1,7 @@ @@
 -await loadJs('https://unpkg.com/react-redux')
 -await loadJs('https://unpkg.com/genjijs-umd/dist/index.min.js')
 +await loadJs([
 +  'https://unpkg.com/[email protected]/dist/react-redux.js',
 +  'https://unpkg.com/[email protected]/dist/index.min.js',
 +])
 let { Provider, useSelector, useDispatch } = ReactRedux
-Original file line number
+Diff line change
@@ @@ -1,8 +1,8 @@ @@
 -// await loadJs('https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js')
 -await loadJs('https://unpkg.com/[email protected]/dist/vue.min.js')
+-
 -// await loadJs('https://unpkg.com/three@0.81.2/build/three.min.js')
 -await loadJs('https://unpkg.com/[email protected]/build/three.min.js')
 +await loadJs([
 +  'https://unpkg.com/[email protected]/dist/vue.min.js',
 +  // 'https://unpkg.com/[email protected]/build/three.min.js',
 +  'https://unpkg.com/three@0.115.0/build/three.min.js',
 +])
 // await loadJs('https://unpkg.com/[email protected]/lib/VueThreejs.umd.min.js')
 await loadJs('https://unpkg.com/[email protected]/lib/VueThreejs.umd.js')