Add incremental reconciliation (Didact Fiber)

Author: pomber

src/component.js

@@ -1,26 +1,18 @@
-import { reconcile } from "./reconciler";
+import { scheduleUpdate } from "./reconciler";
 
 export class Component {
   constructor(props) {
-    this.props = props;
+    this.props = props || {};
     this.state = this.state || {};
   }
 
   setState(partialState) {
-    this.state = Object.assign({}, this.state, partialState);
-    updateInstance(this.__internalInstance);
+    scheduleUpdate(this, partialState);
   }
 }
 
-function updateInstance(internalInstance) {
-  const parentDom = internalInstance.dom.parentNode;
-  const element = internalInstance.element;
-  reconcile(parentDom, internalInstance, element);
-}
-
-export function createPublicInstance(element, internalInstance) {
-  const { type, props } = element;
-  const publicInstance = new type(props);
-  publicInstance.__internalInstance = internalInstance;
-  return publicInstance;
+export function createInstance(fiber) {
+  const instance = new fiber.type(fiber.props);
+  instance.__fiber = fiber;
+  return instance;
 }

src/dom-utils.js

@@ -1,26 +1,66 @@
-export function updateDomProperties(dom, prevProps, nextProps) {
-  const isEvent = name => name.startsWith("on");
-  const isAttribute = name => !isEvent(name) && name != "children";
+import { TEXT_ELEMENT } from "./element";
+
+const isEvent = name => name.startsWith("on");
+const isAttribute = name =>
+  !isEvent(name) && name != "children" && name != "style";
+const isNew = (prev, next) => key => prev[key] !== next[key];
+const isGone = (prev, next) => key => !(key in next);
 
+export function updateDomProperties(dom, prevProps, nextProps) {
   // Remove event listeners
-  Object.keys(prevProps).filter(isEvent).forEach(name => {
-    const eventType = name.toLowerCase().substring(2);
-    dom.removeEventListener(eventType, prevProps[name]);
-  });
+  Object.keys(prevProps)
+    .filter(isEvent)
+    .filter(key => !(key in nextProps) || isNew(prevProps, nextProps)(key))
+    .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;
-  });
+  Object.keys(prevProps)
+    .filter(isAttribute)
+    .filter(isGone(prevProps, nextProps))
+    .forEach(name => {
+      dom[name] = null;
+    });
 
   // Set attributes
-  Object.keys(nextProps).filter(isAttribute).forEach(name => {
-    dom[name] = nextProps[name];
-  });
+  Object.keys(nextProps)
+    .filter(isAttribute)
+    .filter(isNew(prevProps, nextProps))
+    .forEach(name => {
+      dom[name] = nextProps[name];
+    });
+
+  // Set style
+  prevProps.style = prevProps.style || {};
+  nextProps.style = nextProps.style || {};
+  Object.keys(nextProps.style)
+    .filter(isNew(prevProps.style, nextProps.style))
+    .forEach(key => {
+      dom.style[key] = nextProps.style[key];
+    });
+  Object.keys(prevProps.style)
+    .filter(isGone(prevProps.style, nextProps.style))
+    .forEach(key => {
+      dom.style[key] = "";
+    });
 
   // Add event listeners
-  Object.keys(nextProps).filter(isEvent).forEach(name => {
-    const eventType = name.toLowerCase().substring(2);
-    dom.addEventListener(eventType, nextProps[name]);
-  });
+  Object.keys(nextProps)
+    .filter(isEvent)
+    .filter(isNew(prevProps, nextProps))
+    .forEach(name => {
+      const eventType = name.toLowerCase().substring(2);
+      dom.addEventListener(eventType, nextProps[name]);
+    });
+}
+
+export function createDomElement(fiber) {
+  const isTextElement = fiber.type === TEXT_ELEMENT;
+  const dom = isTextElement
+    ? document.createTextNode("")
+    : document.createElement(fiber.type);
+  updateDomProperties(dom, [], fiber.props);
+  return dom;
 }