ludic/changes/defaults-views-templates.md
Orkuncakilkaya 637d07400e feat(ui): ludic.ui grows toward HTML, CSS and React (Phase 0.U1-U4)
- Natives: ui_native(tag, measure, draw) makes an element the program draws itself; ui_fire
  runs its on-<event> with event.value. input, select and textarea have simple defaults.
- React:
  - keyed <each>, <let>, <provide> context through components, <fragment>;
  - named slots, default props on <component>;
  - on-mount / on-unmount;
  - inline text inside text elements.
- CSS:
  - custom properties and var();
  - position relative/absolute/fixed with insets and z-index;
  - em/rem/vw/vh and @media;
  - wrapping text and ellipsis, overflow;
  - + and ~ combinators, :nth-child(an+b), :checked, :active.
- Developing: errors with file:line, ui_errors(), ui_reload() keeping state, and an
  inspector-style ui_dump.
- view fields infer the type of a literal or a named function's result.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-24 16:17:25 +03:00

2.5 KiB

bump: minor type: feature Default parameters, views and templates. A parameter can have a default (pad: float = 8.0). A call leaves out what it does not change, and may pass its first arguments by position and the rest by name.

A view declaration is the one bridge between a program and its UI. It names the fields a template may read, the functions it may ask and the on events it may send, and it writes view_<name>() -> UiView.

ludic.ui is now a template runtime. Screens and components are XML files loaded at run time, with:

  • {expression} bindings;

  • <if>, <else> and <each>;

  • props, <slot/> and per-instance <state>;

  • on-press actions that send events, set state or emit to the component's user;

  • component libraries (export="true", <import src as>);

  • HTML's elements (div, p, h1-h6, ul/li, img, hr, ...), with a default stylesheet;

  • HTML's attributes: id, class, style, hidden, disabled and onclick, with any other attribute kept for selectors;

  • the CSS box model (padding and margin in 1-4 values, borders, px and %) and flex layout (flex-grow, justify-content, align-items/align-self, flex-wrap, min and max sizes) under CSS's property names;

  • stylesheets, in a <style> or an .lss file (a Ludic StyleSheet) that others import and that can @import more;

  • CSS's selectors: #id, compound classes, [attr=value], descendant and > combinators, :hover, :disabled, :first-child, :last-child, :nth-child, :not and more, weighed by specificity.

  • more CSS: custom properties and var(), position with insets and z-index, em/rem/vw/vh, @media, wrapping text and ellipsis, overflow, +/~, :nth-child(an+b), :checked, :active;

  • more React: keyed lists, <let>, <provide> context, <fragment>, named slots, on-mount and on-unmount;

  • native elements a program draws itself (ui_native, ui_fire), and form controls;

  • errors with file and line, hot reload (ui_reload), and an inspector-style dump.

A view field set to a literal or a named function's result needs no type.

Screens are drawn through a registered renderer. Value gains a float kind.

Also:

  • A program's function named like one of the runtime's is refused; it had been silently taking the runtime's own calls.
  • An index is evaluated before the slice's elements are read. A xs[f()] whose f grew xs read stale memory.
  • A runtime error names the file its expression is in, not the program's.