Skip to content

Commit bcae4ac

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 5359759 commit bcae4ac

23 files changed

+153
-117
lines changed

‎compiled-rn/VERSION_NATIVE_FB‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
19.1.0-native-fb-22e39ea7-20250225
1+
19.1.0-native-fb-2e4db334-20250225

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-dev.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<d74cd5ab55481ade5eb24c64e6575914>>
10+
* @generated SignedSource<<f029b34909bd2ef9a0e75d2f9304f3d1>>
1111
*/
1212

1313
"use strict";
@@ -404,5 +404,5 @@ __DEV__ &&
404404
exports.useFormStatus = function () {
405405
return resolveDispatcher().useHostTransitionStatus();
406406
};
407-
exports.version = "19.1.0-native-fb-22e39ea7-20250225";
407+
exports.version = "19.1.0-native-fb-2e4db334-20250225";
408408
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-prod.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<f15bac883ab529ea438c8353023f4abc>>
10+
* @generated SignedSource<<cdc7768374a1521bfdd600b5c9588c59>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.1.0-native-fb-22e39ea7-20250225";
206+
exports.version = "19.1.0-native-fb-2e4db334-20250225";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-profiling.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<f15bac883ab529ea438c8353023f4abc>>
10+
* @generated SignedSource<<cdc7768374a1521bfdd600b5c9588c59>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.1.0-native-fb-22e39ea7-20250225";
206+
exports.version = "19.1.0-native-fb-2e4db334-20250225";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-dev.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<1fd06ffcb012198fdeab97d6068359ab>>
10+
* @generated SignedSource<<560c3d223c36cf7b055fccab04c780f6>>
1111
*/
1212

1313
/*
@@ -6996,14 +6996,14 @@ __DEV__ &&
69966996
(
69976997
idWithLeadingBit & ~(1 << (32 - clz32(idWithLeadingBit) - 1))
69986998
).toString(32) + treeId;
6999-
identifierPrefix = ":" + identifierPrefix + "R" + treeId;
6999+
identifierPrefix = "\u00ab" + identifierPrefix + "R" + treeId;
70007000
treeId = localIdCounter++;
70017001
0 < treeId && (identifierPrefix += "H" + treeId.toString(32));
7002-
identifierPrefix += ":";
7002+
identifierPrefix += "\u00bb";
70037003
} else
70047004
(treeId = globalClientIdCounter++),
70057005
(identifierPrefix =
7006-
":" + identifierPrefix + "r" + treeId.toString(32) + ":");
7006+
"\u00ab" + identifierPrefix + "r" + treeId.toString(32) + "\u00bb");
70077007
return (hook.memoizedState = identifierPrefix);
70087008
}
70097009
function mountRefresh() {
@@ -25886,11 +25886,11 @@ __DEV__ &&
2588625886
};
2588725887
(function () {
2588825888
var isomorphicReactPackageVersion = React.version;
25889-
if ("19.1.0-native-fb-22e39ea7-20250225" !== isomorphicReactPackageVersion)
25889+
if ("19.1.0-native-fb-2e4db334-20250225" !== isomorphicReactPackageVersion)
2589025890
throw Error(
2589125891
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2589225892
(isomorphicReactPackageVersion +
25893-
"\n - react-dom: 19.1.0-native-fb-22e39ea7-20250225\nLearn more: https://react.dev/warnings/version-mismatch")
25893+
"\n - react-dom: 19.1.0-native-fb-2e4db334-20250225\nLearn more: https://react.dev/warnings/version-mismatch")
2589425894
);
2589525895
})();
2589625896
("function" === typeof Map &&
@@ -25927,10 +25927,10 @@ __DEV__ &&
2592725927
!(function () {
2592825928
var internals = {
2592925929
bundleType: 1,
25930-
version: "19.1.0-native-fb-22e39ea7-20250225",
25930+
version: "19.1.0-native-fb-2e4db334-20250225",
2593125931
rendererPackageName: "react-dom",
2593225932
currentDispatcherRef: ReactSharedInternals,
25933-
reconcilerVersion: "19.1.0-native-fb-22e39ea7-20250225"
25933+
reconcilerVersion: "19.1.0-native-fb-2e4db334-20250225"
2593425934
};
2593525935
internals.overrideHookState = overrideHookState;
2593625936
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -26074,5 +26074,5 @@ __DEV__ &&
2607426074
listenToAllSupportedEvents(container);
2607526075
return new ReactDOMHydrationRoot(initialChildren);
2607626076
};
26077-
exports.version = "19.1.0-native-fb-22e39ea7-20250225";
26077+
exports.version = "19.1.0-native-fb-2e4db334-20250225";
2607826078
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-prod.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<caa343da4890ccbfdf3de26c436929bc>>
10+
* @generated SignedSource<<1751b688cf717ea8cc7c1508460e9578>>
1111
*/
1212

