@modern-js/devtools-client 2.35.1 → 2.36.0

package/src/routes/overview/page.tsx

@@ -34,7 +34,7 @@ const Page: React.FC = () => {
   return (
     <Flex direction="column" align="center">
       <Flex gap="2">
-        <img src={store.assets.logo} />
+        <LogoImage src={store.assets.logo} />
         <LogoHeading src={srcHeading} />
       </Flex>
       <Description>
@@ -120,3 +120,9 @@ const Description = styled(Text)({
 const LogoHeading = styled.img({
   width: '10rem',
 });
+
+const LogoImage = styled.img({
+  width: '2rem',
+  height: '2rem',
+  objectFit: 'contain',
+});

package/src/routes/pages/EntryRoute/ClientRouteStats/RemixRoute.tsx

@@ -3,7 +3,7 @@ import { RouteObject } from '@modern-js/runtime/router';
 import { Box, Flex, Link, Code } from '@radix-ui/themes';
 import styled from '@emotion/styled';
 import _ from 'lodash';
-import { withoutTrailingSlash } from 'ufo';
+import { resolveURL } from 'ufo';
 import { useHoverDirty } from 'react-use';
 import { MatchRemixRouteContext } from '../MatchRemixRouteContext';
 
@@ -18,10 +18,8 @@ export const RemixRoute: React.FC<RemixRouteProps> = ({ route }) => {
     '_component' in curr && _.isString(curr._component)
       ? curr._component
       : null;
-  const displayPath = routes
-    .map(r => r.path && withoutTrailingSlash(r.path))
-    .filter(_.isString)
-    .join('/');
+  const displayPath =
+    resolveURL('/', ...routes.map(r => r.path).filter(_.isString)) || '/';
   const isIndex = curr.index ?? false;
   const isRoot = displayPath === '/';
   const matched = useContext(MatchRemixRouteContext);
@@ -35,7 +33,7 @@ export const RemixRoute: React.FC<RemixRouteProps> = ({ route }) => {
     <Box ref={ref}>
       <Flex gap="2" align="center" mb={curr.children && '1'}>
         <EndpointContainer data-miss-matched={isMatching && !isMatched}>
-          {!isRoot && (
+          {(isIndex && isRoot) || (
             <EndpointTag data-compose={isIndex && 'head'}>
               {displayPath}
             </EndpointTag>

package/src/routes/pages/EntryRoute/ClientRouteStats/RemixRouteStats.tsx

@@ -6,6 +6,7 @@ import {
 import type { ServerRoute } from '@modern-js/types';
 import { Flex } from '@radix-ui/themes';
 import React, { useContext, useMemo } from 'react';
+import { resolveURL, cleanDoubleSlashes } from 'ufo';
 import { MatchUrlContext } from '../../MatchUrl';
 import { MatchRemixRouteContext } from '../MatchRemixRouteContext';
 import { RemixRoute } from './RemixRoute';
@@ -22,7 +23,7 @@ export const RemixRouteStats: React.FC<RemixRouteStatsProps> = ({
   const testingUrl = useContext(MatchUrlContext);
   const matchedRoutes = useMemo(() => {
     if (!testingUrl || !remixRoutes) return [];
-    const location = testingUrl.replace(route.urlPath, '');
+    const location = cleanDoubleSlashes(testingUrl.replace(route.urlPath, '/'));
     const matched = matchRemixRoutes(remixRoutes, location) ?? [];
     return matched as RouteMatch<string, RouteObject>[];
   }, [remixRoutes, testingUrl]);
@@ -35,7 +36,7 @@ export const RemixRouteStats: React.FC<RemixRouteStatsProps> = ({
         {remixRoutes.map(r => (
           <RemixRoute
             key={r.id}
-            route={{ ...r, path: route.urlPath + (r.path ?? '') }}
+            route={{ ...r, path: resolveURL(route.urlPath, r.path ?? '') }}
           />
         ))}
       </Flex>

package/src/routes/pages/EntryRoute/EntryRoute.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Badge, Flex } from '@radix-ui/themes';
+import { Badge, Flex, Box } from '@radix-ui/themes';
 import { ServerRoute } from '@modern-js/types';
 import { BaseRoute } from '../BaseRoute';
 import { EntryStats } from './EntryStats';
@@ -14,7 +14,9 @@ const EntryRoute: React.FC<EntryRouteProps> = ({ route }) => {
     <BaseRoute badge={badge} route={route} title={route.urlPath}>
       <Flex direction="column" gap="2">
         <EntryStats route={route} />
-        <ClientRouteStats route={route} />
+        <Box style={{ overflow: 'scroll hidden' }}>
+          <ClientRouteStats route={route} />
+        </Box>
       </Flex>
     </BaseRoute>
   );

package/src/routes/pages/page.tsx

@@ -32,11 +32,13 @@ const Page: React.FC = () => {
           </TextField.Root>
         </Box>
         <Box height="2" />
-        <RoutesContainer>
-          {serverRoutes.map(route => (
-            <ServerRoute key={route.entryPath} route={route} />
-          ))}
-        </RoutesContainer>
+        <Box style={{ overflow: 'hidden scroll' }}>
+          <RoutesContainer>
+            {serverRoutes.map(route => (
+              <ServerRoute key={route.entryPath} route={route} />
+            ))}
+          </RoutesContainer>
+        </Box>
       </Container>
     </MatchUrlContext.Provider>
   );
@@ -44,11 +46,17 @@ const Page: React.FC = () => {
 
 export default Page;
 
-const Container = styled(Box)({});
+const Container = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+});
 
 const RoutesContainer = styled(Box)({
   display: 'flex',
+  flex: '0',
   flexDirection: 'column',
+  alignItems: 'stretch',
   gap: 'var(--space-2)',
   justifyContent: 'space-between',
 });