Minor project aimed into enabling the usage of JSX for building templates/models for @peasy-lib/peasy-ui (a.k.a. PUI) by providing a JSX node builder and a function for generating a model that PUI will use through those nodes.
This project was initially inspired by How to render JSX to whatever you want with a custom JSX Renderer by Adrian. You could call it fate that this particular post just randomly reached me while I was looking up something completely unrelated to this.
NOTE: These tasks don't fully indicate what I'm doing or what will be done and what might not.
Done Tasks:
- Build and render a proper PUI model/template
- Display simple states
- Bind event callback functions
- Simple attribute binding (JSX
<input type={state()} />== PUI binding<input type="${ state }" />) - Attribute one way binding to state (JSX
<input type={state.model()} />== PUI binding<input ${ type <== state } />) - State one way binding to attribute (JSX
<input type={state.attr()} />== PUI binding<input ${ type ==> state } />) - Attribute two way binding to state (JSX
<input value={state.sync()} />== PUI binding<input ${ value <=> state } />) - Render static HTML from template (
import { renderHTML } from "pui-jsx/static")
Needs Cleanup:
- Iteration binding (Puts binding as property
pui="${ item <=* list }"instead of directly adding it into the template)
Main Tasks:
- State sub-property binding
- Element ref binding
Secondary Tasks:
- Playground for testing online
- Proper error messages
- Differentiate between dev and prod build
- Vite config for enabling item without plugin
Undecided on whether to do or not to do Tasks:
- Write some documentation
- Full proper TypeScript support (not sure how much of a hassle this might be)
- Actually build a vite plugin for this
- HTML5 2D Canvas rendering with nodes