Skip to content

CLAUDE.md

Latest commit

 

History

History
73 lines (53 loc) · 3.08 KB

CLAUDE.md

File metadata and controls

73 lines (53 loc) · 3.08 KB

Pyreon DevTools — Chrome Extension

Overview

Chrome DevTools extension for the Pyreon UI framework (signal-based, no virtual DOM). Shows a "Pyreon" panel with a live component tree, click-to-highlight, and inspector. Main framework: ../pyreon.

Architecture

Four isolated execution contexts communicate via tagged message passing:

Page (window.__PYREON_DEVTOOLS__)  ↕ window.postMessage
Content Script (content-script.ts) ↕ chrome.runtime messaging
Background Service Worker (background.ts) ↕ chrome.runtime.Port
DevTools Panel (panel.ts)

Source tags: SOURCE constants in src/types.ts. Type guards and factories in src/messages.ts.

Key Files

File Context Purpose
src/types.ts Shared Message types, SOURCE constants, SerializedEntry
src/messages.ts Shared Type guards (is*) and factories (create*)
src/serialize.ts Shared serialize() strips DOM refs for cross-boundary transfer
src/tree.ts Shared Pure tree helpers: buildMap, getRoots, getChildren, getAncestors
src/page-hook.ts Page world Touches window.__PYREON_DEVTOOLS__, serializes components
src/content-script.ts Content script Pure relay bridge, injects page-hook.js
src/background.ts Service worker Routes messages, maps tabId → Port
src/panel.ts DevTools panel UI: tree, selection, detail pane, stats
src/devtools.ts DevTools page Detects Pyreon, creates the panel

Rules (progressive disclosure)

Detailed rules are split into .claude/rules/ — loaded automatically when relevant:

  • .claude/rules/code.md — coding standards, Chrome extension patterns, message protocol
  • .claude/rules/testing.md — testing practices, coverage requirements, what to test
  • .claude/rules/ci.md — CI/CD pipeline details, workflows, release process

Commands

Command What
/verify Run full local CI: lint, typecheck, build, test+coverage
/add-message Add a new message type to the protocol with all required files

Dev Commands

bun run build          # production build → dist/
bun run dev            # watch mode with auto-rebuild
bun run test           # vitest single run
bun run test -- --coverage
bun run lint           # biome lint
bun run check          # biome check --write (lint + format)
bun run typecheck      # tsc --noEmit

Tooling

  • Runtime: Bun
  • Build: Rolldown via @vitus-labs/tools-rolldown (vl-tools.config.mjs) — IIFE for content/page/panel/devtools, ESM for background
  • Lint/Format: Biome via @vitus-labs/tools-lint — single quotes, no semicolons, 2-space indent
  • TypeScript: @vitus-labs/tools-typescript/lib — ES2024, strict, bundler resolution
  • Tests: Vitest via @vitus-labs/tools-vitest with happy-dom

Page-Side API

window.__PYREON_DEVTOOLS__ from @pyreon/runtime-dom: getComponentTree(), getAllComponents(), highlight(id), onComponentMount(cb), onComponentUnmount(cb).

DevtoolsComponentEntry: { id, name, el, parentId, childIds } — el stripped on serialization.