Elements and Inheritance

[Magnogen]

So there are a few variables that already have values assigned to them, like Background, Rect or Text. They are essentially just objects with default values and a native render function. They're called Elements.

Or at least, that was how I originally thought of making renderable objects.

They would be used like this:

let square = Rect { fill: #fff };

But now I'm not sure, it kinda makes sense, but then it comes with the idea of

let test = { x: 0 } { y: 0 };

being valid, and test would be an object with x and y properties.

---

Maybe I could use this syntax instead? Making it seem as though Elements are functions that create a new object?

let square = Rect({ x: 0, y: 0 });

[Magnogen]

Hmm, I was thinking about inheritance - child elements inheriting their position from the parent, resulting in layouts and things - but that wouldn't make much sense with that kind of function syntax, but tbh idk how that inheritance idea could work anyway.

[Magnogen]

Could object-defaulting and inheritance have different syntaxes? Maybe something more programmatic for inheritance, like:

let container = Box { x: 0, y: 0, w: 320, h: 180 };
let title = Text { parent: container, dy: 160 };

Not sure about the parent property, but something along those lines. Maybe with @?

let container = Box { x: 0, y: 0, w: 320, h: 180 };
let title = Text { dy: 160 } @ container;

Not sure... Someone might think that there's a variable called @ that you're combining with the object...

[Magnogen]

Perhaps an element can be declared as a child of another element? I'm not using the colon yet, so maybe something like this?

let container = Box { x: 1, y: 3 };

let child = container: Image { x: 2, y: 4 };

Idk, the colon is kinda already used for the json object syntax, and at the same time it doesn't really show that the two are linked together. I wish there was an ascii character that's easily typable that looks like a link

[Magnogen]

What about a tilde? ~ it sorts looks like a link...

let container = Box { x: 1, y: 3 };

let child = container ~ Image { x: 2, y: 4 };

Not sure actually, it could be mistaken for a -

[Magnogen]

I don't really want to have to add a children key to every object, I just want to be able to get the value of another element's value, but this is what a children key could look like anyway:

let child = Image { x: 2, y: 4 };
let container = Box { x: 1, y: 3, children: [ child ] };

Ooohh no I don't like having to declare the child before the parent. That's like declaring a class that inherits from a class you haven't declared yet.

[Magnogen]

Okay. Revisiting this 2 years later - could use something like signals. They gained a bit of traction last year, and it could work. Maybe it'd work like this?

let parent = Box { x: 1, y: 3 };
let child = Box { x: parent.x + 2, y: parent.y + 4 };

That implies that you get the value of the parent box, but at the same time people might think it doesn't update, because that's just what happens in JavaScript. It could use another piece of syntax, like an @ or ~ or something.

Or it could just break the mold of JavaScript land and be free to spread it's wings. 🪽🪽