Add support for null fallbacks in Suspense (+3 B) #2030

Merge pull request #2030 from preactjs/fix/suspense-null-fallback

compat/src/suspense.js

@@ -65,7 +65,11 @@ Suspense.prototype._childDidSuspend = function(promise) {
 		c._suspensions.pop();
 
 		if (c._suspensions.length == 0) {
-			unmount(c.props.fallback);
+			// If fallback is null, don't try to unmount it
+			// `unmount` expects a real VNode, not null values
+			if (c.props.fallback) {
+				unmount(c.props.fallback);
+			}
 			c._vnode._dom = null;
 
 			c._vnode._children = c.state._parkedChildren;

compat/test/browser/suspense.test.js

@@ -76,15 +76,32 @@ class Catcher extends Component {
 }
 
 describe('suspense', () => {
-	let scratch, rerender;
+	let scratch, rerender, unhandledEvents = [];
+
+	function onUnhandledRejection(event) {
+		unhandledEvents.push(event);
+	}
 
 	beforeEach(() => {
 		scratch = setupScratch();
 		rerender = setupRerender();
+
+		unhandledEvents = [];
+		if ('onunhandledrejection' in window) {
+			window.addEventListener('unhandledrejection', onUnhandledRejection);
+		}
 	});
 
 	afterEach(() => {
 		teardown(scratch);
+
+		if ('onunhandledrejection' in window) {
+			window.removeEventListener('unhandledrejection', onUnhandledRejection);
+
+			if (unhandledEvents.length) {
+				throw unhandledEvents[0].reason;
+			}
+		}
 	});
 
 	it('should support lazy', () => {
@@ -779,4 +796,32 @@ describe('suspense', () => {
 				);
 			});
 	});
+
+	it('should support null fallback', () => {
+		const [Suspender, suspend] = createSuspender(() => <div>Hello</div>);
+
+		render(
+			<div id="wrapper">
+				<Suspense fallback={null}>
+					<div id="inner">
+						<Suspender />
+					</div>
+				</Suspense>
+			</div>,
+			scratch
+		);
+		expect(scratch.innerHTML).to.equal(
+			`<div id="wrapper"><div id="inner"><div>Hello</div></div></div>`
+		);
+
+		const [resolve] = suspend();
+		rerender();
+		expect(scratch.innerHTML).to.equal(`<div id="wrapper"></div>`);
+
+		return resolve(() => <div>Hello2</div>).then(() => {
+			rerender();
+			expect(scratch.innerHTML).to.equal(`<div id="wrapper"><div id="inner"><div>Hello2</div></div></div>`);
+		});
+	});
+
 });

mangle.json

@@ -45,4 +45,4 @@
       "$_unmount": "_e"
     }
   }
-}
+}