@modern-js/devtools-client 2.34.0 → 2.35.1

package/src/routes/overview/page.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { Box, Card, Flex, Text } from '@radix-ui/themes';
+import {
+  ArchiveIcon,
+  CubeIcon,
+  MixIcon,
+  GlobeIcon,
+} from '@radix-ui/react-icons';
+import { useSnapshot } from 'valtio';
+import styled from '@emotion/styled';
+import srcHeading from './heading.svg';
+import { useStore } from '@/stores';
+
+const BUNDLER_PACKAGE_NAMES = {
+  webpack: 'webpack',
+  rspack: '@rspack/core',
+} as const;
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  const { toolsType } = store.framework.context;
+  if (toolsType !== 'app-tools') {
+    throw Error();
+  }
+  const toolsPackage = store.packages.appTools;
+  const toolsPackageVer = store.dependencies[toolsPackage]!;
+
+  const { bundlerType } = store.builder.context;
+  const bundlerVer = store.dependencies[BUNDLER_PACKAGE_NAMES[bundlerType]];
+
+  const numFrameworkPlugin = store.framework.config.transformed.plugins.length;
+
+  return (
+    <Flex direction="column" align="center">
+      <Flex gap="2">
+        <img src={store.assets.logo} />
+        <LogoHeading src={srcHeading} />
+      </Flex>
+      <Description>
+        {store.name.formalName} DevTools v{store.version}
+      </Description>
+      <Flex wrap="wrap" gap="3" mt="7" width="100%" justify="center">
+        <Box>
+          <Indicator icon={<ArchiveIcon width="36" height="36" color="gray" />}>
+            Compiled with {(store.compileTimeCost / 1000).toFixed(2)}s
+          </Indicator>
+        </Box>
+        <Box>
+          <Indicator
+            title="Tools"
+            icon={<CubeIcon width="36" height="36" color="gray" />}
+          >
+            <Text color="gray" size="2">
+              <Box>
+                {toolsType}@{toolsPackageVer}
+              </Box>
+              <Box>
+                {bundlerType}@{bundlerVer}
+              </Box>
+              <Box>react@{store.dependencies.react}</Box>
+            </Text>
+          </Indicator>
+        </Box>
+        <Box>
+          <Indicator
+            title="Plugin"
+            icon={<MixIcon width="36" height="36" color="gray" />}
+          >
+            <Box>
+              <Text size="2" color="gray">
+                {numFrameworkPlugin} framework plugins
+              </Text>
+            </Box>
+            <Box>
+              <Text size="2" color="gray">
+                {store.framework.context.plugins.length} builder plugins
+              </Text>
+            </Box>
+          </Indicator>
+        </Box>
+        <Box>
+          <Indicator icon={<GlobeIcon width="36" height="36" color="gray" />}>
+            {store.framework.context.serverRoutes.length} Endpoints
+          </Indicator>
+        </Box>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Page;
+
+interface IndicatorProps extends React.PropsWithChildren {
+  title?: string;
+  icon: React.ReactElement;
+}
+
+const Indicator: React.FC<IndicatorProps> = ({ title, icon, children }) => {
+  return (
+    <Card>
+      <Flex gap="4" p="2">
+        <Flex align="center" direction="column" gap="1">
+          {icon}
+          <Text size="1" color="gray">
+            {title ?? children}
+          </Text>
+        </Flex>
+        {title && <Box>{children}</Box>}
+      </Flex>
+    </Card>
+  );
+};
+
+const Description = styled(Text)({
+  fontSize: 'var(--font-size-1)',
+  color: 'var(--gray-7)',
+});
+
+const LogoHeading = styled.img({
+  width: '10rem',
+});

package/src/routes/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, './overview');
+  return redirect(target);
+};

package/src/routes/page.tsx

@@ -0,0 +1 @@
+export default null;

package/src/routes/pages/BaseRoute.tsx

