Initial API for updating attributes and properties.

index.js

@@ -25,6 +25,15 @@ export {
   skip,
   skipNode
 } from './src/core.js';
+export {
+  applyUpdates,
+  bufferAttribute,
+  bufferProperty,
+  queueAttribute,
+  queueProperty,
+  queueUpdates
+} from './src/updates.js';
+export { flush } from './src/changes.js';
 export {
   elementVoid,
   elementOpenStart,

src/attributes.js

@@ -42,17 +42,18 @@ const getNamespace = function(name) {
  * as an attribute.
  * @param {!Element} el
  * @param {string} name The attribute's name.
- * @param {?(boolean|number|string)=} value The attribute's value.
+ * @param {*} value The attribute's value.
  */
 const applyAttr = function(el, name, value) {
   if (value == null) {
     el.removeAttribute(name);
   } else {
     const attrNS = getNamespace(name);
+    const attrVal = /** @type {boolean|number|string} */(value);
     if (attrNS) {
-      el.setAttributeNS(attrNS, name, value);
+      el.setAttributeNS(attrNS, name, attrVal);
     } else {
-      el.setAttribute(name, value);
+      el.setAttribute(name, attrVal);
     }
   }
 };
@@ -123,7 +124,7 @@ const applyAttributeTyped = function(el, name, value) {
   if (type === 'object' || type === 'function') {
     applyProp(el, name, value);
   } else {
-    applyAttr(el, name, /** @type {?(boolean|number|string)} */(value));
+    applyAttr(el, name, value);
   }
 };
 

src/node_data.js

@@ -34,6 +34,14 @@ function NodeData(nameOrCtor, key, typeId) {
    */
   this.attrsArr = [];
 
+  /**
+   * An array of property name/value pairs, used for quickly diffing the
+   * incomming properties to see if the DOM node's properties need to be
+   * updated.
+   * @const {Array<*>}
+   */
+  this.propertiesArr = [];
+
   /**
    * Whether or not the statics have been applied for the node yet.
    * {boolean}

src/updates.js

@@ -0,0 +1,106 @@
+/**
+ * Copyright 2017 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getData } from './node_data.js';
+import { currentElement } from './core.js';
+import { calculateDiff } from './diff.js';
+import {
+  applyAttr,
+  applyProp
+} from './attributes.js';
+import {
+  queueChange,
+  flush
+} from './changes.js';
+import { truncateArray } from './util.js';
+
+
+/** @type {!Array<*>} */
+const attributes = [];
+
+/** @type {!Array<*>} */
+const properties = [];
+
+
+/**
+ * Buffers an attribute, saving it to be applied later.
+ * @param {string} name
+ * @param {*} value
+ */
+const bufferAttribute = function(name, value) {
+  attributes.push(name);
+  attributes.push(value);
+};
+
+
+/**
+ * Buffers an attribute, saving it to be applied later.
+ * @param {string} name
+ * @param {*} value
+ */
+const bufferProperty = function(name, value) {
+  properties.push(name);
+  properties.push(value);
+};
+
+
+/**
+ * @type {function(!Element, string, *)}
+ */
+const queueAttribute = queueChange.bind(null, applyAttr);
+
+
+/**
+ * @type {function(!Element, string, *)}
+ */
+const queueProperty = queueChange.bind(null, applyProp);
+
+
+/**
+ * Queues up any diffs for the current element and buffered attributes. These
+ * can be apply by calling `flush()`;
+ */
+const queueUpdates = function() {
+  const node = currentElement();
+  const data = getData(node);
+  const attributesArr = data.attrsArr;
+  const propertiesArr = data.propertiesArr;
+
+  calculateDiff(attributesArr, attributes, node, queueAttribute);
+  calculateDiff(propertiesArr, properties, node, queueProperty);
+  truncateArray(attributes, 0);
+  truncateArray(properties, 0);
+};
+
+
+/**
+ * Immediately applies any diffs for the current element and buffered
+ * attributes.
+ */
+const applyUpdates = function() {
+  queueUpdates();
+  flush();
+};
+
+/** */
+export {
+  applyUpdates,
+  bufferAttribute,
+  bufferProperty,
+  queueAttribute,
+  queueProperty,
+  queueUpdates,
+};

test/functional/updates.js

@@ -0,0 +1,111 @@
+/**
+ * Copyright 2017 The Incremental DOM Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  patch,
+  open,
+  close,
+  applyUpdates,
+  bufferAttribute,
+  bufferProperty
+} from '../../index.js';
+
+describe('updates', () => {
+  let container;
+
+  function render({attributes, properties} = {}) {
+    open('div');
+      for (const key in properties) {
+        bufferProperty(key, properties[key]);
+      }
+      for (const key in attributes) {
+        bufferAttribute(key, attributes[key]);
+      }
+      applyUpdates();
+    close('div');
+  }
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it('should add new attributes', () => {
+    patch(container, () => render({
+      attributes: {
+        'data-expanded': 'hello'
+      }
+    }));
+    const el = container.childNodes[0];
+
+    expect(el.getAttribute('data-expanded')).to.equal('hello');
+  });
+
+  it('should remove attributes', () => {
+    patch(container, () => render({
+      attributes: {
+        'data-expanded': 'hello'
+      }
+    }));
+    patch(container, () => render());
+    const el = container.childNodes[0];
+
+    expect(el.hasAttribute('data-expanded')).to.be.false;
+  });
+
+  it('should add new properties', () => {
+    patch(container, () => render({
+      properties: {
+        'prop': 'hello'
+      }
+    }));
+    const el = container.childNodes[0];
+
+    expect(el.prop).to.equal('hello');
+  });
+
+  it('should remove properties', () => {
+    patch(container, () => render({
+      properties: {
+        'prop': 'hello'
+      }
+    }));
+    patch(container, () => render());
+    const el = container.childNodes[0];
+
+    expect(el.prop).to.be.undefined;
+  });
+
+  it('should add both attributes and properties', () => {
+    patch(container, () => render({
+      attributes: {
+        'data-expanded': 'hello'
+      },
+      properties: {
+        'prop': 'hello'
+      }
+    }));
+    const el = container.childNodes[0];
+
+    expect(el.getAttribute('data-expanded')).to.equal('hello');
+    expect(el.prop).to.equal('hello');
+  });
+});
+