chore: setRendering => add/removeLoading

fritx · fritx · commit 357b526a11ff · 2020-05-01T14:49:20.000+08:00
diff --git a/README.md b/README.md
@@ -7,10 +7,10 @@ Visit: https://coldemo.github.io/
 - [ ] vscode tsconfig src/\* alias (being reverted by npm-run-dev)
 - [ ] antd4, safe js exec sandbox - see pureproxy
 - [ ] storage list, responsive, screenshot, code-splitting
-- [ ] faked location/window, cookie/storage partition, setRendering.cancel
-- [ ] tag-filter/btn-back/reset/export/upload/fullscreen
+- [ ] faked location/window, cookie/storage partition
+- [ ] tag-filter/btn-back/reset/export/upload/fullscreen/popstate
 - [ ] lang rb/go/java/dart/kotlin, mjs-import/vite
-- [x] crank-jsx, vue-jsx, ts/tsx, py, vue
+- [x] crank-jsx, vue-jsx, ts/tsx, py, vue, add/removeRendering
 - [x] error-handling, assetsNode, load-parallel
 - [x] gh-pages, lang js/jsx, react/vue, umd-hack
 - [x] code read from url, storybook cards
diff --git a/public/code/espresso-todomvc.js b/public/code/espresso-todomvc.js
@@ -60,7 +60,12 @@ let ToDoStore = Collection.extend({
   init: function() {
     this.clearCompleted = this.clearCompleted.bind(this);
     this.add = this.add.bind(this);
-    this.reset(JSON.parse(localStorage.getItem(storageKey)));
+    let storedTodos = JSON.parse(localStorage.getItem(storageKey));
+    if (Array.isArray(storedTodos) && storedTodos.length) {
+      this.reset(storedTodos);
+    } else {
+      localStorage.removeItem(storageKey);
+    }
     this.addListener('change', this.save.bind(this));
   },
   add: function(txt) {
@@ -179,7 +184,9 @@ let App = Controller.extend({
 });
 
 var store = new ToDoStore([
-  // { id: 0, text: 'write todomvc', done: false },
+  { id: 0, text: 'respect to espresso.js', done: false },
+  { id: 1, text: 'espresso.js 520 stars including mine', done: false },
+  { id: 2, text: 'it\'s outdated but was in my early memory', done: false },
 ]);
 
 new App({ view: document.getElementById('todoapp') });
diff --git a/public/code/vanta.jsx b/public/code/vanta.jsx
@@ -45,7 +45,7 @@ let VantaHeader = ({ theme }) => {
 
 let loadVantaEffect = (el, theme) => {
   let promise = (async () => {
-    setRendering(true)
+    let removeLoading = addLoading()
     if (['halo', 'topology'].includes(theme)) {
       await loadJs('https://unpkg.com/vanta@0.5.15/vendor/p5.min.js')
     }
@@ -56,7 +56,7 @@ let loadVantaEffect = (el, theme) => {
     let ret = VANTA[method]({ el })
     let canvasHeight = el.querySelector('canvas').clientHeight
     el.style.height = `${canvasHeight}px`
-    setRendering(false)
+    removeLoading()
     return ret
   })()
   return () => {
diff --git a/src/playground/Playground.tsx b/src/playground/Playground.tsx
@@ -126,10 +126,15 @@ export let Playground: React.FC = () => {
 
   let [preview, setPreview] = useState('');
   let [compiling, setCompiling] = useState(false);
-  let [rendering, setRendering] = useState(false);
-  let previewLoading = preloading || compiling || rendering;
+  let [rendering, _setRendering] = useState(0);
+  let previewLoading = preloading || compiling || rendering > 0;
 
-  Object.assign(window, { setRendering }); // without side-effect
+  let addLoading = useCallback(() => {
+    _setRendering(s => s + 1);
+    return () => _setRendering(s => s - 1);
+  }, []);
+
+  Object.assign(window, { addLoading }); // without side-effect
 
   let doPreview = useCallback(
     async (code: string) => {
diff --git a/src/playground/codeTransform.ts b/src/playground/codeTransform.ts
@@ -31,7 +31,7 @@ export let wrapVue = (code: string) => {
 
   return `
 (async () => {
-  setRendering(true)
+  let removeLoading = addLoading()
 
   let a0 = assetsNode
   a0.id = 'assetsNodeOutdated'
@@ -65,7 +65,7 @@ export let wrapVue = (code: string) => {
     console.error(['displayError', err])
     displayError(err)
   } finally {
-    setRendering(false)
+    removeLoading()
   }
 })()
   `.trim();
@@ -74,7 +74,7 @@ export let wrapVue = (code: string) => {
 export let wrapPy = (code: string) => {
   return `
 (async () => {
-  setRendering(true)
+  let removeLoading = addLoading()
 
   let a0 = assetsNode
   a0.id = 'assetsNodeOutdated'
@@ -133,7 +133,7 @@ export let wrapPy = (code: string) => {
     console.error(['displayError', err])
     displayError(err)
   } finally {
-    setRendering(false)
+    removeLoading()
   }
 })()
   `.trim();
@@ -142,7 +142,7 @@ export let wrapPy = (code: string) => {
 export let wrapJs = (code: string) => {
   return `
 (async () => {
-  setRendering(true)
+  let removeLoading = addLoading()
 
   let a0 = assetsNode
   a0.id = 'assetsNodeOutdated'
@@ -176,7 +176,7 @@ export let wrapJs = (code: string) => {
     console.error(['displayError', err])
     displayError(err)
   } finally {
-    setRendering(false)
+    removeLoading()
   }
 })()
   `.trim();
