Merge branch 'master' into redo-hooks

compat/src/render.js

@@ -10,7 +10,7 @@ export const REACT_ELEMENT_TYPE =
 	(typeof Symbol != 'undefined' && Symbol.for && Symbol.for('react.element')) ||
 	0xeac7;
 
-const CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;
+const CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|shape|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;
 
 const IS_DOM = typeof document !== 'undefined';
 

compat/test/browser/svg.test.js

@@ -74,6 +74,7 @@ describe('svg', () => {
 				clipRule="value"
 				clipPathUnits="value"
 				glyphOrientationHorizontal="value"
+				shapeRendering="crispEdges"
 				glyphRef="value"
 				markerStart="value"
 				markerHeight="value"
@@ -87,7 +88,7 @@ describe('svg', () => {
 
 		expect(serializeHtml(scratch)).to.eql(
 			sortAttributes(
-				'<svg clip-path="value" clip-rule="value" clipPathUnits="value" glyph-orientationhorizontal="value" glyphRef="value" marker-start="value" markerHeight="value" markerUnits="value" markerWidth="value" x1="value" xChannelSelector="value"></svg>'
+				'<svg clip-path="value" clip-rule="value" clipPathUnits="value" glyph-orientationhorizontal="value" shape-rendering="crispEdges" glyphRef="value" marker-start="value" markerHeight="value" markerUnits="value" markerWidth="value" x1="value" xChannelSelector="value"></svg>'
 			)
 		);
 	});

debug/src/debug.js

@@ -377,13 +377,6 @@ Component.prototype.setState = function(update, callback) {
 					`"this.state = {}" directly.\n\n${getOwnerStack(getCurrentVNode())}`
 			);
 		}
-	} else if (this._parentDom == null) {
-		console.warn(
-			`Can't call "this.setState" on an unmounted component. This is a no-op, ` +
-				`but it indicates a memory leak in your application. To fix, cancel all ` +
-				`subscriptions and asynchronous tasks in the componentWillUnmount method.` +
-				`\n\n${getOwnerStack(this._vnode)}`
-		);
 	}
 
 	return setState.call(this, update, callback);

debug/test/browser/debug.test.js

@@ -190,29 +190,6 @@ describe('debug', () => {
 		expect(console.warn).to.not.be.called;
 	});
 
