@modern-js/devtools-client 2.34.0 → 2.35.0

package/modern.config.ts

@@ -1,18 +1,56 @@
+import { URL } from 'url';
+import path from 'path/posix';
+import { execSync } from 'child_process';
+import { logger } from '@modern-js/builder-shared';
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { proxyPlugin } from '@modern-js/plugin-proxy';
+import { version } from './package.json';
+
+const commitShort = execSync('git rev-parse --short=10 HEAD').toString().trim();
+if (!commitShort.match(/^\w{10}$/)) {
+  throw new Error("Can't resolve git commit hash.");
+}
+
+const basename = new URL(process.env.DEPLOY_HOST || 'https://modernjs.dev');
+if (process.env.BASENAME === 'version' || !process.env.BASENAME) {
+  basename.pathname = `/devtools/${version}`;
+} else if (process.env.BASENAME === 'commit') {
+  basename.pathname = `/devtools/${commitShort}`;
+} else if (process.env.BASENAME === 'false') {
+  basename.pathname = '/devtools';
+} else {
+  basename.pathname = path.resolve('/devtools', process.env.BASENAME);
+}
+
+logger.info(
+  `Access client:`,
+  `${basename.href}?src=ws://localhost:8080/_modern_js/devtools/rpc`,
+);
 
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig<'rspack'>({
   runtime: {
-    router: true,
+    router: {
+      basename: basename.pathname,
+    },
   },
   dev: {
     port: 8780,
-    assetPrefix: '/devtools',
+    assetPrefix: basename.pathname,
     proxy: {
-      'https://modernjs.dev/devtools': 'http://localhost:8780/devtools',
+      [basename.href]: new URL(basename.pathname, 'http://localhost:8780').href,
     },
   },
+  source: {
+    preEntry: [require.resolve('modern-normalize/modern-normalize.css')],
+    globalVars: {
+      'process.env.PKG_VERSION': `${version}-${commitShort}`,
+    },
+  },
+  output: {
+    assetPrefix: basename.href,
+    enableCssModuleTSDeclaration: true,
+  },
   tools: {
     devServer: {
       client: {
@@ -21,6 +59,7 @@ export default defineConfig<'rspack'>({
       },
     },
   },
+  html: {},
   plugins: [
     appTools({
       bundler: 'experimental-rspack',

package/package.json

@@ -1,15 +1,33 @@
 {
   "name": "@modern-js/devtools-client",
-  "version": "2.34.0",
+  "version": "2.35.0",
   "main": "./index.js",
   "engines": {
     "node": ">=14.0.0"
   },
   "dependencies": {
+    "birpc": "0.2.13",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/themes": "^1.1.2",
     "lodash": "^4.17.21",
+    "p-defer": "3.0.0",
     "react": "~18.2.0",
+    "react-base16-styling": "^0.9.1",
     "react-dom": "~18.2.0",
-    "@modern-js/runtime": "2.34.0"
+    "react-json-tree": "^0.18.0",
+    "react-json-view": "^1.21.3",
+    "react-use": "^17.4.0",
+    "suspend-react": "^0.1.3",
+    "ufo": "^1.2.0",
+    "valtio": "^1.11.1",
+    "@modern-js/devtools-kit": "2.35.0",
+    "@modern-js/runtime": "2.35.0",
+    "@modern-js/types": "2.35.0"
   },
   "devDependencies": {
     "@types/jest": "~29.2.4",
@@ -20,17 +38,19 @@
     "rimraf": "~3.0.2",
     "type-fest": "^4.1.0",
     "typescript": "~5.0.4",
-    "@modern-js/eslint-config": "2.34.0",
-    "@modern-js/plugin-proxy": "2.34.0",
-    "@modern-js/tsconfig": "2.34.0",
-    "@modern-js-app/eslint-config": "2.34.0",
-    "@modern-js/app-tools": "2.34.0",
-    "@modern-js/builder-rspack-provider": "2.34.0"
+    "@modern-js-app/eslint-config": "2.35.0",
+    "@modern-js/builder-shared": "2.35.0",
+    "@modern-js/builder-rspack-provider": "2.35.0",
+    "@modern-js/eslint-config": "2.35.0",
+    "@modern-js/plugin-proxy": "2.35.0",
+    "@modern-js/tsconfig": "2.35.0",
+    "@modern-js/app-tools": "2.35.0"
   },
   "scripts": {
     "reset": "npx rimraf ./**/node_modules",
     "dev": "modern dev",
     "build": "modern build",
+    "deploy": "pnpm build && node scripts/build-redirects.js",
     "start": "modern start",
     "serve": "modern serve",
     "new": "modern new",

package/scripts/build-redirects.js

@@ -0,0 +1,32 @@
+const fs = require('fs');
+const path = require('path/posix');
+const { routes } = require('../dist/route.json');
+
+/** @type {{ from: string; to: string; code: number; force?: boolean }[]} */
+const redirects = [];
+
+for (const route of routes) {
+  if (route.isSSR) {
+    // Unimplemented.
+  } else if (route.isStream) {
+    // Unimplemented.
+  } else if (route.isSPA) {
+    redirects.push({
+      from: path.join(route.urlPath, '*'),
+      to: route.entryPath,
+      code: 200,
+    });
+  } else {
+    // Unimplemented.
+  }
+}
+
+const output = redirects
+  .map(r => `${r.from} ${r.to} ${r.code}${r.force ? '!' : ''}`)
+  .join('\n');
+fs.writeFileSync(
+  path.resolve(__dirname, '../dist/_redirects'),
+  output,
+  'utf-8',
+);
+console.log(`Created _redirects file with rules:\n`, output);

package/src/.eslintrc.js

@@ -1,3 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
 // eslint-disable-next-line import/no-commonjs
 module.exports = {
   root: true,
@@ -6,4 +7,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: ['../tsconfig.json'],
   },
+  rules: {
+    curly: 'off',
+  },
 };

package/src/components/Breadcrumbs.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Button, Flex } from '@radix-ui/themes';
+import { ChevronRightIcon } from '@radix-ui/react-icons';
+import type { ButtonProps } from '@radix-ui/themes/dist/cjs/components/button';
+
+export type BreadcrumbButtonProps = ButtonProps &
+  React.RefAttributes<HTMLButtonElement>;
+
+export const BreadcrumbButton: React.FC<BreadcrumbButtonProps> = props => {
+  return <Button color="gray" size="1" variant="ghost" {...props} />;
+};
+
+export interface BreadcrumbsProps {
+  children?: React.ReactElement[];
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children = [] }) => {
+  const elements: React.ReactElement[] = [];
+  for (const child of children) {
+    elements.push(child);
+    if (child !== children.at(-1)) {
+      elements.push(<Connector key={`${child.key}__connector`} />);
+    }
+  }
+  return (
+    <Flex align="center" gap="1">
+      {elements}
+    </Flex>
+  );
+};
+
+(Breadcrumbs as any).Button = BreadcrumbButton;
+
+export default Breadcrumbs as typeof Breadcrumbs & {
+  Button: typeof BreadcrumbButton;
+};
+
+const Connector = styled(ChevronRightIcon)({
+  width: 'var(--font-size-2)',
+  height: 'var(--font-size-2)',
+  color: 'var(--gray-6)',
+});

package/src/components/ObjectInspector.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import { Box } from '@radix-ui/themes';
+import type { Theme } from 'react-base16-styling';
+import { JSONTree } from 'react-json-tree';
+
+const theme: Theme = {
+  scheme: 'tomorrow',
+  author: 'chris kempson (http://chriskempson.com)',
+  base00: 'transparent',
+  base01: '#282a2e',
+  base02: '#373b41',
+  base03: '#969896',
+  base04: '#b4b7b4',
+  base05: '#c5c8c6',
+  base06: '#e0e0e0',
+  base07: '#ffffff',
+  base08: '#cc6666',
+  base09: '#de935f',
+  base0A: '#f0c674',
+  base0B: '#b5bd68',
+  base0C: '#8abeb7',
+  base0D: '#81a2be',
+  base0E: '#b294bb',
+  base0F: '#a3685a',
+};
+
+const Container = styled(Box)({
+  fontSize: 'var(--font-size-2)',
+});
+
+export const ObjectInspector: typeof JSONTree = props => {
+  return (
+    <Container>
+      <JSONTree theme={theme} {...props} />
+    </Container>
+  );
+};

package/src/constants.tsx

@@ -0,0 +1,34 @@
+import {
+  HomeIcon,
+  MixerHorizontalIcon,
+  FileTextIcon,
+  CubeIcon,
+} from '@radix-ui/react-icons';
+import { InternalTab } from './types';
+
+export const getDefaultTabs = (): InternalTab[] => [
+  {
+    name: 'overview',
+    title: 'Overview',
+    icon: <HomeIcon />,
+    view: { type: 'builtin', url: '/overview' },
+  },
+  {
+    name: 'config',
+    title: 'Config',
+    icon: <MixerHorizontalIcon />,
+    view: { type: 'builtin', url: '/config' },
+  },
+  {
+    name: 'pages',
+    title: 'Pages',
+    icon: <FileTextIcon />,
+    view: { type: 'builtin', url: '/pages' },
+  },
+  {
+    name: 'context',
+    title: 'Context',
+    icon: <CubeIcon />,
+    view: { type: 'builtin', url: '/context' },
+  },
+];

package/src/routes/RootTabs.tsx

@@ -0,0 +1,148 @@
+import { Suspense } from 'react';
+import styled from '@emotion/styled';
+import { useSnapshot } from 'valtio';
+import { Outlet, useNavigate, useLocation } from '@modern-js/runtime/router';
+import { Box, Text, Button } from '@radix-ui/themes';
+import _ from 'lodash';
+import { GearIcon, HomeIcon } from '@radix-ui/react-icons';
+import { useStore } from '@/stores';
+import { InternalTab } from '@/types';
+import Breadcrumbs from '@/components/Breadcrumbs';
+
+export const RootTabs: React.FC = () => {
+  const $store = useStore();
+  const tabs = useSnapshot($store.tabs);
+
+  const navigate = useNavigate();
+  const location = useLocation();
+  const currentTabName = location.pathname.split('/').filter(Boolean)[0];
+  const currentTab = _.find(tabs, { name: currentTabName });
+
+  const handleClick = (tab: InternalTab) => {
+    if (tab.view.type === 'builtin') {
+      navigate(tab.view.url);
+    } else {
+      throw new Error('Unimplemented.');
+    }
+  };
+
+  return (
+    <TabRoot>
+      <TabNavigator>
+        <TabList style={{ touchAction: 'none' }}>
+          <TabBrand>
+            <IconBox>🌰</IconBox>
+            DevTools
+          </TabBrand>
+        </TabList>
+        <TabList>
+          {tabs.map(tab => (
+            <TabTrigger
+              key={tab.name}
+              value={tab.name}
+              onClick={() => handleClick(tab as any)}
+            >
+              <IconBox>{tab.icon as any}</IconBox>
+              {tab.title}
+            </TabTrigger>
+          ))}
+        </TabList>
+        <Box grow="1" />
+        <SettingButton>
+          <GearIcon />
+          <Text>Settings</Text>
+        </SettingButton>
+      </TabNavigator>
+      <TabContent>
+        <Box grow="0">
+          <Breadcrumbs>
+            <Breadcrumbs.Button onClick={() => navigate('overview')}>
+              <HomeIcon />
+            </Breadcrumbs.Button>
+            <Breadcrumbs.Button>{currentTab?.title}</Breadcrumbs.Button>
+          </Breadcrumbs>
+        </Box>
+        <Box grow="1" style={{ overflow: 'hidden' }}>
+          <Suspense fallback={<div>loading...</div>}>
+            <Outlet />
+          </Suspense>
+        </Box>
+      </TabContent>
+    </TabRoot>
+  );
+};
+
+const SettingButton = styled(Button)({
+  '--accent-9': 'var(--gray-5)',
+  '--accent-10': 'var(--gray-6)',
+});
+
+const IconBox = styled(Box)({
+  width: '2rem',
+  height: '2rem',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const TabNavigator = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 'var(--block-gap)',
+});
+
+const TabRoot = styled(Box)({
+  '--block-gap': '0.5rem',
+  '--block-color': '#121212',
+  display: 'flex',
+  padding: 'var(--block-gap)',
+  gap: 'var(--block-gap)',
+  alignItems: 'stretch',
+  height: '100%',
+  width: '100%',
+});
+
+const TabList = styled(Box)({
+  flex: 'none',
+  width: '10rem',
+  height: 'min-content',
+  backgroundColor: 'var(--block-color)',
+  borderRadius: 'var(--radius-4)',
+});
+
+const TabTrigger = styled.button({
+  border: 'none',
+  backgroundColor: 'transparent',
+  display: 'flex',
+  alignItems: 'center',
+  height: '3rem',
+  width: '100%',
+  color: 'var(--gray-11)',
+  fontSize: 'var(--font-size-2)',
+  transition: 'color 200ms',
+  fontWeight: 'bold',
+  cursor: 'pointer',
+  ':focus': {
+    color: 'white',
+  },
+});
+
+const TabBrand = styled(TabTrigger)({
+  color: 'var(--gray-10)',
+  cursor: 'default',
+  ':focus': {
+    color: 'var(--gray-10)',
+  },
+});
+
+const TabContent = styled(Box)({
+  flex: 1,
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  display: 'flex',
+  gap: 'var(--space-3)',
+  overflow: 'hidden',
+  backgroundColor: 'var(--block-color)',
+  borderRadius: 'var(--radius-4)',
+  padding: '1rem',
+});

package/src/routes/config/builder/resolved/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.builder.config.resolved}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/builder/transformed/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.builder.config.transformed}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/bundler/resolved/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.bundler.config.resolved}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/bundler/transformed/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.bundler.config.transformed}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/framework/resolved/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.framework.config.resolved}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/framework/transformed/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.framework.config.transformed}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/layout.tsx

