Merge branch 'master' into anim_delay

compat/src/index.js

@@ -1,6 +1,7 @@
 import { render as preactRender, cloneElement as preactCloneElement, createRef, h, Component, options, toChildArray, createContext, Fragment } from 'preact';
 import * as hooks from 'preact/hooks';
 export * from 'preact/hooks';
+import { assign } from '../../src/util';
 
 const version = '16.8.0'; // trick libraries to think we are react
 
@@ -292,7 +293,7 @@ function memo(c, comparer) {
 
 	function Memoed(props) {
 		this.shouldComponentUpdate = shouldUpdate;
-		return h(c, { ...props });
+		return h(c, assign({}, props));
 	}
 	Memoed.displayName = 'Memo(' + (c.displayName || c.name) + ')';
 	Memoed._forwarded = true;
@@ -365,8 +366,7 @@ export {
 };
 
 // React copies the named exports to the default one.
-export default {
-	...hooks,
+export default assign({
 	version,
 	Children,
 	render,
@@ -385,4 +385,4 @@ export default {
 	PureComponent,
 	memo,
 	forwardRef
-};
+}, hooks);

src/diff/index.js

@@ -249,28 +249,32 @@ function diffElementNodes(dom, newVNode, oldVNode, context, isSvg, excessDomChil
 		}
 		if (newVNode!==oldVNode) {
 			let oldProps = oldVNode.props;
+			let newProps = newVNode.props;
+
 			// if we're hydrating, use the element's attributes as its current props:
 			if (oldProps==null) {
 				oldProps = {};
 				if (excessDomChildren!=null) {
+					let name;
 					for (let i=0; i<dom.attributes.length; i++) {
-						oldProps[dom.attributes[i].name] = dom.attributes[i].value;
+						name = dom.attributes[i].name;
+						oldProps[name=='class' && newProps.className ? 'className' : name] = dom.attributes[i].value;
 					}
 				}
 			}
 			let oldHtml = oldProps.dangerouslySetInnerHTML;
-			let newHtml = newVNode.props.dangerouslySetInnerHTML;
+			let newHtml = newProps.dangerouslySetInnerHTML;
 			if (newHtml || oldHtml) {
 				// Avoid re-applying the same '__html' if it did not changed between re-render
 				if (!newHtml || !oldHtml || newHtml.__html!=oldHtml.__html) {
 					dom.innerHTML = newHtml && newHtml.__html || '';
 				}
 			}
-			if (newVNode.props.multiple) {
-				dom.multiple = newVNode.props.multiple;
+			if (newProps.multiple) {
+				dom.multiple = newProps.multiple;
 			}
 			diffChildren(dom, newVNode, oldVNode, context, newVNode.type==='foreignObject' ? false : isSvg, excessDomChildren, mounts, ancestorComponent);
-			diffProps(dom, newVNode.props, oldProps, isSvg);
+			diffProps(dom, newProps, oldProps, isSvg);
 		}
 	}
 

src/diff/props.js

@@ -50,9 +50,11 @@ function setProperty(dom, name, value, oldValue, isSvg) {
 		}
 		else {
 			if (typeof oldValue==='string') s.cssText = '';
-			// remove values not in the new list
-			for (let i in oldValue) {
-				if (value==null || !(i in value)) s.setProperty(i.replace(CAMEL_REG, '-'), '');
+			else {
+				// remove values not in the new list
+				for (let i in oldValue) {
+					if (value==null || !(i in value)) s.setProperty(i.replace(CAMEL_REG, '-'), '');
+				}
 			}
 			for (let i in value) {
 				v = value[i];

test/browser/hydrate.test.js

@@ -146,6 +146,12 @@ describe('hydrate()', () => {
 		]);
 	});
 
+	it('should update class attribute via className prop', () => {
+		scratch.innerHTML = '<div class="foo">bar</div>';
+		hydrate(<div className="foo">bar</div>, scratch);
+		expect(scratch.innerHTML).to.equal('<div class="foo">bar</div>');
+	});
+
 	it('should correctly hydrate with Fragments', () => {
 		const html = ul([
 			li('1'),

test/browser/render.test.js

@@ -418,6 +418,14 @@ describe('render()', () => {
 			expect(style.zIndex.toString()).to.equal('');
 		});
 
+		it('should remove old styles', () => {
+			render(<div style="color: red;" />, scratch);
+			let s = scratch.firstChild.style;
+			sinon.spy(s, 'setProperty');
+			render(<div style={{ background: 'blue' }} />, scratch);
+			expect(s.setProperty).to.be.calledOnce;
+		});
+
 		// Skip test if the currently running browser doesn't support CSS Custom Properties
 		if (window.CSS && CSS.supports('color', 'var(--fake-var)')) {
 			it('should support css custom properties', () => {