- 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>
89 lines
2.8 KiB
Text
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 }
|