Added async mode

src/applyDiff.js

@@ -1,9 +1,9 @@
 import document from '@adrianhelvik/fragdom'
 import createNode from './createNode.js'
 
-export default function applyDiff(container, diff) {
+export default function applyDiff(container, diff, options = { async: false }) {
   const pending = []
-  let async = true
+  let async = Boolean(options.async)
 
   if (container instanceof window.Element) {
     container = document.wrap(container)
@@ -15,21 +15,22 @@ export default function applyDiff(container, diff) {
     const node = lookup(container, path)
 
     switch (action.type) {
-      case 'replace node': {
+      case 'replace node':
         node.childNodes[index].remove()
         node.appendChild(createNode(action.node, pending))
         break
-      }
       case 'insert node':
         node.appendChild(createNode(action.node, pending))
         break
       case 'remove node':
         node.childNodes[index].remove()
         break
       case 'add prop':
+        async = false
         node.childNodes[index].setAttribute(action.key, action.value)
         break
       case 'remove prop':
+        async = false
         node.childNodes[index].removeAttribute(action.key)
         break
       default:
@@ -43,7 +44,11 @@ export default function applyDiff(container, diff) {
     }
   }
 
-  container.reconcile()
+  if (async) {
+    container.reconcileAsync()
+  } else {
+    container.reconcile()
+  }
 
   return pending
 }

src/applyDiff.spec.js

@@ -3,6 +3,8 @@ import document from '@adrianhelvik/fragdom'
 import createDiff from './createDiff.js'
 import applyDiff from './applyDiff.js'
 
+jest.useFakeTimers()
+
 let container
 let prev = null
 let render = template => {
@@ -14,6 +16,10 @@ beforeEach(() => {
   container = window.document.createElement('div')
 })
 
+afterEach(() => {
+  jest.runAllTimers()
+})
+
 describe('directly', () => {
   it('can create an element', () => {
     applyDiff(container, createDiff(null, <div />))
@@ -207,3 +213,33 @@ it('can remove props', () => {
 
   expect(container.innerHTML).toBe('<div></div>')
 })
+
+it('can apply a diff asynchronously', done => {
+  const diff = createDiff(null, <div />)
+  applyDiff(container, diff, { async: true })
+  expect(container.innerHTML).toBe('')
+  requestAnimationFrame(() => {
+    expect(container.innerHTML).toBe('<div></div>')
+    done()
+  })
+})
+
+it('will not apply a diff asynchronously if a prop is changed', () => {
+  const diffA = createDiff(null, <div />)
+  const diffB = createDiff(<div />, <div class="foo" />)
+
+  applyDiff(container, diffA)
+  applyDiff(container, diffB, { async: true })
+
+  expect(container.innerHTML).toBe('<div class="foo"></div>')
+})
+
+it('will not apply a diff asynchronously if a prop is removed', () => {
+  const diffA = createDiff(null, <div class="foo" />)
+  const diffB = createDiff(<div class="foo" />, <div />)
+
+  applyDiff(container, diffA)
+  applyDiff(container, diffB, { async: true })
+
+  expect(container.innerHTML).toBe('<div></div>')
+})