1313
/*
@@ -4767,19 +4767,19 @@ var ContextOnlyDispatcher = {
47674767
idWithLeadingBit & ~(1 << (32 - clz32(idWithLeadingBit) - 1))
47684768
).toString(32) + JSCompiler_inline_result;
47694769
identifierPrefix =
4770-
":" + identifierPrefix + "R" + JSCompiler_inline_result;
4770+
"\u00ab" + identifierPrefix + "R" + JSCompiler_inline_result;
47714771
JSCompiler_inline_result = localIdCounter++;
47724772
0 < JSCompiler_inline_result &&
47734773
(identifierPrefix += "H" + JSCompiler_inline_result.toString(32));
4774-
identifierPrefix += ":";
4774+
identifierPrefix += "\u00bb";
47754775
} else
47764776
(JSCompiler_inline_result = globalClientIdCounter++),
47774777
(identifierPrefix =
4778-
":" +
4778+
"\u00ab" +
47794779
identifierPrefix +
47804780
"r" +
47814781
JSCompiler_inline_result.toString(32) +
4782-
":");
4782+
"\u00bb");
47834783
return (hook.memoizedState = identifierPrefix);
47844784
},
47854785
useHostTransitionStatus: useHostTransitionStatus,
@@ -16001,14 +16001,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1600116001
};
1600216002
var isomorphicReactPackageVersion$jscomp$inline_1785 = React.version;
1600316003
if (
16004-
"19.1.0-native-fb-22e39ea7-20250225" !==
16004+
"19.1.0-native-fb-2e4db334-20250225" !==
1600516005
isomorphicReactPackageVersion$jscomp$inline_1785
1600616006
)
1600716007
throw Error(
1600816008
formatProdErrorMessage(
1600916009
527,
1601016010
isomorphicReactPackageVersion$jscomp$inline_1785,
16011-
"19.1.0-native-fb-22e39ea7-20250225"
16011+
"19.1.0-native-fb-2e4db334-20250225"
1601216012
)
1601316013
);
1601416014
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16030,10 +16030,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1603016030
};
1603116031
var internals$jscomp$inline_2245 = {
1603216032
bundleType: 0,
16033-
version: "19.1.0-native-fb-22e39ea7-20250225",
16033+
version: "19.1.0-native-fb-2e4db334-20250225",
1603416034
rendererPackageName: "react-dom",
1603516035
currentDispatcherRef: ReactSharedInternals,
16036-
reconcilerVersion: "19.1.0-native-fb-22e39ea7-20250225"
16036+
reconcilerVersion: "19.1.0-native-fb-2e4db334-20250225"
1603716037
};
1603816038
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1603916039
var hook$jscomp$inline_2246 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16137,4 +16137,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1613716137
listenToAllSupportedEvents(container);
1613816138
return new ReactDOMHydrationRoot(initialChildren);
1613916139
};
16140-
exports.version = "19.1.0-native-fb-22e39ea7-20250225";
16140+
exports.version = "19.1.0-native-fb-2e4db334-20250225";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-profiling.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<eaf75657794691164bcac5ed251d38ee>>
10+
* @generated SignedSource<<0d8a6d1562ba020cf8efbc0ab357709d>>
1111
*/
1212