@@ -0,0 +1,87 @@
+import React, { useContext, useState } from 'react';
+import type { ServerRoute as IServerRoute } from '@modern-js/types';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { Box, Card, Text } from '@radix-ui/themes';
+import { CaretSortIcon } from '@radix-ui/react-icons';
+import { parseURL } from 'ufo';
+import styled from '@emotion/styled';
+import { MatchUrlContext } from './MatchUrl';
+
+export interface BaseRouteProps extends React.PropsWithChildren {
+  badge: React.ReactElement;
+  route: IServerRoute;
+  title: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export const BaseRoute: React.FC<BaseRouteProps> = ({
+  badge,
+  route,
+  title,
+  children,
+  open,
+  onOpenChange,
+}) => {
+  const url = useContext(MatchUrlContext);
+  const [_open, _setOpen] = useState(false);
+  const isMatching = Boolean(url);
+  const { pathname } = parseURL(url);
+  const isMatched =
+    pathname === route.urlPath || pathname.startsWith(`${route.urlPath}/`);
+  const isOpen = isMatched || (open ?? _open);
+
+  return (
+    <Container>
+      <Collapsible.Root open={isOpen} onOpenChange={onOpenChange ?? _setOpen}>
+        <CollapsibleTrigger>
+          {badge}
+          <UrlText data-miss-matched={isMatching && !isMatched}>
+            {title}
+          </UrlText>
+          <Box grow="1" />
+          <CollapsedMark open={isOpen}>
+            <CaretSortIcon />
+          </CollapsedMark>
+        </CollapsibleTrigger>
+        <CollapsibleContent>{children}</CollapsibleContent>
+      </Collapsible.Root>
+    </Container>
+  );
+};
+
+const Container = styled(Card)({
+  backgroundColor: '#181818',
+});
+
+const CollapsibleTrigger = styled(Collapsible.Trigger)({
+  all: 'unset',
+  width: '100%',
+  display: 'flex',
+  gap: 'var(--space-2)',
+  alignItems: 'center',
+});
+
+const CollapsibleContent = styled(Collapsible.Content)({
+  paddingTop: 'var(--space-2)',
+});
+
+const UrlText = styled(Text)({
+  color: 'var(--gray-12)',
+  fontSize: 'var(--font-size-2)',
+  transition: 'color 200ms',
+  '&[data-miss-matched="true"]': {
+    color: 'var(--gray-10)',
+  },
+});
+
+const CollapsedMark = styled(Box)<{ open?: boolean }>(props => ({
+  backgroundColor: props.open ? 'var(--gray-4)' : 'transparent',
+  height: 'var(--font-size-5)',
+  width: 'var(--font-size-5)',
+  borderRadius: 'var(--radius-2)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  transition: 'background-color 100ms',
+}));

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

@@ -0,0 +1,42 @@
+import { FileSystemRoutes } from '@modern-js/devtools-kit';
+import type { RouteLegacy, ServerRoute } from '@modern-js/types';
+import _ from 'lodash';
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { LegacyRouteStats } from './LegacyRouteStats';
+import { RemixRouteStats } from './RemixRouteStats';
+import { useStore } from '@/stores';
+
+export interface ClientRouteStatsProps {
+  route: ServerRoute;
+}
+
+export const ClientRouteStats: React.FC<ClientRouteStatsProps> = ({
+  route,
+}) => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  const { entrypoints } = store.framework.context;
+  const entrypoint =
+    route.entryName && _.find(entrypoints, { entryName: route.entryName });
+
+  if (!entrypoint) {
+    throw new Error(
+      `Can't found the entrypoint named ${JSON.stringify(route.entryName)}`,
+    );
+  }
+
+  const fileSystemRoute =
+    store.framework.fileSystemRoutes[entrypoint.entryName];
+
+  if (isLegacyRoutes(fileSystemRoute as any)) {
+    return <LegacyRouteStats />;
+  } else {
+    return (
+      <RemixRouteStats remixRoutes={fileSystemRoute as any} route={route} />
+    );
+  }
+};
+
+const isLegacyRoutes = (routes: FileSystemRoutes): routes is RouteLegacy[] =>
+  routes[0] && !('type' in routes[0]);

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Text } from '@radix-ui/themes';
+
+export const LegacyRouteStats: React.FC = () => {
+  return <Text>Unimplemented.</Text>;
+};

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

