Skip to content

Commit bfdd7f0

Browse files
sebmarkbagesebmarkbage
committed
Use underscore instead of « » for useId algorithm
1 parent ee76351 commit bfdd7f0

21 files changed

+84
-95
lines changed

‎packages/react-client/src/__tests__/ReactFlight-test.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1957,8 +1957,8 @@ describe('ReactFlight', () => {
19571957
});
19581958
expect(ReactNoop).toMatchRenderedOutput(
19591959
<>
1960-
<div prop="«S1»" />
1961-
<div prop="«S2»" />
1960+
<div prop="_S_1_" />
1961+
<div prop="_S_2_" />
19621962
</>,
19631963
);
19641964
});
@@ -1981,8 +1981,8 @@ describe('ReactFlight', () => {
19811981
});
19821982
expect(ReactNoop).toMatchRenderedOutput(
19831983
<>
1984-
<div prop="«fooS1»" />
1985-
<div prop="«fooS2»" />
1984+
<div prop="_fooS_1_" />
1985+
<div prop="_fooS_2_" />
19861986
</>,
19871987
);
19881988
});
@@ -2021,8 +2021,8 @@ describe('ReactFlight', () => {
20212021
assertLog(['ClientDoubler']);
20222022
expect(ReactNoop).toMatchRenderedOutput(
20232023
<>
2024-
<div prop="«S1»">«S1»</div>
2025-
<div prop="«S1»">«S1»</div>
2024+
<div prop="_S_1_">_S_1_</div>
2025+
<div prop="_S_1_">_S_1_</div>
20262026
</>,
20272027
);
20282028
});

