fix: assetsNode clean imrprove & css update&preview

fritx · fritx · commit eda6b7dc8c13 · 2020-04-18T23:20:18.000+08:00
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)

Original file line number	Diff line number	Diff line change
`@@ -20,11 +20,11 @@`
`20`	`20`	`height: 100%;`
`21`	`21`	`}`
`22`	`22`
`23`		`-@media (max-width: 360px) {`
	`23`	`+/* @media (max-width: 360px) {`
`24`	`24`	`.page-gallery .ant-col-xs-12 {`
`25`	`25`	`width: 100% !important;`
`26`	`26`	`}`
`27`		`-}`
	`27`	`+} */`
`28`	`28`
`29`	`29`	`@media (min-width: 640px) and (max-width: 899px) {`
`30`	`30`	`.page-gallery .ant-col-sm-12 {`
`@@ -42,9 +42,11 @@`
`42`	`42`	`.ant-card-body {`
`43`	`43`	`padding: 12px;`
`44`	`44`	`}`
	`45`	`+`
`45`	`46`	`.ant-card-meta-title {`
`46`	`47`	`font-size: 12px;`
`47`	`48`	`}`
	`49`	`+`
`48`	`50`	`.page-gallery .ant-card-cover {`
`49`	`51`	`height: 120px;`
`50`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,10 +7,9 @@`
`7`	`7`	`height: 100%;`
`8`	`8`	`}`
`9`	`9`
`10`		`-.page-playground #mountNode {`
`11`		`- min-height: 100px;`
`12`		`- overflow-y: auto;`
`13`		`- word-break: break-word;`
	`10`	`+.page-playground #assetsNode,`
	`11`	`+.page-playground #assetsNodeOutdated {`
	`12`	`+ display: none;`
`14`	`13`	`}`
`15`	`14`
`16`	`15`	`.page-playground .ant-spin-nested-loading,`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`interface Window {`
	`2`	`+ assetsNode: HTMLDivElement;`
`2`	`3`	`mountNode: HTMLDivElement;`
`3`	`4`	`}`