Completed applyDiff

package.json

@@ -33,6 +33,6 @@
     ]
   },
   "dependencies": {
-    "@adrianhelvik/fragdom": "^2.0.1"
+    "@adrianhelvik/fragdom": "^2.0.2"
   }
 }

src/applyDiff.js

@@ -3,6 +3,7 @@ import createNode from './createNode.js'
 
 export default function applyDiff(container, diff) {
   const pending = []
+  let async = true
 
   if (container instanceof window.Element) {
     container = document.wrap(container)
@@ -24,7 +25,12 @@ export default function applyDiff(container, diff) {
         break
       case 'remove node':
         node.childNodes[index].remove()
-        node.reconcile() // XXX: Not needed when fragdom issue #1 is resolved
+        break
+      case 'add prop':
+        node.childNodes[index].setAttribute(action.key, action.value)
+        break
+      case 'remove prop':
+        node.childNodes[index].removeAttribute(action.key)
         break
       default:
         throw Error(

src/applyDiff.spec.js

@@ -129,29 +129,30 @@ describe('on child elements', () => {
   })
 
   it('can remove multiple elements', () => {
-    applyDiff(
-      container,
-      createDiff(
-        null,
-        <div>
-          <h1>Hello world</h1>
-          <main>
-            <p>Foo bar</p>
-          </main>
-        </div>,
-      ),
+    const diffA = createDiff(
+      null,
+      <container>
+        <first-child>Hello world</first-child>
+        <second-child>
+          <p>Foo bar</p>
+        </second-child>
+      </container>,
     )
-    const diff = createDiff(
-      <div>
-        <h1>Hello world</h1>
-        <main>
+
+    const diffB = createDiff(
+      <container>
+        <first-child>Hello world</first-child>
+        <second-child>
           <p>Foo bar</p>
-        </main>
-      </div>,
-      <div />,
+        </second-child>
+      </container>,
+      <container />,
     )
-    applyDiff(container, diff)
-    expect(container.innerHTML).toBe('<div></div>')
+
+    applyDiff(container, diffA)
+    applyDiff(container, diffB)
+
+    expect(container.innerHTML).toBe('<container></container>')
   })
 
   it('can track nodes that should be updated after the initial mount', () => {
@@ -180,3 +181,29 @@ describe('on child elements', () => {
     expect(pending[0].target.parentNode.tagName).toBe('DIV')
   })
 })
+
+it('can set initial props', () => {
+  const diff = createDiff(null, <div class="foo" />)
+  applyDiff(container, diff)
+  expect(container.innerHTML).toBe('<div class="foo"></div>')
+})
+
+it('can add props', () => {
+  const diffA = createDiff(null, <div />)
+  const diffB = createDiff(<div />, <div class="foo" />)
+
+  applyDiff(container, diffA)
+  applyDiff(container, diffB)
+
+  expect(container.innerHTML).toBe('<div class="foo"></div>')
+})
+
+it('can remove props', () => {
+  const diffA = createDiff(null, <div class="foo" />)
+  const diffB = createDiff(<div class="foo" />, <div />)
+
+  applyDiff(container, diffA)
+  applyDiff(container, diffB)
+
+  expect(container.innerHTML).toBe('<div></div>')
+})

src/createNode.js

@@ -39,7 +39,7 @@ export default function createNode(virtualNode, pending) {
 
   for (const key of Object.keys(virtualNode.props || {})) {
     if (key !== 'children') {
-      node.setAttribute(key, props[key])
+      node.setAttribute(key, virtualNode.props[key])
     }
   }
 

yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@adrianhelvik/fragdom@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@adrianhelvik/fragdom/-/fragdom-2.0.0.tgz#43e8110cb41b3f23bbfcf3622e1af21ea1b84336"
-  integrity sha512-QRAeEqd5y66WM8X/yTrOe1vyPFI+Abu4q2XNWXIpXIDugLn1dwvdpkR1I1h3JwbfXymogdUL+OhWjpCHkGCjrg==
+"@adrianhelvik/fragdom@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@adrianhelvik/fragdom/-/fragdom-2.0.2.tgz#334f0ef47bacdc765fb168778c5e0776897b98a9"
+  integrity sha512-tl2ghHzaJ5vlzkTvCo1xSO3yHOwDsrZBC9xuCaHIYA9APtjXuWirVfl7SV92Azyu0kwCc7rsg3T24uNSv05uwA==
 
 "@babel/cli@^7.6.2":
   version "7.6.2"