feat(devtools): storage presets manager (#5568)

packages/devtools/client/modern.config.ts

@@ -5,6 +5,16 @@ import { ROUTE_BASENAME } from '@modern-js/devtools-kit/runtime';
 import { ServiceWorkerCompilerPlugin } from './plugins/ServiceWorkerCompilerPlugin';
 import packageMeta from './package.json';
 
+const globalVars: Record<string, any> = {
+  'process.env.VERSION': packageMeta.version,
+  'process.env.PKG_VERSION': packageMeta.version,
+  'process.env.DEVTOOLS_MARK': nanoid(),
+};
+
+if (process.env.NODE_ENV === 'production') {
+  globalVars.__REACT_DEVTOOLS_GLOBAL_HOOK__ = { isDisabled: true };
+}
+
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig<'rspack'>({
   runtime: {
@@ -29,12 +39,7 @@ export default defineConfig<'rspack'>({
       require.resolve('modern-normalize/modern-normalize.css'),
       require.resolve('@radix-ui/themes/styles.css'),
     ],
-    globalVars: {
-      'process.env.VERSION': packageMeta.version,
-      'process.env.PKG_VERSION': packageMeta.version,
-      'process.env.DEVTOOLS_MARK': nanoid(),
-      __REACT_DEVTOOLS_GLOBAL_HOOK__: { isDisabled: true },
-    },
+    globalVars,
     alias: {
       // Trick to fix: Modern.js won't recognize experimental react as react@18.
       react: path.resolve('./node_modules/react-exp'),

packages/devtools/client/package.json

@@ -41,18 +41,19 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/themes": "^2.0.0",
+    "@radix-ui/themes": "^3.0.5",
+    "@scripts/jest-config": "workspace:*",
     "@rsbuild/core": "0.6.15",
     "@types/jest": "^29",
     "@types/lodash": "^4.14.202",
     "@types/node": "~16.11.7",
     "@types/react": "^18",
     "@types/react-devtools-inline": "^4.24.8",
     "@types/react-dom": "^18",
-    "@scripts/jest-config": "workspace:*",
     "birpc": "0.2.13",
     "clsx": "^1.2.1",
     "hookable": "^5.5.3",
+    "jest": "^29",
     "lodash": "^4.17.21",
     "nanoid": "3.3.4",
     "p-defer": "^3.0.0",
@@ -62,8 +63,8 @@
     "react-devtools-inline": "^4.28.5",
     "react-dom": "^18.2.0",
     "react-dom-exp": "npm:react-dom@0.0.0-experimental-51ffd3564-20231025",
-    "react-exp": "npm:react@0.0.0-experimental-51ffd3564-20231025",
     "react-error-boundary": "^4.0.12",
+    "react-exp": "npm:react@0.0.0-experimental-51ffd3564-20231025",
     "react-icons": "^4.11.0",
     "react-is": "^18",
     "react-json-tree": "^0.18.0",
@@ -75,7 +76,10 @@
     "type-fest": "^4.1.0",
     "typescript": "~5.0.4",
     "ufo": "^1.3.0",
-    "valtio": "^1.11.1",
-    "jest": "^29"
+    "@radix-ui/react-toast": "^1.1.5",
+    "valtio": "^1.11.1"
+  },
+  "dependencies": {
+    "cookie-es": "^1.0.0"
   }
 }

packages/devtools/client/src/components/Breadcrumbs.tsx

@@ -103,7 +103,7 @@ export const Breadcrumbs: React.FC<BreadcrumbProps> = props => {
     }
   }
   return (
-    <Flex align="center" height="8" gap="1" px="4" {...props}>
+    <Flex align="center" height="var(--space-8)" gap="1" px="4" {...props}>
       {elements}
     </Flex>
   );

packages/devtools/client/src/components/Card/Card.module.scss

@@ -0,0 +1,30 @@
+.card {
+  border: solid 1px var(--gray-4);
+  background-color: var(--gray-1);
+  border-radius: var(--radius-4);
+  padding: var(--space-3);
+  &[data-variant='indicate'] {
+    border-radius: var(--radius-5);
+    box-shadow: var(--shadow-4);
+    padding: var(--space-5);
+  }
+  &[data-variant='small'] {
+  }
+  &[data-inset='true'] {
+    padding: 0;
+  }
+  &[data-clickable='true'] {
+    cursor: pointer;
+    & * {
+      cursor: pointer;
+    }
+    &:active {
+      background-color: var(--gray-4);
+    }
+  }
+  &[data-selected='true'] {
+    border-color: var(--gray-8);
+    outline: solid 1px var(--gray-8);
+  }
+  transition: background-color 100ms;
+}

packages/devtools/client/src/components/Card/Card.tsx

@@ -0,0 +1,50 @@
+import { FC } from 'react';
+import clsx from 'clsx';
+import { Box, Flex } from '@radix-ui/themes';
+import type { BoxProps } from '@radix-ui/themes/dist/cjs/components/box';
+import type { FlexProps } from '@radix-ui/themes/dist/cjs/components/flex';
+import styles from './Card.module.scss';
+
+export interface CardProps
+  extends Omit<BoxProps, 'inset'>,
+    React.RefAttributes<HTMLDivElement> {
+  variant?: 'indicate' | 'small';
+  clickable?: boolean;
+  selected?: boolean;
+  inset?: boolean;
+}
+
+export const Card: FC<CardProps> = props => {
+  const {
+    children,
+    className,
+    variant,
+    clickable = false,
+    selected = false,
+    inset = false,
+    ...rest
+  } = props;
+  return (
+    <Box
+      {...rest}
+      data-variant={variant ?? ''}
+      data-clickable={clickable}
+      data-selected={selected}
+      data-inset={inset}
+      className={clsx(styles.card, className)}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export const CardColumn: FC<FlexProps> = props => (
+  <Flex
+    gap="2"
+    height="100%"
+    justify="center"
+    direction="column"
+    align="start"
+    {...props}
+  />
+);

packages/devtools/client/src/components/Card/index.ts

@@ -1 +1 @@
-export * from './Indicate';
+export * from './Card';

packages/devtools/client/src/components/Devtools/Capsule.tsx

@@ -12,6 +12,7 @@ import { useStickyDraggable } from '@/utils/draggable';
 import { $client, wallAgent } from '@/entries/mount/state';
 import { pTimeout } from '@/utils/promise';
 import { ReactDevtoolsWallListener } from '@/utils/react-devtools';
+import { useThemeAppearance } from '@/utils/theme';
 
 const parseDeepLink = (url = window.location) => {
   // Expected: #/__devtools/doctor
@@ -34,17 +35,7 @@ export const DevtoolsCapsule: React.FC<SetupClientParams> = props => {
 
   const draggable = useStickyDraggable({ clamp: true });
 
-  const [appearance, setAppearance] = useState<'light' | 'dark'>(() => {
-    const ret =
-      localStorage.getItem('__modern_js_devtools_appearance') ?? 'light';
-    localStorage.setItem('__modern_js_devtools_appearance', ret);
-    return ret as any;
-  });
-  useEvent('storage', (e: StorageEvent) => {
-    if (e.key === '__modern_js_devtools_appearance') {
-      setAppearance((e.newValue as any) || undefined);
-    }
-  });
+  const [appearance] = useThemeAppearance();
 
   useEvent('keydown', (e: KeyboardEvent) => {
     e.shiftKey && e.altKey && e.code === 'KeyD' && toggleDevtools();
@@ -90,7 +81,12 @@ export const DevtoolsCapsule: React.FC<SetupClientParams> = props => {
   }, []);
 
   return (
-    <Theme appearance={appearance} className={appearance}>
+    <Theme
+      appearance={appearance}
+      className={appearance}
+      hasBackground={false}
+      style={{ height: 0, width: 0, minHeight: 0, minWidth: 0 }}
+    >
       <Visible when={showDevtools} keepAlive={true} load={loadDevtools}>
         <div className={styles.container}>
           <FrameBox

packages/devtools/client/src/components/Devtools/FrameBox.tsx

@@ -1,18 +1,15 @@
-import { Box } from '@radix-ui/themes';
-import type { BoxProps } from '@radix-ui/themes/dist/cjs/components/box';
+import { Box, BoxProps } from '@radix-ui/themes';
 import React from 'react';
 import { HiMiniXMark } from 'react-icons/hi2';
 import { useSnapshot } from 'valtio';
 import { Loading } from '../Loading';
 import styles from './FrameBox.module.scss';
 import { $inner } from '@/entries/mount/state';
 
-export interface FrameBoxProps
-  extends BoxProps,
-    React.RefAttributes<HTMLDivElement> {
+export type FrameBoxProps = BoxProps & {
   src?: string;
   onClose?: () => void;
-}
+};
 
 export const FrameBox: React.FC<FrameBoxProps> = ({
   src,

packages/devtools/client/src/components/Error/Fallback.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FallbackProps } from 'react-error-boundary';
 import { useRouteError } from '@modern-js/runtime/router';
 import { Box, Heading, Text, TextArea } from '@radix-ui/themes';
@@ -28,5 +28,10 @@ export const ErrorFallback: React.FC<ErrorFallbackProps> = props => {
 
 export const ErrorRouteHandler: React.FC = () => {
   const error = useRouteError();
+
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
   return <ErrorFallback resetErrorBoundary={() => null} error={error} />;
 };

packages/devtools/client/src/components/Error/FeatureDisabled.tsx

@@ -11,11 +11,11 @@ export const FeatureDisabled: React.FC<FeatureDisabledProps> = props => {
   const { title, children } = props;
   return (
     <Flex className={styles.container} mt="9" mx="auto" gap="2">
-      <Flex height="9" align="center">
+      <Flex height="var(--space-9)" align="center">
         <HiExclamationCircle size="36" />
       </Flex>
       <Box>
-        <Flex height="9" align="center">
+        <Flex height="var(--space-9)" align="center">
           <Heading>{title}</Heading>
         </Flex>
         <Box className={styles.children}>{children}</Box>

packages/devtools/client/src/components/NavLink.tsx

@@ -3,15 +3,16 @@ import {
   NavLinkProps as RouterNavLinkProps,
 } from '@modern-js/runtime/router';
 import { Link as BaseLink } from '@radix-ui/themes';
-import type { LinkProps as BaseLinkProps } from '@radix-ui/themes/dist/esm/components/link';
+import type { LinkProps as BaseLinkProps } from '@radix-ui/themes';
 import React from 'react';
 
-// @ts-expect-error
-export interface NavLinkProps extends RouterNavLinkProps, BaseLinkProps {}
+export type NavLinkProps = RouterNavLinkProps &
+  BaseLinkProps &
+  React.RefAttributes<HTMLAnchorElement>;
 
 export const NavLink: React.FC<NavLinkProps> = React.forwardRef(
   ({ to, children, ...props }, ref) => (
-    <BaseLink {...(props as any)} asChild>
+    <BaseLink {...props} asChild>
       <RouterNavLink ref={ref} to={to}>
         {children}
       </RouterNavLink>

packages/devtools/client/src/components/PairsEditor/Editor.tsx

@@ -1,17 +1,16 @@
-import { Box } from '@radix-ui/themes';
-import type { BoxProps } from '@radix-ui/themes/dist/cjs/components/box';
+import { Box, BoxProps } from '@radix-ui/themes';
 import { nanoid } from 'nanoid';
 import React, { useEffect } from 'react';
 import { proxy, useSnapshot } from 'valtio';
 import styles from './Editor.module.scss';
 import { Pair } from './Pair';
 import { PairModel } from './types';
 
-export interface PairsEditorProps extends BoxProps {
+export type PairsEditorProps = BoxProps & {
   $data?: PairModel[];
   disabled?: boolean;
   placeholders?: [string, string];
-}
+};
 
 export const PairsEditor: React.FC<PairsEditorProps> = ({
   $data = proxy([]),

packages/devtools/client/src/components/PairsEditor/Pair.tsx

@@ -24,23 +24,19 @@ export const Pair: React.FC<PairProps> = ({
 
   return (
     <Box key={data.id} className={styles.inputPair} aria-disabled={disabled}>
-      <TextField.Root>
-        <TextField.Input
-          value={data.key}
+      <TextField.Root
+        value={data.key}
+        disabled={disabled}
+        placeholder={placeholders[0]}
+        onChange={e => ($data.key = e.currentTarget.value)}
+      />
+      <Box asChild flexGrow="1">
+        <TextField.Root
+          value={data.value}
           disabled={disabled}
-          placeholder={placeholders[0]}
-          onChange={e => ($data.key = e.currentTarget.value)}
+          placeholder={placeholders[1]}
+          onChange={e => ($data.value = e.currentTarget.value)}
         />
-      </TextField.Root>
-      <Box asChild grow="1">
-        <TextField.Root>
-          <TextField.Input
-            value={data.value}
-            disabled={disabled}
-            placeholder={placeholders[1]}
-            onChange={e => ($data.value = e.currentTarget.value)}
-          />
-        </TextField.Root>
       </Box>
       <Box className={styles.actions}>
         <IconButton variant="ghost" color="gray" onClick={onDelete}>

packages/devtools/client/src/components/ServerRoute/Base.tsx

@@ -40,7 +40,7 @@ export const BaseRoute: React.FC<BaseRouteProps> = ({
           >
             {title}
           </Text>
-          <Box grow="1" />
+          <Box flexGrow="1" />
           <Box className={styles.mark} data-open={isOpen}>
             <CaretSortIcon />
           </Box>