Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Add : to beginning and end of every useId #23360

Merged
merged 1 commit into from Feb 25, 2022
Merged

Add : to beginning and end of every useId #23360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
View file
Open in desktop
Expand Up @@ -614,7 +614,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('r:')).toBe(true);
expect(String(tree[0].value).startsWith(':r')).toBe(true);

expect(tree[1]).toEqual({
id: 1,
Expand Down
26 changes: 15 additions & 11 deletions packages/react-dom/src/__tests__/ReactDOMUseId-test.js
View file
Open in desktop
Expand Up @@ -93,7 +93,11 @@ describe('useId', () => {
}

function normalizeTreeIdForTesting(id) {
const [serverClientPrefix, base32, hookIndex] = id.split(':');
const result = id.match(/:(R|r)(.*):(([0-9]*):)?/);
if (result === undefined) {
throw new Error('Invalid id format');
}
const [, serverClientPrefix, base32, hookIndex] = result;
if (serverClientPrefix.endsWith('r')) {
// Client ids aren't stable. For testing purposes, strip out the counter.
return (
Expand Down Expand Up @@ -278,7 +282,7 @@ describe('useId', () => {
// 'R:' prefix, and the first character after that, which may not correspond
// to a complete set of 5 bits.
//
// Example: R:clalalalalalalala...
// 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
Expand Down Expand Up @@ -313,8 +317,8 @@ describe('useId', () => {

// Confirm that every id matches the expected pattern
for (let i = 0; i < divs.length; i++) {
// Example: R:clalalalalalalala...
expect(divs[i].id).toMatch(/^R:.(((al)*a?)((la)*l?))*$/);
// Example: :Rclalalalalalalala...:
expect(divs[i].id).toMatch(/^:R.(((al)*a?)((la)*l?))*:$/);
}
});

Expand All @@ -338,7 +342,7 @@ describe('useId', () => {
<div
id="container"
>
R:0, R:0:1, R:0:2
:R0:, :R0:1:, :R0:2:
<!-- -->
</div>
`);
Expand All @@ -364,7 +368,7 @@ describe('useId', () => {
<div
id="container"
>
R:0
:R0:
<!-- -->
</div>
`);
Expand Down Expand Up @@ -603,10 +607,10 @@ describe('useId', () => {
id="container"
>
<div>
custom-prefix-R:1
:custom-prefix-R1:
</div>
<div>
custom-prefix-R:2
:custom-prefix-R2:
</div>
</div>
`);
Expand All @@ -620,13 +624,13 @@ describe('useId', () => {
id="container"
>
<div>
custom-prefix-R:1
:custom-prefix-R1:
</div>
<div>
custom-prefix-R:2
:custom-prefix-R2:
</div>
<div>
custom-prefix-r:0
:custom-prefix-r0:
</div>
</div>
`);
Expand Down
6 changes: 3 additions & 3 deletions packages/react-dom/src/server/ReactDOMServerFormatConfig.js
View file
Open in desktop
Expand Up @@ -130,7 +130,7 @@ export function createResponseState(
placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
boundaryPrefix: idPrefix + 'B:',
idPrefix: idPrefix + 'R:',
idPrefix: idPrefix,
nextSuspenseID: 0,
sentCompleteSegmentFunction: false,
sentCompleteBoundaryFunction: false,
Expand Down Expand Up @@ -242,13 +242,13 @@ export function makeId(
): string {
const idPrefix = responseState.idPrefix;

let id = idPrefix + 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
// hooks for this fiber.
if (localId > 0) {
id += ':' + localId.toString(32);
id += localId.toString(32) + ':';
}

return id;
Expand Down
6 changes: 3 additions & 3 deletions packages/react-reconciler/src/ReactFiberHooks.new.js
View file
Open in desktop
Expand Up @@ -2072,19 +2072,19 @@ function mountId(): string {
const treeId = getTreeId();

// Use a captial R prefix for server-generated ids.
id = 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
// hooks for this fiber.
const localId = localIdCounter++;
if (localId > 0) {
id += ':' + localId.toString(32);
id += localId.toString(32) + ':';
}
} else {
// Use a lowercase r prefix for client-generated ids.
const globalClientId = globalClientIdCounter++;
id = identifierPrefix + 'r:' + globalClientId.toString(32);
id = ':' + identifierPrefix + 'r' + globalClientId.toString(32) + ':';
}

hook.memoizedState = id;
Expand Down
6 changes: 3 additions & 3 deletions packages/react-reconciler/src/ReactFiberHooks.old.js
View file
Open in desktop
Expand Up @@ -2072,19 +2072,19 @@ function mountId(): string {
const treeId = getTreeId();

// Use a captial R prefix for server-generated ids.
id = 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
// hooks for this fiber.
const localId = localIdCounter++;
if (localId > 0) {
id += ':' + localId.toString(32);
id += localId.toString(32) + ':';
}
} else {
// Use a lowercase r prefix for client-generated ids.
const globalClientId = globalClientIdCounter++;
id = identifierPrefix + 'r:' + globalClientId.toString(32);
id = ':' + identifierPrefix + 'r' + globalClientId.toString(32) + ':';
}

hook.memoizedState = id;
Expand Down