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

@ -0,0 +1 @@
.wide { margin: 9px }

View file

@ -0,0 +1,4 @@
# App.ludic — a screen is a component too: this one has no props, only what it shows
component App {
title: string = "counters"
}

View file

@ -0,0 +1,6 @@
<div>
<h1>{title}</h1>
<Counter label="a"/>
<Counter label="b" step="{5}" class="wide"/>
<p>outside</p>
</div>

View file

@ -0,0 +1,3 @@
@import "theme.lss";
.counter { padding: 4px }
p { color: #ff0000 }

View file

@ -0,0 +1,9 @@
# Counter.ludic — a component: what it takes (props), keeps (state), works out and does
component Counter {
prop label: string
prop step: int = 1
state count: int = 0
doubled: int = count * 2
function big() -> bool { return count > 3 }
on bump() { count += step }
}

View file

@ -0,0 +1,5 @@
<div class="counter">
<p>{label}: {count} ({doubled}){big() ? ' big' : ''}</p>
<button on-click="bump()">+</button>
<button on-click="set count = 0">reset</button>
</div>

View file

@ -0,0 +1,2 @@
/* theme.lss - shared by whoever imports it */
button { height: 30px }