feat: add draggable FAB & better plugin typings and definition (#4683)

* feat: re-organize exports * build: update pnpm lock file * fix: can't resolve main * feat: auto configure devtools data source hostname * feat: sizing logo image * fix: disable rspack to fix resolve issues * feat: remove settings button * feat: make action button draggable * feat: add box shadow for framebox * feat: use environment variable `HASH_SUFFIXED_VERSION` control whether use hash suffix for version * build: update pnpm lock file * feat: re-export type `Options` * fix: property `devtools` is missing in return type * build: update pnpm lock file * feat: hosting client in local * build: remove plugin devtools from the dependencies of app tools * fix: not found export `RPC_SERVER_PATHNAME` * feat: disable dynamic prefix * build: update pnpm lock file
web-infra-dev · Sep 21, 2023 · 8b340a4 · 8b340a4
1 parent 2675812
commit 8b340a4
Show file tree

Hide file tree

Showing 22 changed files with 432 additions and 298 deletions.
diff --git a/.github/workflows/build-devtools-website.yml b/.github/workflows/build-devtools-website.yml
diff --git a/packages/devtools/client/modern.config.ts b/packages/devtools/client/modern.config.ts
@@ -1,69 +1,29 @@
-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: {
-      basename: basename.pathname,
+      basename: '/_modern_js/devtools',
     },
   },
   dev: {
+    assetPrefix: '/_modern_js/devtools',
     port: 8780,
-    assetPrefix: basename.pathname,
-    proxy: {
-      [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}`,
+      'process.env.PKG_VERSION': version,
     },
   },
   output: {
-    assetPrefix: basename.href,
+    assetPrefix: '/_modern_js/devtools',
     enableCssModuleTSDeclaration: true,
   },
-  tools: {
-    devServer: {
-      client: {
-        host: 'localhost',
-        protocol: 'ws',
-      },
-    },
-  },
+  tools: {},
   html: {},
-  plugins: [
-    appTools({
-      bundler: 'experimental-rspack',
-    }),
-    proxyPlugin(),
-  ],
+  plugins: [appTools({ bundler: 'experimental-rspack' }), proxyPlugin()],
 });
diff --git a/packages/devtools/client/package.json b/packages/devtools/client/package.json
@@ -6,7 +6,6 @@
     "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",
@@ -16,7 +15,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "dependencies": {
+  "devDependencies": {
     "birpc": "0.2.13",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -38,9 +37,7 @@
     "react-use": "^17.4.0",
     "suspend-react": "^0.1.3",
     "ufo": "^1.2.0",
-    "valtio": "^1.11.1"
-  },
-  "devDependencies": {
+    "valtio": "^1.11.1",
     "@modern-js-app/eslint-config": "workspace:*",
     "@modern-js/app-tools": "workspace:*",
     "@modern-js/builder-shared": "workspace:*",

diff --git a/packages/devtools/client/src/routes/RootTabs.tsx b/packages/devtools/client/src/routes/RootTabs.tsx
@@ -2,9 +2,9 @@ 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 { Box } from '@radix-ui/themes';
 import _ from 'lodash';
-import { GearIcon, HomeIcon } from '@radix-ui/react-icons';
+import { HomeIcon } from '@radix-ui/react-icons';
 import { useStore } from '@/stores';
 import { InternalTab } from '@/types';
 import Breadcrumbs from '@/components/Breadcrumbs';
@@ -48,10 +48,6 @@ export const RootTabs: React.FC = () => {
           ))}
         </TabList>
         <Box grow="1" />
-        <SettingButton>
-          <GearIcon />
-          <Text>Settings</Text>
-        </SettingButton>
       </TabNavigator>
       <TabContent>
         <Box grow="0">
@@ -72,11 +68,6 @@ export const RootTabs: React.FC = () => {
   );
 };
 
-const SettingButton = styled(Button)({
-  '--accent-9': 'var(--gray-5)',
-  '--accent-10': 'var(--gray-6)',
-});
-
 const IconBox = styled(Box)({
   width: '2rem',
   height: '2rem',

diff --git a/packages/devtools/client/src/routes/overview/page.tsx b/packages/devtools/client/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',
+});
diff --git a/packages/devtools/kit/src/types/mount-point.ts b/packages/devtools/kit/src/types/mount-point.ts
@@ -1,14 +1,10 @@
 import _ from '@modern-js/utils/lodash';
-import { parseURL, stringifyParsedURL } from 'ufo';
 
 export interface MountPointFunctions {
   getLocation: () => string;
 }
 
-export interface SetupClientOptions {
+export interface SetupClientOptions extends Record<string, any> {
   endpoint?: string;
-
-  version?: string | boolean;
-
   dataSource?: string;
 }
diff --git a/packages/devtools/mount/src/components/Devtools/Action.module.scss b/packages/devtools/mount/src/components/Devtools/Action.module.scss
@@ -17,4 +17,27 @@
   position: fixed;
   bottom: 10px;
   right: 10px;
+  width: max-content;
+  height: max-content;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
+  border: 1px solid #011c64;
+  background: linear-gradient(to bottom, #212121, #1e1e1e, #212121);
+  box-shadow: 0 0 3px #011c64;
+  color: #b8b9bb;
+  border-radius: 999px;
+  align-items: center;
+}
+
+.fab :global(*) {
+  user-select: none;
+  pointer-events: none;
 }
+
+.logo {
+  width: 1.5rem;
+  height: 1.5rem;
+  object-fit: contain;
+}
diff --git a/packages/devtools/mount/src/components/Devtools/Action.module.scss.d.ts b/packages/devtools/mount/src/components/Devtools/Action.module.scss.d.ts
@@ -3,6 +3,7 @@
 interface CssExports {
   container: string;
   fab: string;
+  logo: string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/packages/devtools/mount/src/components/Devtools/Action.tsx b/packages/devtools/mount/src/components/Devtools/Action.tsx
@@ -1,41 +1,105 @@
 import React from 'react';
-import { useToggle } from 'react-use';
-import { joinURL, withQuery } from 'ufo';
+import { useGetSet, useToggle } from 'react-use';
+import { withQuery, stringifyParsedURL, parseURL } from 'ufo';
 import { SetupClientOptions } from '@modern-js/devtools-kit';
 import Visible from '../Visible';
 import styles from './Action.module.scss';
 import FrameBox from './FrameBox';
 
-const getDefaultRPC = () => {
-  const url = new URL('ws://localhost/_modern_js/devtools/rpc');
-  url.protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-  url.host = location.host;
-  return url.href;
+const parseDataSource = (url: string) => {
+  const newSrc = parseURL(url);
+  return stringifyParsedURL({
+    protocol: location.protocol === 'https:' ? 'wss:' : 'ws:',
+    host: location.host,
+    ...newSrc,
+    pathname: newSrc.pathname || '/_modern_js/devtools/rpc',
+  });
+};
+
+const useStickyDraggable = () => {
+  const [isDragging, setIsDragging] = useGetSet(false);
+  const handleMouseDown = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    const target = e.currentTarget;
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    const { offsetX, offsetY } = e.nativeEvent;
+    const handleMousemove = (e: MouseEvent) => {
+      if (e.movementX + e.movementY > 1) {
+        setIsDragging(true);
+      }
+
+      const x = e.clientX - offsetX;
+      const y = e.clientY - offsetY;
+      const distances = [
+        { prop: 'top', value: e.clientY } as const,
+        { prop: 'bottom', value: window.innerHeight - e.clientY } as const,
+        { prop: 'left', value: e.clientX } as const,
+        { prop: 'right', value: window.innerWidth - e.clientX } as const,
+      ];
+      const [primary, ...rest] = distances.sort((a, b) => a.value - b.value);
+      target.style[primary.prop] = '10px';
+      for (const unset of rest) {
+        target.style.removeProperty(unset.prop);
+      }
+      if (['top', 'bottom'].includes(primary.prop)) {
+        target.style.left = `${x}px`;
+      } else {
+        target.style.top = `${y}px`;
+      }
+    };
+    window.addEventListener('mousemove', handleMousemove);
+    window.addEventListener('blur', () => {
+      setTimeout(() => setIsDragging(false), 0);
+      window.removeEventListener('mousemove', handleMousemove);
+    });
+    window.addEventListener(
+      'mouseup',
+      () => {
+        setTimeout(() => setIsDragging(false), 0);
+        window.removeEventListener('mousemove', handleMousemove);
+      },
+      { once: true },
+    );
+  };
+  return {
+    onMouseDown: handleMouseDown,
+    isDragging: isDragging(),
+  };
 };
 
 const DevtoolsAction: React.FC<SetupClientOptions> = props => {
-  const version = process.env.VERSION!;
+  const logoSrc = process.env._MODERN_DEVTOOLS_LOGO_SRC!;
   const opts: Required<SetupClientOptions> = {
-    version,
-    dataSource: getDefaultRPC(),
     endpoint: 'https://modernjs.dev/devtools',
     ...props,
+    dataSource: parseDataSource(props.dataSource ?? ''),
   };
   const [showDevtools, toggleDevtools] = useToggle(false);
 
-  const ver = opts.version === true ? version : opts.version;
   let src = opts.endpoint;
-  ver && (src = joinURL(src, ver));
   src = withQuery(src, { src: opts.dataSource });
 
+  const { isDragging, onMouseDown } = useStickyDraggable();
+
   return (
     <>
-      <div className={styles.fab}>
-        <button onClick={toggleDevtools}>Toggle DevTools</button>
-      </div>
+      <button
+        className={styles.fab}
+        onClick={() => {
+          isDragging || toggleDevtools();
+        }}
+        onMouseDown={onMouseDown}
+      >
+        <img className={styles.logo} src={logoSrc} alt="" />
+        <span>Toggle DevTools</span>
+      </button>
       <Visible when={showDevtools} keepAlive={true}>
         <div className={styles.container}>
-          <FrameBox src={src} />
+          <FrameBox
+            src={src}
+            style={{ pointerEvents: isDragging ? 'none' : 'auto' }}
+          />
         </div>
       </Visible>
     </>