PXAML Pipeline

The PXAML pipeline transforms declarative UI markup into executable user interfaces.

PXAML (Markup) → Parser → IR (JSON) → Renderer → GUI/TUI/Web

The PXAML parser reads XML markup and produces an Abstract Syntax Tree (AST).

<!-- Input: PXAML -->
<Window Title="Demo" Width="400">
  <Button Content="Click me" Click="OnClick"/>
</Window>

Parser tasks:

• XML validation
• Namespace resolution
• Element recognition
• Attribute parsing
• Event binding detection

The AST is transformed into an Intermediate Representation (IR) - a JSON-based intermediate format.

{
  "type": "Window",
  "properties": {
    "Title": { "value": "Demo", "type": "string" },
    "Width": { "value": 400, "type": "number" }
  },
  "children": [
    {
      "type": "Button",
      "properties": {
        "Content": { "value": "Click me", "type": "string" }
      },
      "events": {
        "Click": { "handler": "OnClick" }
      }
    }
  ]
}

IR properties:

• Platform-independent
• Serializable (JSON)
• Diff-capable for hot reload
• Type information preserved

Data bindings are analyzed and converted into executable structures.

<!-- PXAML with Binding -->
<TextBox Text="{Binding Path=UserName, Mode=TwoWay}"/>

{
  "type": "TextBox",
  "properties": {
    "Text": {
      "type": "binding",
      "path": "UserName",
      "mode": "TwoWay"
    }
  }
}

The IR is translated by the target-specific renderer into native UI elements.

type
  TWvdSPxamlParser = class
  public
    function Parse(const ASource: string): TWvdSIRNode;
    function ParseFile(const APath: string): TWvdSIRNode;
  end;

type
  TWvdSIRNode = class
    NodeType: string;
    Properties: TWvdSPropertyMap;
    Children: TWvdSIRNodeList;
    Events: TWvdSEventMap;
    Bindings: TWvdSBindingList;
  end;

type
  TWvdSRenderer = class abstract
  public
    procedure Render(ARoot: TWvdSIRNode); virtual; abstract;
    procedure Update(AOldRoot, ANewRoot: TWvdSIRNode); virtual; abstract;
  end;

The pipeline supports hot reload through IR differentiation:

1. New PXAML → Parser → New IR
2. Diff(Old IR, New IR) → Patch List
3. Renderer.ApplyPatches(Patch List)

Benefits:

• Only changed elements are updated
• State is preserved
• Fast iteration during development

• Architecture Overview
• Build Targets
• UI Designer