Merge pull request #129 from lorengreenfield/fix-nextTick

Fixing nextTick not running (shouldn't be the same as waiting and merging state, so separated them)

halfcab.mjs

@@ -193,16 +193,24 @@ function resetTouched (holidingPen) {
 
 let waitingAlready = false
 
-function nextTick (func) {
+function debounce (func) {
   if (!waitingAlready) {
     waitingAlready = true
-    requestAnimationFrame(() => {
+    nextTick(() => {
       func()
       waitingAlready = false
     })
   }
 }
 
+function nextTick (func) {
+  if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+    window.requestAnimationFrame(func)
+  } else {
+    setTimeout(func, 17)
+  }
+}
+
 function stateUpdated () {
   rootEl && update(rootEl, components(state))
 }
@@ -223,7 +231,7 @@ function updateState (updateObject, options) {
     }
   }
 
-  nextTick(stateUpdated)
+  debounce(stateUpdated)
 
   if (process.env.NODE_ENV !== 'production') {
     console.log('------STATE UPDATE------')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "halfcab",
-  "version": "10.0.1",
+  "version": "10.0.4",
   "description": "A simple universal JavaScript framework focused on making use of es2015 template strings to build components.",
   "main": "halfcab.mjs",
   "module": "halfcab.mjs",

test.mjs

@@ -23,18 +23,14 @@ let serverHtml = (strings, ...values) => {
 }
 
 let halfcab, ssr, html, defineRoute, gotoRoute, formField, cache, updateState, injectMarkdown, formIsValid,
-  css, state, getRouteComponent
+  css, state, getRouteComponent, nextTick
 
 function intialData (dataInitial) {
   let el = document.createElement('div')
   el.setAttribute('data-initial', dataInitial)
   document.body.appendChild(el)
 }
 
-global.requestAnimationFrame = func => {
-  func()
-}
-
 describe('halfcab', () => {
 
   describe('Server', () => {
@@ -53,7 +49,8 @@ describe('halfcab', () => {
         injectMarkdown,
         formIsValid,
         css,
-        getRouteComponent
+        getRouteComponent,
+        nextTick
       } = halfcabModule)
       halfcab = halfcabModule.default
     })
@@ -88,7 +85,8 @@ describe('halfcab', () => {
         injectMarkdown,
         formIsValid,
         css,
-        getRouteComponent
+        getRouteComponent,
+        nextTick
       } = halfcabModule)
       halfcab = halfcabModule.default
     })
@@ -121,15 +119,19 @@ describe('halfcab', () => {
         })
     })
 
-    it('updating state causes a rerender with state', () => {
-      return halfcab({
+    it('updating state causes a rerender with state', (done) => {
+      halfcab({
         components (args) {
           return html`<div>${args.testing || ''}</div>`
         }
       })
         .then(({rootEl, state}) => {
           updateState({testing: 'works'})
-          expect(rootEl.innerHTML.includes('works')).to.be.true()
+          nextTick(()=> {
+            expect(rootEl.innerHTML.includes('works')).to.be.true()
+            done()
+          })
+
         })
     })