@react-aria/ssr 3.4.2-nightly.3679 → 3.4.2-nightly.3685
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +42 -6
- package/dist/main.js.map +1 -1
- package/dist/module.js +43 -7
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/SSRProvider.tsx +46 -5
package/dist/main.js
CHANGED
|
@@ -46,28 +46,64 @@ const $29383e587d62412a$var$defaultContext = {
|
|
|
46
46
|
const $29383e587d62412a$var$SSRContext = /*#__PURE__*/ (0, ($parcel$interopDefault($4hxXn$react))).createContext($29383e587d62412a$var$defaultContext);
|
|
47
47
|
function $29383e587d62412a$export$9f8ac96af4b1b2ae(props) {
|
|
48
48
|
let cur = (0, $4hxXn$react.useContext)($29383e587d62412a$var$SSRContext);
|
|
49
|
+
let counter = $29383e587d62412a$var$useCounter(cur === $29383e587d62412a$var$defaultContext);
|
|
49
50
|
let value = (0, $4hxXn$react.useMemo)(()=>({
|
|
50
51
|
// If this is the first SSRProvider, start with an empty string prefix, otherwise
|
|
51
52
|
// append and increment the counter.
|
|
52
|
-
prefix: cur === $29383e587d62412a$var$defaultContext ? "" : `${cur.prefix}-${
|
|
53
|
+
prefix: cur === $29383e587d62412a$var$defaultContext ? "" : `${cur.prefix}-${counter}`,
|
|
53
54
|
current: 0
|
|
54
55
|
}), [
|
|
55
|
-
cur
|
|
56
|
+
cur,
|
|
57
|
+
counter
|
|
56
58
|
]);
|
|
57
59
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($4hxXn$react))).createElement($29383e587d62412a$var$SSRContext.Provider, {
|
|
58
60
|
value: value
|
|
59
61
|
}, props.children);
|
|
60
62
|
}
|
|
61
63
|
let $29383e587d62412a$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
|
|
64
|
+
let $29383e587d62412a$var$componentIds = new WeakMap();
|
|
65
|
+
function $29383e587d62412a$var$useCounter(isDisabled = false) {
|
|
66
|
+
let ctx = (0, $4hxXn$react.useContext)($29383e587d62412a$var$SSRContext);
|
|
67
|
+
let ref = (0, $4hxXn$react.useRef)(null);
|
|
68
|
+
if (ref.current === null && !isDisabled) {
|
|
69
|
+
var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner;
|
|
70
|
+
// In strict mode, React renders components twice, and the ref will be reset to null on the second render.
|
|
71
|
+
// This means our id counter will be incremented twice instead of once. This is a problem because on the
|
|
72
|
+
// server, components are only rendered once and so ids generated on the server won't match the client.
|
|
73
|
+
// In React 18, useId was introduced to solve this, but it is not available in older versions. So to solve this
|
|
74
|
+
// we need to use some React internals to access the underlying Fiber instance, which is stable between renders.
|
|
75
|
+
// This is exposed as ReactCurrentOwner in development, which is all we need since StrictMode only runs in development.
|
|
76
|
+
// To ensure that we only increment the global counter once, we store the starting id for this component in
|
|
77
|
+
// a weak map associated with the Fiber. On the second render, we reset the global counter to this value.
|
|
78
|
+
// Since React runs the second render immediately after the first, this is safe.
|
|
79
|
+
// @ts-ignore
|
|
80
|
+
let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = (0, ($parcel$interopDefault($4hxXn$react))).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 ? void 0 : (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
|
|
81
|
+
if (currentOwner) {
|
|
82
|
+
let prevComponentValue = $29383e587d62412a$var$componentIds.get(currentOwner);
|
|
83
|
+
if (prevComponentValue == null) // On the first render, and first call to useId, store the id and state in our weak map.
|
|
84
|
+
$29383e587d62412a$var$componentIds.set(currentOwner, {
|
|
85
|
+
id: ctx.current,
|
|
86
|
+
state: currentOwner.memoizedState
|
|
87
|
+
});
|
|
88
|
+
else if (currentOwner.memoizedState !== prevComponentValue.state) {
|
|
89
|
+
// On the second render, the memoizedState gets reset by React.
|
|
90
|
+
// Reset the counter, and remove from the weak map so we don't
|
|
91
|
+
// do this for subsequent useId calls.
|
|
92
|
+
ctx.current = prevComponentValue.id;
|
|
93
|
+
$29383e587d62412a$var$componentIds.delete(currentOwner);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
ref.current = ++ctx.current;
|
|
97
|
+
}
|
|
98
|
+
return ref.current;
|
|
99
|
+
}
|
|
62
100
|
function $29383e587d62412a$export$619500959fc48b26(defaultId) {
|
|
63
101
|
let ctx = (0, $4hxXn$react.useContext)($29383e587d62412a$var$SSRContext);
|
|
64
102
|
// If we are rendering in a non-DOM environment, and there's no SSRProvider,
|
|
65
103
|
// provide a warning to hint to the developer to add one.
|
|
66
104
|
if (ctx === $29383e587d62412a$var$defaultContext && !$29383e587d62412a$var$canUseDOM) console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
|
|
67
|
-
|
|
68
|
-
return
|
|
69
|
-
defaultId
|
|
70
|
-
]);
|
|
105
|
+
let counter = $29383e587d62412a$var$useCounter(!!defaultId);
|
|
106
|
+
return defaultId || `react-aria${ctx.prefix}-${counter}`;
|
|
71
107
|
}
|
|
72
108
|
function $29383e587d62412a$export$535bd6ca7f90a273() {
|
|
73
109
|
let cur = (0, $4hxXn$react.useContext)($29383e587d62412a$var$SSRContext);
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;ACAA;;;;;;;;;;CAUC,GAED,0FAA0F;AAC1F,2DAA2D;AAC3D,wDAAwD;AACxD;AAaA,iFAAiF;AACjF,kFAAkF;AAClF,+EAA+E;AAC/E,+EAA+E;AAC/E,2DAA2D;AAC3D,MAAM,uCAAkC;IACtC,QAAQ,OAAO,KAAK,KAAK,CAAC,KAAK,MAAM,KAAK;IAC1C,SAAS;AACX;AAEA,MAAM,iDAAa,CAAA,GAAA,sCAAK,AAAD,EAAE,aAAa,CAAkB;AAWjD,SAAS,0CAAY,KAAuB,EAAe;IAChE,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QAAyB,CAAA,GAAA,oBAAO,AAAD,EAAE,IAAO,CAAA;YAC1C,iFAAiF;YACjF,oCAAoC;YACpC,QAAQ,QAAQ,uCAAiB,KAAK,CAAC,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/ssr/src/index.ts","packages/@react-aria/ssr/src/SSRProvider.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {SSRProvider, useSSRSafeId, useIsSSR} from './SSRProvider';\nexport type {SSRProviderProps} from './SSRProvider';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// We must avoid a circular dependency with @react-aria/utils, and this useLayoutEffect is\n// guarded by a check that it only runs on the client side.\n// eslint-disable-next-line rulesdir/useLayoutEffectRule\nimport React, {ReactNode, useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';\n\n// To support SSR, the auto incrementing id counter is stored in a context. This allows\n// it to be reset on every request to ensure the client and server are consistent.\n// There is also a prefix string that is used to support async loading components\n// Each async boundary must be wrapped in an SSR provider, which appends to the prefix\n// and resets the current id counter. This ensures that async loaded components have\n// consistent ids regardless of the loading order.\ninterface SSRContextValue {\n prefix: string,\n current: number\n}\n\n// Default context value to use in case there is no SSRProvider. This is fine for\n// client-only apps. In order to support multiple copies of React Aria potentially\n// being on the page at once, the prefix is set to a random number. SSRProvider\n// will reset this to zero for consistency between server and client, so in the\n// SSR case multiple copies of React Aria is not supported.\nconst defaultContext: SSRContextValue = {\n prefix: String(Math.round(Math.random() * 10000000000)),\n current: 0\n};\n\nconst SSRContext = React.createContext<SSRContextValue>(defaultContext);\n\nexport interface SSRProviderProps {\n /** Your application here. */\n children: ReactNode\n}\n\n/**\n * When using SSR with React Aria, applications must be wrapped in an SSRProvider.\n * This ensures that auto generated ids are consistent between the client and server.\n */\nexport function SSRProvider(props: SSRProviderProps): JSX.Element {\n let cur = useContext(SSRContext);\n let counter = useCounter(cur === defaultContext);\n let value: SSRContextValue = useMemo(() => ({\n // If this is the first SSRProvider, start with an empty string prefix, otherwise\n // append and increment the counter.\n prefix: cur === defaultContext ? '' : `${cur.prefix}-${counter}`,\n current: 0\n }), [cur, counter]);\n\n return (\n <SSRContext.Provider value={value}>\n {props.children}\n </SSRContext.Provider>\n );\n}\n\nlet canUseDOM = Boolean(\n typeof window !== 'undefined' &&\n window.document &&\n window.document.createElement\n);\n\nlet componentIds = new WeakMap();\n\nfunction useCounter(isDisabled = false) {\n let ctx = useContext(SSRContext);\n let ref = useRef<number | null>(null);\n if (ref.current === null && !isDisabled) {\n // In strict mode, React renders components twice, and the ref will be reset to null on the second render.\n // This means our id counter will be incremented twice instead of once. This is a problem because on the\n // server, components are only rendered once and so ids generated on the server won't match the client.\n // In React 18, useId was introduced to solve this, but it is not available in older versions. So to solve this\n // we need to use some React internals to access the underlying Fiber instance, which is stable between renders.\n // This is exposed as ReactCurrentOwner in development, which is all we need since StrictMode only runs in development.\n // To ensure that we only increment the global counter once, we store the starting id for this component in\n // a weak map associated with the Fiber. On the second render, we reset the global counter to this value.\n // Since React runs the second render immediately after the first, this is safe.\n // @ts-ignore\n let currentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentOwner?.current;\n if (currentOwner) {\n let prevComponentValue = componentIds.get(currentOwner);\n if (prevComponentValue == null) {\n // On the first render, and first call to useId, store the id and state in our weak map.\n componentIds.set(currentOwner, {\n id: ctx.current,\n state: currentOwner.memoizedState\n });\n } else if (currentOwner.memoizedState !== prevComponentValue.state) {\n // On the second render, the memoizedState gets reset by React.\n // Reset the counter, and remove from the weak map so we don't\n // do this for subsequent useId calls.\n ctx.current = prevComponentValue.id;\n componentIds.delete(currentOwner);\n }\n }\n\n ref.current = ++ctx.current;\n }\n\n return ref.current;\n}\n\n/** @private */\nexport function useSSRSafeId(defaultId?: string): string {\n let ctx = useContext(SSRContext);\n\n // If we are rendering in a non-DOM environment, and there's no SSRProvider,\n // provide a warning to hint to the developer to add one.\n if (ctx === defaultContext && !canUseDOM) {\n console.warn('When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.');\n }\n\n let counter = useCounter(!!defaultId);\n return defaultId || `react-aria${ctx.prefix}-${counter}`;\n}\n\n/**\n * Returns whether the component is currently being server side rendered or\n * hydrated on the client. Can be used to delay browser-specific rendering\n * until after hydration.\n */\nexport function useIsSSR(): boolean {\n let cur = useContext(SSRContext);\n let isInSSRContext = cur !== defaultContext;\n let [isSSR, setIsSSR] = useState(isInSSRContext);\n\n // If on the client, and the component was initially server rendered,\n // then schedule a layout effect to update the component after hydration.\n if (typeof window !== 'undefined' && isInSSRContext) {\n // This if statement technically breaks the rules of hooks, but is safe\n // because the condition never changes after mounting.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useLayoutEffect(() => {\n setIsSSR(false);\n }, []);\n }\n\n return isSSR;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import $89yE2$react, {useContext as $89yE2$useContext, useMemo as $89yE2$useMemo, useState as $89yE2$useState, useLayoutEffect as $89yE2$useLayoutEffect} from "react";
|
|
1
|
+
import $89yE2$react, {useContext as $89yE2$useContext, useMemo as $89yE2$useMemo, useRef as $89yE2$useRef, useState as $89yE2$useState, useLayoutEffect as $89yE2$useLayoutEffect} from "react";
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
4
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -36,28 +36,64 @@ const $704cf1d3b684cc5c$var$defaultContext = {
|
|
|
36
36
|
const $704cf1d3b684cc5c$var$SSRContext = /*#__PURE__*/ (0, $89yE2$react).createContext($704cf1d3b684cc5c$var$defaultContext);
|
|
37
37
|
function $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae(props) {
|
|
38
38
|
let cur = (0, $89yE2$useContext)($704cf1d3b684cc5c$var$SSRContext);
|
|
39
|
+
let counter = $704cf1d3b684cc5c$var$useCounter(cur === $704cf1d3b684cc5c$var$defaultContext);
|
|
39
40
|
let value = (0, $89yE2$useMemo)(()=>({
|
|
40
41
|
// If this is the first SSRProvider, start with an empty string prefix, otherwise
|
|
41
42
|
// append and increment the counter.
|
|
42
|
-
prefix: cur === $704cf1d3b684cc5c$var$defaultContext ? "" : `${cur.prefix}-${
|
|
43
|
+
prefix: cur === $704cf1d3b684cc5c$var$defaultContext ? "" : `${cur.prefix}-${counter}`,
|
|
43
44
|
current: 0
|
|
44
45
|
}), [
|
|
45
|
-
cur
|
|
46
|
+
cur,
|
|
47
|
+
counter
|
|
46
48
|
]);
|
|
47
49
|
return /*#__PURE__*/ (0, $89yE2$react).createElement($704cf1d3b684cc5c$var$SSRContext.Provider, {
|
|
48
50
|
value: value
|
|
49
51
|
}, props.children);
|
|
50
52
|
}
|
|
51
53
|
let $704cf1d3b684cc5c$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
|
|
54
|
+
let $704cf1d3b684cc5c$var$componentIds = new WeakMap();
|
|
55
|
+
function $704cf1d3b684cc5c$var$useCounter(isDisabled = false) {
|
|
56
|
+
let ctx = (0, $89yE2$useContext)($704cf1d3b684cc5c$var$SSRContext);
|
|
57
|
+
let ref = (0, $89yE2$useRef)(null);
|
|
58
|
+
if (ref.current === null && !isDisabled) {
|
|
59
|
+
var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner;
|
|
60
|
+
// In strict mode, React renders components twice, and the ref will be reset to null on the second render.
|
|
61
|
+
// This means our id counter will be incremented twice instead of once. This is a problem because on the
|
|
62
|
+
// server, components are only rendered once and so ids generated on the server won't match the client.
|
|
63
|
+
// In React 18, useId was introduced to solve this, but it is not available in older versions. So to solve this
|
|
64
|
+
// we need to use some React internals to access the underlying Fiber instance, which is stable between renders.
|
|
65
|
+
// This is exposed as ReactCurrentOwner in development, which is all we need since StrictMode only runs in development.
|
|
66
|
+
// To ensure that we only increment the global counter once, we store the starting id for this component in
|
|
67
|
+
// a weak map associated with the Fiber. On the second render, we reset the global counter to this value.
|
|
68
|
+
// Since React runs the second render immediately after the first, this is safe.
|
|
69
|
+
// @ts-ignore
|
|
70
|
+
let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = (0, $89yE2$react).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 ? void 0 : (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
|
|
71
|
+
if (currentOwner) {
|
|
72
|
+
let prevComponentValue = $704cf1d3b684cc5c$var$componentIds.get(currentOwner);
|
|
73
|
+
if (prevComponentValue == null) // On the first render, and first call to useId, store the id and state in our weak map.
|
|
74
|
+
$704cf1d3b684cc5c$var$componentIds.set(currentOwner, {
|
|
75
|
+
id: ctx.current,
|
|
76
|
+
state: currentOwner.memoizedState
|
|
77
|
+
});
|
|
78
|
+
else if (currentOwner.memoizedState !== prevComponentValue.state) {
|
|
79
|
+
// On the second render, the memoizedState gets reset by React.
|
|
80
|
+
// Reset the counter, and remove from the weak map so we don't
|
|
81
|
+
// do this for subsequent useId calls.
|
|
82
|
+
ctx.current = prevComponentValue.id;
|
|
83
|
+
$704cf1d3b684cc5c$var$componentIds.delete(currentOwner);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
ref.current = ++ctx.current;
|
|
87
|
+
}
|
|
88
|
+
return ref.current;
|
|
89
|
+
}
|
|
52
90
|
function $704cf1d3b684cc5c$export$619500959fc48b26(defaultId) {
|
|
53
91
|
let ctx = (0, $89yE2$useContext)($704cf1d3b684cc5c$var$SSRContext);
|
|
54
92
|
// If we are rendering in a non-DOM environment, and there's no SSRProvider,
|
|
55
93
|
// provide a warning to hint to the developer to add one.
|
|
56
94
|
if (ctx === $704cf1d3b684cc5c$var$defaultContext && !$704cf1d3b684cc5c$var$canUseDOM) console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
|
|
57
|
-
|
|
58
|
-
return
|
|
59
|
-
defaultId
|
|
60
|
-
]);
|
|
95
|
+
let counter = $704cf1d3b684cc5c$var$useCounter(!!defaultId);
|
|
96
|
+
return defaultId || `react-aria${ctx.prefix}-${counter}`;
|
|
61
97
|
}
|
|
62
98
|
function $704cf1d3b684cc5c$export$535bd6ca7f90a273() {
|
|
63
99
|
let cur = (0, $89yE2$useContext)($704cf1d3b684cc5c$var$SSRContext);
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;AAAA;;;;;;;;;;ACAA;;;;;;;;;;CAUC,GAED,0FAA0F;AAC1F,2DAA2D;AAC3D,wDAAwD;AACxD;AAaA,iFAAiF;AACjF,kFAAkF;AAClF,+EAA+E;AAC/E,+EAA+E;AAC/E,2DAA2D;AAC3D,MAAM,uCAAkC;IACtC,QAAQ,OAAO,KAAK,KAAK,CAAC,KAAK,MAAM,KAAK;IAC1C,SAAS;AACX;AAEA,MAAM,iDAAa,CAAA,GAAA,YAAK,AAAD,EAAE,aAAa,CAAkB;AAWjD,SAAS,0CAAY,KAAuB,EAAe;IAChE,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QAAyB,CAAA,GAAA,cAAO,AAAD,EAAE,IAAO,CAAA;YAC1C,iFAAiF;YACjF,oCAAoC;YACpC,QAAQ,QAAQ,uCAAiB,KAAK,CAAC,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/ssr/src/index.ts","packages/@react-aria/ssr/src/SSRProvider.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {SSRProvider, useSSRSafeId, useIsSSR} from './SSRProvider';\nexport type {SSRProviderProps} from './SSRProvider';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// We must avoid a circular dependency with @react-aria/utils, and this useLayoutEffect is\n// guarded by a check that it only runs on the client side.\n// eslint-disable-next-line rulesdir/useLayoutEffectRule\nimport React, {ReactNode, useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';\n\n// To support SSR, the auto incrementing id counter is stored in a context. This allows\n// it to be reset on every request to ensure the client and server are consistent.\n// There is also a prefix string that is used to support async loading components\n// Each async boundary must be wrapped in an SSR provider, which appends to the prefix\n// and resets the current id counter. This ensures that async loaded components have\n// consistent ids regardless of the loading order.\ninterface SSRContextValue {\n prefix: string,\n current: number\n}\n\n// Default context value to use in case there is no SSRProvider. This is fine for\n// client-only apps. In order to support multiple copies of React Aria potentially\n// being on the page at once, the prefix is set to a random number. SSRProvider\n// will reset this to zero for consistency between server and client, so in the\n// SSR case multiple copies of React Aria is not supported.\nconst defaultContext: SSRContextValue = {\n prefix: String(Math.round(Math.random() * 10000000000)),\n current: 0\n};\n\nconst SSRContext = React.createContext<SSRContextValue>(defaultContext);\n\nexport interface SSRProviderProps {\n /** Your application here. */\n children: ReactNode\n}\n\n/**\n * When using SSR with React Aria, applications must be wrapped in an SSRProvider.\n * This ensures that auto generated ids are consistent between the client and server.\n */\nexport function SSRProvider(props: SSRProviderProps): JSX.Element {\n let cur = useContext(SSRContext);\n let counter = useCounter(cur === defaultContext);\n let value: SSRContextValue = useMemo(() => ({\n // If this is the first SSRProvider, start with an empty string prefix, otherwise\n // append and increment the counter.\n prefix: cur === defaultContext ? '' : `${cur.prefix}-${counter}`,\n current: 0\n }), [cur, counter]);\n\n return (\n <SSRContext.Provider value={value}>\n {props.children}\n </SSRContext.Provider>\n );\n}\n\nlet canUseDOM = Boolean(\n typeof window !== 'undefined' &&\n window.document &&\n window.document.createElement\n);\n\nlet componentIds = new WeakMap();\n\nfunction useCounter(isDisabled = false) {\n let ctx = useContext(SSRContext);\n let ref = useRef<number | null>(null);\n if (ref.current === null && !isDisabled) {\n // In strict mode, React renders components twice, and the ref will be reset to null on the second render.\n // This means our id counter will be incremented twice instead of once. This is a problem because on the\n // server, components are only rendered once and so ids generated on the server won't match the client.\n // In React 18, useId was introduced to solve this, but it is not available in older versions. So to solve this\n // we need to use some React internals to access the underlying Fiber instance, which is stable between renders.\n // This is exposed as ReactCurrentOwner in development, which is all we need since StrictMode only runs in development.\n // To ensure that we only increment the global counter once, we store the starting id for this component in\n // a weak map associated with the Fiber. On the second render, we reset the global counter to this value.\n // Since React runs the second render immediately after the first, this is safe.\n // @ts-ignore\n let currentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentOwner?.current;\n if (currentOwner) {\n let prevComponentValue = componentIds.get(currentOwner);\n if (prevComponentValue == null) {\n // On the first render, and first call to useId, store the id and state in our weak map.\n componentIds.set(currentOwner, {\n id: ctx.current,\n state: currentOwner.memoizedState\n });\n } else if (currentOwner.memoizedState !== prevComponentValue.state) {\n // On the second render, the memoizedState gets reset by React.\n // Reset the counter, and remove from the weak map so we don't\n // do this for subsequent useId calls.\n ctx.current = prevComponentValue.id;\n componentIds.delete(currentOwner);\n }\n }\n\n ref.current = ++ctx.current;\n }\n\n return ref.current;\n}\n\n/** @private */\nexport function useSSRSafeId(defaultId?: string): string {\n let ctx = useContext(SSRContext);\n\n // If we are rendering in a non-DOM environment, and there's no SSRProvider,\n // provide a warning to hint to the developer to add one.\n if (ctx === defaultContext && !canUseDOM) {\n console.warn('When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.');\n }\n\n let counter = useCounter(!!defaultId);\n return defaultId || `react-aria${ctx.prefix}-${counter}`;\n}\n\n/**\n * Returns whether the component is currently being server side rendered or\n * hydrated on the client. Can be used to delay browser-specific rendering\n * until after hydration.\n */\nexport function useIsSSR(): boolean {\n let cur = useContext(SSRContext);\n let isInSSRContext = cur !== defaultContext;\n let [isSSR, setIsSSR] = useState(isInSSRContext);\n\n // If on the client, and the component was initially server rendered,\n // then schedule a layout effect to update the component after hydration.\n if (typeof window !== 'undefined' && isInSSRContext) {\n // This if statement technically breaks the rules of hooks, but is safe\n // because the condition never changes after mounting.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useLayoutEffect(() => {\n setIsSSR(false);\n }, []);\n }\n\n return isSSR;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAwCA;IACE,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;GAGG;AACH,4BAA4B,KAAK,EAAE,gBAAgB,GAAG,IAAI,OAAO,
|
|
1
|
+
{"mappings":";AAwCA;IACE,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;GAGG;AACH,4BAA4B,KAAK,EAAE,gBAAgB,GAAG,IAAI,OAAO,CAehE;AAgDD,eAAe;AACf,6BAA6B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAWvD;AAED;;;;GAIG;AACH,4BAA4B,OAAO,CAiBlC","sources":["packages/@react-aria/ssr/src/packages/@react-aria/ssr/src/SSRProvider.tsx","packages/@react-aria/ssr/src/packages/@react-aria/ssr/src/index.ts","packages/@react-aria/ssr/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {SSRProvider, useSSRSafeId, useIsSSR} from './SSRProvider';\nexport type {SSRProviderProps} from './SSRProvider';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/ssr",
|
|
3
|
-
"version": "3.4.2-nightly.
|
|
3
|
+
"version": "3.4.2-nightly.3685+97ff9f95d",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"publishConfig": {
|
|
26
26
|
"access": "public"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "97ff9f95d91befaf87251e52ea484f81daae8f3a"
|
|
29
29
|
}
|
package/src/SSRProvider.tsx
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
// We must avoid a circular dependency with @react-aria/utils, and this useLayoutEffect is
|
|
14
14
|
// guarded by a check that it only runs on the client side.
|
|
15
15
|
// eslint-disable-next-line rulesdir/useLayoutEffectRule
|
|
16
|
-
import React, {ReactNode, useContext, useLayoutEffect, useMemo, useState} from 'react';
|
|
16
|
+
import React, {ReactNode, useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';
|
|
17
17
|
|
|
18
18
|
// To support SSR, the auto incrementing id counter is stored in a context. This allows
|
|
19
19
|
// it to be reset on every request to ensure the client and server are consistent.
|
|
@@ -49,12 +49,13 @@ export interface SSRProviderProps {
|
|
|
49
49
|
*/
|
|
50
50
|
export function SSRProvider(props: SSRProviderProps): JSX.Element {
|
|
51
51
|
let cur = useContext(SSRContext);
|
|
52
|
+
let counter = useCounter(cur === defaultContext);
|
|
52
53
|
let value: SSRContextValue = useMemo(() => ({
|
|
53
54
|
// If this is the first SSRProvider, start with an empty string prefix, otherwise
|
|
54
55
|
// append and increment the counter.
|
|
55
|
-
prefix: cur === defaultContext ? '' : `${cur.prefix}-${
|
|
56
|
+
prefix: cur === defaultContext ? '' : `${cur.prefix}-${counter}`,
|
|
56
57
|
current: 0
|
|
57
|
-
}), [cur]);
|
|
58
|
+
}), [cur, counter]);
|
|
58
59
|
|
|
59
60
|
return (
|
|
60
61
|
<SSRContext.Provider value={value}>
|
|
@@ -69,6 +70,46 @@ let canUseDOM = Boolean(
|
|
|
69
70
|
window.document.createElement
|
|
70
71
|
);
|
|
71
72
|
|
|
73
|
+
let componentIds = new WeakMap();
|
|
74
|
+
|
|
75
|
+
function useCounter(isDisabled = false) {
|
|
76
|
+
let ctx = useContext(SSRContext);
|
|
77
|
+
let ref = useRef<number | null>(null);
|
|
78
|
+
if (ref.current === null && !isDisabled) {
|
|
79
|
+
// In strict mode, React renders components twice, and the ref will be reset to null on the second render.
|
|
80
|
+
// This means our id counter will be incremented twice instead of once. This is a problem because on the
|
|
81
|
+
// server, components are only rendered once and so ids generated on the server won't match the client.
|
|
82
|
+
// In React 18, useId was introduced to solve this, but it is not available in older versions. So to solve this
|
|
83
|
+
// we need to use some React internals to access the underlying Fiber instance, which is stable between renders.
|
|
84
|
+
// This is exposed as ReactCurrentOwner in development, which is all we need since StrictMode only runs in development.
|
|
85
|
+
// To ensure that we only increment the global counter once, we store the starting id for this component in
|
|
86
|
+
// a weak map associated with the Fiber. On the second render, we reset the global counter to this value.
|
|
87
|
+
// Since React runs the second render immediately after the first, this is safe.
|
|
88
|
+
// @ts-ignore
|
|
89
|
+
let currentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentOwner?.current;
|
|
90
|
+
if (currentOwner) {
|
|
91
|
+
let prevComponentValue = componentIds.get(currentOwner);
|
|
92
|
+
if (prevComponentValue == null) {
|
|
93
|
+
// On the first render, and first call to useId, store the id and state in our weak map.
|
|
94
|
+
componentIds.set(currentOwner, {
|
|
95
|
+
id: ctx.current,
|
|
96
|
+
state: currentOwner.memoizedState
|
|
97
|
+
});
|
|
98
|
+
} else if (currentOwner.memoizedState !== prevComponentValue.state) {
|
|
99
|
+
// On the second render, the memoizedState gets reset by React.
|
|
100
|
+
// Reset the counter, and remove from the weak map so we don't
|
|
101
|
+
// do this for subsequent useId calls.
|
|
102
|
+
ctx.current = prevComponentValue.id;
|
|
103
|
+
componentIds.delete(currentOwner);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
ref.current = ++ctx.current;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
return ref.current;
|
|
111
|
+
}
|
|
112
|
+
|
|
72
113
|
/** @private */
|
|
73
114
|
export function useSSRSafeId(defaultId?: string): string {
|
|
74
115
|
let ctx = useContext(SSRContext);
|
|
@@ -79,8 +120,8 @@ export function useSSRSafeId(defaultId?: string): string {
|
|
|
79
120
|
console.warn('When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.');
|
|
80
121
|
}
|
|
81
122
|
|
|
82
|
-
|
|
83
|
-
return
|
|
123
|
+
let counter = useCounter(!!defaultId);
|
|
124
|
+
return defaultId || `react-aria${ctx.prefix}-${counter}`;
|
|
84
125
|
}
|
|
85
126
|
|
|
86
127
|
/**
|