1313
/*
@@ -4907,19 +4907,19 @@ var ContextOnlyDispatcher = {
49074907
idWithLeadingBit & ~(1 << (32 - clz32(idWithLeadingBit) - 1))
49084908
).toString(32) + JSCompiler_inline_result;
49094909
identifierPrefix =
4910-
":" + identifierPrefix + "R" + JSCompiler_inline_result;
4910+
"\u00ab" + identifierPrefix + "R" + JSCompiler_inline_result;
49114911
JSCompiler_inline_result = localIdCounter++;
49124912
0 < JSCompiler_inline_result &&
49134913
(identifierPrefix += "H" + JSCompiler_inline_result.toString(32));
4914-
identifierPrefix += ":";
4914+
identifierPrefix += "\u00bb";
49154915
} else
49164916
(JSCompiler_inline_result = globalClientIdCounter++),
49174917
(identifierPrefix =
4918-
":" +
4918+
"\u00ab" +
49194919
identifierPrefix +
49204920
"r" +
49214921
JSCompiler_inline_result.toString(32) +
4922-
":");
4922+
"\u00bb");
49234923
return (hook.memoizedState = identifierPrefix);
49244924
},
49254925
useHostTransitionStatus: useHostTransitionStatus,
@@ -16651,14 +16651,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1665116651
};
1665216652
var isomorphicReactPackageVersion$jscomp$inline_1880 = React.version;
1665316653
if (
16654-
"19.1.0-native-fb-22e39ea7-20250225" !==
16654+
"19.1.0-native-fb-2e4db334-20250225" !==
1665516655
isomorphicReactPackageVersion$jscomp$inline_1880
1665616656
)
1665716657
throw Error(
1665816658
formatProdErrorMessage(
1665916659
527,
1666016660
isomorphicReactPackageVersion$jscomp$inline_1880,
16661-
"19.1.0-native-fb-22e39ea7-20250225"
16661+
"19.1.0-native-fb-2e4db334-20250225"
1666216662
)
1666316663
);
1666416664
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16680,10 +16680,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1668016680
};
1668116681
var internals$jscomp$inline_1887 = {
1668216682
bundleType: 0,
16683-
version: "19.1.0-native-fb-22e39ea7-20250225",
16683+
version: "19.1.0-native-fb-2e4db334-20250225",
1668416684
rendererPackageName: "react-dom",
1668516685
currentDispatcherRef: ReactSharedInternals,
16686-
reconcilerVersion: "19.1.0-native-fb-22e39ea7-20250225",
16686+
reconcilerVersion: "19.1.0-native-fb-2e4db334-20250225",
1668716687
getLaneLabelMap: function () {
1668816688
for (
1668916689
var map = new Map(), lane = 1, index$294 = 0;
@@ -16802,4 +16802,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1680216802
listenToAllSupportedEvents(container);
1680316803
return new ReactDOMHydrationRoot(initialChildren);
1680416804
};
16805-
exports.version = "19.1.0-native-fb-22e39ea7-20250225";
16805+
exports.version = "19.1.0-native-fb-2e4db334-20250225";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMProfiling-dev.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<4ef9266a7f19a05d7079f6abf92caa6e>>
10+
* @generated SignedSource<<af195f78e6d0184f7725acae6ada535e>>
1111
*/
1212

1313
/*
@@ -7004,14 +7004,14 @@ __DEV__ &&
70047004
(
70057005
idWithLeadingBit & ~(1 << (32 - clz32(idWithLeadingBit) - 1))
70067006
).toString(32) + treeId;
7007-
identifierPrefix = ":" + identifierPrefix + "R" + treeId;
7007+
identifierPrefix = "\u00ab" + identifierPrefix + "R" + treeId;
70087008
treeId = localIdCounter++;
70097009
0 < treeId && (identifierPrefix += "H" + treeId.toString(32));
7010-
identifierPrefix += ":";
7010+
identifierPrefix += "\u00bb";
70117011
} else
70127012
(treeId = globalClientIdCounter++),
70137013
(identifierPrefix =
7014-
":" + identifierPrefix + "r" + treeId.toString(32) + ":");
7014+
"\u00ab" + identifierPrefix + "r" + treeId.toString(32) + "\u00bb");
70157015
return (hook.memoizedState = identifierPrefix);
70167016
}
70177017
function mountRefresh() {
@@ -25947,11 +25947,11 @@ __DEV__ &&
2594725947
};
2594825948
(function () {
2594925949
var isomorphicReactPackageVersion = React.version;
25950-
if ("19.1.0-native-fb-22e39ea7-20250225" !== isomorphicReactPackageVersion)
25950+
if ("19.1.0-native-fb-2e4db334-20250225" !== isomorphicReactPackageVersion)
2595125951
throw Error(
2595225952
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2595325953
(isomorphicReactPackageVersion +
25954-
"\n - react-dom: 19.1.0-native-fb-22e39ea7-20250225\nLearn more: https://react.dev/warnings/version-mismatch")
25954+
"\n - react-dom: 19.1.0-native-fb-2e4db334-20250225\nLearn more: https://react.dev/warnings/version-mismatch")
2595525955
);
2595625956
})();
2595725957
("function" === typeof Map &&
@@ -25988,10 +25988,10 @@ __DEV__ &&
2598825988
!(function () {
2598925989
var internals = {
2599025990
bundleType: 1,
25991-
version: "19.1.0-native-fb-22e39ea7-20250225",
25991+
version: "19.1.0-native-fb-2e4db334-20250225",
2599225992
rendererPackageName: "react-dom",
2599325993
currentDispatcherRef: ReactSharedInternals,
25994-
reconcilerVersion: "19.1.0-native-fb-22e39ea7-20250225"
25994+
reconcilerVersion: "19.1.0-native-fb-2e4db334-20250225"
2599525995
};
2599625996
internals.overrideHookState = overrideHookState;
2599725997
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -26451,7 +26451,7 @@ __DEV__ &&
2645126451
exports.useFormStatus = function () {
2645226452
return resolveDispatcher().useHostTransitionStatus();
2645326453
};
26454-
exports.version = "19.1.0-native-fb-22e39ea7-20250225";
26454+
exports.version = "19.1.0-native-fb-2e4db334-20250225";
2645526455
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
2645626456
"function" ===
2645726457
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMProfiling-prod.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<98df410b2f1c59df92b77d1a9e0d1142>>
10+
* @generated SignedSource<<1bed1e066b0e65accdfb93ec026fc62f>>
1111
*/
1212

