Any idea about making a generic DOM instead of just React

[ClassicOldSong]

It's good to see LVGL finally got a JS binding, but it's still a bit limited only binding to React. Is there any idea about making a generic DOM for LVGL so that other renderers like Svelte and SolidJS can easily bridge in?

There's an example of providing generic DOM to NativeScript: https://github.com/SudoMaker/dominative

And we got lots of existing web frameworks working on NativeScript without effort.

Also it's a good chance to get NativeScript integrated with LVGL through QuickJS.

[derekstavis]

I feel like this is out of scope for the current state of this binding, as it's right now closer to React Native's approach to integration than NativeScript's approach. Probably this package should be renamed to react-lvgl to narrow the scope, and fork it to something like nativescript-lvgl to expose the DOM APIs. DOM APIs are too bad to contaminate the clean API that this currently exposes 😛

[ClassicOldSong]

Never mind, I scratched my own itch though

DOM APIs are not contaminating anything since it's still provided by the same JS layer providing DOM to NativeScript.

https://twitter.com/classicoldsong/status/1632549846161948673

[derekstavis]

Good job here! This is awesome! I'll go ahead and close this then!

[X-Ryl669]

I don't really understand why you've closed this and #1. CheeseDOM is just a slideware as far as I know, there's nothing more than 2 (maybe fake) screenshots. It would be very interesting if it existed. Yet I don't think the issue is solved here.

[ClassicOldSong]

I can promise that it’s as real as you are. We’re still adding more things to the runtime(hardware interface like GPIO/SPI etc) Just stay tuned.

…

On Fri, 4 Aug 2023 at 17:49, X-Ryl669 ***@***.***> wrote: I don't really understand why you've closed this and #1 <#1>. CheeseDOM is just a slideware as far as I know, there's nothing more than 2 (maybe fake) screenshots. It would be very interesting if it existed. Yet I don't think the issue is solved here. — Reply to this email directly, view it on GitHub <#8 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACQGQJWH7SD4X47M66WY3CDXTTARNANCNFSM6AAAAAAS24UBEA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[derekstavis]

I gave some thought to this, and I think that long-term this binding should focus on exposing LVGL components in a JS-like API, and leave the framework plumbing to the user land. For example, it should expose an API similar to this:

const object = new LVObject();
object.setBackgroundColor("#ff0000");

const style = new LVStyle();
style.setDisplay("flex");

object.setStyle(style);

Then, we could spin up separate packages, e.g.: react-lvgl and react-lvgl-dom that would use the JS object API to expose either an LVGL-like or DOM-like API.

The way I envision this happening is by turning this repository a monorepo, and having the separate packages in a packages/ directory. Open to thoughts and help on making this happen. I can also create a ROADMAP with some of the steps to get there.

[ClassicOldSong]

Actually we have this done already, though manually. The DOM part is provided via undom-ng, while LVGL part is provided via CheeseGL(will be released alongside with Resonance, our JS runtime) for Resonance.

[ClassicOldSong]

This is how part of the working code in one of our projects looks like:

import { LVGL, Style } from 'cheesedom'

const style = {
	label: new Style({
		align: 'center',
		textAlign: 'center',
		width: '100%',
		textColor: '#ffffff',
	})
}

const goBack = () => {
	const indev = LVGL.indev_get_act()
	indev.wait_release()

	history.back()
}

[derekstavis]

That's great news! Once you have it published, are you interested in discussing a way to merge the projects in a single one, and potentially make this an official binding featured on the website?

[kisvegabor]

FYI, we we will publish our updated website which has this section in the home page.
Thanks to @derekstavis, I can add the JS binding to the list. 🙂

[ClassicOldSong]

That's great news! Once you have it published, are you interested in discussing a way to merge the projects in a single one, and potentially make this an official binding featured on the website?

CheeseGL is a plugin for Resonance and CheeseDOM is a wrapper for CheeseGL using undom-ng, I'm afraid it can't be merged into one.

I'd like it to be featured but IDK if it meets your requirements.

[derekstavis]

Let's evaluate once it's live :) I think we can find a middle ground that works for all potential abstractions. This way new functionalities in LVGL can always trickle down to client libraries.

I'm still a bit torn that this binding is also tied to a specific JS runtime, so in some ways, this repo is more like lvgl_binding_quickjs. This means that there could be a lvgl_binding_hermes, lvgl_binding_nodejs, etc.