Move updateDomProperties to dom-utils

Author: pomber

src/dom-utils.js

@@ -0,0 +1,26 @@
+export function updateDomProperties(dom, prevProps, nextProps) {
+  const isEvent = name => name.startsWith("on");
+  const isAttribute = name => !isEvent(name) && name != "children";
+
+  // Remove event listeners
+  Object.keys(prevProps).filter(isEvent).forEach(name => {
+    const eventType = name.toLowerCase().substring(2);
+    dom.removeEventListener(eventType, prevProps[name]);
+  });
+
+  // Remove attributes
+  Object.keys(prevProps).filter(isAttribute).forEach(name => {
+    dom[name] = null;
+  });
+
+  // Set attributes
+  Object.keys(nextProps).filter(isAttribute).forEach(name => {
+    dom[name] = nextProps[name];
+  });
+
+  // Add event listeners
+  Object.keys(nextProps).filter(isEvent).forEach(name => {
+    const eventType = name.toLowerCase().substring(2);
+    dom.addEventListener(eventType, nextProps[name]);
+  });
+}

src/reconciler.js

@@ -1,3 +1,5 @@
+import { updateDomProperties } from "./dom-utils";
+
 let rootInstance = null;
 
 export function render(element, container) {
@@ -27,18 +29,7 @@ function instantiate(element) {
     ? document.createTextNode("")
     : document.createElement(type);
 
-  // Add event listeners
-  const isListener = name => name.startsWith("on");
-  Object.keys(props).filter(isListener).forEach(name => {
-    const eventType = name.toLowerCase().substring(2);
-    dom.addEventListener(eventType, props[name]);
-  });
-
-  // Set properties
-  const isAttribute = name => !isListener(name) && name != "children";
-  Object.keys(props).filter(isAttribute).forEach(name => {
-    dom[name] = props[name];
-  });
+  updateDomProperties(dom, [], props);
 
   // Instantiate and append children
   const childElements = props.children || [];