Skip to content

Commit

Permalink
gates and tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@gnoff
gnoff committed Sep 26, 2022
1 parent 9ab40d7 commit 94f4252
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 18 deletions.
99 changes: 99 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMFloat-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ describe('ReactDOMFloat', () => {
}

describe('ReactDOM.preload', () => {
// @gate enableFloat
it('inserts a preload resource into the stream when called during server rendering', async () => {
function Component() {
ReactDOM.preload('foo', {as: 'style'});
Expand All @@ -256,6 +257,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('inserts a preload resource into the document during render when called during client rendering', async () => {
function Component() {
ReactDOM.preload('foo', {as: 'style'});
Expand All @@ -276,6 +278,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('inserts a preload resource when called in a layout effect', async () => {
function App() {
React.useLayoutEffect(() => {
Expand All @@ -299,6 +302,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('inserts a preload resource when called in a passive effect', async () => {
function App() {
React.useEffect(() => {
Expand All @@ -322,6 +326,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('inserts a preload resource when called in module scope', async () => {
ReactDOM.preload('foo', {as: 'style'});
// We need to use global.document because preload falls back
Expand All @@ -340,6 +345,7 @@ describe('ReactDOMFloat', () => {
});

describe('ReactDOM.preinit as style', () => {
// @gate enableFloat
it('creates a style Resource when called during server rendering before first flush', async () => {
function Component() {
ReactDOM.preinit('foo', {as: 'style', precedence: 'foo'});
Expand All @@ -366,6 +372,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('creates a preload Resource when called during server rendering after first flush', async () => {
function BlockedOn({text, children}) {
readText(text);
Expand Down Expand Up @@ -404,6 +411,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('inserts a style Resource into the document during render when called during client rendering', async () => {
function Component() {
ReactDOM.preinit('foo', {as: 'style', precedence: 'foo'});
Expand All @@ -424,6 +432,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('inserts a style Resource into the document during render when called during layout effect', async () => {
function App() {
React.useLayoutEffect(() => {
Expand All @@ -447,6 +456,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('inserts a preload resource into the document when called in a passive effect', async () => {
function App() {
React.useEffect(() => {
Expand All @@ -470,6 +480,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('inserts a preload resource when called in module scope', async () => {
ReactDOM.preinit('foo', {as: 'style'});
// We need to use global.document because preload falls back
Expand Down Expand Up @@ -1531,6 +1542,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('inserts preloads in render phase eagerly', async () => {
function Throw() {
throw new Error('Uh oh!');
Expand Down Expand Up @@ -2858,6 +2870,7 @@ describe('ReactDOMFloat', () => {
});

describe('prop validation', () => {
// @gate enableFloat
it('warns when you change props on a resource unless you also change the href', async () => {
const root = ReactDOMClient.createRoot(container);
root.render(
Expand Down Expand Up @@ -2943,6 +2956,7 @@ describe('ReactDOMFloat', () => {
);
});

// @gate enableFloat
it('warns when style Resource have different values for media for the same href', async () => {
const originalConsoleError = console.error;
const mockError = jest.fn();
Expand Down Expand Up @@ -2987,6 +3001,17 @@ describe('ReactDOMFloat', () => {
);
pipe(writable);
});
expect(getVisibleChildren(document)).toEqual(
<html>
<head>
<link rel="stylesheet" href="foo" data-rprec="foo" media="all" />
<link rel="stylesheet" href="bar" data-rprec="bar" />

<link rel="stylesheet" href="baz" data-rprec="baz" media="some" />
</head>
<body />
</html>,
);

if (__DEV__) {
expect(mockError).toHaveBeenCalledTimes(3);
Expand Down Expand Up @@ -3028,6 +3053,7 @@ describe('ReactDOMFloat', () => {
}
});

// @gate enableFloat
it('warns when style Resource props differ or are added for the same href', async () => {
const originalConsoleError = console.error;
const mockError = jest.fn();
Expand Down Expand Up @@ -3073,6 +3099,26 @@ describe('ReactDOMFloat', () => {
);
pipe(writable);
});
expect(getVisibleChildren(document)).toEqual(
<html>
<head>
<link
rel="stylesheet"
href="foo"
data-rprec="foo"
data-foo="an original value"
/>
<link rel="stylesheet" href="bar" data-rprec="bar" />
<link
rel="stylesheet"
href="baz"
data-rprec="baz"
data-foo="an original value"
/>
</head>
<body />
</html>,
);

if (__DEV__) {
expect(mockError).toHaveBeenCalledTimes(3);
Expand Down Expand Up @@ -3114,6 +3160,7 @@ describe('ReactDOMFloat', () => {
}
});

// @gate enableFloat
it('warns when style Resource includes any combination of onLoad, onError, or disabled props', async () => {
const originalConsoleError = console.error;
const mockError = jest.fn();
Expand Down Expand Up @@ -3151,10 +3198,28 @@ describe('ReactDOMFloat', () => {
disabled={true}
/>
</head>
<body />
</html>,
);
pipe(writable);
});
// precedence is removed from the stylesheets because it is considered a reserved prop for
// stylesheets to opt into resource semantics.
expect(getVisibleChildren(document)).toEqual(
<html>
<head>
<link rel="preload" as="style" href="foo" />
<link rel="preload" as="style" href="bar" />
<link rel="preload" as="style" href="baz" />
<link rel="preload" as="style" href="qux" />
<link rel="stylesheet" href="foo" />
<link rel="stylesheet" href="bar" />
<link rel="stylesheet" href="baz" />
<link rel="stylesheet" href="qux" disabled="" />
</head>
<body />
</html>,
);

if (__DEV__) {
expect(mockError).toHaveBeenCalledTimes(4);
Expand Down Expand Up @@ -3206,6 +3271,7 @@ describe('ReactDOMFloat', () => {
}
});

// @gate enableFloat
it('warns when preload Resources have new or different values for props', async () => {
const originalConsoleError = console.error;
const mockError = jest.fn();
Expand Down Expand Up @@ -3248,6 +3314,25 @@ describe('ReactDOMFloat', () => {
);
pipe(writable);
});
expect(getVisibleChildren(document)).toEqual(
<html>
<head>
<link
rel="preload"
as="style"
href="foo"
data-foo="a current value"
/>
<link
rel="preload"
as="style"
href="bar"
data-bar="a current value"
/>
</head>
<body />
</html>,
);

if (__DEV__) {
expect(mockError).toHaveBeenCalledTimes(2);
Expand Down Expand Up @@ -3279,6 +3364,7 @@ describe('ReactDOMFloat', () => {
}
});

// @gate enableFloat
it('warns when an existing preload Resource has certain specific different props from a style Resource of the same href', async () => {
const originalConsoleError = console.error;
const mockError = jest.fn();
Expand Down Expand Up @@ -3307,6 +3393,19 @@ describe('ReactDOMFloat', () => {
);
pipe(writable);
});
expect(getVisibleChildren(document)).toEqual(
<html>
<head>
<link
rel="stylesheet"
href="foo"
data-rprec="foo"
crossorigin="style value"
/>
</head>
<body />
</html>,
);

if (__DEV__) {
expect(mockError).toHaveBeenCalledTimes(1);
Expand Down
10 changes: 2 additions & 8 deletions packages/react-dom/src/server/ReactDOMFloatServer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,12 +225,7 @@ function preinit(href: string, options: PreinitOptions) {
}

// Do not associate preinit style resources with any specific boundary regardless of where it is called
captureStyleResourceDependency(
currentResources,
null,
precedence,
resource,
);
captureStyleResourceDependency(currentResources, null, resource);

return;
}
Expand Down Expand Up @@ -404,10 +399,10 @@ function createStyleResource(
function captureStyleResourceDependency(
resources: Resources,
boundaryResources: ?BoundaryResources,
precedence: string,
styleResource: StyleResource,
): void {
const {precedences} = resources;
const {precedence} = styleResource;

if (boundaryResources) {
boundaryResources.add(styleResource);
Expand Down Expand Up @@ -507,7 +502,6 @@ export function resourcesFromLink(props: Props): boolean {
captureStyleResourceDependency(
currentResources,
currentResources.boundaryResources,
precedence,
resource,
);
return true;
Expand Down
14 changes: 4 additions & 10 deletions packages/react-dom/src/server/ReactDOMServerFormatConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1128,7 +1128,7 @@ function pushLink(
responseState: ResponseState,
textEmbedded: boolean,
): ReactNodeList {
if (resourcesFromLink(props)) {
if (enableFloat && resourcesFromLink(props)) {
if (textEmbedded) {
// This link follows text but we aren't writing a tag. while not as efficient as possible we need
// to be safe and assume text will follow by inserting a textSeparator
Expand Down Expand Up @@ -1164,15 +1164,9 @@ function pushLinkImpl(
'use `dangerouslySetInnerHTML`.',
);
case 'precedence': {
if (isStylesheet) {
if (propValue === true || typeof propValue === 'string') {
pushAttribute(target, responseState, 'data-rprec', propValue);
} else if (__DEV__) {
throw new Error(
`the "precedence" prop for links to stylesheets expects to receive a string but received something of type "${typeof propValue}" instead.`,
);
}
break;
if (enableFloat && isStylesheet) {
// precedence is a reversed property for stylesheets to opt-into resource semantcs
continue;
}
// intentionally fall through
}
Expand Down

0 comments on commit 94f4252

Please sign in to comment.