feat(devtools/doctor): improved setup guide

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

@@ -21,14 +21,12 @@ export const ErrorFallback: React.FC<ErrorFallbackProps> = props => {
       <Heading as="h4" mb="4">
         <Text as="span">{title}</Text>
       </Heading>
-      <TextArea disabled style={{ height: '50vh' }}>
-        {description}
-      </TextArea>
+      <TextArea disabled style={{ height: '50vh' }} value={description} />
     </Box>
   );
 };
 
-export const ErrorRouteHandler: React.FC<ErrorFallbackProps> = props => {
+export const ErrorRouteHandler: React.FC = () => {
   const error = useRouteError();
-  return <ErrorFallback {...props} error={error} />;
+  return <ErrorFallback resetErrorBoundary={() => null} error={error} />;
 };

packages/devtools/client/src/components/Error/FeatureDisabled.module.scss

@@ -0,0 +1,9 @@
+.container {
+  width: max-content;
+  min-width: var(--space-9);
+  color: var(--gray-11);
+}
+
+.children {
+  color: var(--gray-9);
+}

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

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from 'react';
+import { Box, Flex, Heading } from '@radix-ui/themes';
+import { HiExclamationCircle } from 'react-icons/hi2';
+import styles from './FeatureDisabled.module.scss';
+
+export interface FeatureDisabledProps extends PropsWithChildren {
+  title: string;
+}
+
+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">
+        <HiExclamationCircle size="36" />
+      </Flex>
+      <Box>
+        <Flex height="9" align="center">
+          <Heading>{title}</Heading>
+        </Flex>
+        <Box className={styles.children}>{children}</Box>
+      </Box>
+    </Flex>
+  );
+};

packages/devtools/client/src/entries/client/routes/config/error.tsx

@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/context/error.tsx

@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/doctor/error.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { useRouteError } from '@modern-js/runtime/router';
+import { Box, Link } from '@radix-ui/themes';
+import { useSnapshot } from 'valtio';
+import { parseURL } from 'ufo';
+import { $definition } from '../state';
+import {
+  ErrorFallbackProps,
+  ErrorRouteHandler,
+} from '@/components/Error/Fallback';
+import { FeatureDisabled } from '@/components/Error/FeatureDisabled';
+
+const Handler: FC<ErrorFallbackProps> = () => {
+  const error = useRouteError();
+  const def = useSnapshot($definition);
+  const isStateError =
+    error && typeof error === 'object' && Object.keys(error).length === 0;
+  if (isStateError) {
+    const websiteDisplay = parseURL(def.doctor.website).host;
+    const websiteLink = (
+      <Link href={def.doctor.website} target="_blank" rel="noopener noreferrer">
+        🔗{websiteDisplay}
+      </Link>
+    );
+    return (
+      <Box width="100%">
+        <FeatureDisabled title="Doctor is not working">
+          Visit the website of {websiteLink} to learn more.
+        </FeatureDisabled>
+      </Box>
+    );
+  } else {
+    return <ErrorRouteHandler />;
+  }
+};
+
+export default Handler;

packages/devtools/client/src/entries/client/routes/doctor/page.tsx

@@ -20,7 +20,7 @@ import {
 import _ from 'lodash';
 import { parseURL } from 'ufo';
 import clsx from 'clsx';
-import { $dependencies } from '../state';
+import { $definition, $dependencies } from '../state';
 import logo from './rsdoctor-large.png';
 import { $doctor } from './state';
 import styles from './page.module.scss';
@@ -79,11 +79,12 @@ const Page: FC = () => {
   const doctor = useSnapshot($doctor);
 
   const dependencies = useSnapshot($dependencies);
+  const def = useSnapshot($definition);
   const isWebDoctor = Object.keys(dependencies).find(key =>
     key.startsWith('@web-doctor/'),
   );
   const implementation = isWebDoctor ? 'Web Doctor' : 'Rsdoctor';
-  const website = 'https://rsdoctor.dev';
+  const { website } = def.doctor;
   const version =
     dependencies['@web-doctor/webpack-plugin(builder)'] ??
     dependencies['@web-doctor/rspack-plugin(builder)'] ??

packages/devtools/client/src/entries/client/routes/error.tsx

@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/headers/error.tsx

@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/overview/error.tsx

@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/pages/error.tsx

@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/react/error.tsx

@@ -1,3 +1,3 @@
-import { ErrorRouteHandler } from '@/components/ErrorFallback/ErrorFallback';
+import { ErrorRouteHandler } from '@/components/Error/Fallback';
 
 export default ErrorRouteHandler;

packages/devtools/client/src/entries/client/routes/state.tsx

@@ -154,6 +154,7 @@ export const $definition = proxy({
   packages: _definitionTask.then(def => def.packages),
   assets: _definitionTask.then(def => def.assets),
   announcement: _definitionTask.then(def => def.announcement),
+  doctor: _definitionTask.then(def => def.doctor),
 });
 
 export const _dependenciesTask = $server.then(({ remote }) =>

packages/devtools/kit/src/client.ts

@@ -39,13 +39,19 @@ export class AnnouncementDefinition {
   fallback: string = 'https://modernjs.dev/';
 }
 
+export class DoctorDefinition {
+  website: string = 'https://rsdoctor.dev';
+}
+
 export class ClientDefinition {
   name: NameDefinition = new NameDefinition();
 
   packages: PackageDefinition = new PackageDefinition();
 
   assets: AssetDefinition = new AssetDefinition();
 
+  doctor: DoctorDefinition = new DoctorDefinition();
+
   announcement: AnnouncementDefinition = new AnnouncementDefinition();
 }
 

packages/devtools/plugin/package.json

@@ -28,15 +28,18 @@
         "jsnext:source": "./src/index.ts",
         "require": "./dist/index.js"
       },
-      "default": "./dist/index.js"
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
     "./cli": {
       "jsnext:source": "./src/cli.ts",
-      "default": "./dist/cli.js"
+      "default": "./dist/cli.js",
+      "types": "./dist/cli.d.ts"
     },
     "./runtime": {
       "jsnext:source": "./src/runtime.ts",
-      "default": "./dist/runtime.js"
+      "default": "./dist/runtime.js",
+      "types": "./dist/runtime.d.ts"
     }
   },
   "scripts": {