I'm working on a UI Element rendering library (sort of like competition to JSX). A big difference is the tool's syntax. I'm using curried functions and a proxy to achieve a "functional" look like so: a.div(...classes)(...children). So far, static SSR rendering is finished, now I'm working on making reactive elements. I plan to create a .json file containing the relations between the elements and the data they react to. Along with the Re-rendering functions, event listeners, and other scripts that run in the client.
I'm planning to use a custom Observable class for rerendering and a function in the API of the renderer for event listeners, like so: a.div(...classes)(...children).on({ ...eventListeners }). But how can I send these functions to be executed on the client? It's a really weird question that I'm having a hard time googling, I hope the explanation was clear. Thank you
Edit: Just for adding context, this is my design for rerendering: Unlike React that creates a virtual dom, my plan is to link the elements and the data they react to with a little static json. It would look something like:
// static json that connects elements to state data:
[{
reactant: 'count', // name of the state variable
rerender: 'child' // the type of rerendering to be performed
}, ...]
// This is how the server will render the html template:
state = {
count: 0
}
createApp(state => a.span('label')(state.count))
// This is what the server will send to the client:
'<span data-ref="1">0</span>'
The template contains an attribute that wasn't declared: data-ref="1" This means that the element's reactiveness is linked to the first entry of the json. The one that states that will react to the state variable 'count' and will rerender only its children. This is very important because it avoids all of the "magic" react has that inefficiently renders elements with a virtual dom.