Paradigm UI

Purpose

Paradigm UI is a JavaScript library that provides the methods needed to build engaging user interfaces. It handles component registration, data binding, conditional rendering, and list iteration without requiring a heavy framework.

Core concepts

• Component registry — stored in ParadigmUI.components. Register reusable UI components by name and retrieve them at render time.
• State and data helpers — data, stateVars, and dataMap provide state management for interactive blocks.
• Declarative syntax — shorthand helpers for conditions, loops, and component templates.

Shorthand rendering

Paradigm UI supports shorthand syntax for conditional blocks, loops, and component templates:

• @if — Conditional rendering. The runtime converts these expressions into tags that show or hide content based on state.
• @foreach — List iteration. Converts into runtime tags that repeat content for each item in a collection.
• Component shorthands — Resolved into <paradigm> elements that reference registered components.

Declarative attributes

Paradigm UI uses HTML attributes for data binding and conditional display:

• bind="" — Two-way data binding between an element and a state variable.
• loop="" — Iterate over a collection and render child elements for each item.
• pui-if — Conditionally show or hide an element based on a state expression.

Rendering

Call ParadigmUI.render() to process declarative attributes within a container. Follow it with ParadigmCSS.render() to apply styling:

await ParadigmUI.render({
    selector: '#$block-items-list-container'
});
ParadigmCSS.render();

The core install page demonstrates the production sequence by loading paradigm.ui.js and calling ParadigmUI.render() before applying Paradigm CSS.

AI integration notes

• Component names and template strings are stored in the global registry, making them searchable for AI tooling.
• Shorthand expressions are regex-driven, so consistent formatting improves parsing reliability.
• The declarative attribute system (bind, loop, pui-if) provides a clear contract between data and DOM.