Architecture Overview

Pencel is a component transpiler: read .pen.tsx, output multiple frameworks (React, Angular, Vue) via a single IR (Intermediate Representation).

The 7-Phase Pipeline

1. Discover – Glob .pen.ts files, validate tsconfig.json
2. Load – Create TypeScript AST objects
3. Build IR – Parse decorators → immutable IR
4. Sync AST – Update AST nodes from IR state
5. Generate – Create global files (ir.json, components.d.ts)
6. Derive – Create framework adapters (React, Angular, Vue)
7. Write – Preprocess imports, print AST, flush to disk

Key Concepts

• IR – Immutable graph: tags, props, events, metadata
• Generators – Plugins for global files (fully rebuild each pass)
• Derivatives – Plugins for framework adapters (incremental per-file)

See Compilation Flow for three-layer model, Core Components for system architecture.