-
Notifications
You must be signed in to change notification settings - Fork 47.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Fizz][Float] Refactor Resources (#27400)
Refactors Resources to have a more compact and memory efficient struture. Resources generally are just an Array of chunks. A resource is flushed when it's chunks is length zero. A resource does not have any other state. Stylesheets and Style tags are different and have been modeled as a unit as a StyleQueue. This object stores the style rules to flush as part of style tags using precedence as well as all the stylesheets associated with the precedence. Stylesheets still need to track state because it affects how we issue boundary completion instructions. Additionally stylesheets encode chunks lazily because we may never write them as html if they are discovered late. The preload props transfer is now maximally compact (only stores the props we would ever actually adopt) and only stores props for stylesheets and scripts because other preloads have no resource counterpart to adopt props into. The ResumableState maps that track which keys have been observed are being overloaded. Previously if a key was found it meant that a resource already exists (either in this render or in a prior prerender). Now we discriminate between null and object values. If map value is null we can assume the resource exists but if it is an object that represents a prior preload for that resource and the resource must still be constructed.
- Loading branch information
Showing
11 changed files
with
1,710 additions
and
689 deletions.
There are no files selected for viewing
1,489 changes: 823 additions & 666 deletions
1,489
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
275 changes: 275 additions & 0 deletions
275
packages/react-dom/src/__tests__/ReactDOMFizzStaticFloat-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,275 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @emails react-core | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| import { | ||
| getVisibleChildren, | ||
| insertNodesAndExecuteScripts, | ||
| } from '../test-utils/FizzTestUtils'; | ||
|
|
||
| // Polyfills for test environment | ||
| global.ReadableStream = | ||
| require('web-streams-polyfill/ponyfill/es6').ReadableStream; | ||
| global.TextEncoder = require('util').TextEncoder; | ||
|
|
||
| let React; | ||
| let ReactDOM; | ||
| let ReactDOMFizzServer; | ||
| let ReactDOMFizzStatic; | ||
| let Suspense; | ||
| let container; | ||
|
|
||
| describe('ReactDOMFizzStaticFloat', () => { | ||
| beforeEach(() => { | ||
| jest.resetModules(); | ||
| React = require('react'); | ||
| ReactDOM = require('react-dom'); | ||
| ReactDOMFizzServer = require('react-dom/server.browser'); | ||
| if (__EXPERIMENTAL__) { | ||
| ReactDOMFizzStatic = require('react-dom/static.browser'); | ||
| } | ||
| Suspense = React.Suspense; | ||
| container = document.createElement('div'); | ||
| document.body.appendChild(container); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| document.body.removeChild(container); | ||
| }); | ||
|
|
||
| async function readIntoContainer(stream) { | ||
| const reader = stream.getReader(); | ||
| let result = ''; | ||
| while (true) { | ||
| const {done, value} = await reader.read(); | ||
| if (done) { | ||
| break; | ||
| } | ||
| result += Buffer.from(value).toString('utf8'); | ||
| } | ||
| const temp = document.createElement('div'); | ||
| temp.innerHTML = result; | ||
| await insertNodesAndExecuteScripts(temp, container, null); | ||
| } | ||
|
|
||
| // @gate enablePostpone | ||
| it('should transfer connection credentials across prerender and resume for stylesheets, scripts, and moduleScripts', async () => { | ||
| let prerendering = true; | ||
| function Postpone() { | ||
| if (prerendering) { | ||
| React.unstable_postpone(); | ||
| } | ||
| return ( | ||
| <> | ||
| <link rel="stylesheet" href="style creds" precedence="default" /> | ||
| <script async={true} src="script creds" data-meaningful="" /> | ||
| <script | ||
| type="module" | ||
| async={true} | ||
| src="module creds" | ||
| data-meaningful="" | ||
| /> | ||
| <link rel="stylesheet" href="style anon" precedence="default" /> | ||
| <script async={true} src="script anon" data-meaningful="" /> | ||
| <script | ||
| type="module" | ||
| async={true} | ||
| src="module default" | ||
| data-meaningful="" | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function App() { | ||
| ReactDOM.preload('style creds', { | ||
| as: 'style', | ||
| crossOrigin: 'use-credentials', | ||
| }); | ||
| ReactDOM.preload('script creds', { | ||
| as: 'script', | ||
| crossOrigin: 'use-credentials', | ||
| integrity: 'script-hash', | ||
| }); | ||
| ReactDOM.preloadModule('module creds', { | ||
| crossOrigin: 'use-credentials', | ||
| integrity: 'module-hash', | ||
| }); | ||
| ReactDOM.preload('style anon', { | ||
| as: 'style', | ||
| crossOrigin: 'anonymous', | ||
| }); | ||
| ReactDOM.preload('script anon', { | ||
| as: 'script', | ||
| crossOrigin: 'foobar', | ||
| }); | ||
| ReactDOM.preloadModule('module default', { | ||
| integrity: 'module-hash', | ||
| }); | ||
| return ( | ||
| <div> | ||
| <Suspense fallback="Loading..."> | ||
| <Postpone /> | ||
| </Suspense> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| jest.mock('script creds', () => {}, { | ||
| virtual: true, | ||
| }); | ||
| jest.mock('module creds', () => {}, { | ||
| virtual: true, | ||
| }); | ||
| jest.mock('script anon', () => {}, { | ||
| virtual: true, | ||
| }); | ||
| jest.mock('module default', () => {}, { | ||
| virtual: true, | ||
| }); | ||
|
|
||
| const prerendered = await ReactDOMFizzStatic.prerender(<App />); | ||
| expect(prerendered.postponed).not.toBe(null); | ||
|
|
||
| await readIntoContainer(prerendered.prelude); | ||
|
|
||
| expect(getVisibleChildren(container)).toEqual([ | ||
| <link | ||
| rel="preload" | ||
| as="style" | ||
| href="style creds" | ||
| crossorigin="use-credentials" | ||
| />, | ||
| <link | ||
| rel="preload" | ||
| as="script" | ||
| href="script creds" | ||
| crossorigin="use-credentials" | ||
| integrity="script-hash" | ||
| />, | ||
| <link | ||
| rel="modulepreload" | ||
| href="module creds" | ||
| crossorigin="use-credentials" | ||
| integrity="module-hash" | ||
| />, | ||
| <link rel="preload" as="style" href="style anon" crossorigin="" />, | ||
| <link rel="preload" as="script" href="script anon" crossorigin="" />, | ||
| <link | ||
| rel="modulepreload" | ||
| href="module default" | ||
| integrity="module-hash" | ||
| />, | ||
| <div>Loading...</div>, | ||
| ]); | ||
|
|
||
| prerendering = false; | ||
| const content = await ReactDOMFizzServer.resume( | ||
| <App />, | ||
| JSON.parse(JSON.stringify(prerendered.postponed)), | ||
| ); | ||
|
|
||
| await readIntoContainer(content); | ||
|
|
||
| // Dispatch load event to injected stylesheet | ||
| const linkCreds = document.querySelector( | ||
| 'link[rel="stylesheet"][href="style creds"]', | ||
| ); | ||
| const linkAnon = document.querySelector( | ||
| 'link[rel="stylesheet"][href="style anon"]', | ||
| ); | ||
| const event = document.createEvent('Events'); | ||
| event.initEvent('load', true, true); | ||
| linkCreds.dispatchEvent(event); | ||
| linkAnon.dispatchEvent(event); | ||
|
|
||
| // Wait for the instruction microtasks to flush. | ||
| await 0; | ||
| await 0; | ||
|
|
||
| expect(getVisibleChildren(document)).toEqual( | ||
| <html> | ||
| <head> | ||
| <link | ||
| rel="stylesheet" | ||
| data-precedence="default" | ||
| href="style creds" | ||
| crossorigin="use-credentials" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| data-precedence="default" | ||
| href="style anon" | ||
| crossorigin="" | ||
| /> | ||
| </head> | ||
| <body> | ||
| <div> | ||
| <link | ||
| rel="preload" | ||
| as="style" | ||
| href="style creds" | ||
| crossorigin="use-credentials" | ||
| /> | ||
| <link | ||
| rel="preload" | ||
| as="script" | ||
| href="script creds" | ||
| crossorigin="use-credentials" | ||
| integrity="script-hash" | ||
| /> | ||
| <link | ||
| rel="modulepreload" | ||
| href="module creds" | ||
| crossorigin="use-credentials" | ||
| integrity="module-hash" | ||
| /> | ||
| <link rel="preload" as="style" href="style anon" crossorigin="" /> | ||
| <link rel="preload" as="script" href="script anon" crossorigin="" /> | ||
| <link | ||
| rel="modulepreload" | ||
| href="module default" | ||
| integrity="module-hash" | ||
| /> | ||
| <div /> | ||
| <script | ||
| async="" | ||
| src="script creds" | ||
| crossorigin="use-credentials" | ||
| integrity="script-hash" | ||
| data-meaningful="" | ||
| /> | ||
| <script | ||
| type="module" | ||
| async="" | ||
| src="module creds" | ||
| crossorigin="use-credentials" | ||
| integrity="module-hash" | ||
| data-meaningful="" | ||
| /> | ||
| <script | ||
| async="" | ||
| src="script anon" | ||
| crossorigin="" | ||
| data-meaningful="" | ||
| /> | ||
| <script | ||
| type="module" | ||
| async="" | ||
| src="module default" | ||
| integrity="module-hash" | ||
| data-meaningful="" | ||
| /> | ||
| </div> | ||
| </body> | ||
| </html>, | ||
| ); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.