@@ -0,0 +1,85 @@
+import React, { useContext, useRef } from 'react';
+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 { useHoverDirty } from 'react-use';
+import { MatchRemixRouteContext } from '../MatchRemixRouteContext';
+
+export interface RemixRouteProps {
+  route: RouteObject | RouteObject[];
+}
+
+export const RemixRoute: React.FC<RemixRouteProps> = ({ route }) => {
+  const routes = _.castArray(route);
+  const curr = _.last(routes)!;
+  const componentFile =
+    '_component' in curr && _.isString(curr._component)
+      ? curr._component
+      : null;
+  const displayPath = routes
+    .map(r => r.path && withoutTrailingSlash(r.path))
+    .filter(_.isString)
+    .join('/');
+  const isIndex = curr.index ?? false;
+  const isRoot = displayPath === '/';
+  const matched = useContext(MatchRemixRouteContext);
+  const isMatching = matched.length > 0;
+  const isMatched = _.find(matched, { route: { id: curr.id } });
+
+  const ref = useRef<HTMLDivElement>(null);
+  const hovered = useHoverDirty(ref);
+
+  return (
+    <Box ref={ref}>
+      <Flex gap="2" align="center" mb={curr.children && '1'}>
+        <EndpointContainer data-miss-matched={isMatching && !isMatched}>
+          {!isRoot && (
+            <EndpointTag data-compose={isIndex && 'head'}>
+              {displayPath}
+            </EndpointTag>
+          )}
+          {isIndex && (
+            <EndpointTag color="purple" data-compose={!isRoot && 'tail'}>
+              /(index)
+            </EndpointTag>
+          )}
+        </EndpointContainer>
+        {hovered && componentFile && <ShyLink>{componentFile}</ShyLink>}
+      </Flex>
+      <Flex direction="column" gap="1">
+        {curr.children?.map(route => (
+          <RemixRoute key={route.id} route={routes.concat(route)} />
+        ))}
+      </Flex>
+    </Box>
+  );
+};
+
+const EndpointTag = styled(Code)({
+  fontSize: 'var(--font-size-2)',
+  '&[data-compose="head"]': {
+    paddingRight: '0',
+    borderTopRightRadius: '0',
+    borderBottomRightRadius: '0',
+  },
+  '&[data-compose="tail"]': {
+    paddingLeft: '0',
+    borderTopLeftRadius: '0',
+    borderBottomLeftRadius: '0',
+  },
+});
+
+const ShyLink = styled(Link)({
+  color: 'var(--gray-9)',
+  fontSize: 'var(--font-size-1)',
+});
+
+const EndpointContainer = styled(Box)({
+  display: 'flex',
+  transition: 'opacity 200ms',
+  '&[data-miss-matched="true"]': {
+    opacity: '0.5',
+  },
+});

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

@@ -0,0 +1,44 @@
+import {
+  RouteMatch,
+  RouteObject,
+  matchRoutes as matchRemixRoutes,
+} from '@modern-js/runtime/router';
+import type { ServerRoute } from '@modern-js/types';
+import { Flex } from '@radix-ui/themes';
+import React, { useContext, useMemo } from 'react';
+import { MatchUrlContext } from '../../MatchUrl';
+import { MatchRemixRouteContext } from '../MatchRemixRouteContext';
+import { RemixRoute } from './RemixRoute';
+
+export interface RemixRouteStatsProps {
+  remixRoutes: RouteObject[];
+  route: ServerRoute;
+}
+
+export const RemixRouteStats: React.FC<RemixRouteStatsProps> = ({
+  remixRoutes,
+  route,
+}) => {
+  const testingUrl = useContext(MatchUrlContext);
+  const matchedRoutes = useMemo(() => {
+    if (!testingUrl || !remixRoutes) return [];
+    const location = testingUrl.replace(route.urlPath, '');
+    const matched = matchRemixRoutes(remixRoutes, location) ?? [];
+    return matched as RouteMatch<string, RouteObject>[];
+  }, [remixRoutes, testingUrl]);
+
+  if (!remixRoutes.length) return null;
+
+  return (
+    <MatchRemixRouteContext.Provider value={matchedRoutes}>
+      <Flex gap="2" direction="column">
+        {remixRoutes.map(r => (
+          <RemixRoute
+            key={r.id}
+            route={{ ...r, path: route.urlPath + (r.path ?? '') }}
+          />
+        ))}
+      </Flex>
+    </MatchRemixRouteContext.Provider>
+  );
+};

