ludic/packages/ludic.ui/env.ludic
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

89 lines
2.8 KiB
Text

# env.ludic - what a name means where an expression is read: the loop's own names, then the
# component's props and state, then the view's model. A component sees its props, its state
# and the model - never the names of whoever used it.
export property UiEnv {
names: []string = null
vals: []Val = null
state: Val = null
parent: UiEnv = null
model: Val = null
slot: UiTpl = null
slot_env: UiEnv = null
on_names: []string = null # a component's on-* attributes, which its `emit` runs
on_acts: []UiAct = null
on_envs: []UiEnv = null
ctx: UiEnv = null # what a <provide> above gave, seen through components too
}
var ui_view: UiView = null
var ui_errs: []string = new []string
function env_new(parent: UiEnv) -> UiEnv {
let e = new UiEnv
e.names = new []string
e.vals = new []Val
e.parent = parent
if parent != null {
e.model = parent.model
e.ctx = parent.ctx
}
return e
}
function env_bind(e: UiEnv, name: string, v: Val) -> void {
push(e.names, name)
push(e.vals, v)
}
function env_get(e: UiEnv, name: string) -> Val {
var at = e
while at != null {
var i = len(at.names) - 1
while i >= 0 {
if at.names[i] == name { return at.vals[i] }
i -= 1
}
if at.state != null and Value.has(at.state, name) != 0 { return Value.get(at.state, name) }
at = at.parent
}
var cx = e.ctx
while cx != null {
for i in 0 .. len(cx.names) {
if cx.names[i] == name { return cx.vals[i] }
}
cx = cx.parent
}
if e.model != null and Value.has(e.model, name) != 0 { return Value.get(e.model, name) }
ui_err(`no {name} here: not a loop's, a prop, a state or in the view`)
return Value.null()
}
# `set name = value`: the nearest state that holds the name
function env_set(e: UiEnv, name: string, v: Val) -> void {
var at = e
while at != null {
if at.state != null and Value.has(at.state, name) != 0 {
Value.put(at.state, name, v)
return
}
at = at.parent
}
ui_err(`set {name}: no state here holds it - declare it with <state {name}="..."/>`)
}
# an error is said once, however many frames make it, and names the template line being built
var ui_at: string = ""
# said by the runtime, or by a host about something a template asked for
export function ui_err(msg0: string) -> void {
var msg = msg0
if ui_at != "" and not ui_has(msg, ".xml:") { msg = `{ui_at}: {msg}` }
for i in 0 .. len(ui_errs) {
if ui_errs[i] == msg { return }
}
push(ui_errs, msg)
print(`ui: {msg}`)
}
function ui_has(s: string, part: string) -> bool {
let n = len(part)
for i in 0 .. len(s) - n + 1 {
if s[i..i + n] == part { return true }
}
return false
}
# every error said so far - for a host to show them where a developer will see them
export function ui_errors() -> []string { return ui_errs }