feat(lang): UI components as files - component Name { ... } beside Name.xml and Name.lss

The compiler turns a component declaration into:
- a record of its props and state;
- a constructor, a props setter, a model and a call;
- a class, registered with ludic.ui at start.

Its template and styles are read from beside it and compiled in, with @import inlined, and a
missing template fails the build.

In the runtime:
- each mounted instance keeps its own props and state, and `set` in a template writes the state;
- styles are scoped to the component;
- class, style and id on a component's tag land on its root, styled by the parent's sheet too;
- ui_reload re-reads a component's files from disk and keeps instances.

The package's own module is now ludic_ui, so a program may call a directory of its own ui.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Orkun ÇAKILKAYA 2026-09-24 16:50:12 +03:00
parent 637d07400e
commit 20d011f8e9
40 changed files with 62224 additions and 49996 deletions

View file

@ -10,29 +10,12 @@ export property UiTpl {
text: UiExpr = null
kids: []UiTpl = null
comp: UiTpl = null # the component this tag names, found when its file loads
cls: UiClass = null # or the Ludic-declared component it names
sheet: UiSheet = null # the styles of the file it was written in
style: UiRule = null # its style="..." attribute, read as declarations
raw: string = "" # a <style>'s text, which is not a template's
where: string = "" # file:line, for an error
}
# the text being read, and where its lines start, so an element can say which line it is on
var tp_nl: []int = new []int
function tp_lines(src: string) -> void {
tp_nl = new []int
for i in 0 .. len(src) {
if src[i] == 10 { push(tp_nl, i) }
}
}
function tp_line(at: int) -> int {
var lo = 0
var hi = len(tp_nl)
while lo < hi {
let mid = (lo + hi) / 2
if tp_nl[mid] < at { lo = mid + 1 } else { hi = mid }
}
return lo + 1
}
function tpl_read(x: Xml, file: string) -> UiTpl {
let t = new UiTpl
t.tag = Xml.tag(x)