package/src/routes/pages/EntryRoute/ClientRouteStats/index.ts

@@ -0,0 +1 @@
+export * from './ClientRouteStats';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Badge, Flex } from '@radix-ui/themes';
+import { ServerRoute } from '@modern-js/types';
+import { BaseRoute } from '../BaseRoute';
+import { EntryStats } from './EntryStats';
+import { ClientRouteStats } from './ClientRouteStats';
+
+export interface EntryRouteProps {
+  route: ServerRoute;
+}
+
+const EntryRoute: React.FC<EntryRouteProps> = ({ route }) => {
+  return (
+    <BaseRoute badge={badge} route={route} title={route.urlPath}>
+      <Flex direction="column" gap="2">
+        <EntryStats route={route} />
+        <ClientRouteStats route={route} />
+      </Flex>
+    </BaseRoute>
+  );
+};
+
+export default EntryRoute;
+
+const badge = <Badge color="cyan">Entry</Badge>;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import _ from 'lodash';
+import { useSnapshot } from 'valtio';
+import type { ServerRoute } from '@modern-js/types';
+import { Box, Card, Flex, Strong, Text } from '@radix-ui/themes';
+import styled from '@emotion/styled';
+import { useStore } from '@/stores';
+
+export interface EntryStatsProps {
+  route: ServerRoute;
+}
+
+export const EntryStats: React.FC<EntryStatsProps> = ({ route }) => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  const { entrypoints } = store.framework.context;
+  const entrypoint =
+    route.entryName && _.find(entrypoints, { entryName: route.entryName });
+
+  if (!entrypoint) {
+    throw new Error(
+      `Can't found the entrypoint named ${JSON.stringify(route.entryName)}`,
+    );
+  }
+
+  return (
+    <Stats>
+      <Box>
+        <Flex gap="1">
+          <Strong>Directory: </Strong>
+          <Text>{entrypoint.absoluteEntryDir}</Text>
+        </Flex>
+        <Flex gap="1">
+          <Strong>Entry:</Strong>
+          <Text>{entrypoint.entry}</Text>
+        </Flex>
+      </Box>
+    </Stats>
+  );
+};
+
+const Stats = styled(Card)({
+  fontSize: 'var(--font-size-1)',
+});

package/src/routes/pages/EntryRoute/MatchRemixRouteContext.ts

@@ -0,0 +1,6 @@
+import { RouteMatch, RouteObject } from '@modern-js/runtime/router';
+import { createContext } from 'react';
+
+export const MatchRemixRouteContext = createContext<
+  RouteMatch<string, RouteObject>[]
+>([]);

package/src/routes/pages/EntryRoute/index.ts

@@ -0,0 +1 @@
+export * from './EntryRoute';

package/src/routes/pages/MatchUrl.tsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const MatchUrlContext = createContext<string>('');

package/src/routes/pages/ServerRoute.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ServerRoute as IServerRoute } from '@modern-js/types';
+import _ from 'lodash';
+import EntryRoute from './EntryRoute/EntryRoute';
+import UnknownRoute from './UnknownRoute';
+
+export interface ServerRouteProps {
+  route: IServerRoute;
+}
+
+export const ServerRoute: React.FC<ServerRouteProps> = ({ route }) => {
+  return dispatchServerRoute(route);
+};
+
+const dispatchServerRoute = (route: IServerRoute) => {
+  if (_.isString(route.entryName)) {
+    return <EntryRoute route={route} />;
+  } else {
+    return <UnknownRoute route={route} />;
+  }
+};

