``` --- name: devtools-model-management description: Guidelines for creating, migrating, and registering models in front_end/models/. Covers BUILD.gn, devtools_grd_files.gni, and entrypoints. --- # Creating or Migrating a Model in DevTools This guide outlines the standard procedure for creating a new model or migrating an existing one to `front_end/models/`. ## 0. Preparation (Before you start) * **Baseline:** Run existing tests for the code you are moving to ensure they pass *before* you touch anything. * `npm run test -- front_end/` * **Impact Analysis:** Search for usages of the class/file to understand the scope of refactoring. * `grep -r "ClassName" front_end/` ## 1. File Structure * **Location:** `front_end/models//` (must be lowercase). * **Entrypoint:** Create a barrel file `front_end/models//.ts` that exports the model's public API. * **Implementation:** The actual logic goes in `.ts`. * **Tests:** Unit tests go in `.test.ts` alongside the implementation. ## 2. Build Configuration (`BUILD.gn`) Every model requires a `BUILD.gn` file in its directory with three specific targets: 1. **`devtools_module("")`**: Lists implementation source files (`sources`) and dependencies (`deps`). * **Crucial:** Do NOT include the barrel file (`.ts`) in `sources`. 2. **`devtools_entrypoint("bundle")`**: Defines the barrel file (`entrypoint = ".ts"`). * **Crucial:** Must depend on the module target: `deps = [ ":" ]`. 3. **`ts_library("unittests")`**: Lists test files and test-only dependencies. * **Crucial:** Must depend on the bundle: `deps = [ ":bundle" ]`. ## 3. Global Registration (Crucial) The build system does not auto-detect new modules. You must manually register them in **`config/gni/devtools_grd_files.gni`**: * **Bundled (Release) Build:** Add the new barrel file path (e.g., `front_end/models//.js`) to the `grd_files_bundled_sources` list. * **Unbundled (Debug) Build:** Add all other implementation files (e.g., `front_end/models//.js`) to the `grd_files_unbundled_sources` list. * **Test Runner:** Add the new model's unittest target (e.g., `models/:unittests`) to the `deps` list in **`front_end/BUILD.gn`**. ## 4. Refactoring Imports & Exports * **Consumers:** Update all files importing the model to use the new entrypoint: `import * as ModelName from '../../models//.js';` * **Old Barrel File (Migration only):** If moving a file, **remove** its export from the original directory's barrel file (e.g., `front_end/panels/elements/elements.ts`). * **Internal Imports:** Files *within* the model directory must import each other via relative paths (e.g., `./OtherClass.js`), **never** via the model's own barrel file. ## 5. Verification Checklist 1. **Build:** `autoninja -C out/Default` (Ensures BUILD.gn and GRD files are correct). 2. **Lint:** `npm run lint` (Checks style and formatting). 3. **Test:** * `npm run test -- front_end/models/` (New tests). * `npm run test -- front_end/` (Regression check for previous owner). ## Common Pitfalls * **Circular Dependencies:** Occur when internal files import from the directory's own barrel file. * **Missing Tests:** Failing to add the target to `front_end/BUILD.gn` means tests exist but never run. * **Legacy Exports:** Forgetting to remove the class from the old location's `files` or `exports` allows old patterns to persist. * **Build Errors:** Including the barrel file in `devtools_module` sources causes duplicate definition errors.