Fix attributes diff on DOM node (preactjs#677)

dmail · developit · commit a260174358be · 2017-05-24T21:15:08.000-04:00
* Fix render attributes diff with a DOM node * Add another demo the list (preactjs#681) Added the Periodic Weather PWA with the lastest of Preact to the list! ☀️
diff --git a/src/vdom/diff.js b/src/vdom/diff.js
@@ -123,9 +123,17 @@ function idiff(dom, vnode, context, mountAll, componentRoot) {
 
 
 	let fc = out.firstChild,
-		props = out[ATTR_KEY] || (out[ATTR_KEY] = {}),
+		props,
 		vchildren = vnode.children;
 
+	if (out[ATTR_KEY]) {
+		props = out[ATTR_KEY];
+	}
+	else {
+		props = out[ATTR_KEY] = {};
+		for (let a=out.attributes, i=a.length; i--; ) props[a[i].name] = a[i].value;
+	}
+
 	// Optimization: fast-path for elements containing a single TextNode:
 	if (!hydrating && vchildren && vchildren.length===1 && typeof vchildren[0]==='string' && fc!=null && fc.splitText!==undefined && fc.nextSibling==null) {
 		if (fc.nodeValue!=vchildren[0]) {
diff --git a/test/browser/render.js b/test/browser/render.js
@@ -406,7 +406,7 @@ describe('render()', () => {
 		expect(scratch.innerHTML, 're-set').to.equal('<div>'+html+'</div>');
 	});
 
-	it( 'should apply proper mutation for VNodes with dangerouslySetInnerHTML attr', () => {
+	it('should apply proper mutation for VNodes with dangerouslySetInnerHTML attr', () => {
 		class Thing extends Component {
 			constructor(props, context) {
 				super(props, context);
@@ -496,6 +496,20 @@ describe('render()', () => {
 		expect(scratch.firstChild.lastChild).to.equal(a);
 	});
 
+	it('should not merge attributes with node created by the DOM', () => {
+		const html = (htmlString) => {
+			const div = document.createElement('div');
+			div.innerHTML = htmlString;
+			return div.firstChild;
+		};
+
+		const DOMElement = html`<div><a foo="bar"></a></div>`;
+		const preactElement = <div><a></a></div>;
+
+		render(preactElement, scratch, DOMElement);
+		expect(scratch).to.have.property('innerHTML', '<div><a></a></div>');
+	});
+
 	it('should skip non-preact elements', () => {
 		class Foo extends Component {
 			render() {