@@ -0,0 +1,68 @@
+import { Suspense } from 'react';
+import { Outlet, useNavigate } from '@modern-js/runtime/router';
+import { Box, ScrollArea, Select } from '@radix-ui/themes';
+import styled from '@emotion/styled';
+
+export default function Layout() {
+  const navigate = useNavigate();
+  const handleSelect = (route: string) => {
+    navigate(route);
+  };
+  return (
+    <Container>
+      <Box grow="0">
+        <Select.Root
+          onValueChange={handleSelect}
+          defaultValue="builder/transformed"
+        >
+          <Select.Trigger />
+          <Select.Content position="popper">
+            <Select.Group>
+              <Select.Label>Framework</Select.Label>
+              <Select.Item value="framework/resolved">
+                Resolved Framework Config
+              </Select.Item>
+              <Select.Item value="framework/transformed">
+                Transformed Framework Config
+              </Select.Item>
+            </Select.Group>
+            <Select.Separator />
+            <Select.Group>
+              <Select.Label>Builder</Select.Label>
+              <Select.Item value="builder/resolved">
+                Resolved Builder Config
+              </Select.Item>
+              <Select.Item value="builder/transformed">
+                Transformed Builder Config
+              </Select.Item>
+            </Select.Group>
+            <Select.Separator />
+            <Select.Group>
+              <Select.Label>Bundler</Select.Label>
+              <Select.Item value="bundler/resolved">
+                Resolved Bundler Configs
+              </Select.Item>
+              <Select.Item value="bundler/transformed">
+                Transformed Bundler Configs
+              </Select.Item>
+            </Select.Group>
+          </Select.Content>
+        </Select.Root>
+      </Box>
+      <Box grow="1" asChild>
+        <ScrollArea scrollbars="both">
+          <Suspense fallback={'loading...'}>
+            <Outlet />
+          </Suspense>
+        </ScrollArea>
+      </Box>
+    </Container>
+  );
+}
+
+const Container = styled(Box)({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+});

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

package/src/routes/config/page.tsx

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

package/src/routes/context/builder/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return <ObjectInspector data={store.builder.context} sortObjectKeys={true} />;
+};
+
+export default Page;

package/src/routes/context/framework/page.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector data={store.framework.context} sortObjectKeys={true} />
+  );
+};
+
+export default Page;