From 0d262cbac1980a3a40d5b4e85470900ed2f4b7ff Mon Sep 17 00:00:00 2001 From: Alex Hunt Date: Sat, 7 Feb 2026 12:23:51 +0000 Subject: [PATCH 1/3] Add CLAUDE.md, update instructions --- .gitignore | 3 +++ AGENTS.md | 26 +++++++++++++++++++------- CLAUDE.md | 1 + 3 files changed, 23 insertions(+), 7 deletions(-) create mode 100644 CLAUDE.md diff --git a/.gitignore b/.gitignore index 47fe3c66a67d..6e628f39c7bd 100644 --- a/.gitignore +++ b/.gitignore @@ -58,3 +58,6 @@ test/perf/.generated .eslintcache .stylelintcache **/tsconfig.tsbuildinfo + +# Agents +**/CLAUDE.local.md diff --git a/AGENTS.md b/AGENTS.md index 4ce1d8d1e513..c1ded04e7285 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,17 +1,29 @@ # Project Instructions -This codebase is a fork of https://github.com/ChromeDevTools/devtools-frontend. +This is the React Native DevTools frontend, a fork of [Chrome DevTools](https://github.com/ChromeDevTools/devtools-frontend). -## Editing Policy + Changes should generally be scoped to the `front_end/` directory. Do not edit `front_end/generated/`. + +## Guidelines - Make minimal edits. No speculative refactors. -- Changes should generally be scoped to the `front_end/` directory. Focus code searches here. +- Run `npm test` (unit tests) and `npm run lint` (ESLint, Stylelint, lit-analyzer) to validate changes. +- Use `.js` extensions in TypeScript imports. Use `type` imports where possible (`import type`). +- New files in Meta-owned paths must prepend `// Copyright (c) Meta Platforms, Inc. and affiliates.` as the first line of the license header, above the Chromium Authors license. Keep in sync with `META_CODE_PATHS` in `scripts/eslint_rules/lib/check-license-header.js`. + +## Build system -## Workflow +Each module directory has a `BUILD.gn` file. Update these when adding new files or dependencies. -- Update `BUILD.gn` files when adding new modules and imports. -- New files should prepend "Copyright (c) Meta Platforms, Inc. and affiliates." as the first line of the license header, above the Chromium Authors license. Keep in sync with `META_CODE_PATHS` in `scripts/eslint_rules/lib/check-license-header.js`. +- `generate_css("css_files")` — lists `.css` source files. +- `devtools_module("name")` — lists `.ts` source files in `sources` and dependencies as `:bundle` refs in `deps`. +- `devtools_entrypoint("bundle")` — declares the barrel file that re-exports the module's public API. +- `devtools_entrypoint("meta")` — declares the `-meta.ts` file that registers panels/views. Use `visibility` to restrict to specific entrypoints. +- `ts_library("unittests")` — lists `.test.ts` files with `testonly = true`. ## Architecture -- For UI code, prefer modern `html` template code and locate styles in one adjacent CSS file. Example: `front_end/ui/components/cards/Cards.ts`. +- **UI components** extend `HTMLElement`, use Lit `html` templates (from `../../ui/lit/lit.js`), and locate styles in one adjacent CSS file. Prefix custom elements with `devtools-`. Example: `front_end/ui/components/cards/Card.ts`. +- **Panels** extend `UI.Widget.VBox` and are registered via a `-meta.ts` file using `UI.ViewManager.registerViewExtension()`, which lazily loads the panel implementation. +- **Entrypoints**: `front_end/entrypoints/rn_fusebox/` is the primary RN entry point. +- **RN-specific code** lives in paths listed in `META_CODE_PATHS` (e.g. `panels/rn_welcome/`, `panels/react_devtools/`, `models/react_native/`, `core/rn_experiments/`). diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 000000000000..43c994c2d361 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md From f47a9b8bd47a24a18cc678c89b337c15cc6f023d Mon Sep 17 00:00:00 2001 From: Alex Hunt Date: Tue, 17 Feb 2026 12:02:50 +0000 Subject: [PATCH 2/3] Fix formatting in AGENTS.md --- AGENTS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/AGENTS.md b/AGENTS.md index c1ded04e7285..7024a9e274af 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -2,7 +2,7 @@ This is the React Native DevTools frontend, a fork of [Chrome DevTools](https://github.com/ChromeDevTools/devtools-frontend). - Changes should generally be scoped to the `front_end/` directory. Do not edit `front_end/generated/`. +Changes should generally be scoped to the `front_end/` directory. Do not edit `front_end/generated/`. ## Guidelines From 3840794fdd28b719a22f15557ef4f27eb984011f Mon Sep 17 00:00:00 2001 From: Alex Hunt Date: Mon, 23 Feb 2026 15:42:39 +0000 Subject: [PATCH 3/3] Update --- AGENTS.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 7024a9e274af..18657b4e6e1d 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -7,7 +7,6 @@ Changes should generally be scoped to the `front_end/` directory. Do not edit `f ## Guidelines - Make minimal edits. No speculative refactors. -- Run `npm test` (unit tests) and `npm run lint` (ESLint, Stylelint, lit-analyzer) to validate changes. - Use `.js` extensions in TypeScript imports. Use `type` imports where possible (`import type`). - New files in Meta-owned paths must prepend `// Copyright (c) Meta Platforms, Inc. and affiliates.` as the first line of the license header, above the Chromium Authors license. Keep in sync with `META_CODE_PATHS` in `scripts/eslint_rules/lib/check-license-header.js`. @@ -23,7 +22,7 @@ Each module directory has a `BUILD.gn` file. Update these when adding new files ## Architecture -- **UI components** extend `HTMLElement`, use Lit `html` templates (from `../../ui/lit/lit.js`), and locate styles in one adjacent CSS file. Prefix custom elements with `devtools-`. Example: `front_end/ui/components/cards/Card.ts`. +- **UI components** extend `HTMLElement`, use Lit `html` templates (from `front_end/ui/lit/lit.js`), and locate styles in one adjacent CSS file. Prefix custom elements with `devtools-`. Example: `front_end/ui/components/cards/Card.ts`. - **Panels** extend `UI.Widget.VBox` and are registered via a `-meta.ts` file using `UI.ViewManager.registerViewExtension()`, which lazily loads the panel implementation. -- **Entrypoints**: `front_end/entrypoints/rn_fusebox/` is the primary RN entry point. +- **Entrypoints**: `front_end/entrypoints/rn_fusebox/` is the primary React Native entry point. - **RN-specific code** lives in paths listed in `META_CODE_PATHS` (e.g. `panels/rn_welcome/`, `panels/react_devtools/`, `models/react_native/`, `core/rn_experiments/`).