diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js index b954f32ecd674..ef9864200588a 100644 --- a/packages/react-client/src/__tests__/ReactFlight-test.js +++ b/packages/react-client/src/__tests__/ReactFlight-test.js @@ -1957,8 +1957,8 @@ describe('ReactFlight', () => { }); expect(ReactNoop).toMatchRenderedOutput( <> -
-
+
+
, ); }); @@ -1981,8 +1981,8 @@ describe('ReactFlight', () => { }); expect(ReactNoop).toMatchRenderedOutput( <> -
-
+
+
, ); }); @@ -2021,8 +2021,8 @@ describe('ReactFlight', () => { assertLog(['ClientDoubler']); expect(ReactNoop).toMatchRenderedOutput( <> -
«S1»
-
«S1»
+
_S_1_
+
_S_1_
, ); }); diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js index efa59d8605ed2..2b93c8f06e2b2 100644 --- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js +++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js @@ -1553,7 +1553,7 @@ describe('ReactHooksInspectionIntegration', () => { expect(tree[0].id).toEqual(0); expect(tree[0].isStateEditable).toEqual(false); expect(tree[0].name).toEqual('Id'); - expect(String(tree[0].value).startsWith('\u00ABr')).toBe(true); + expect(String(tree[0].value).startsWith('_r_')).toBe(true); expect(normalizeSourceLoc(tree)[1]).toMatchInlineSnapshot(` { diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js index b4091511ee6b8..795a406690282 100644 --- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js +++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js @@ -1082,7 +1082,7 @@ export function makeId( ): string { const idPrefix = resumableState.idPrefix; - let id = '\u00AB' + idPrefix + 'R' + treeId; + let id = '_' + idPrefix + 'R_' + treeId; // Unless this is the first id at this level, append a number at the end // that represents the position of this useId hook among all the useId @@ -1091,7 +1091,7 @@ export function makeId( id += 'H' + localId.toString(32); } - return id + '\u00BB'; + return id + '_'; } function encodeHTMLTextNode(text: string): string { @@ -5415,7 +5415,7 @@ function writeBlockingRenderInstruction( ): void { if (enableFizzBlockingRender) { const idPrefix = resumableState.idPrefix; - const shellId = '\u00AB' + idPrefix + 'R\u00BB'; + const shellId = '_' + idPrefix + 'R_'; writeChunk(destination, blockingRenderChunkStart); writeChunk(destination, stringToChunk(escapeTextForBrowser(shellId))); writeChunk(destination, blockingRenderChunkEnd); @@ -5433,7 +5433,7 @@ function writeCompletedShellIdAttribute( } resumableState.instructions |= SentCompletedShellId; const idPrefix = resumableState.idPrefix; - const shellId = '\u00AB' + idPrefix + 'R\u00BB'; + const shellId = '_' + idPrefix + 'R_'; writeChunk(destination, completedShellIdAttributeStart); writeChunk(destination, stringToChunk(escapeTextForBrowser(shellId))); writeChunk(destination, attributeEnd); @@ -5448,7 +5448,7 @@ function pushCompletedShellIdAttribute( } resumableState.instructions |= SentCompletedShellId; const idPrefix = resumableState.idPrefix; - const shellId = '\u00AB' + idPrefix + 'R\u00BB'; + const shellId = '_' + idPrefix + 'R_'; target.push( completedShellIdAttributeStart, stringToChunk(escapeTextForBrowser(shellId)), diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js index e74e4bbe86b28..eacd86aa0687d 100644 --- a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js +++ b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js @@ -8,7 +8,7 @@ export const clientRenderBoundary = export const completeBoundary = '$RB=[];$RV=function(c){$RT=performance.now();for(var a=0;a { ? '' : '') + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : ''), ); }); @@ -4197,7 +4197,7 @@ describe('ReactDOMFizzServer', () => { renderOptions.unstable_externalRuntimeSrc, ).map(n => n.outerHTML), ).toEqual([ - '', + '', '', '', '', @@ -4284,7 +4284,7 @@ describe('ReactDOMFizzServer', () => { renderOptions.unstable_externalRuntimeSrc, ).map(n => n.outerHTML), ).toEqual([ - '', + '', '', '', '', @@ -4523,11 +4523,11 @@ describe('ReactDOMFizzServer', () => { expect(document.documentElement.innerHTML).toEqual( '' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '

hello world!

' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '', ); @@ -6519,11 +6519,11 @@ describe('ReactDOMFizzServer', () => { ? '' : '') + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '', ); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js index 1755544a5d35d..bc96750d46038 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js @@ -73,7 +73,7 @@ describe('ReactDOMFizzServerBrowser', () => { const result = await readResult(stream); if (gate(flags => flags.enableFizzBlockingRender)) { expect(result).toMatchInlineSnapshot( - `"hello world"`, + `"hello world"`, ); } else { expect(result).toMatchInlineSnapshot( @@ -92,7 +92,7 @@ describe('ReactDOMFizzServerBrowser', () => { ); const result = await readResult(stream); expect(result).toMatchInlineSnapshot( - `"
hello world
"`, + `"
hello world
"`, ); }); @@ -524,11 +524,11 @@ describe('ReactDOMFizzServerBrowser', () => { expect(result).toEqual( '' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + 'foobar' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '', ); @@ -548,7 +548,7 @@ describe('ReactDOMFizzServerBrowser', () => { expect(result).toMatchInlineSnapshot( // TODO: remove interpolation because it prevents snapshot updates. // eslint-disable-next-line jest/no-interpolation-in-snapshots - `"
hello world
"`, + `"
hello world
"`, ); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerEdge-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerEdge-test.js index 801baa9678af4..c5cbe8bb85dc2 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerEdge-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerEdge-test.js @@ -73,7 +73,7 @@ describe('ReactDOMFizzServerEdge', () => { if (gate(flags => flags.enableFizzBlockingRender)) { expect(result).toMatchInlineSnapshot( - `"
hello
"`, + `"
hello
"`, ); } else { expect(result).toMatchInlineSnapshot( diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js index 198ccb4f8f6a5..7db7a669c3efd 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js @@ -95,7 +95,7 @@ describe('ReactDOMFizzServerNode', () => { // with Float, we emit empty heads if they are elided when rendering if (gate(flags => flags.enableFizzBlockingRender)) { expect(output.result).toMatchInlineSnapshot( - `"hello world"`, + `"hello world"`, ); } else { expect(output.result).toMatchInlineSnapshot( @@ -118,7 +118,7 @@ describe('ReactDOMFizzServerNode', () => { pipe(writable); }); expect(output.result).toMatchInlineSnapshot( - `"
hello world
"`, + `"
hello world
"`, ); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js index fc01dcb156643..478bed90a3a0d 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js @@ -186,7 +186,7 @@ describe('ReactDOMFizzStaticBrowser', () => { const prelude = await readContent(result.prelude); if (gate(flags => flags.enableFizzBlockingRender)) { expect(prelude).toMatchInlineSnapshot( - `"hello world"`, + `"hello world"`, ); } else { expect(prelude).toMatchInlineSnapshot( @@ -205,7 +205,7 @@ describe('ReactDOMFizzStaticBrowser', () => { ); const prelude = await readContent(result.prelude); expect(prelude).toMatchInlineSnapshot( - `"
hello world
"`, + `"
hello world
"`, ); }); @@ -1434,12 +1434,12 @@ describe('ReactDOMFizzStaticBrowser', () => { '' + '' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '' + 'Hello' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '', ); @@ -1487,8 +1487,8 @@ describe('ReactDOMFizzStaticBrowser', () => { expect(await readContent(content)).toBe( '' + '' + - '' + - 'Hello', + '' + + 'Hello', ); }); @@ -1539,8 +1539,8 @@ describe('ReactDOMFizzStaticBrowser', () => { expect(await readContent(content)).toBe( '' + '' + - '' + - '
Hello
', + '' + + '
Hello
', ); }); @@ -1622,8 +1622,8 @@ describe('ReactDOMFizzStaticBrowser', () => { let result = decoder.decode(value, {stream: true}); expect(result).toBe( - '' + - 'hello', + '' + + 'hello', ); await 1; @@ -1647,8 +1647,8 @@ describe('ReactDOMFizzStaticBrowser', () => { const slice = result.slice(0, instructionIndex + '$RX'.length); expect(slice).toBe( - '' + - 'hello' + + '' + + 'hello' + '"`, + `"
hello world
"`, ); }); diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js index 3077fb5b3f82e..6ca7cfd4dc094 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js @@ -303,7 +303,7 @@ describe('ReactDOMFizzViewTransition', () => { expect(getVisibleChildren(container)).toEqual(
-
+
Loading
, @@ -321,7 +321,7 @@ describe('ReactDOMFizzViewTransition', () => { expect(getVisibleChildren(container)).toEqual(
-
+
Content
, diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index e3c3fb41284eb..6436f1898b798 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -707,12 +707,12 @@ describe('ReactDOMFloat', () => { ? '' : '') + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + 'foo' + 'bar' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : ''), '', ]); diff --git a/packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js index f6d868c84135a..2c4972245cd5b 100644 --- a/packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMLegacyFloat-test.js @@ -36,11 +36,11 @@ describe('ReactDOMFloat', () => { expect(result).toEqual( '' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + 'title' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '', ); diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js index 7738994fb1e1e..895c2f9b0dae7 100644 --- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js @@ -96,7 +96,7 @@ describe('useId', () => { } function normalizeTreeIdForTesting(id) { - const result = id.match(/\u00AB(R|r)([a-z0-9]*)(H([0-9]*))?\u00BB/); + const result = id.match(/_(R|r)_([a-z0-9]*)(H([0-9]*))?_/); if (result === undefined) { throw new Error('Invalid id format'); } @@ -285,7 +285,7 @@ describe('useId', () => { // 'R:' prefix, and the first character after that, which may not correspond // to a complete set of 5 bits. // - // Example: «Rclalalalalalalala...: + // Example: _Rclalalalalalalala...: // // We can use this pattern to test large ids that exceed the bitwise // safe range (32 bits). The algorithm should theoretically support ids @@ -320,8 +320,8 @@ describe('useId', () => { // Confirm that every id matches the expected pattern for (let i = 0; i < divs.length; i++) { - // Example: «Rclalalalalalalala...: - expect(divs[i].id).toMatch(/^\u00ABR.(((al)*a?)((la)*l?))*\u00BB$/); + // Example: _Rclalalalalalalala...: + expect(divs[i].id).toMatch(/^_R_.(((al)*a?)((la)*l?))*_$/); } }); @@ -345,7 +345,7 @@ describe('useId', () => {
- «R0», «R0H1», «R0H2» + _R_0_, _R_0H1_, _R_0H2_
`); }); @@ -370,7 +370,7 @@ describe('useId', () => {
- «R0» + _R_0_
`); }); @@ -608,10 +608,10 @@ describe('useId', () => { id="container" >
- «custom-prefix-R1» + _custom-prefix-R_1_
- «custom-prefix-R2» + _custom-prefix-R_2_
`); @@ -625,13 +625,13 @@ describe('useId', () => { id="container" >
- «custom-prefix-R1» + _custom-prefix-R_1_
- «custom-prefix-R2» + _custom-prefix-R_2_
- «custom-prefix-r0» + _custom-prefix-r_0_
`); @@ -672,11 +672,11 @@ describe('useId', () => { id="container" >
- «R0» + _R_0_
- «R7» + _R_7_
@@ -690,11 +690,11 @@ describe('useId', () => { id="container" >
- «R0» + _R_0_
- «R7» + _R_7_
diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js index 3501f1bd92af7..9a485f8ddd0f4 100644 --- a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js +++ b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js @@ -80,7 +80,7 @@ describe('rendering React components at document', () => { expect(testDocument.body.innerHTML).toBe( 'Hello world' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : ''), ); @@ -90,7 +90,7 @@ describe('rendering React components at document', () => { expect(testDocument.body.innerHTML).toBe( 'Hello moon' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : ''), ); @@ -120,7 +120,7 @@ describe('rendering React components at document', () => { expect(testDocument.body.innerHTML).toBe( 'Hello world' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : ''), ); @@ -135,12 +135,12 @@ describe('rendering React components at document', () => { expect(testDocument.body).toBe(originalBody); expect(originalBody.innerHTML).toBe( gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '', ); expect(originalHead.innerHTML).toBe( gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '', ); }); @@ -183,7 +183,7 @@ describe('rendering React components at document', () => { expect(testDocument.body.innerHTML).toBe( 'Hello world' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : ''), ); @@ -193,7 +193,7 @@ describe('rendering React components at document', () => { expect(testDocument.body.innerHTML).toBe( (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + 'Goodbye world', ); }); @@ -227,7 +227,7 @@ describe('rendering React components at document', () => { expect(testDocument.body.innerHTML).toBe( 'Hello world' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : ''), ); }); @@ -366,7 +366,7 @@ describe('rendering React components at document', () => { ? 'Hello world' : 'Goodbye world' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : ''), ); }); diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index fd3451f406d41..1740ee0a8600a 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -3446,7 +3446,7 @@ function mountId(): string { const treeId = getTreeId(); // Use a captial R prefix for server-generated ids. - id = '\u00AB' + identifierPrefix + 'R' + treeId; + id = '_' + identifierPrefix + 'R_' + treeId; // Unless this is the first id at this level, append a number at the end // that represents the position of this useId hook among all the useId @@ -3456,16 +3456,11 @@ function mountId(): string { id += 'H' + localId.toString(32); } - id += '\u00BB'; + id += '_'; } else { // Use a lowercase r prefix for client-generated ids. const globalClientId = globalClientIdCounter++; - id = - '\u00AB' + - identifierPrefix + - 'r' + - globalClientId.toString(32) + - '\u00BB'; + id = '_' + identifierPrefix + 'r_' + globalClientId.toString(32) + '_'; } hook.memoizedState = id; diff --git a/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js b/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js index cda13a174a3aa..37768bcccbd31 100644 --- a/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js +++ b/packages/react-reconciler/src/ReactFiberViewTransitionComponent.js @@ -41,7 +41,7 @@ export function getViewTransitionName( const identifierPrefix = root.identifierPrefix; const globalClientId = globalClientIdCounter++; const name = - '\u00AB' + identifierPrefix + 't' + globalClientId.toString(32) + '\u00BB'; + '_' + identifierPrefix + 't_' + globalClientId.toString(32) + '_'; instance.autoName = name; return name; } diff --git a/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js index 6d022ceb26c17..32284b0f68de6 100644 --- a/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js +++ b/packages/react-server-dom-fb/src/__tests__/ReactDOMServerFB-test.internal.js @@ -59,7 +59,7 @@ describe('ReactDOMServerFB', () => { }); const result = readResult(stream); expect(result).toMatchInlineSnapshot( - `"
hello world
"`, + `"
hello world
"`, ); }); diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js index 0b5f3b60164fc..442f0c5e08bab 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js @@ -1909,12 +1909,12 @@ describe('ReactFlightDOM', () => { '' + '' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '' + '

hello world

' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '', ); @@ -1922,12 +1922,12 @@ describe('ReactFlightDOM', () => { '' + '' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '' + '

hello world

' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '', ); diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js index 32ad8c7a5b21a..8670f606ba75a 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js @@ -1888,12 +1888,12 @@ describe('ReactFlightDOMBrowser', () => { expect(content).toEqual( '' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '' + '

hello world

' + (gate(flags => flags.enableFizzBlockingRender) - ? '' + ? '' : '') + '', ); diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js index 442f6207a9c2c..c5ffc5dd70342 100644 --- a/packages/react-server/src/ReactFlightHooks.js +++ b/packages/react-server/src/ReactFlightHooks.js @@ -120,13 +120,7 @@ function useId(): string { } const id = currentRequest.identifierCount++; // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client - return ( - '\u00AB' + - currentRequest.identifierPrefix + - 'S' + - id.toString(32) + - '\u00BB' - ); + return '_' + currentRequest.identifierPrefix + 'S_' + id.toString(32) + '_'; } function use(usable: Usable): T {