Skip to content

[Float] stylesheet hoisting #24886

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
wants to merge 7 commits into from
Closed

[Float] stylesheet hoisting #24886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
75686aa
[Fizz/Float] Float for stylesheet resources
gnoff Jun 10, 2022
2a6a8f8
Implement FloatResources in react-dom
gnoff Jul 13, 2022
533aba8
share resources with other roots using the same resourceContainer
gnoff Jul 20, 2022
a7b939d
implement proper keying for stylesheet resources
gnoff Jul 20, 2022
f5953d4
opt-out of resource semantics when using data attributes
gnoff Jul 21, 2022
cad5c22
leave found resources in place
gnoff Jul 21, 2022
b633ab0
Support validation for props on duplicate resource and on client reso…
gnoff Jul 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/react-art/src/ReactARTHostConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
export * from 'react-reconciler/src/ReactFiberHostConfigWithNoScopes';
export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
export * from 'react-reconciler/src/ReactFiberHostConfigWithNoResources';

export function appendInitialChild(parentInstance, child) {
if (typeof child === 'string') {
Expand Down
1 change: 1 addition & 0 deletions packages/react-dom/src/__tests__/ReactDOMComponent-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,6 +487,7 @@ describe('ReactDOMComponent', () => {
expect(node.hasAttribute('src')).toBe(false);
});

// @gate !enableFloat
it('should not add an empty href attribute', () => {
const container = document.createElement('div');
expect(() => ReactDOM.render(<link href="" />, container)).toErrorDev(
Expand Down
69 changes: 69 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,30 @@ describe('ReactDOMFizzServer', () => {
}
}

async function actIntoEmptyDocument(callback) {
await callback();
// Await one turn around the event loop.
// This assumes that we'll flush everything we have so far.
await new Promise(resolve => {
setImmediate(resolve);
});
if (hasErrored) {
throw fatalError;
}
// JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
// We also want to execute any scripts that are embedded.
// We assume that we have now received a proper fragment of HTML.
const bufferedContent = buffer;
// Test Environment
const jsdom = new JSDOM(bufferedContent, {
runScripts: 'dangerously',
});
window = jsdom.window;
document = jsdom.window.document;
container = document;
buffer = '';
}

function getVisibleChildren(element) {
const children = [];
let node = element.firstChild;
Expand Down Expand Up @@ -301,6 +325,7 @@ describe('ReactDOMFizzServer', () => {
);
pipe(writable);
});

expect(getVisibleChildren(container)).toEqual(
<div>
<div>Loading...</div>
Expand Down Expand Up @@ -3202,6 +3227,50 @@ describe('ReactDOMFizzServer', () => {
);
});

it('converts stylesheet links into preinit-as-style resources', async () => {
function App() {
return (
<>
<link rel="stylesheet" href="foo" />
<html data-foo="foo">
<head data-bar="bar">
<title>a title</title>
</head>
<body>a body</body>
</html>
</>
);
}

const chunks = [];
function listener(chunk) {
chunks.push(chunk);
}

await actIntoEmptyDocument(async () => {
const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
writable.on('data', listener);
pipe(writable);
});
writable.removeListener('data', listener);

expect(
chunks[0].startsWith(
'<!DOCTYPE html><html data-foo="foo"><head data-bar="bar">',
),
).toBe(true);

expect(getVisibleChildren(container)).toEqual(
<html data-foo="foo">
<head data-bar="bar">
<link rel="stylesheet" href="foo" />
<title>a title</title>
</head>
<body>a body</body>
</html>,
);
});

describe('error escaping', () => {
it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
window.__outlet = {};
Expand Down
Loading