github/catalyst

How github/catalyst works

Catalyst is a small runtime library for building Web Components. A component author applies the controller decorator; its delegate registers the element and coordinates connection-time setup, including attributes, shadow roots, and DOM action binding. Actions dispatch events to controller methods, while target discovery and context provision/consumption support component coordination. The library also exposes lazy definition and reusable abilities. Core wiring is visible in sampled source; target internals and several documented patterns were not sampled, so those relationships are intentionally limited.

Main entry points: core.ts Catalyst delegate · index.ts Public API · bind.ts Action binding · target.ts Target discovery

Components 20

Component lifecycle

Controller decorator src/controller.ts
Catalyst delegate src/core.ts
Custom element registry src/register.ts
Attribute mapping src/attr.ts
Shadow root setup src/auto-shadow-root.ts

DOM interaction

Action binding src/bind.ts
Lazy definition src/lazy-define.ts
Target discovery src/target.ts
Tag observation src/tag-observer.ts
Target lookup src/findtarget.ts

Component coordination

Context ability src/providable.ts
Controllable ability src/controllable.ts

Runtime foundations

Public API src/index.ts
Ability composition src/ability.ts
Ability collection src/abilities.ts
Decorator metadata src/mark.ts
Element metadata src/core.ts

Other components

Component author
Browser customElements
DOM events and mutations

Connections 25

Component author → Public API: uses
Public API → Controller decorator: exports
Public API → Action binding: exports
Public API → Attribute mapping: exports
Public API → Target discovery: exports
Public API → Lazy definition: exports
Controller decorator → Catalyst delegate: creates
Catalyst delegate → Custom element registry: registers
Custom element registry → Browser customElements: defines
Catalyst delegate → Attribute mapping: initializes
Catalyst delegate → Shadow root setup: creates
Catalyst delegate → Action binding: binds
Catalyst delegate → Lazy definition: observes
Attribute mapping → Element metadata: reads
Catalyst delegate → Element metadata: reads
Action binding → DOM events and mutations: observes
Action binding → DOM events and mutations: listens
DOM events and mutations → Action binding: dispatches
Lazy definition → DOM events and mutations: observes
Target discovery → Tag observation: registers tags
Target discovery → Target lookup: uses
Context ability → Decorator metadata: creates marks
Context ability → Ability composition: composes
Controllable ability → Ability composition: composes
Ability collection → Ability composition: uses

More TypeScript diagrams: alan345/ai-fullstack-saas-boilerplate · zhaoolee/garss · proxyshard/shardbrowser · nuxt/hackernews · mattpocock/evalite

Drawn by GitDiagram on September 25, 2026 from the repository's file tree, README and source files. Read as Markdown ·