feat(devtools): merge mountpoint into client package

packages/devtools/mount/src/.eslintrc.js → packages/devtools/client/exports/.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',
+  },
 };

packages/devtools/client/exports/mount.mjs

@@ -0,0 +1,45 @@
+import { parseQuery } from 'ufo';
+import routesManifest from '../dist/routes-manifest.json';
+
+/**
+ * @param {import('@modern-js/devtools-kit').SetupClientOptions} options
+ */
+const mountDevTools = options => {
+  const container = document.createElement('div');
+  container.className = '_modern_js_devtools_container';
+  document.body.appendChild(container);
+
+  const shadow = container.attachShadow({ mode: 'closed' });
+
+  for (const asset of routesManifest.routeAssets.mount.assets) {
+    if (asset.endsWith('.js')) {
+      const el = document.createElement('script');
+      el.src = asset;
+      shadow.appendChild(el);
+    } else if (asset.endsWith('.css')) {
+      const el = document.createElement('link');
+      el.href = asset;
+      el.rel = 'stylesheet';
+      shadow.appendChild(el);
+    }
+  }
+
+  const app = document.createElement('div');
+  app.className = '_modern_js_devtools_mountpoint theme-register';
+  const appGlobalExport = `_modern_js_devtools_app`;
+  window[appGlobalExport] = {
+    container: app,
+    options,
+  };
+  shadow.appendChild(app);
+};
+
+try {
+  // eslint-disable-next-line no-undef
+  const opts = parseQuery(__resourceQuery);
+  mountDevTools(opts);
+} catch (err) {
+  const e = new Error('Failed to execute mount point of DevTools.');
+  e.cause = err;
+  console.error(e);
+}

packages/devtools/client/modern.config.ts