package/src/routes/pages/UnknownRoute.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Badge, Card } from '@radix-ui/themes';
+import { ServerRoute } from '@modern-js/types';
+import { BaseRoute } from './BaseRoute';
+
+export interface UnknownRouteProps {
+  route: ServerRoute;
+}
+
+const UnknownRoute: React.FC<UnknownRouteProps> = ({ route }) => {
+  return (
+    <BaseRoute badge={badge} route={route} title={route.urlPath}>
+      <Card>Unknown route type.</Card>
+    </BaseRoute>
+  );
+};
+
+export default UnknownRoute;
+
+const badge = <Badge color="gray">Unknown</Badge>;

package/src/routes/pages/layout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from '@modern-js/runtime/router';
+import { ScrollArea } from '@radix-ui/themes';
+import { Suspense } from 'react';
+
+export default function Layout() {
+  return (
+    <ScrollArea scrollbars="both">
+      <Suspense fallback={'loading...'}>
+        <Outlet />
+      </Suspense>
+    </ScrollArea>
+  );
+}

package/src/routes/pages/page.tsx

@@ -0,0 +1,54 @@
+import styled from '@emotion/styled';
+import { Box, Text, TextField } from '@radix-ui/themes';
+import React, { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import { MatchUrlContext } from './MatchUrl';
+import { ServerRoute } from './ServerRoute';
+import { useStore } from '@/stores';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  const { serverRoutes } = store.framework.context;
+
+  const [testingUrl, setTestingUrl] = useState<string>('');
+
+  return (
+    <MatchUrlContext.Provider value={testingUrl}>
+      <Container>
+        <Box>
+          <TextField.Root>
+            <TextField.Slot>
+              <Text size="2">test:</Text>
+            </TextField.Slot>
+            <TextField.Input
+              placeholder="/foo?bar#baz"
+              onChange={e => setTestingUrl(e.target.value)}
+              type="search"
+              autoComplete="false"
+              autoCapitalize="false"
+              autoCorrect="false"
+            />
+          </TextField.Root>
+        </Box>
+        <Box height="2" />
+        <RoutesContainer>
+          {serverRoutes.map(route => (
+            <ServerRoute key={route.entryPath} route={route} />
+          ))}
+        </RoutesContainer>
+      </Container>
+    </MatchUrlContext.Provider>
+  );
+};
+
+export default Page;
+
+const Container = styled(Box)({});
+
+const RoutesContainer = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 'var(--space-2)',
+  justifyContent: 'space-between',
+});

package/src/rpc/index.ts

@@ -0,0 +1,36 @@
+import { ClientFunctions, ServerFunctions } from '@modern-js/devtools-kit';
+import { createBirpc } from 'birpc';
+import { StoreContextValue } from '@/types';
+
+export interface SetupOptions {
+  url: string;
+  $store: StoreContextValue;
+}
+
+export const setupServerConnection = async (options: SetupOptions) => {
+  const { url, $store } = options;
+  const ws = new window.WebSocket(url);
+
+  const server = createBirpc<ServerFunctions, ClientFunctions>(
+    {
+      refresh: () => location.reload(),
+      updateFileSystemRoutes({ entrypoint, routes }) {
+        $store.framework.fileSystemRoutes[entrypoint.entryName] = routes;
+      },
+    },
+    {
+      post: data => ws.send(data),
+      on: cb => (ws.onmessage = cb),
+      serialize: v => JSON.stringify(v),
+      deserialize: v => JSON.parse(v.data.toString()),
+    },
+  );
+
+  await new Promise<void>((resolve, reject) => {
+    ws.onopen = () => resolve();
+    ws.onerror = () =>
+      reject(new Error(`Failed connect to WebSocket server: ${url}`));
+  });
+
+  return { server };
+};