fix: assetsNode clean imrprove & css update&preview

coldemo · Apr 18, 2020 · eda6b7d · eda6b7d
1 parent bdfa90c
commit eda6b7d
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Visit: https://coldemo.github.io/
 - [ ] antd4, safe js exec sandbox - see pureproxy
 - [ ] lang ts/tsx/vue/py/rb/java
 - [ ] storage list, reset btn, responsive, screenshot
-- [ ] error-handling, sandboxNode
+- [ ] error-handling, assetsNode
 - [x] gh-pages, lang js/jsx, react/vue, umd-hack
 - [x] code read from url, storybook cards
 - [x] web worker for babel transform

diff --git a/public/code/vue-at.js b/public/code/vue-at.js
@@ -10,19 +10,17 @@ await loadJsForceUmd({
 
 appendCss(`
 .container { padding: 20px }
-.editor { padding:4px 8px; height:120px; border:solid 1px gray; white-space:pre-wrap }
+.editor { margin-top:20px; padding:4px 8px; height:120px; border:solid 1px gray; white-space:pre-wrap }
 `)
 
 let App = {
   components: { At: VueAt },
   template: `
     <div class="container">
       <h1>Vue At</h1>
-      <div style="margin-top:20px">
-        <at :members="members" v-model="input">
-          <div class="editor" contenteditable></div>
-        </at>
-      </div>
+      <at :members="members" v-model="input">
+        <div class="editor" contenteditable></div>
+      </at>
     </div>
   `,
   data() {

diff --git a/src/gallery/page.css b/src/gallery/page.css
@@ -20,11 +20,11 @@
   height: 100%;
 }
 
-@media (max-width: 360px) {
+/* @media (max-width: 360px) {
   .page-gallery .ant-col-xs-12 {
     width: 100% !important;
   }
-}
+} */
 
 @media (min-width: 640px) and (max-width: 899px) {
   .page-gallery .ant-col-sm-12 {
@@ -42,9 +42,11 @@
   .ant-card-body {
     padding: 12px;
   }
+
   .ant-card-meta-title {
     font-size: 12px;
   }
+
   .page-gallery .ant-card-cover {
     height: 120px;
   }

diff --git a/src/playground/Playground.tsx b/src/playground/Playground.tsx
@@ -181,6 +181,7 @@ export let Playground: React.FC = () => {
         <MainCol style={{ flex: 1, overflowX: 'auto' }}>
           <GentleSpin spinning={previewLoading}>
             <MountNode id="mountNode" />
+            <div id="assetsNode" />
           </GentleSpin>
         </MainCol>
         <DragSizing

diff --git a/src/playground/page.css b/src/playground/page.css
@@ -7,10 +7,9 @@
   height: 100%;
 }
 
-.page-playground #mountNode {
-  min-height: 100px;
-  overflow-y: auto;
-  word-break: break-word;
+.page-playground #assetsNode,
+.page-playground #assetsNodeOutdated {
+  display: none;
 }
 
 .page-playground .ant-spin-nested-loading,

diff --git a/src/playground/styled.ts b/src/playground/styled.ts
@@ -27,6 +27,9 @@ export let MainCol = styled(Col)`
 
 export let MountNode = styled.div`
   height: 100%;
+  min-height: 100px;
+  overflow-y: auto;
+  word-break: break-word;
 `;
 
 export let ErrorInfo = styled.pre`

diff --git a/src/playground/types.d.ts b/src/playground/types.d.ts
@@ -1,3 +1,4 @@
 interface Window {
+  assetsNode: HTMLDivElement;
   mountNode: HTMLDivElement;
 }
diff --git a/src/playground/util.tsx b/src/playground/util.tsx
@@ -50,7 +50,7 @@ export let loadJs = (url: string) => {
     el.onerror = e => {
       reject(new Error(`loadJs onerror - ${url}`));
     };
-    window.mountNode.appendChild(el);
+    window.assetsNode.appendChild(el);
   });
 };
 
@@ -65,26 +65,33 @@ export let loadCss = (url: string) => {
     el.onerror = e => {
       reject(new Error(`loadCss onerror - ${url}`));
     };
-    window.mountNode.appendChild(el);
+    window.assetsNode.appendChild(el);
   });
 };
 
 export let appendJs = (code: string) => {
   let el = document.createElement('script');
   el.innerHTML = code;
-  window.mountNode.appendChild(el);
+  window.assetsNode.appendChild(el);
 };
 
 export let appendCss = (code: string) => {
   let el = document.createElement('style');
   el.innerHTML = code;
-  window.mountNode.appendChild(el);
+  window.assetsNode.appendChild(el);
 };
 
 export let wrapCode = (code: string) => {
   return `
 (async () => {
   setRendering(true)
+
+  let a0 = assetsNode
+  a0.id = 'assetsNodeOutdated'
+  let a1 = document.createElement('div')
+  a1.id = 'assetsNode'
+  a0.parentNode.appendChild(a1)
+
   // mountNode.innerHTML = '' // can cause error in react
   ReactDOM.unmountComponentAtNode(mountNode)
   try {
@@ -102,6 +109,7 @@ export let wrapCode = (code: string) => {
     } else {
       ReactDOM.render(React.createElement(App), mountNode)
     }
+    a0.parentNode.removeChild(a0)
   } catch (err) {
     console.error(['displayError', err])
     displayError(err)