-	it('should warn when calling setState on an unmounted Component', () => {
-		let setState;
-
-		class Foo extends Component {
-			constructor(props) {
-				super(props);
-				setState = () => this.setState({ foo: true });
-			}
-			render() {
-				return <div>foo</div>;
-			}
-		}
-
-		render(<Foo />, scratch);
-		expect(console.warn).to.not.be.called;
-
-		render(null, scratch);
-
-		setState();
-		expect(console.warn).to.be.calledOnce;
-		expect(console.warn.args[0]).to.match(/no-op/);
-	});
-
 	it('should warn when calling forceUpdate inside the constructor', () => {
 		class Foo extends Component {
 			constructor(props) {

devtools/src/devtools.js

@@ -2,7 +2,7 @@ import { options, Fragment, Component } from 'preact';
 
 export function initDevTools() {
 	if (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {
-		window.__PREACT_DEVTOOLS__.attachPreact('10.8.1', options, {
+		window.__PREACT_DEVTOOLS__.attachPreact('10.8.2', options, {
 			Fragment,
 			Component
 		});

hooks/src/index.js

@@ -15,6 +15,8 @@ let currentHook = 0;
 /** @type {Array<import('./internal').Component>} */
 let afterPaintEffects = [];
 
+let EMPTY = [];
+
 let oldBeforeDiff = options._diff;
 let oldBeforeRender = options._render;
 let oldAfterDiff = options.diffed;
@@ -41,18 +43,10 @@ options._render = vnode => {
 			hooks._pendingEffects = [];
 			currentComponent._renderCallbacks = [];
 			hooks._list.forEach(hookItem => {
-				hookItem._pendingValue = hookItem._pendingArgs = undefined;
+				hookItem._pendingValue = EMPTY;
+				hookItem._pendingArgs = undefined;
 			});
 		} else {
-			hooks._list.forEach(hookItem => {
-				if (hookItem._pendingArgs) {
-					hookItem._args = hookItem._pendingArgs;
-				}
-				if (hookItem._pendingValue) {
-					hookItem._value = hookItem._pendingValue;
-				}
-				hookItem._pendingValue = hookItem._pendingArgs = undefined;
-			});
 			hooks._pendingEffects.forEach(invokeCleanup);
 			hooks._pendingEffects.forEach(invokeEffect);
 			hooks._pendingEffects = [];
@@ -65,28 +59,25 @@ options.diffed = vnode => {
 	if (oldAfterDiff) oldAfterDiff(vnode);
 
 	const c = vnode._component;
-	if (c && c.__hooks && c.__hooks._pendingEffects.length) {
-		afterPaint(afterPaintEffects.push(c));
+	if (c && c.__hooks) {
+		if (c.__hooks._pendingEffects.length) afterPaint(afterPaintEffects.push(c));
+		c.__hooks._list.forEach(hookItem => {
+			if (hookItem._pendingArgs) {
+				hookItem._args = hookItem._pendingArgs;
+			}
+			if (hookItem._pendingValue !== EMPTY) {
+				hookItem._value = hookItem._pendingValue;
+			}
+			hookItem._pendingArgs = undefined;
+			hookItem._pendingValue = EMPTY;
+		});
 	}
-	currentComponent = null;
-	previousComponent = null;
+	previousComponent = currentComponent = null;
 };
 
 options._commit = (vnode, commitQueue) => {
 	commitQueue.some(component => {
 		try {
-			if (component.__hooks) {
-				component.__hooks._list.forEach(hookItem => {
-					if (hookItem._pendingArgs) {
-						hookItem._args = hookItem._pendingArgs;
-					}
-					if (hookItem._pendingValue) {
-						hookItem._value = hookItem._pendingValue;
-					}
-					hookItem._pendingValue = hookItem._pendingArgs = undefined;
-				});
-			}
-
 			component._renderCallbacks.forEach(invokeCleanup);
 			component._renderCallbacks = component._renderCallbacks.filter(cb =>
 				cb._value ? invokeEffect(cb) : true
@@ -145,7 +136,7 @@ function getHookState(index, type) {
 		});
 
 	if (index >= hooks._list.length) {
-		hooks._list.push({});
+		hooks._list.push({ _pendingValue: EMPTY });
 	}
 	return hooks._list[index];
 }

hooks/test/browser/useMemo.test.js

@@ -160,4 +160,45 @@ describe('useMemo', () => {
 			'render hi'
 		]);
 	});
+
+	it('should promote falsy value after a skipped render', () => {
+		let update;
+
+		function App() {
+			const [v, set] = useState(0);
+			update = set;
+			const res = useMemo(() => 0, [v > 1]);
+
+			if (v === 0) {
+				set(v + 1);
+			}
+			return <p>{res}</p>;
+		}
+
+		render(<App />, scratch);
+		expect(scratch.textContent).to.equal('0');
+
+		act(() => {
+			update(v => v + 1);
+		});
+		act(() => {
+			update(v => v + 1);
+		});
+
+		expect(scratch.textContent).to.equal('0');
+	});
+
+	it('should promote undefined value after a skipped render', () => {
+		let value;
+		function Comp({ all }) {
+			const result = (value = useMemo(() => (all ? 5 : undefined), [all]));
+			return result;
+		}
+		render(<Comp all />, scratch);
+		expect(value).to.equal(5);
+		render(<Comp all={false} />, scratch);
+		expect(value).to.equal(undefined);
+		render(<Comp all={false} />, scratch);
+		expect(value).to.equal(undefined);
+	});
 });

mangle.json

@@ -26,11 +26,11 @@
     "cname": 6,
     "props": {
       "$_cleanup": "__c",
-      "$_afterPaintQueued": "__a",
       "$__hooks": "__H",
       "$_list": "__",
       "$_pendingEffects": "__h",
       "$_value": "__",
+      "$_pendingValue": "__V",
       "$_original": "__v",
       "$_args": "__H",
       "$_factory": "__h",
@@ -46,7 +46,7 @@
       "$_pendingSuspensionCount": "__u",
       "$_childDidSuspend": "__c",
       "$_onResolve": "__R",
-      "$_suspended": "__e",
+      "$_suspended": "__a",
       "$_dom": "__e",
       "$_hydrating": "__h",
       "$_component": "__c",
@@ -77,4 +77,4 @@
       "$_isSuspended": "__i"
     }
   }
-}
+}

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "preact",
 	"amdName": "preact",
-	"version": "10.8.1",
+	"version": "10.8.2",
 	"private": false,
 	"description": "Fast 3kb React-compatible Virtual DOM library.",
 	"main": "dist/preact.js",