feat(design): ssr support (#1603)

dream-num · Mar 15, 2024 · cdb7d49 · cdb7d49
1 parent ab76ebd
commit cdb7d49
Show file tree

Hide file tree

Showing 11 changed files with 16 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "scripts": {
         "prepare": "husky install",
         "pre-commit": "lint-staged",
-        "dev:demo": "turbo dev:demo",
+        "dev": "turbo dev:demo",
         "lint:types": "turbo lint:types",
         "test": "turbo test -- --passWithNoTests",
         "coverage": "turbo coverage -- --passWithNoTests",

diff --git a/packages/design/src/components/config-provider/ConfigProvider.tsx b/packages/design/src/components/config-provider/ConfigProvider.tsx
@@ -15,19 +15,20 @@
  */
 
 import React, { createContext } from 'react';
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
 
 import type { ILocale } from '../../locale';
 import { enUS } from '../../locale';
 
 export interface IConfigProviderProps {
     children: React.ReactNode;
     locale: ILocale;
-    mountContainer: HTMLElement;
+    mountContainer: HTMLElement | null;
 }
 
 export const ConfigContext = createContext<Omit<IConfigProviderProps, 'children'>>({
     locale: enUS,
-    mountContainer: document.body,
+    mountContainer: canUseDom() ? document.body : null,
 });
 
 export function ConfigProvider(props: IConfigProviderProps) {

diff --git a/packages/design/src/components/dialog/Dialog.tsx b/packages/design/src/components/dialog/Dialog.tsx
@@ -176,7 +176,7 @@ export function Dialog(props: IDialogProps) {
             : modal;
     };
 
-    return (
+    return mountContainer && (
         <RcDialog
             width={width}
             prefixCls={styles.dialog}

diff --git a/packages/design/src/components/dropdown/Dropdown.tsx b/packages/design/src/components/dropdown/Dropdown.tsx
@@ -84,7 +84,7 @@ export function Dropdown(props: IDropdownProps) {
 
     const { mountContainer } = useContext(ConfigContext);
 
-    return (
+    return mountContainer && (
         <RcDropdown
             {...props}
             overlayClassName={className}

diff --git a/packages/design/src/components/menu/Menu.tsx b/packages/design/src/components/menu/Menu.tsx
@@ -24,7 +24,7 @@ import styles from './index.module.less';
 export function Menu(props: MenuProps) {
     const { mountContainer } = useContext(ConfigContext);
 
-    return React.cloneElement(<RcMenu prefixCls={styles.menu} getPopupContainer={() => mountContainer} />, {
+    return mountContainer && React.cloneElement(<RcMenu prefixCls={styles.menu} getPopupContainer={() => mountContainer} />, {
         ...props,
     });
 }

diff --git a/packages/design/src/components/select/Select.tsx b/packages/design/src/components/select/Select.tsx
@@ -61,7 +61,7 @@ export function Select(props: ISelectProps) {
 
     const { mountContainer } = useContext(ConfigContext);
 
-    return (
+    return mountContainer && (
         <RcSelect
             mode={mode}
             prefixCls={styles.select}

diff --git a/packages/design/src/components/tooltip/Tooltip.tsx b/packages/design/src/components/tooltip/Tooltip.tsx
@@ -42,7 +42,7 @@ export const Tooltip = forwardRef((props: ITooltipProps, ref: Ref<TooltipRef>) =
 
     const { mountContainer } = useContext(ConfigContext);
 
-    return (
+    return mountContainer && (
         <RcTooltip
             visible={visible}
             ref={ref}

diff --git a/packages/design/src/themes/theme.ts b/packages/design/src/themes/theme.ts
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
+
 import styles from './theme-root.module.less';
 
 function convertToDashCase(input: string): string {
@@ -41,6 +43,8 @@ class Theme {
     private _themeRootName = styles.theme;
 
     constructor() {
+        if (!canUseDom()) return;
+
         const $style = document.createElement('style');
         $style.id = this._themeRootName;
         document.head.appendChild($style);

diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts
@@ -4,7 +4,4 @@ import pkg from './package.json';
 export default ({ mode }) => createViteConfig({}, {
     mode,
     pkg,
-    features: {
-        dom: true, // FIXME: should not use dom here
-    },
 });
diff --git a/packages/facade/vite.config.ts b/packages/facade/vite.config.ts
@@ -8,7 +8,7 @@ export default ({ mode }) => createViteConfig({
         deps: {
             inline: ['vitest-canvas-mock'],
         },
-    // For this config, check https://github.com/vitest-dev/vitest/issues/740
+        // For this config, check https://github.com/vitest-dev/vitest/issues/740
         threads: false,
         environmentOptions: {
             jsdom: {

diff --git a/packages/ui/src/components/notification/Notification.tsx b/packages/ui/src/components/notification/Notification.tsx
@@ -89,6 +89,8 @@ export const PureContent = (props: INotificationMethodOptions) => {
 export function Notification() {
     const { mountContainer } = useContext(ConfigContext);
 
+    if (!mountContainer) return <></>;
+
     const [api, contextHolder] = useNotification({
         prefixCls: styles.notification,
         maxCount: 3,