Skip to content

Commit

Permalink
feat(devtools): integrate react devtools (#5042)
Browse files Browse the repository at this point in the history
  • Loading branch information
Asuka109 authored Dec 6, 2023
1 parent e57648e commit 4ee48fb
Show file tree
Hide file tree
Showing 108 changed files with 686 additions and 445 deletions.
86 changes: 54 additions & 32 deletions packages/devtools/client/exports/mount.mjs
Original file line number Diff line number Diff line change
@@ -1,41 +1,63 @@
/* WARNING: NO ES6 SYNTAX HERE!!! */
/* eslint-disable no-inner-declarations */
/* eslint-disable no-var */
import { initialize } from 'react-devtools-inline/backend';
import routesManifest from '../dist/routes-manifest.json';

(function () {
if (!window.opener) {
try {
var container = document.createElement('div');
container.className = '_modern_js_devtools_container';
document.body.appendChild(container);

var shadow = container.attachShadow({ mode: 'closed' });

routesManifest.routeAssets.mount.assets.forEach(function (asset) {
var el;
if (asset.endsWith('.js')) {
el = document.createElement('script');
el.src = asset;
} else if (asset.endsWith('.css')) {
el = document.createElement('link');
el.href = asset;
el.rel = 'stylesheet';
// Delete existing devtools hooks registered by react devtools extension.
try {
delete window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
} catch {}
// Call this before importing React (or any other packages that might import React).
initialize(window);
// Deny react devtools extension to activate.
const originSubHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.sub;
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.sub = (e, handler) => {
if (e === 'devtools-backend-installed') {
return undefined;
}
shadow.appendChild(el);
});

var app = document.createElement('div');
app.className = '_modern_js_devtools_mountpoint theme-register';
var appGlobalExport = '_modern_js_devtools_app';
window[appGlobalExport] = {
container: app,
// eslint-disable-next-line no-undef
resourceQuery: __resourceQuery,
return originSubHook(e, handler);
};
shadow.appendChild(app);
} catch (err) {
var e = new Error('Failed to execute mount point of DevTools.');
const e = new Error('Failed to inject React DevTools backend.');
e.cause = err;
console.error(e);
}
})();
}

try {
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);
} else {
console.warn(new Error(`Can't resolve unknown asset tag: ${asset}`));
}
}

const app = document.createElement('div');
app.className = '_modern_js_devtools_mountpoint theme-register';
const appGlobalExport = '_modern_js_devtools_app';
window[appGlobalExport] ||= {};
Object.assign(window[appGlobalExport], {
container: app,
// eslint-disable-next-line no-undef
resourceQuery: __resourceQuery,
});
shadow.appendChild(app);
} catch (err) {
const e = new Error('Failed to execute mount point of DevTools.');
e.cause = err;
console.error(e);
}
11 changes: 9 additions & 2 deletions packages/devtools/client/modern.config.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import path from 'path';
import { appTools, defineConfig } from '@modern-js/app-tools';
import { nanoid } from '@modern-js/utils';
import { ROUTE_BASENAME } from '@modern-js/devtools-kit';
Expand All @@ -17,9 +18,10 @@ export default defineConfig<'rspack'>({
},
source: {
mainEntryName: 'client',
entriesDir: './src/entries',
entries: {
mount: {
entry: './src/mount/index.tsx',
entry: './src/entries/mount/index.tsx',
disableMount: true,
},
},
Expand All @@ -32,6 +34,11 @@ export default defineConfig<'rspack'>({
'process.env.PKG_VERSION': packageMeta.version,
'process.env.DEVTOOLS_MARK': nanoid(),
},
alias: {
// Trick to fix: Modern.js won't recognize experimental react as react@18.
react: path.resolve('./node_modules/react-exp'),
'react-dom': path.resolve('./node_modules/react-dom-exp'),
},
},
output: {
assetPrefix: ROUTE_BASENAME,
Expand All @@ -45,7 +52,7 @@ export default defineConfig<'rspack'>({
bundlerChain(chain) {
chain.module
.rule('RADIX_TOKEN')
.test(/\/@radix-ui\/themes\/styles\.css/)
.test(require.resolve('@radix-ui/themes/styles.css'))
.use('RADIX_TOKEN')
.loader('./plugins/radix-token-transformer.js')
.options({ root: '.theme-register' });
Expand Down
15 changes: 10 additions & 5 deletions packages/devtools/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,31 +42,36 @@
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/themes": "^2.0.0",
"@types/jest": "^29",
"@rsbuild/core": "^0.1.0",
"@types/jest": "^29",
"@types/lodash": "^4.14.202",
"@types/node": "~16.11.7",
"@types/react": "^18",
"@types/react-devtools-inline": "^4.24.8",
"@types/react-dom": "^18",
"birpc": "0.2.13",
"clsx": "^1.2.1",
"lodash": "^4.17.21",
"nanoid": "3.3.4",
"p-defer": "^3.0.0",
"postcss-custom-media": "^10.0.1",
"react": "~18.2.0",
"react": "^18.2.0",
"react-exp": "npm:[email protected]",
"react-base16-styling": "^0.9.1",
"react-dom": "~18.2.0",
"react-devtools-inline": "^4.28.5",
"react-dom": "^18.2.0",
"react-dom-exp": "npm:[email protected]",
"react-icons": "^4.11.0",
"react-is": "^18",
"react-json-tree": "^0.18.0",
"react-json-view": "^1.21.3",
"react-use": "^17.4.0",
"rimraf": "^3.0.2",
"scheduler": "^0.23.0",
"suspend-react": "^0.1.3",
"type-fest": "^4.1.0",
"typescript": "~5.0.4",
"ufo": "^1.3.0",
"valtio": "^1.11.1"
},
"dependencies": {}
}
}

This file was deleted.

105 changes: 0 additions & 105 deletions packages/devtools/client/src/client/components/HeaderRule/Editor.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import Visible from '../Visible';
import styles from './Action.module.scss';
import { FrameBox } from './FrameBox';
import { ReactComponent as DevToolsIcon } from './heading.svg';
import { useStickyDraggable } from '@/mount/utils/draggable';
import { useStickyDraggable } from '@/utils/draggable';

const DevtoolsAction: React.FC<SetupClientParams> = props => {
export const DevtoolsActionButton: React.FC<SetupClientParams> = props => {
const logoSrc = props.def.assets.logo;
const [showDevtools, toggleDevtools] = useToggle(false);

Expand Down Expand Up @@ -57,5 +57,3 @@ const DevtoolsAction: React.FC<SetupClientParams> = props => {
</Theme>
);
};

export default DevtoolsAction;
Original file line number Diff line number Diff line change
Expand Up @@ -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 '@/client/stores';
import { useStore } from '@/entries/client/stores';

export interface ClientRouteStatsProps {
route: ServerRoute;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 '@/client/stores';
import { useStore } from '@/entries/client/stores';

export interface EntryStatsProps {
route: ServerRoute;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
HiOutlineCube,
HiOutlineAcademicCap,
} from 'react-icons/hi2';
import { RiReactjsLine } from 'react-icons/ri';
import { InternalTab } from './types';

export const getDefaultTabs = (): InternalTab[] => [
Expand All @@ -26,6 +27,12 @@ export const getDefaultTabs = (): InternalTab[] => [
icon: <HiOutlineRectangleGroup />,
view: { type: 'builtin', url: '/pages' },
},
{
name: 'react',
title: 'React',
icon: <RiReactjsLine />,
view: { type: 'builtin', url: '/react' },
},
{
name: 'context',
title: 'Context',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { useSnapshot } from 'valtio';
import { useParams } from '@modern-js/runtime/router';
import { useStore } from '@/client/stores';
import { ObjectInspector } from '@/client/components/ObjectInspector';
import { useStore } from '@/entries/client/stores';
import { ObjectInspector } from '@/components/ObjectInspector';

const Page: React.FC = () => {
const $store = useStore();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { useSnapshot } from 'valtio';
import { useStore } from '@/client/stores';
import { ObjectInspector } from '@/client/components/ObjectInspector';
import { useStore } from '@/entries/client/stores';
import { ObjectInspector } from '@/components/ObjectInspector';

const Page: React.FC = () => {
const $store = useStore();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { useSnapshot } from 'valtio';
import { useStore } from '@/client/stores';
import { ObjectInspector } from '@/client/components/ObjectInspector';
import { useStore } from '@/entries/client/stores';
import { ObjectInspector } from '@/components/ObjectInspector';

const Page: React.FC = () => {
const $store = useStore();
Expand Down
Loading

0 comments on commit 4ee48fb

Please sign in to comment.