Skip to main content

Module webui

Module webui 

Source
Expand description

WebUI Framework parser plugin.

§Overview

Compiles HTML templates into structured metadata objects emitted as <script> blocks in the rendered page. Each metadata object contains marker-free static HTML plus locator arrays for client-created DOM (tx, ag, cl, rl, el) and semantic arrays (a, c, r, e, re, b). The client runtime resolves those locators once and then patches direct node references — no template string parsing, no regex, no DOM scanning on the client-created path.

§Metadata object format

window.__webui_templates['my-component'] = {
  h: "<button class=\"item\"><span></span></button>",
  tx: [[[[0, 0], 0], [["title"]]]],
  a: [["title", 0, "title"]],
  ag: [[[0], 0, 1]],
  c: [[[1, "state", 3, "'done'"], 0]],
  cl: [[[0], 1]],
  e: [["click", "onClick", 0]],
  el: [[0]],
  b: [{ h: "<span class=\"check\">✓</span>" }],
  sa: "my-component",
  re: [["submit", "onSubmit", 1]],
};

§Plugin data protocol

Each element with attribute bindings or events produces a 12-byte Plugin fragment via finish_element:

BytesFieldDescription
0–3binding_countNumber of dynamic attribute bindings
4–7event_start_idxStarting index in the global event list
8–11event_countNumber of @event attrs on this element

The handler plugin decodes this to emit data-w-* binding markers and single data-ev="COUNT" event markers on SSR HTML only. Compiled templates keep the same binding/event indices but encode client targets via locator arrays instead of embedding client-only marker attrs/comments in h.

§Lifecycle

  1. classify_attribute — intercepts @event attributes, counts them per-element, and keeps them out of the parsed protocol.
  2. finish_element — encodes the accumulated event count plus attribute binding count into 12 bytes.
  3. register_component_template — caches the component’s final template HTML for later compilation (deduplicates by tag name).
  4. take_component_templates — called after parsing is complete; compiles each tracked component into a <script> block.

Structs§

WebUIParserPlugin
WebUI Framework parser plugin.

Functions§

generate_compiled_template
Generate a compiled template <script> block with a metadata object.