Skip to main content

Module webui

Module webui 

Source
Expand description

WebUI Framework parser plugin.

§Overview

Compiles HTML templates into structured metadata objects stored as raw JS IIFE strings in the protocol. During SSR the handler wraps them in a single <script> tag; during SPA navigation the router evaluates them directly. 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 raw JS IIFE string.

Structs§

WebUIParserPlugin
WebUI Framework parser plugin.

Functions§

generate_compiled_template
Generate a compiled template as a raw JS IIFE string.