feat(devtools): breadcrumb component for switch between tabs of react…

… devtools

packages/devtools/client/src/entries/client/routes/react/[tab]/layout.config.tsx

@@ -0,0 +1,17 @@
+import { SelectLink } from '@/components/SelectLink';
+
+export const handle = {
+  breadcrumb: [
+    { title: 'React' },
+    {
+      title: (
+        <SelectLink
+          items={[
+            { to: '/react/components', title: 'Components' },
+            { to: '/react/profiler', title: 'Profiler' },
+          ]}
+        />
+      ),
+    },
+  ],
+};

packages/devtools/client/src/entries/client/routes/react/[tab]/layout.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from '@modern-js/runtime/router';
+
+export default function Layout() {
+  return <Outlet />;
+}

packages/devtools/client/src/entries/client/routes/react/[tab]/page.tsx

@@ -0,0 +1,49 @@
+import { Box, useThemeContext } from '@radix-ui/themes';
+import React from 'react';
+import {
+  createBridge,
+  createStore,
+  initialize,
+} from 'react-devtools-inline/frontend';
+import { useAsync } from 'react-use';
+import { useParams } from '@modern-js/runtime/router';
+import { setupMountPointConnection } from '@/entries/client/rpc';
+
+const connTask = setupMountPointConnection();
+
+const Page: React.FC = () => {
+  const params = useParams();
+  const ctx = useThemeContext();
+  const browserTheme = ctx.appearance === 'light' ? 'light' : 'dark';
+
+  const { value: InnerView } = useAsync(async () => {
+    const { mountPoint, wall } = await connTask;
+    const bridge = createBridge(window.parent, wall);
+    const store = createStore(bridge);
+    const ret = initialize(window.parent, { bridge, store });
+    mountPoint.activateReactDevtools();
+    return ret;
+  }, []);
+
+  return (
+    <Box
+      style={{
+        position: 'fixed',
+        left: 'var(--navigator-width)',
+        top: 'var(--breadcrumb-height)',
+        bottom: 0,
+        right: 0,
+      }}
+    >
+      {InnerView && (
+        <InnerView
+          browserTheme={browserTheme}
+          overrideTab={params.tab === 'profiler' ? 'profiler' : 'components'}
+          hideSettings={false}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default Page;

packages/devtools/client/src/entries/client/routes/react/page.loader.ts

@@ -0,0 +1,7 @@
+import { LoaderFunctionArgs, redirect } from '@modern-js/runtime/router';
+import { resolveURL } from 'ufo';
+
+export default ({ request }: LoaderFunctionArgs) => {
+  const target = resolveURL(request.url, './components');
+  return redirect(target);
+};

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

@@ -1,43 +1 @@
-import { Box, useThemeContext } from '@radix-ui/themes';
-import React from 'react';
-import {
-  createBridge,
-  createStore,
-  initialize,
-} from 'react-devtools-inline/frontend';
-import { useAsync } from 'react-use';
-import { setupMountPointConnection } from '../../rpc';
-
-const connTask = setupMountPointConnection();
-
-const Page: React.FC = () => {
-  const ctx = useThemeContext();
-  const browserTheme = ctx.appearance === 'light' ? 'light' : 'dark';
-
-  const { value: InnerView } = useAsync(async () => {
-    const { mountPoint, wall } = await connTask;
-    const bridge = createBridge(window.parent, wall);
-    const store = createStore(bridge);
-    const ret = initialize(window.parent, { bridge, store });
-    mountPoint.activateReactDevtools();
-    return ret;
-  }, []);
-
-  return (
-    <Box
-      style={{
-        position: 'fixed',
-        left: 'var(--navigator-width)',
-        top: 'var(--breadcrumb-height)',
-        bottom: 0,
-        right: 0,
-      }}
-    >
-      {InnerView && (
-        <InnerView browserTheme={browserTheme} hideSettings={false} />
-      )}
-    </Box>
-  );
-};
-
-export default Page;
+export default null;