@@ -1,6 +1,6 @@
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { ROUTE_BASENAME } from '@modern-js/devtools-kit';
-import { version } from './package.json';
+import packageMeta from './package.json';
 
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig<'rspack'>({
@@ -14,12 +14,21 @@ export default defineConfig<'rspack'>({
     port: 8780,
   },
   source: {
+    mainEntryName: 'client',
+    entries: {
+      mount: {
+        entry: './src/mount/index.tsx',
+        disableMount: true,
+      },
+    },
     preEntry: [
       require.resolve('modern-normalize/modern-normalize.css'),
-      './src/styles/theme.scss',
+      require.resolve('@radix-ui/themes/styles.css'),
     ],
     globalVars: {
-      'process.env.PKG_VERSION': version,
+      'process.env.VERSION': packageMeta.version,
+      'process.env.PKG_VERSION': packageMeta.version,
+      'process.env.DEVTOOLS_MARK': 'friw89',
     },
   },
   output: {
@@ -29,6 +38,14 @@ export default defineConfig<'rspack'>({
     postcss: (config, { addPlugins }) => {
       addPlugins(require('postcss-custom-media'));
     },
+    bundlerChain(chain) {
+      chain.module
+        .rule('RADIX_TOKEN')
+        .test(/\/@radix-ui\/themes\/styles\.css/)
+        .use('RADIX_TOKEN')
+        .loader('./plugins/radix-token-transformer.js')
+        .options({ root: '.theme-register' });
+    },
   },
   plugins: [appTools({ bundler: 'experimental-rspack' })],
 });

packages/devtools/client/package.json

@@ -17,6 +17,12 @@
   "files": [
     "dist"
   ],
+  "main": "./dist/html/client/index.html",
+  "exports": {
+    ".": "./dist/html/client/index.html",
+    "./mount": "./exports/mount.mjs",
+    "./package.json": "./package.json"
+  },
   "dependencies": {},
   "devDependencies": {
     "@modern-js-app/eslint-config": "workspace:*",

packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/Stats.tsx → packages/devtools/client/src/client/components/ServerRoute/EntryRoute/ClientRoute/Stats.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { useSnapshot } from 'valtio';
 import { LegacyRouteStats } from './LegacyRoute/Stats';
 import { RemixRouteStats } from './RemixRoute/Stats';
-import { useStore } from '@/stores';
+import { useStore } from '@/client/stores';
 
 export interface ClientRouteStatsProps {
   route: ServerRoute;

packages/devtools/client/src/components/ServerRoute/EntryRoute/Stats.tsx → packages/devtools/client/src/client/components/ServerRoute/EntryRoute/Stats.tsx

@@ -4,7 +4,7 @@ import { useSnapshot } from 'valtio';
 import type { ServerRoute } from '@modern-js/types';
 import { Box, Flex, Strong, Text } from '@radix-ui/themes';
 import styles from './Stats.module.scss';
-import { useStore } from '@/stores';
+import { useStore } from '@/client/stores';
 
 export interface EntryStatsProps {
   route: ServerRoute;

packages/devtools/client/src/routes/config/[toolkit].[type]/page.tsx → packages/devtools/client/src/client/routes/config/[toolkit].[type]/page.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useSnapshot } from 'valtio';
 import { useParams } from '@modern-js/runtime/router';
-import { useStore } from '@/stores';
-import { ObjectInspector } from '@/components/ObjectInspector';
+import { useStore } from '@/client/stores';
+import { ObjectInspector } from '@/client/components/ObjectInspector';
 
 const Page: React.FC = () => {
   const $store = useStore();

packages/devtools/client/src/routes/context/builder/page.tsx → packages/devtools/client/src/client/routes/context/builder/page.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSnapshot } from 'valtio';
-import { useStore } from '@/stores';
-import { ObjectInspector } from '@/components/ObjectInspector';
+import { useStore } from '@/client/stores';
+import { ObjectInspector } from '@/client/components/ObjectInspector';
 
 const Page: React.FC = () => {
   const $store = useStore();

packages/devtools/client/src/routes/context/framework/page.tsx → packages/devtools/client/src/client/routes/context/framework/page.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSnapshot } from 'valtio';
-import { useStore } from '@/stores';
-import { ObjectInspector } from '@/components/ObjectInspector';
+import { useStore } from '@/client/stores';
+import { ObjectInspector } from '@/client/components/ObjectInspector';
 
 const Page: React.FC = () => {
   const $store = useStore();

packages/devtools/client/src/routes/context/layout.config.tsx → packages/devtools/client/src/client/routes/context/layout.config.tsx

@@ -1,4 +1,4 @@
-import { SelectLink } from '@/components/SelectLink';
+import { SelectLink } from '@/client/components/SelectLink';
 
 export const handle = {
   breadcrumb: [

packages/devtools/client/src/routes/layout.module.scss → packages/devtools/client/src/client/routes/layout.module.scss

@@ -1,4 +1,4 @@
-@import '@/styles/theme.scss';
+@import '@/client/styles/theme.scss';
 
 .wrapper {
   --navigator-width: var(--space-8);

packages/devtools/client/src/routes/layout.tsx → packages/devtools/client/src/client/routes/layout.tsx

@@ -1,5 +1,5 @@
-import './layout.css';
-import React from 'react';
+import '@/client/styles/theme.scss';
+import React, { useEffect } from 'react';
 import { NavLink, Outlet } from '@modern-js/runtime/router';
 import {
   Box,
@@ -11,10 +11,10 @@ import {
 } from '@radix-ui/themes';
 import { HiOutlineMoon, HiOutlineSun } from 'react-icons/hi2';
 import styles from './layout.module.scss';
-import { StoreContextProvider, useStoreSnapshot } from '@/stores';
-import { Theme } from '@/components/Theme';
-import { InternalTab } from '@/types';
-import { Breadcrumbs } from '@/components/Breadcrumbs';
+import { StoreContextProvider, useStoreSnapshot } from '@/client/stores';
+import { Theme } from '@/client/components/Theme';
+import { InternalTab } from '@/client/types';
+import { Breadcrumbs } from '@/client/components/Breadcrumbs';
 
 const NavigateButton: React.FC<{ tab: InternalTab }> = ({ tab }) => {
   let to = '';
@@ -26,6 +26,10 @@ const NavigateButton: React.FC<{ tab: InternalTab }> = ({ tab }) => {
     throw new Error(`Invalid tab view of "${tab.name}".`);
   }
 
+  useEffect(() => {
+    document.documentElement.classList.add('theme-register');
+  }, []);
+
   return (
     <Tooltip content={tab.title} side="right">
       <NavLink to={to} className={styles.tabButton}>

packages/devtools/client/src/routes/overview/page.tsx → packages/devtools/client/src/client/routes/overview/page.tsx

@@ -12,7 +12,7 @@ import { parseURL } from 'ufo';
 import { useSnapshot } from 'valtio';
 import srcHeading from './heading.svg';
 import styles from './page.module.scss';
-import { useStore } from '@/stores';
+import { useStore } from '@/client/stores';
 
 const BUNDLER_PACKAGE_NAMES = {
   webpack: 'webpack',

packages/devtools/client/src/routes/pages/page.tsx → packages/devtools/client/src/client/routes/pages/page.tsx

@@ -4,12 +4,12 @@ import { useSnapshot } from 'valtio';
 import { parseURL, withTrailingSlash } from 'ufo';
 import { HiOutlineArrowsRightLeft } from 'react-icons/hi2';
 import styles from './page.module.scss';
-import { useStore } from '@/stores';
+import { useStore } from '@/client/stores';
 import {
   MatchServerRouteValue,
   MatchUrlContext,
-} from '@/components/ServerRoute/Context';
-import { ServerRoute } from '@/components/ServerRoute/Route';
+} from '@/client/components/ServerRoute/Context';
+import { ServerRoute } from '@/client/components/ServerRoute/Route';
 
 const Page: React.FC = () => {
   const $store = useStore();

packages/devtools/client/src/rpc/index.ts → packages/devtools/client/src/client/rpc/index.ts

@@ -1,6 +1,6 @@
 import { ClientFunctions, ServerFunctions } from '@modern-js/devtools-kit';
 import { createBirpc } from 'birpc';
-import { StoreContextValue } from '@/types';
+import { StoreContextValue } from '@/client/types';
 
 export interface SetupOptions {
   url: string;

packages/devtools/client/src/stores/index.tsx → packages/devtools/client/src/client/stores/index.tsx

@@ -14,10 +14,10 @@ import {
   ClientDefinition,
 } from '@modern-js/devtools-kit';
 import { ref, useSnapshot } from 'valtio';
-import { setupServerConnection } from '@/rpc';
-import { useProxyFrom } from '@/utils/hooks';
-import { StoreContextValue } from '@/types';
-import { getDefaultTabs } from '@/constants';
+import { setupServerConnection } from '@/client/rpc';
+import { useProxyFrom } from '@/client/utils/hooks';
+import { StoreContextValue } from '@/client/types';
+import { getDefaultTabs } from '@/client/constants';
 
 const StoreContext = createContext<unknown>(null);
 

packages/devtools/client/src/styles/theme.scss → packages/devtools/client/src/client/styles/theme.scss

@@ -3,4 +3,4 @@
 
 button {
   cursor: pointer;
-}
+}

packages/devtools/client/src/modern-app-env.d.ts

@@ -1,3 +1,5 @@
 /// <reference types='@modern-js/app-tools/types' />
 /// <reference types='@modern-js/runtime/types' />
 /// <reference types='@modern-js/runtime/types/router' />
+
+declare let __resourceQuery: string;

packages/devtools/mount/src/components/Devtools/Action.tsx → packages/devtools/client/src/mount/components/Devtools/Action.tsx

@@ -1,13 +1,18 @@
-import { ROUTE_BASENAME, SetupClientOptions } from '@modern-js/devtools-kit';
+import {
+  ClientDefinition,
+  ROUTE_BASENAME,
+  SetupClientOptions,
+} from '@modern-js/devtools-kit';
 import React, { useState } from 'react';
 import { useEvent, useToggle } from 'react-use';
 import { Flex, Theme } from '@radix-ui/themes';
 import { parseURL, stringifyParsedURL, withQuery } from 'ufo';
+import _ from 'lodash';
 import Visible from '../Visible';
 import styles from './Action.module.scss';
 import { FrameBox } from './FrameBox';
 import { ReactComponent as DevToolsIcon } from './heading.svg';
-import { useStickyDraggable } from '@/utils/draggable';
+import { useStickyDraggable } from '@/mount/utils/draggable';
 
 const parseDataSource = (url: string) => {
   const newSrc = parseURL(url);
@@ -20,12 +25,13 @@ const parseDataSource = (url: string) => {
 };
 
 const DevtoolsAction: React.FC<SetupClientOptions> = props => {
-  const logoSrc = process.env._MODERN_DEVTOOLS_LOGO_SRC!;
   const opts: Required<SetupClientOptions> = {
     endpoint: 'https://modernjs.dev/devtools',
     ...props,
+    def: _(new ClientDefinition()).toPlainObject().merge(props.def).value(),
     dataSource: parseDataSource(props.dataSource ?? ''),
   };
+  const logoSrc = opts.def.assets.logo;
   const [showDevtools, toggleDevtools] = useToggle(false);
 
   let src = opts.endpoint;

packages/devtools/client/src/mount/index.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import DevtoolsAction from './components/Devtools/Action';
+
+// @ts-expect-error
+const { container, options } = window._modern_js_devtools_app;
+const root = createRoot(container);
+root.render(<DevtoolsAction {...options} />);

packages/devtools/client/tsconfig.json

@@ -9,5 +9,5 @@
       "@shared/*": ["./shared/*"]
     }
   },
-  "include": ["src", "shared", "config", "modern.config.ts"]
+  "include": ["src", "exports", "shared", "config", "modern.config.ts"]
 }

packages/devtools/kit/src/mount-point.ts

@@ -1,8 +1,11 @@
+import type { ClientDefinition } from './client';
+
 export interface MountPointFunctions {
   getLocation: () => string;
 }
 
 export interface SetupClientOptions extends Record<string, any> {
   endpoint?: string;
   dataSource?: string;
+  def?: ClientDefinition;
 }