Skip to content

Commit

Permalink
Ignore Suspense with undefined fallback [fix]
Browse files Browse the repository at this point in the history
  • Loading branch information
@overlookmotel
overlookmotel committed Feb 17, 2019
1 parent 7ec6279 commit fc25f79
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 27 deletions.
14 changes: 9 additions & 5 deletions lib/renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ const {renderToNodeStream} = require('react-dom/server'),
const {TYPE_SUSPENSE, TYPE_PROMISE, TYPE_TEXT, NO_SSR} = require('./constants'),
treeToHtml = require('./treeToHtml'),
walkTree = require('./walkTree'),
{isPromise, isReactElement, isReactClassComponent, isSuspenseType, last} = require('./utils');
{
isPromise, isReactElement, isRenderableElement, isReactClassComponent, isSuspenseType, last
} = require('./utils');

// Capture ReactDOMServerRenderer class from React
const ReactDOMServerRenderer = renderToNodeStream('').partialRenderer.constructor;
Expand Down Expand Up @@ -291,10 +293,12 @@ class PartialRenderer extends ReactDOMServerRenderer {

handleSuspense(element) {
// Add boundary node to tree and step into it
// NB If fallback is undefined, it's not treated as a suspense boundary
const frame = last(this.stack);

const node = this.createChild(TYPE_SUSPENSE, frame);
node.fallback = element.props.fallback;
const {fallback} = element.props;
const node = this.createChild(fallback === undefined ? null : TYPE_SUSPENSE, frame);
node.fallback = fallback;

this.node = node;
this.nonDomFrames++;
Expand Down Expand Up @@ -451,7 +455,7 @@ class PartialRenderer extends ReactDOMServerRenderer {

// Restore stack and render fallback.
// NB Render cycle already in progress, so no need to call `.read()` again.
if (fallback != null) this.restoreStack(stackState, fallback);
if (isRenderableElement(fallback)) this.restoreStack(stackState, fallback);
return;
}

Expand All @@ -466,7 +470,7 @@ class PartialRenderer extends ReactDOMServerRenderer {
}

// Add fallback to stack ready to render
if (fallback != null) boundaryFrame.children.push(fallback);
if (isRenderableElement(fallback)) boundaryFrame.children.push(fallback);
}

createChild(type, frame) {
Expand Down
5 changes: 5 additions & 0 deletions lib/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ module.exports = {
isObject,
isPromise,
isReactElement,
isRenderableElement,
isSuspenseType,
isReactClassComponent,
last
Expand All @@ -33,6 +34,10 @@ function isReactElement(e) {
return isObject(e) && e.$$typeof === REACT_ELEMENT_TYPE;
}

function isRenderableElement(e) {
return e !== null && e !== false && e !== '';
}

function isSuspenseType(type) {
return type === REACT_SUSPENSE_TYPE;
}
Expand Down
44 changes: 22 additions & 22 deletions test/fallbackSpacing.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,22 +371,22 @@ describe('suspense fallback spaces correctly', () => {
});
});

describe('with empty fallback', () => {
describe('with null fallback', () => {
describe('only', () => {
itRendersWithSyncCompare('and nothing before lazy', async ({render, Fallback}) => {
const e = <Fallback><Lazy/></Fallback>;
const e = <Fallback fallback={null}><Lazy/></Fallback>;
const h = await render(e);
expect(h).toBe('');
});

itRendersWithSyncCompare('and string before lazy', async ({render, Fallback}) => {
const e = <Fallback>Before Lazy<Lazy/></Fallback>;
const e = <Fallback fallback={null}>Before Lazy<Lazy/></Fallback>;
const h = await render(e);
expect(h).toBe('');
});

itRendersWithSyncCompare('and div before lazy', async ({render, Fallback}) => {
const e = <Fallback><div>Before Lazy</div><Lazy/></Fallback>;
const e = <Fallback fallback={null}><div>Before Lazy</div><Lazy/></Fallback>;
const h = await render(e);
expect(h).toBe('');
});
Expand All @@ -398,7 +398,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
Before
<Fallback><Lazy/></Fallback>
<Fallback fallback={null}><Lazy/></Fallback>
</div>
);
const h = await render(e);
Expand All @@ -409,7 +409,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
Before
<Fallback>Before Lazy<Lazy/></Fallback>
<Fallback fallback={null}>Before Lazy<Lazy/></Fallback>
</div>
);
const h = await render(e);
Expand All @@ -420,7 +420,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
Before
<Fallback><div>Before Lazy</div><Lazy/></Fallback>
<Fallback fallback={null}><div>Before Lazy</div><Lazy/></Fallback>
</div>
);
const h = await render(e);
Expand All @@ -432,7 +432,7 @@ describe('suspense fallback spaces correctly', () => {
itRendersWithSyncCompare('and nothing before lazy', async ({render, Fallback, openTag}) => {
const e = (
<div>
<Fallback><Lazy/></Fallback>
<Fallback fallback={null}><Lazy/></Fallback>
After
</div>
);
Expand All @@ -443,7 +443,7 @@ describe('suspense fallback spaces correctly', () => {
itRendersWithSyncCompare('and string before lazy', async ({render, Fallback, openTag}) => {
const e = (
<div>
<Fallback>Before Lazy<Lazy/></Fallback>
<Fallback fallback={null}>Before Lazy<Lazy/></Fallback>
After
</div>
);
Expand All @@ -454,7 +454,7 @@ describe('suspense fallback spaces correctly', () => {
itRendersWithSyncCompare('and div before lazy', async ({render, Fallback, openTag}) => {
const e = (
<div>
<Fallback><div>Before Lazy</div><Lazy/></Fallback>
<Fallback fallback={null}><div>Before Lazy</div><Lazy/></Fallback>
After
</div>
);
Expand All @@ -468,7 +468,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
Before
<Fallback><Lazy/></Fallback>
<Fallback fallback={null}><Lazy/></Fallback>
After
</div>
);
Expand All @@ -483,7 +483,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
Before
<Fallback>Before Lazy<Lazy/></Fallback>
<Fallback fallback={null}>Before Lazy<Lazy/></Fallback>
After
</div>
);
Expand All @@ -498,7 +498,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
Before
<Fallback><div>Before Lazy</div><Lazy/></Fallback>
<Fallback fallback={null}><div>Before Lazy</div><Lazy/></Fallback>
After
</div>
);
Expand All @@ -517,7 +517,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
<div>Before</div>
<Fallback><Lazy/></Fallback>
<Fallback fallback={null}><Lazy/></Fallback>
</div>
);
const h = await render(e);
Expand All @@ -528,7 +528,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
<div>Before</div>
<Fallback>Before Lazy<Lazy/></Fallback>
<Fallback fallback={null}>Before Lazy<Lazy/></Fallback>
</div>
);
const h = await render(e);
Expand All @@ -539,7 +539,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
<div>Before</div>
<Fallback><div>Before Lazy</div><Lazy/></Fallback>
<Fallback fallback={null}><div>Before Lazy</div><Lazy/></Fallback>
</div>
);
const h = await render(e);
Expand All @@ -551,7 +551,7 @@ describe('suspense fallback spaces correctly', () => {
itRendersWithSyncCompare('and nothing before lazy', async ({render, Fallback, openTag}) => {
const e = (
<div>
<Fallback><Lazy/></Fallback>
<Fallback fallback={null}><Lazy/></Fallback>
<div>After</div>
</div>
);
Expand All @@ -562,7 +562,7 @@ describe('suspense fallback spaces correctly', () => {
itRendersWithSyncCompare('and string before lazy', async ({render, Fallback, openTag}) => {
const e = (
<div>
<Fallback>Before Lazy<Lazy/></Fallback>
<Fallback fallback={null}>Before Lazy<Lazy/></Fallback>
<div>After</div>
</div>
);
Expand All @@ -573,7 +573,7 @@ describe('suspense fallback spaces correctly', () => {
itRendersWithSyncCompare('and div before lazy', async ({render, Fallback, openTag}) => {
const e = (
<div>
<Fallback><div>Before Lazy</div><Lazy/></Fallback>
<Fallback fallback={null}><div>Before Lazy</div><Lazy/></Fallback>
<div>After</div>
</div>
);
Expand All @@ -587,7 +587,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
<div>Before</div>
<Fallback><Lazy/></Fallback>
<Fallback fallback={null}><Lazy/></Fallback>
<div>After</div>
</div>
);
Expand All @@ -599,7 +599,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
<div>Before</div>
<Fallback>Before Lazy<Lazy/></Fallback>
<Fallback fallback={null}>Before Lazy<Lazy/></Fallback>
<div>After</div>
</div>
);
Expand All @@ -611,7 +611,7 @@ describe('suspense fallback spaces correctly', () => {
const e = (
<div>
<div>Before</div>
<Fallback><div>Before Lazy</div><Lazy/></Fallback>
<Fallback fallback={null}><div>Before Lazy</div><Lazy/></Fallback>
<div>After</div>
</div>
);
Expand Down

0 comments on commit fc25f79

Please sign in to comment.