From 00ebabe8b34fc6b73545eb2a6fb272c9644126ca Mon Sep 17 00:00:00 2001 From: p-sw Date: Sat, 3 Aug 2024 21:35:51 +0900 Subject: [PATCH] refactor: replace withSSD & ssdFallback with useDocument --- .../react/components/Dialog/Component.tsx | 62 ++++----- packages/react/components/Drawer.tsx | 43 +++--- packages/react/components/Toast/Component.tsx | 122 +++++++++--------- packages/react/lib/index.ts | 3 +- packages/react/lib/ssrFallback.tsx | 22 ---- packages/react/lib/useDocument.ts | 21 +++ packages/react/lib/withSSD.tsx | 18 --- 7 files changed, 131 insertions(+), 160 deletions(-) delete mode 100644 packages/react/lib/ssrFallback.tsx create mode 100644 packages/react/lib/useDocument.ts delete mode 100644 packages/react/lib/withSSD.tsx diff --git a/packages/react/components/Dialog/Component.tsx b/packages/react/components/Dialog/Component.tsx index 1b135c1..888efdd 100644 --- a/packages/react/components/Dialog/Component.tsx +++ b/packages/react/components/Dialog/Component.tsx @@ -1,9 +1,4 @@ -import { - ServerSideDocumentFallback, - Slot, - type VariantProps, - vcn, -} from "@pswui-lib"; +import { Slot, type VariantProps, useDocument, vcn } from "@pswui-lib"; import React, { type ReactNode, useId, useState } from "react"; import ReactDOM from "react-dom"; @@ -93,35 +88,32 @@ const DialogOverlay = React.forwardRef( const { children, closeOnClick, onClick, ...otherPropsExtracted } = otherPropsCompressed; - return ( - - {() => - ReactDOM.createPortal( -
{ - if (closeOnClick) { - setContext((p) => ({ ...p, opened: false })); - } - onClick?.(e); - }} - > -
- {/* Layer for overflow positioning */} - {children} -
-
, - document.body, - ) - } - + const document = useDocument(); + if (!document) return null; + + return ReactDOM.createPortal( +
{ + if (closeOnClick) { + setContext((p) => ({ ...p, opened: false })); + } + onClick?.(e); + }} + > +
+ {/* Layer for overflow positioning */} + {children} +
+
, + document.body, ); }, ); diff --git a/packages/react/components/Drawer.tsx b/packages/react/components/Drawer.tsx index f2e3925..2bcbade 100644 --- a/packages/react/components/Drawer.tsx +++ b/packages/react/components/Drawer.tsx @@ -1,8 +1,8 @@ import { type AsChild, - ServerSideDocumentFallback, Slot, type VariantProps, + useDocument, vcn, } from "@pswui-lib"; import React, { @@ -125,28 +125,25 @@ const DrawerOverlay = forwardRef( : 1 })`; - return ( - - {() => - createPortal( - , - document.body, - ) - } - + const document = useDocument(); + if (!document) return null; + + return createPortal( + , + document.body, ); }, ); diff --git a/packages/react/components/Toast/Component.tsx b/packages/react/components/Toast/Component.tsx index e9c4675..131cbd8 100644 --- a/packages/react/components/Toast/Component.tsx +++ b/packages/react/components/Toast/Component.tsx @@ -1,4 +1,4 @@ -import { type VariantProps, vcn, withServerSideDocument } from "@pswui-lib"; +import { type VariantProps, useDocument, vcn } from "@pswui-lib"; import React, { useEffect, useId, useRef } from "react"; import ReactDOM from "react-dom"; @@ -145,71 +145,73 @@ interface ToasterProps muteDuplicationWarning?: boolean; } -const Toaster = withServerSideDocument( - React.forwardRef((props, ref) => { - const id = useId(); - const [variantProps, otherPropsCompressed] = - resolveToasterVariantProps(props); - const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } = - otherPropsCompressed; +const Toaster = React.forwardRef((props, ref) => { + const id = useId(); + const [variantProps, otherPropsCompressed] = + resolveToasterVariantProps(props); + const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } = + otherPropsCompressed; - const [toastList, setToastList] = React.useState(toasts); - const internalRef = useRef(null); + const [toastList, setToastList] = React.useState(toasts); + const internalRef = useRef(null); - useEffect(() => { - return subscribe(() => { - setToastList(getSnapshot()); - }); - }, []); + useEffect(() => { + return subscribe(() => { + setToastList(getSnapshot()); + }); + }, []); - const option = React.useMemo(() => { - return { - ...defaultToastOption, - ...defaultOption, - }; - }, [defaultOption]); + const option = React.useMemo(() => { + return { + ...defaultToastOption, + ...defaultOption, + }; + }, [defaultOption]); - const toasterInstance = document.querySelector("div[data-toaster-root]"); - if (toasterInstance && id !== toasterInstance.id) { - if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) { - console.warn( - "Multiple Toaster instances detected. Only one Toaster is allowed.", - ); - } - return null; + const document = useDocument(); + + if (!document) return null; + + const toasterInstance = document.querySelector("div[data-toaster-root]"); + if (toasterInstance && id !== toasterInstance.id) { + if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) { + console.warn( + "Multiple Toaster instances detected. Only one Toaster is allowed.", + ); } + return null; + } - return ( - <> - {ReactDOM.createPortal( -
{ - internalRef.current = el; - if (typeof ref === "function") { - ref(el); - } else if (ref) { - ref.current = el; - } - }} - id={id} - > - {Object.entries(toastList).map(([id]) => ( - - ))} -
, - document.body, - )} - - ); - }), -); + return ( + <> + {ReactDOM.createPortal( +
{ + internalRef.current = el; + if (typeof ref === "function") { + ref(el); + } else if (ref) { + ref.current = el; + } + }} + id={id} + > + {Object.entries(toastList).map(([id]) => ( + + ))} +
, + document.body, + )} + + ); +}); Toaster.displayName = "Toaster"; export { Toaster }; diff --git a/packages/react/lib/index.ts b/packages/react/lib/index.ts index 47c4881..db93e6f 100644 --- a/packages/react/lib/index.ts +++ b/packages/react/lib/index.ts @@ -1,4 +1,3 @@ export * from "./vcn"; export * from "./Slot"; -export * from "./ssrFallback"; -export * from "./withSSD"; +export * from "./useDocument"; diff --git a/packages/react/lib/ssrFallback.tsx b/packages/react/lib/ssrFallback.tsx deleted file mode 100644 index f252c9f..0000000 --- a/packages/react/lib/ssrFallback.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { type ReactNode, useEffect, useState } from "react"; - -/** - * This component allows components to use `document` as like they're always in the client side. - * Return null if there is no `document` (which represents it's server side) or initial render(to avoid hydration error). - */ -function ServerSideDocumentFallback({ - children, -}: { children: () => ReactNode }) { - const [initialRender, setInitialRender] = useState(true); - - useEffect(() => { - setInitialRender(false); - }, []); - - if (typeof document === "undefined" /* server side */ || initialRender) - return null; - - return children(); -} - -export { ServerSideDocumentFallback }; diff --git a/packages/react/lib/useDocument.ts b/packages/react/lib/useDocument.ts new file mode 100644 index 0000000..ac9fff4 --- /dev/null +++ b/packages/react/lib/useDocument.ts @@ -0,0 +1,21 @@ +"use client"; + +import { useEffect, useState } from "react"; + +/** + * This hook allows components to use `document` as like they're always in the client side. + * Return undefined if there is no `document` (which represents it's server side) or initial render(to avoid hydration error). + */ +function useDocument(): undefined | Document { + const [initialRender, setInitialState] = useState(true); + + useEffect(() => { + setInitialState(false); + }, []); + + if (typeof document === "undefined" || initialRender) return undefined; + + return document; +} + +export { useDocument }; diff --git a/packages/react/lib/withSSD.tsx b/packages/react/lib/withSSD.tsx deleted file mode 100644 index 13a402a..0000000 --- a/packages/react/lib/withSSD.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { ComponentType } from "react"; -import { ServerSideDocumentFallback } from "./ssrFallback"; - -function withServerSideDocument

( - Component: ComponentType

, -): ComponentType

{ - const SSDocumentFallbackWrapper = (props: P) => { - return ( - - {() => } - - ); - }; - - return SSDocumentFallbackWrapper; -} - -export { withServerSideDocument };