mirror of
https://github.com/hanzoai/react.git
synced 2026-09-24 17:02:27 +00:00
Ruslan LesiutinandGitHub
54831395ea
> [!NOTE] > I had to invalidate `node_modules` cache keys on CI, because we are now using `react-devtools-facade` package and we need to create a symlink to it, otherwise Flow will fail. We use a hash value of `yarn.lock`, but it's not invalidated when a package inside yarn workspace is using another private package. --- This change introduces new `react-devtools-cdt-mcp` package, which is responsible for installing React tools for `chrome-devtools-mcp` server. It is using `react-devtools-facade` as a dependency: it doesn't own the implementation of these tools, it just relays Facade's tools to `chrome-devtools-mcp` format. When CDT MCP navigates to a fresh page, it emits unique `devtoolsdiscovery` method, that has `respondWith` method, which is the integration point between runtime libraries and MCP server. `react-devtools-cdt-mcp` is the owner for this integration. More details are available here - https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/third-party-developer-tools.md. Here is the list of tools that are being installed: - `react_get_component_tree` - `react_get_component_by_uid` - `react_find_components` - `react_get_component_source` - `react_get_owner_stack_trace` - `react_get_owner_stack` - `react_start_profiling` - `react_stop_profiling ` - `react_get_trace_overview` - `react_get_commit_report` --- Quick demo how to test the package with `chrome-devtools-mcp` CLI. Steps are also mentioned in `README` file: https://github.com/user-attachments/assets/af9fefce-03f0-4ebd-a94f-e9dd72b87f4d
76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
'use strict';
|
|
|
|
const {readdirSync, statSync} = require('fs');
|
|
const {join} = require('path');
|
|
const baseConfig = require('./config.base');
|
|
|
|
process.env.IS_BUILD = true;
|
|
|
|
const NODE_MODULES_DIR =
|
|
process.env.RELEASE_CHANNEL === 'stable' ? 'oss-stable' : 'oss-experimental';
|
|
|
|
// Find all folders in packages/* with package.json
|
|
const packagesRoot = join(__dirname, '..', '..', 'packages');
|
|
const packages = readdirSync(packagesRoot).filter(dir => {
|
|
if (dir === 'internal-test-utils') {
|
|
// This is an internal package used only for testing. It's OK to read
|
|
// from source.
|
|
// TODO: Maybe let's have some convention for this?
|
|
return false;
|
|
}
|
|
if (dir.charAt(0) === '.') {
|
|
return false;
|
|
}
|
|
const packagePath = join(packagesRoot, dir, 'package.json');
|
|
let stat;
|
|
try {
|
|
stat = statSync(packagePath);
|
|
} catch (err) {
|
|
return false;
|
|
}
|
|
return stat.isFile();
|
|
});
|
|
|
|
// Create a module map to point React packages to the build output
|
|
const moduleNameMapper = {};
|
|
|
|
// Allow bundle tests to read (but not write!) default feature flags.
|
|
// This lets us determine whether we're running in different modes
|
|
// without making relevant tests internal-only.
|
|
moduleNameMapper['^shared/ReactFeatureFlags'] =
|
|
`<rootDir>/packages/shared/forks/ReactFeatureFlags.readonly`;
|
|
|
|
// Map packages to bundles
|
|
packages.forEach(name => {
|
|
// Root entry point
|
|
moduleNameMapper[`^${name}$`] = `<rootDir>/build/${NODE_MODULES_DIR}/${name}`;
|
|
// Named entry points
|
|
moduleNameMapper[`^${name}\/([^\/]+)$`] =
|
|
`<rootDir>/build/${NODE_MODULES_DIR}/${name}/$1`;
|
|
});
|
|
|
|
moduleNameMapper['use-sync-external-store/shim/with-selector'] =
|
|
`<rootDir>/build/${NODE_MODULES_DIR}/use-sync-external-store/shim/with-selector`;
|
|
moduleNameMapper['use-sync-external-store/shim/index.native'] =
|
|
`<rootDir>/build/${NODE_MODULES_DIR}/use-sync-external-store/shim/index.native`;
|
|
|
|
module.exports = Object.assign({}, baseConfig, {
|
|
// Redirect imports to the compiled bundles
|
|
moduleNameMapper,
|
|
modulePathIgnorePatterns: [
|
|
...baseConfig.modulePathIgnorePatterns,
|
|
'packages/react-devtools-extensions',
|
|
'packages/react-devtools-facade',
|
|
'packages/react-devtools-shared',
|
|
'packages/react-devtools-cdt-mcp',
|
|
],
|
|
// Don't run bundle tests on -test.internal.* files
|
|
testPathIgnorePatterns: ['/node_modules/', '-test.internal.js$'],
|
|
// Exclude the build output from transforms
|
|
transformIgnorePatterns: ['/node_modules/', '<rootDir>/build/'],
|
|
setupFiles: [
|
|
...baseConfig.setupFiles,
|
|
require.resolve('./setupTests.build.js'),
|
|
],
|
|
});
|