1313
/*
@@ -4767,19 +4767,19 @@ var ContextOnlyDispatcher = {
47674767
idWithLeadingBit & ~(1 << (32 - clz32(idWithLeadingBit) - 1))
47684768
).toString(32) + JSCompiler_inline_result;
47694769
identifierPrefix =
4770-
":" + identifierPrefix + "R" + JSCompiler_inline_result;
4770+
"\u00ab" + identifierPrefix + "R" + JSCompiler_inline_result;
47714771
JSCompiler_inline_result = localIdCounter++;
47724772
0 < JSCompiler_inline_result &&
47734773
(identifierPrefix += "H" + JSCompiler_inline_result.toString(32));
4774-
identifierPrefix += ":";
4774+
identifierPrefix += "\u00bb";
47754775
} else
47764776
(JSCompiler_inline_result = globalClientIdCounter++),
47774777
(identifierPrefix =
4778-
":" +
4778+
"\u00ab" +
47794779
identifierPrefix +
47804780
"r" +
47814781
JSCompiler_inline_result.toString(32) +
4782-
":");
4782+
"\u00bb");
47834783
return (hook.memoizedState = identifierPrefix);
47844784
},
47854785
useHostTransitionStatus: useHostTransitionStatus,
@@ -16012,14 +16012,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1601216012
};
1601316013
var isomorphicReactPackageVersion$jscomp$inline_1786 = React.version;
1601416014
if (
16015-
"19.1.0-native-fb-22e39ea7-20250225" !==
16015+
"19.1.0-native-fb-2e4db334-20250225" !==
1601616016
isomorphicReactPackageVersion$jscomp$inline_1786
1601716017
)
1601816018
throw Error(
1601916019
formatProdErrorMessage(
1602016020
527,
1602116021
isomorphicReactPackageVersion$jscomp$inline_1786,
16022-
"19.1.0-native-fb-22e39ea7-20250225"
16022+
"19.1.0-native-fb-2e4db334-20250225"
1602316023
)
1602416024
);
1602516025
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16041,10 +16041,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1604116041
};
1604216042
var internals$jscomp$inline_2248 = {
1604316043
bundleType: 0,
16044-
version: "19.1.0-native-fb-22e39ea7-20250225",
16044+
version: "19.1.0-native-fb-2e4db334-20250225",
1604516045
rendererPackageName: "react-dom",
1604616046
currentDispatcherRef: ReactSharedInternals,
16047-
reconcilerVersion: "19.1.0-native-fb-22e39ea7-20250225"
16047+
reconcilerVersion: "19.1.0-native-fb-2e4db334-20250225"
1604816048
};
1604916049
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1605016050
var hook$jscomp$inline_2249 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16302,4 +16302,4 @@ exports.useFormState = function (action, initialState, permalink) {
1630216302
exports.useFormStatus = function () {
1630316303
return ReactSharedInternals.H.useHostTransitionStatus();
1630416304
};
16305-
exports.version = "19.1.0-native-fb-22e39ea7-20250225";
16305+
exports.version = "19.1.0-native-fb-2e4db334-20250225";

0 commit comments

Comments
 (0)