ARE — A-Concept Rendering Engine
A declarative, signal-driven rendering engine on top of A-Concept — a full tokenize → compile → transform → interpret pipeline for dynamic, component-based UIs.
ARE is a declarative, signal-driven rendering engine built on top of the A-Concept framework. It provides a full pipeline — tokenization, compilation, transformation, interpretation, and lifecycle management — for building dynamic, component-based UIs. A concrete HTML-DOM engine wires the pipeline into a scope and mounts components to the real DOM, while a reactive signal bus coordinates communication across the component tree.
What makes ARE — A-Concept Rendering Engine worth your time.
- Declarative, component-based UIs — the Are base class exposes lifecycle decorators (@Are.Template, @Are.onAfterInit, @Are.onAfterMount, @Are.Signal, @Are.Data).
- Full rendering pipeline — AreLoader, AreTokenizer, AreCompiler, AreTransformer and AreInterpreter, orchestrated by AreEngine.
- Signal-driven reactivity — AreSignals bus dispatches A_SignalVector events (AreInit, AreRoute, custom signals) across subscribed nodes.
- Reactive state — AreScene tracks applied instructions and AreStore holds the reactive data model referenced during render and updates.
- Template AST — AreNode and AreAttribute model nodes and parsed bindings; AreLifecycle manages mount / unmount / update phases.
- Concrete HTML engine — AreHTMLEngine, AreRoot, AreHTMLTokenizer, AreHTMLCompiler and DOMInterpreter apply instructions to the real DOM.
- Ships browser (ESM) and Node.js (CJS + ESM) bundles.
Install ARE with its peer dependencies, boot the HTML engine against a target element, then define components.
- Install from npm
npm install @adaas/are - Install peer dependencies
npm install @adaas/a-concept @adaas/a-frame @adaas/a-utils - Boot the HTML engine
const engine = new AreHTMLEngine(new A_Scope()); await engine.boot({ target: document.getElementById('app')! });import { AreHTMLEngine } from '@adaas/are'; import { A_Scope } from '@adaas/a-concept';
- Define a component
class MyButton extends Are { @Are.Template template(node) { node.setHTML('<button>Click me</button>'); } }
Get ARE — A-Concept Rendering Engine on your platform.
ResourcesSystem requirements- Runtime
- Node.js 18 LTS or newer (browser ESM bundle also provided)
- Language
- TypeScript (built-in type declarations)
- Peer dependencies
- @adaas/a-concept, @adaas/a-frame, @adaas/a-utils