J json-to-dom
Compiler architecture

Architecture & pipeline.

json-to-dom is organized around a strictly layered, zero-dependency compiler pipeline.

The v28 3-Chapter Story Architecture

buildSpecElement({ spec, outputType = "dom", validate = false })
  │
  ├─► Chapter 1: Inspection & Standards (chapter1_inspection/)
  │     ├─► standards/                  ──► W3C tags & allowed attributes reference data
  │     └─► validate/                   ──► Pre-flight HTML grammar & void tag inspector
  │
  ├─► Chapter 2: Construction Line (chapter2_construction/)
  │     ├─► normalizeInput.js           ──► Options & flag normalization
  │     ├─► dispatchSpec.js             ──► Routes single element vs spec array
  │     └─► elementBuilder/             ──► ⭐ 100% Preserved Assembly Steps (0 to 5):
  │           0. createElement.js       ──► Native document.createElement
  │           1. applyTextContent.js    ──► textContent & innerHTML injection
  │           2. applyProperties.js     ──► Native DOM properties
  │           3. applyAttributes.js     ──► HTML attributes & datasets
  │           4. applyClassList.js      ──► CSS class tokens
  │           5. appendChildren.js      ──► Recursive child node attachment
  │
  └─► Chapter 3: Activation & Interactivity (chapter3_activation/)
        ├─► listeners/                  ──► Versioned event delegation suites (v1 & v2)
        ├─► bindActions.js              ──► Action binder for forms & interactive cards
        ├─► formOperations.js           ──► extractFormValues & resetForm helpers
        └─► mountToContainer.js         ──► Direct container mounting by HTML ID (specToDom)

Key Subsystems

  • Story-Driven Chapters: Clear 3-chapter narrative from inspection to construction to activation.
  • Preserved Assembly Line: 6 fine-grained steps (0 to 5) in elementBuilder/ intact.
  • Versioned Listeners: Advanced action delegation (v1 row actions, v2 form footer actions).
  • Clean Outside API: { spec, targetHtmlId, outputType, validate } without in- prefixes for callers.

Evolutionary Progression

Version folders document the architectural journey:

  • v1-v11: Early grammar research, attribute resolution, and sleek orchestration.
  • v26: Row-scoped action delegation (v1 listeners).
  • v27: Form footer actions & versioned event delegation.
  • v28: 3-Chapter Story-Driven Architecture with preserved 0–5 elementBuilder.

Core Design Intent

  • Zero Dependencies: Pure Web Standards (document.createElement, addEventListener).
  • KeshavSoft Conventions: 100% adherence to { in... } / local... parameter mappings.
  • Clean Decoupling: Static DOM rendering carries zero event overhead unless explicitly required.