diff --git a/package.json b/package.json index acc8fc6..b813fc0 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,6 @@ "@babel/eslint-parser": "^7.25.9", "@babel/runtime": "^7.26.0", "@popperjs/core": "^2.11.8", - "@react-aria/ssr": "^3.5.0", "@restart/hooks": "^0.6.2", "@types/warning": "^3.0.3", "dequal": "^2.0.3", diff --git a/src/DropdownToggle.tsx b/src/DropdownToggle.tsx index b78ff77..030ad7b 100644 --- a/src/DropdownToggle.tsx +++ b/src/DropdownToggle.tsx @@ -1,6 +1,5 @@ -import { useContext, useCallback } from 'react'; +import { useContext, useCallback, useId } from 'react'; import * as React from 'react'; -import { useSSRSafeId } from './ssr'; import DropdownContext, { DropdownContextValue } from './DropdownContext'; export const isRoleMenu = (el: HTMLElement) => @@ -31,7 +30,7 @@ export function useDropdownToggle(): [ UseDropdownToggleProps, UseDropdownToggleMetadata, ] { - const id = useSSRSafeId(); + const id = useId(); const { show = false, toggle = noop, diff --git a/src/Tabs.tsx b/src/Tabs.tsx index ab0f1b4..61741e2 100644 --- a/src/Tabs.tsx +++ b/src/Tabs.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { useMemo } from 'react'; +import { useId, useMemo } from 'react'; import { useUncontrolledProp } from 'uncontrollable'; -import { useSSRSafeId } from './ssr'; import TabContext, { TabContextType } from './TabContext'; import SelectableContext from './SelectableContext'; @@ -80,7 +79,8 @@ const Tabs = (props: TabsProps) => { propsOnSelect, ); - const id = useSSRSafeId(userId); + const generatedId = useId(); + const id = userId ?? generatedId; const generateChildId = useMemo( () => diff --git a/src/ssr.tsx b/src/ssr.tsx deleted file mode 100644 index f4d5c78..0000000 --- a/src/ssr.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { - useSSRSafeId, - useIsSSR, - SSRProvider, - SSRProviderProps, -} from '@react-aria/ssr'; - -export type { SSRProviderProps }; - -export { useSSRSafeId, useIsSSR, SSRProvider }; diff --git a/www/docs/SSR.mdx b/www/docs/SSR.mdx deleted file mode 100644 index 710aa9f..0000000 --- a/www/docs/SSR.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Server Side Rendering ---- - -All `@restart/ui` components can can be rendered in the browser as well as -on the server, in a compatible NodeJs environment. - -## SSR Provider - -HTML created on the server by React must be "rehydrated" on the client -in order for components to become interactive. When there are differences -between the server HTML and the client react component tree, React may not -be able to fully hydrate the app and you lose the performance benefits of -doing it in the first place. To ensure that `@restart/ui` components -are correctly rehydrated, wrap your application in a `SSRProvider` -on the server. - -```jsx -import { SSRProvider } from "@restart/ui/ssr"; - - - -; -``` - -In particular this ensures that autogenerated `id` props on components match -between environments. - -## useSSRSafeId - -You can also make use of restart's `id` generation in your own apps -using `useSSRSafeId` - -```jsx -import { useSSRSafeId } from "@restart/ui/ssr"; - -function Component() { - const id = useSSRSafeId(); - return
; -} -``` diff --git a/www/sidebars.js b/www/sidebars.js index b38a322..eb5b66a 100644 --- a/www/sidebars.js +++ b/www/sidebars.js @@ -24,6 +24,5 @@ module.exports = { }, 'transitions', - 'SSR', ], }; diff --git a/yarn.lock b/yarn.lock index 2d44f98..7722115 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1986,13 +1986,6 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== -"@react-aria/ssr@^3.5.0": - version "3.5.0" - resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.5.0.tgz#40c1270a75868185f72a88cafe37bd1392f690cb" - integrity sha512-h0MJdSWOd1qObLnJ8mprU31wI8tmKFJMuwT22MpWq6psisOOZaga6Ml4u6Ee6M6duWWISjXvqO4Sb/J0PBA+nQ== - dependencies: - "@swc/helpers" "^0.4.14" - "@restart/hooks@^0.6.2": version "0.6.2" resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.6.2.tgz#55a1f9b9bb413aaf2cbb00b0ff337f807082b72e" @@ -2202,13 +2195,6 @@ dependencies: any-observable "^0.3.0" -"@swc/helpers@^0.4.14": - version "0.4.14" - resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74" - integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw== - dependencies: - tslib "^2.4.0" - "@testing-library/dom@^10.4.0": version "10.4.0" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8" @@ -9912,7 +9898,7 @@ string-argv@~0.3.2: resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6" integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q== -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -9947,15 +9933,6 @@ string-width@^3.0.0, string-width@^3.1.0: is-fullwidth-code-point "^2.0.0" strip-ansi "^5.1.0" -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -10065,7 +10042,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -10093,13 +10070,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2" @@ -10432,7 +10402,7 @@ tslib@^1.9.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0: +tslib@^2.0.3, tslib@^2.1.0: version "2.4.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e" integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA== @@ -11041,7 +11011,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus= -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -11076,15 +11046,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"