‎packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1553,7 +1553,7 @@ describe('ReactHooksInspectionIntegration', () => {
15531553
expect(tree[0].id).toEqual(0);
15541554
expect(tree[0].isStateEditable).toEqual(false);
15551555
expect(tree[0].name).toEqual('Id');
1556-
expect(String(tree[0].value).startsWith('\u00ABr')).toBe(true);
1556+
expect(String(tree[0].value).startsWith('_r_')).toBe(true);
15571557

15581558
expect(normalizeSourceLoc(tree)[1]).toMatchInlineSnapshot(`
15591559
{

‎packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1082,7 +1082,7 @@ export function makeId(
10821082
): string {
10831083
const idPrefix = resumableState.idPrefix;
10841084

1085-
let id = '\u00AB' + idPrefix + 'R' + treeId;
1085+
let id = '_' + idPrefix + 'R_' + treeId;
10861086

10871087
// Unless this is the first id at this level, append a number at the end
10881088
// that represents the position of this useId hook among all the useId
@@ -1091,7 +1091,7 @@ export function makeId(
10911091
id += 'H' + localId.toString(32);
10921092
}
10931093

1094-
return id + '\u00BB';
1094+
return id + '_';
10951095
}
10961096

10971097
function encodeHTMLTextNode(text: string): string {
@@ -5415,7 +5415,7 @@ function writeBlockingRenderInstruction(
54155415
): void {
54165416
if (enableFizzBlockingRender) {
54175417
const idPrefix = resumableState.idPrefix;
5418-
const shellId = '\u00AB' + idPrefix + 'R\u00BB';
5418+
const shellId = '_' + idPrefix + 'R_';
54195419
writeChunk(destination, blockingRenderChunkStart);
54205420
writeChunk(destination, stringToChunk(escapeTextForBrowser(shellId)));
54215421
writeChunk(destination, blockingRenderChunkEnd);
@@ -5433,7 +5433,7 @@ function writeCompletedShellIdAttribute(
54335433
}
54345434
resumableState.instructions |= SentCompletedShellId;
54355435
const idPrefix = resumableState.idPrefix;
5436-
const shellId = '\u00AB' + idPrefix + 'R\u00BB';
5436+
const shellId = '_' + idPrefix + 'R_';
54375437
writeChunk(destination, completedShellIdAttributeStart);
54385438
writeChunk(destination, stringToChunk(escapeTextForBrowser(shellId)));
54395439
writeChunk(destination, attributeEnd);
@@ -5448,7 +5448,7 @@ function pushCompletedShellIdAttribute(
54485448
}
54495449
resumableState.instructions |= SentCompletedShellId;
54505450
const idPrefix = resumableState.idPrefix;
5451-
const shellId = '\u00AB' + idPrefix + 'R\u00BB';
5451+
const shellId = '_' + idPrefix + 'R_';
54525452
target.push(
54535453
completedShellIdAttributeStart,
54545454
stringToChunk(escapeTextForBrowser(shellId)),

‎packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export function revealCompletedBoundariesWithViewTransitions(
111111
// TODO: We don't have a prefix to pick from here but maybe we don't need it
112112
// since it's only applicable temporarily during this specific animation.
113113
const idPrefix = '';
114-
name = '\u00AB' + idPrefix + 'T' + autoNameIdx++ + '\u00BB';
114+
name = '_' + idPrefix + 'T_' + autoNameIdx++ + '_';
115115
}
116116
elementStyle['viewTransitionName'] = name;
117117
shouldStartViewTransition = true;

‎packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3587,7 +3587,7 @@ describe('ReactDOMFizzServer', () => {
35873587
? '<script src="react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js" async=""></script>'
35883588
: '') +
35893589
(gate(flags => flags.enableFizzBlockingRender)
3590-
? '<link rel="expect" href="#«R»" blocking="render">'
3590+
? '<link rel="expect" href="#_R_" blocking="render">'
35913591
: ''),
35923592
);
35933593
});
@@ -4197,7 +4197,7 @@ describe('ReactDOMFizzServer', () => {
41974197
renderOptions.unstable_externalRuntimeSrc,
41984198
).map(n => n.outerHTML),
41994199
).toEqual([
4200-
'<script src="foo" id="«R»" async=""></script>',
4200+
'<script src="foo" id="_R_" async=""></script>',
42014201
'<script src="bar" async=""></script>',
42024202
'<script src="baz" integrity="qux" async=""></script>',
42034203
'<script type="module" src="quux" async=""></script>',
@@ -4284,7 +4284,7 @@ describe('ReactDOMFizzServer', () => {
42844284
renderOptions.unstable_externalRuntimeSrc,
42854285
).map(n => n.outerHTML),
42864286
).toEqual([
4287-
'<script src="foo" id="«R»" async=""></script>',
4287+
'<script src="foo" id="_R_" async=""></script>',
42884288
'<script src="bar" async=""></script>',
42894289
'<script src="baz" crossorigin="" async=""></script>',
42904290
'<script src="qux" crossorigin="" async=""></script>',
@@ -4523,11 +4523,11 @@ describe('ReactDOMFizzServer', () => {
45234523
expect(document.documentElement.innerHTML).toEqual(
45244524
'<head><script src="react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js" async=""></script>' +
45254525
(gate(flags => flags.enableFizzBlockingRender)
4526-
? '<link rel="expect" href="#«R»" blocking="render">'
4526+
? '<link rel="expect" href="#_R_" blocking="render">'
45274527
: '') +
45284528
'</head><body><p>hello world!</p>' +
45294529
(gate(flags => flags.enableFizzBlockingRender)
4530-
? '<template id="«R»"></template>'
4530+
? '<template id="_R_"></template>'
45314531
: '') +
45324532
'</body>',
45334533
);
@@ -6519,11 +6519,11 @@ describe('ReactDOMFizzServer', () => {
65196519
? '<script src="react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js" async=""></script>'
65206520
: '') +
65216521
(gate(flags => flags.enableFizzBlockingRender)
6522-
? '<link rel="expect" href="#«R»" blocking="render">'
6522+
? '<link rel="expect" href="#_R_" blocking="render">'
65236523
: '') +
65246524
'</head><body><script>try { foo() } catch (e) {} ;</script>' +
65256525
(gate(flags => flags.enableFizzBlockingRender)
6526-
? '<template id="«R»"></template>'
6526+
? '<template id="_R_"></template>'
65276527
: '') +
65286528
'</body></html>',
65296529
);

‎packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ describe('ReactDOMFizzServerBrowser', () => {
7373
const result = await readResult(stream);
7474
if (gate(flags => flags.enableFizzBlockingRender)) {
7575
expect(result).toMatchInlineSnapshot(
76-
`"<!DOCTYPE html><html><head><link rel="expect" href="#«R»" blocking="render"/></head><body>hello world<template id="«R»"></template></body></html>"`,
76+
`"<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head><body>hello world<template id="_R_"></template></body></html>"`,
7777
);
7878
} else {
7979
expect(result).toMatchInlineSnapshot(
@@ -92,7 +92,7 @@ describe('ReactDOMFizzServerBrowser', () => {
9292
);
9393
const result = await readResult(stream);
9494
expect(result).toMatchInlineSnapshot(
95-
`"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="«R»">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
95+
`"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="_R_">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
9696
);
9797
});
9898

@@ -524,11 +524,11 @@ describe('ReactDOMFizzServerBrowser', () => {
524524
expect(result).toEqual(
525525
'<!DOCTYPE html><html><head>' +
526526
(gate(flags => flags.enableFizzBlockingRender)
527-
? '<link rel="expect" href="#«R»" blocking="render"/>'
527+
? '<link rel="expect" href="#_R_" blocking="render"/>'
528528
: '') +
529529
'<title>foo</title></head><body>bar' +
530530
(gate(flags => flags.enableFizzBlockingRender)
531-
? '<template id="«R»"></template>'
531+
? '<template id="_R_"></template>'
532532
: '') +
533533
'</body></html>',
534534
);
@@ -548,7 +548,7 @@ describe('ReactDOMFizzServerBrowser', () => {
548548
expect(result).toMatchInlineSnapshot(
549549
// TODO: remove interpolation because it prevents snapshot updates.
550550
// eslint-disable-next-line jest/no-interpolation-in-snapshots
551-
`"<link rel="preload" as="script" fetchPriority="low" nonce="R4nd0m" href="init.js"/><link rel="modulepreload" fetchPriority="low" nonce="R4nd0m" href="init.mjs"/><div>hello world</div><script nonce="${nonce}" id="«R»">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`,
551+
`"<link rel="preload" as="script" fetchPriority="low" nonce="R4nd0m" href="init.js"/><link rel="modulepreload" fetchPriority="low" nonce="R4nd0m" href="init.mjs"/><div>hello world</div><script nonce="${nonce}" id="_R_">INIT();</script><script src="init.js" nonce="${nonce}" async=""></script><script type="module" src="init.mjs" nonce="${nonce}" async=""></script>"`,
552552
);
553553
});
554554

‎packages/react-dom/src/__tests__/ReactDOMFizzServerEdge-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ describe('ReactDOMFizzServerEdge', () => {
7373

7474
if (gate(flags => flags.enableFizzBlockingRender)) {
7575
expect(result).toMatchInlineSnapshot(
76-
`"<!DOCTYPE html><html><head><link rel="expect" href="#«R»" blocking="render"/></head><body><main>hello</main><template id="«R»"></template></body></html>"`,
76+
`"<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head><body><main>hello</main><template id="_R_"></template></body></html>"`,
7777
);
7878
} else {
7979
expect(result).toMatchInlineSnapshot(

‎packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ describe('ReactDOMFizzServerNode', () => {
9595
// with Float, we emit empty heads if they are elided when rendering <html>
9696
if (gate(flags => flags.enableFizzBlockingRender)) {
9797
expect(output.result).toMatchInlineSnapshot(
98-
`"<!DOCTYPE html><html><head><link rel="expect" href="#«R»" blocking="render"/></head><body>hello world<template id="«R»"></template></body></html>"`,
98+
`"<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head><body>hello world<template id="_R_"></template></body></html>"`,
9999
);
100100
} else {
101101
expect(output.result).toMatchInlineSnapshot(
@@ -118,7 +118,7 @@ describe('ReactDOMFizzServerNode', () => {
118118
pipe(writable);
119119
});
120120
expect(output.result).toMatchInlineSnapshot(
121-
`"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="«R»">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
121+
`"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="_R_">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
122122
);
123123
});
124124

‎packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
186186
const prelude = await readContent(result.prelude);
187187
if (gate(flags => flags.enableFizzBlockingRender)) {
188188
expect(prelude).toMatchInlineSnapshot(
189-
`"<!DOCTYPE html><html><head><link rel="expect" href="#«R»" blocking="render"/></head><body>hello world<template id="«R»"></template></body></html>"`,
189+
`"<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head><body>hello world<template id="_R_"></template></body></html>"`,
190190
);
191191
} else {
192192
expect(prelude).toMatchInlineSnapshot(
@@ -205,7 +205,7 @@ describe('ReactDOMFizzStaticBrowser', () => {
205205
);
206206
const prelude = await readContent(result.prelude);
207207
expect(prelude).toMatchInlineSnapshot(
208-
`"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="«R»">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
208+
`"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="_R_">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
209209
);
210210
});
211211

@@ -1434,12 +1434,12 @@ describe('ReactDOMFizzStaticBrowser', () => {
14341434
'<!DOCTYPE html><html lang="en"><head>' +
14351435
'<link rel="stylesheet" href="my-style" data-precedence="high"/>' +
14361436
(gate(flags => flags.enableFizzBlockingRender)
1437-
? '<link rel="expect" href="#«R»" blocking="render"/>'
1437+
? '<link rel="expect" href="#_R_" blocking="render"/>'
14381438
: '') +
14391439
'</head>' +
14401440
'<body>Hello' +
14411441
(gate(flags => flags.enableFizzBlockingRender)
1442-
? '<template id="«R»"></template>'
1442+
? '<template id="_R_"></template>'
14431443
: '') +
14441444
'</body></html>',
14451445
);
@@ -1487,8 +1487,8 @@ describe('ReactDOMFizzStaticBrowser', () => {
14871487
expect(await readContent(content)).toBe(
14881488
'<!DOCTYPE html><html lang="en"><head>' +
14891489
'<link rel="stylesheet" href="my-style" data-precedence="high"/>' +
1490-
'<link rel="expect" href="#«R»" blocking="render"/></head>' +
1491-
'<body>Hello<template id="«R»"></template></body></html>',
1490+
'<link rel="expect" href="#_R_" blocking="render"/></head>' +
1491+
'<body>Hello<template id="_R_"></template></body></html>',
14921492
);
14931493
});
14941494

@@ -1539,8 +1539,8 @@ describe('ReactDOMFizzStaticBrowser', () => {
15391539
expect(await readContent(content)).toBe(
15401540
'<!DOCTYPE html><html><head>' +
15411541
'<link rel="stylesheet" href="my-style" data-precedence="high"/>' +
1542-
'<link rel="expect" href="#«R»" blocking="render"/></head>' +
1543-
'<body><div>Hello</div><template id="«R»"></template></body></html>',
1542+
'<link rel="expect" href="#_R_" blocking="render"/></head>' +
1543+
'<body><div>Hello</div><template id="_R_"></template></body></html>',
15441544
);
15451545
});
15461546

@@ -1622,8 +1622,8 @@ describe('ReactDOMFizzStaticBrowser', () => {
16221622
let result = decoder.decode(value, {stream: true});
16231623

16241624
expect(result).toBe(
1625-
'<!DOCTYPE html><html><head><link rel="expect" href="#«R»" blocking="render"/></head>' +
1626-
'<body>hello<!--$?--><template id="B:1"></template><!--/$--><script id="«R»">requestAnimationFrame(function(){$RT=performance.now()});</script>',
1625+
'<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head>' +
1626+
'<body>hello<!--$?--><template id="B:1"></template><!--/$--><script id="_R_">requestAnimationFrame(function(){$RT=performance.now()});</script>',
16271627
);
16281628

16291629
await 1;
@@ -1647,8 +1647,8 @@ describe('ReactDOMFizzStaticBrowser', () => {
16471647
const slice = result.slice(0, instructionIndex + '$RX'.length);
16481648

16491649
expect(slice).toBe(
1650-
'<!DOCTYPE html><html><head><link rel="expect" href="#«R»" blocking="render"/></head>' +
1651-
'<body>hello<!--$?--><template id="B:1"></template><!--/$--><script id="«R»">requestAnimationFrame(function(){$RT=performance.now()});</script>' +
1650+
'<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head>' +
1651+
'<body>hello<!--$?--><template id="B:1"></template><!--/$--><script id="_R_">requestAnimationFrame(function(){$RT=performance.now()});</script>' +
16521652
'<div hidden id="S:1">world<!-- --></div><script>$RX',
16531653
);
16541654
});

‎packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ describe('ReactDOMFizzStaticNode', () => {
6565
const prelude = await readContent(result.prelude);
6666
if (gate(flags => flags.enableFizzBlockingRender)) {
6767
expect(prelude).toMatchInlineSnapshot(
68-
`"<!DOCTYPE html><html><head><link rel="expect" href="#«R»" blocking="render"/></head><body>hello world<template id="«R»"></template></body></html>"`,
68+
`"<!DOCTYPE html><html><head><link rel="expect" href="#_R_" blocking="render"/></head><body>hello world<template id="_R_"></template></body></html>"`,
6969
);
7070
} else {
7171
expect(prelude).toMatchInlineSnapshot(
@@ -86,7 +86,7 @@ describe('ReactDOMFizzStaticNode', () => {
8686
);
8787
const prelude = await readContent(result.prelude);
8888
expect(prelude).toMatchInlineSnapshot(
89-
`"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="«R»">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
89+
`"<link rel="preload" as="script" fetchPriority="low" href="init.js"/><link rel="modulepreload" fetchPriority="low" href="init.mjs"/><div>hello world</div><script id="_R_">INIT();</script><script src="init.js" async=""></script><script type="module" src="init.mjs" async=""></script>"`,
9090
);
9191
});
9292

0 commit comments

Comments
 (0)