quickjs icon indicating copy to clipboard operation
quickjs copied to clipboard

Question: features needed for React

Open ancorgs opened this issue 1 year ago • 4 comments

This is not really an issue, just a question.

As you know, React is one of the most popular frameworks for developing web applications nowadays.

On the other hand, I have seen a couple of browsers that rely on QuickJS for adding Javascript support (elinks, chawan...)

I was wondering if there would be any chance to make React applications work at such browsers.

According to React's documentation, it relies on these modern Javascript features:

So the first question to solve is whether QuickJS supports all those features. I found information about promises but I'm not sure about the other two.

ancorgs avatar May 07 '24 09:05 ancorgs

QuickJS supports all of those. From a JS prespective I'm not sure what would be missing, aside from, obviously, the DOM.

saghul avatar May 07 '24 09:05 saghul

I played with it some, implemented a simple DOM but I don't think it's actually needed for SSR to work...

https://github.com/HiRoFa/GreenCopperCmd/blob/main/scripts/ssr.ts

andrieshiemstra avatar May 07 '24 09:05 andrieshiemstra

I played with it some, implemented a simple DOM but I don't think it's actually needed for SSR to work...

https://github.com/HiRoFa/GreenCopperCmd/blob/main/scripts/ssr.ts

SSR (server side rendering) is not the issue, the client side code of React applications should be transpiled to standard javascript that QuickJS supports. The DOM implementation is provided by the navigator and must be accessible from javascript as host objects.

chqrlie avatar May 07 '24 14:05 chqrlie

QJS itself is fairly complete. Most significant omission I've found so far is that it has no global proxies, so WindowProxy may be impossible to implement. I haven't tried too hard, though, and I doubt it's really needed for React.

However, to get complex JS pages running, you also need to implement lots of web APIs. Of these, Chawan is missing XHR, proper CSSOM, many Event types, etc. I can't speak for Elinks, but I suspect the situation is similar over there, with at most differences in which APIs are missing.

To figure out what exactly you'd need, you can do the following:

  • enable JS on target page
  • open page
  • see where the script throws (in Chawan, you can type M-c (i.e. Escape + c) twice to get a browser console)
  • check the line, and cut down the file(s) to a simple test case
  • file a bug report/write a patch for the appropriate browser :)

If you're lucky, the missing API is something fairly simple, like an attribute reflector. If you're less lucky, it depends on a gazillion other APIs, which may require structural changes in the browser. If you're even less lucky, no JS will run at all, because the browser is not running something, e.g. module scripts, or some event.

In some cases, it might even be a bug in QJS. e.g. I stumbled upon a bug recently that indirectly broke old.reddit comment collapsing. But it happens very, very rarely.

bptato avatar May 07 '24 14:05 bptato

I have React working with QuickJS (without the DOM, since I don't use it for web rendering). So the answer is yes. The only thing I needed to implement myself for it work was setImmediate.

Not sure about react-dom, though.

rubenlg avatar Nov 16 '24 23:11 rubenlg

Most libraries that remotely manage the DOM need to be async. With WebAssembly it can be both sync/async. However, for different use cases remote still would be desired, though there's the possibility of using locking on threads to give a WebAssembly running in a worker sync access to the DOM. This means there isn't one ideal solution. However it tends towards looking like the sync/async web-sys in rust-land. The Web IDL could be used to create a heavyweight DOM binding just like in web-sys.

With remote APIs I think a vdom library like Vue (which I'm more interested in than React) or React could help make a lighter weight binding to the browser, but a binding generation approach with the IDL could be used to fill in the gaps.

benatkin avatar Feb 03 '25 17:02 benatkin