Skip to content

Commit 5849887

Browse files
sebmarkbagesebmarkbage
committed
Use valid CSS selectors in useId format (#32001)
For the `useId` algorithm we used colon `:` before and after. #23360 This avoids collisions in general by using an unusual characters. It also avoids collisions when concatenated with some other ID. Unfortunately, `:` is not a valid character in `view-transition-name`. This PR swaps the format from: ``` :r123: ``` To the unicode: ``` «r123» ``` Which is valid CSS selectors. This also allows them being used for `querySelector()` which we didn't really find a legit use for but seems ok-ish. That way you can get a view-transition-name that you can manually reference. E.g. to generate styles: ```js const id = useId(); return <> <style>{` ::view-transition-group(${id}) { ... } ::view-transition-old(${id}) { ... } ::view-transition-new(${id}) { ... } `}</style> <ViewTransition name={id}>...</ViewTransition> </>; ``` DiffTrain build for [2e4db33](2e4db33)
1 parent d5a15a6 commit 5849887

36 files changed

+178
-146
lines changed

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
22e39ea72e9d10f6634ea580aaba49c2e759ef0e
1+
403d4fb852384b820a8fe405413891d8c74bbf5d

‎compiled/facebook-www/REVISION_TRANSFORMS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
22e39ea72e9d10f6634ea580aaba49c2e759ef0e
1+
403d4fb852384b820a8fe405413891d8c74bbf5d

‎compiled/facebook-www/React-dev.classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1533,7 +1533,7 @@ __DEV__ &&
15331533
exports.useTransition = function () {
15341534
return resolveDispatcher().useTransition();
15351535
};
1536-
exports.version = "19.1.0-www-classic-22e39ea7-20250225";
1536+
exports.version = "19.1.0-www-classic-2e4db334-20250225";
15371537
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
15381538
"function" ===
15391539
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-dev.modern.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1533,7 +1533,7 @@ __DEV__ &&
15331533
exports.useTransition = function () {
15341534
return resolveDispatcher().useTransition();
15351535
};
1536-
exports.version = "19.1.0-www-modern-22e39ea7-20250225";
1536+
exports.version = "19.1.0-www-modern-2e4db334-20250225";
15371537
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
15381538
"function" ===
15391539
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-prod.classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -641,4 +641,4 @@ exports.useSyncExternalStore = function (
641641
exports.useTransition = function () {
642642
return ReactSharedInternals.H.useTransition();
643643
};
644-
exports.version = "19.1.0-www-classic-22e39ea7-20250225";
644+
exports.version = "19.1.0-www-classic-2e4db334-20250225";

‎compiled/facebook-www/React-prod.modern.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -641,4 +641,4 @@ exports.useSyncExternalStore = function (
641641
exports.useTransition = function () {
642642
return ReactSharedInternals.H.useTransition();
643643
};
644-
exports.version = "19.1.0-www-modern-22e39ea7-20250225";
644+
exports.version = "19.1.0-www-modern-2e4db334-20250225";

‎compiled/facebook-www/React-profiling.classic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -645,7 +645,7 @@ exports.useSyncExternalStore = function (
645645
exports.useTransition = function () {
646646
return ReactSharedInternals.H.useTransition();
647647
};
648-
exports.version = "19.1.0-www-classic-22e39ea7-20250225";
648+
exports.version = "19.1.0-www-classic-2e4db334-20250225";
649649
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
650650
"function" ===
651651
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/React-profiling.modern.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -645,7 +645,7 @@ exports.useSyncExternalStore = function (
645645
exports.useTransition = function () {
646646
return ReactSharedInternals.H.useTransition();
647647
};
648-
exports.version = "19.1.0-www-modern-22e39ea7-20250225";
648+
exports.version = "19.1.0-www-modern-2e4db334-20250225";
649649
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
650650
"function" ===
651651
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/ReactART-dev.classic.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4591,7 +4591,11 @@ __DEV__ &&
45914591
identifierPrefix = workInProgressRoot.identifierPrefix,
45924592
globalClientId = globalClientIdCounter++;
45934593
identifierPrefix =
4594-
":" + identifierPrefix + "r" + globalClientId.toString(32) + ":";
4594+
"\u00ab" +
4595+
identifierPrefix +
4596+
"r" +
4597+
globalClientId.toString(32) +
4598+
"\u00bb";
45954599
return (hook.memoizedState = identifierPrefix);
45964600
}
45974601
function mountRefresh() {
@@ -17312,10 +17316,10 @@ __DEV__ &&
1731217316
(function () {
1731317317
var internals = {
1731417318
bundleType: 1,
17315-
version: "19.1.0-www-classic-22e39ea7-20250225",
17319+
version: "19.1.0-www-classic-2e4db334-20250225",
1731617320
rendererPackageName: "react-art",
1731717321
currentDispatcherRef: ReactSharedInternals,
17318-
reconcilerVersion: "19.1.0-www-classic-22e39ea7-20250225"
17322+
reconcilerVersion: "19.1.0-www-classic-2e4db334-20250225"
1731917323
};
1732017324
internals.overrideHookState = overrideHookState;
1732117325
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -17349,7 +17353,7 @@ __DEV__ &&
1734917353
exports.Shape = Shape;
1735017354
exports.Surface = Surface;
1735117355
exports.Text = Text;
17352-
exports.version = "19.1.0-www-classic-22e39ea7-20250225";
17356+
exports.version = "19.1.0-www-classic-2e4db334-20250225";
1735317357
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1735417358
"function" ===
1735517359
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled/facebook-www/ReactART-dev.modern.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4497,7 +4497,11 @@ __DEV__ &&
44974497
identifierPrefix = workInProgressRoot.identifierPrefix,
44984498
globalClientId = globalClientIdCounter++;
44994499
identifierPrefix =
4500-
":" + identifierPrefix + "r" + globalClientId.toString(32) + ":";
4500+
"\u00ab" +
4501+
identifierPrefix +
4502+
"r" +
4503+
globalClientId.toString(32) +
4504+
"\u00bb";
45014505
return (hook.memoizedState = identifierPrefix);
45024506
}
45034507
function mountRefresh() {
@@ -17084,10 +17088,10 @@ __DEV__ &&
1708417088
(function () {
1708517089
var internals = {
1708617090
bundleType: 1,
17087-
version: "19.1.0-www-modern-22e39ea7-20250225",
17091+
version: "19.1.0-www-modern-2e4db334-20250225",
1708817092
rendererPackageName: "react-art",
1708917093
currentDispatcherRef: ReactSharedInternals,
17090-
reconcilerVersion: "19.1.0-www-modern-22e39ea7-20250225"
17094+
reconcilerVersion: "19.1.0-www-modern-2e4db334-20250225"
1709117095
};
1709217096
internals.overrideHookState = overrideHookState;
1709317097
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -17121,7 +17125,7 @@ __DEV__ &&
1712117125
exports.Shape = Shape;
1712217126
exports.Surface = Surface;
1712317127
exports.Text = Text;
17124-
exports.version = "19.1.0-www-modern-22e39ea7-20250225";
17128+
exports.version = "19.1.0-www-modern-2e4db334-20250225";
1712517129
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1712617130
"function" ===
1712717131
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)