Crash while loading a basic react project

[TemporalAgent7]

Hi,

I tried using it with a barebones react project and scapp.exe silently crashes. If it helps with the repro, here's a simple project to use: https://github.com/TemporalAgent7/sciter-basic-react .

Let me know if there's any other info I can provide.

Thanks!

[veluxa]

Hi, I tailored a streamlined react for sciterjs, maybe useful to you: https://github.com/veluxa/sciterjs-react

[TemporalAgent7]

Thank you, but this becomes powerful when we are able to reuse (most / a lot) of the thousands of libraries and frameworks already built for HTML, CSS and JavaScript.

If we need to rewrite everything from scratch to comply with peculiarities, it loses a lot of the appeal (and we might as well look at other options that require rewrites like React Native, Flutter, etc.) - I agree with cutting out the cruft that browsers pile on, but the basics should be there and compatible with web standards for this to gain any traction.

[c-smile]

Try please v. 4.4.5.10.

At least it will not crash.

Yet, this <script src="app.js?618264de5b27c26c90e6"> will not work if you are testing this from local drive. file://... urls have no notion of query parameters.

Yet check, PReact demos in SDK: https://github.com/c-smile/sciter-js-sdk/tree/main/samples/preact

PReact is more humanistic I would say than React.

But the best of them is Sciter.JS's built-in Reactor - simple and effective as it is implemented natively : https://github.com/c-smile/sciter-js-sdk/tree/main/samples.sciter/reactor

[TemporalAgent7]

Thank you, I can confirm the crash no longer happens with the update; the code still doesn't run, though.

I explored preact and Reactor, but the point was reusing one of the myriad of web components and libraries already out there (for example https://react.semantic-ui.com/ or https://developer.microsoft.com/en-us/fluentui). I messed around with preact-compat for a while but couldn't get Semantic UI React working.

I'm still envious of Sciter booting up with 7Mb of RAM compared to Electron's 42Mb for the hello world page, but I guess it's not designed to be a generic webview-like environment / Electron replacement.

[c-smile]

As I said this

%SCITER_PATH%\bin\windows\x64\scapp.exe .\dist\index.html

will not work as index.html contain HTTP relative urls that cannot be resolved to local file:// urls.

In any case I'd appreciate any information on what is missed in Sciter.JS to run ReactJS.

[TemporalAgent7]

I tried replacing the path with a fully qualified file:// path. This is the first errors that shows up:

The line in question is this: while (element instanceof win.HTMLIFrameElement)

[c-smile]

SciterJS has just one Element class that encapsulates all HTML and SVG elements - all 80 of HTML***Element classes plus 90 SVG***Element.

Normally desktop applications do not need all these.

But for documents designed specifically for Web browsers we will need to create and use special htmlx.css . That htmlx.css may look like as

iframe { prototype: HTMLIFrameElement url(htmlx.js) }
body { prototype: HTMLBodyElement url(htmlx.js) }
... all 80 here

and so corresponding htmlx.js (or bunch of them) is needed

class HTMLElement extends Element {}

class HTMLIFrameElement extends HTMLElement {}
class HTMLBodyElement extends HTMLElement {}
...

Particular classes may have some specific properties and methods defined.

And so, documents that rely on such classes should either include

@import url(htmlx.css);

or to be loaded not in Sciter window directly but in "web frames":

<frame src="..." content-style="htmlx.css" />

where content-style="htmlx.css" is Sciter specific attribute that will cause that htmlx.css to be preloaded as a content style of the document inside the frame.

Resume: Mithril, Svelte, PReact, ForgoJS can be loaded in Sciter windows directly. But ReactJS, AngularJS, and all other applications that rely on History and Navigate will require that "web frame" in order to be used in SciterJS.

Side note: I have no idea why ReactJS authors decided to use element instanceof win.HTMLIFrameElement construct as element.tagName == "IFRAME" should be significantly faster in JavaScript.

[btx638]

Try please v. 4.4.5.10.

At least it will not crash.

Yet, this <script src="app.js?618264de5b27c26c90e6"> will not work if you are testing this from local drive. file://... urls have no notion of query parameters.

Yet check, PReact demos in SDK: https://github.com/c-smile/sciter-js-sdk/tree/main/samples/preact

PReact is more humanistic I would say than React.

But the best of them is Sciter.JS's built-in Reactor - simple and effective as it is implemented natively : https://github.com/c-smile/sciter-js-sdk/tree/main/samples.sciter/reactor

Can use react hook in built-in Reactor like https://preactjs.com/guide/v10/hooks ?

[c-smile]

Can use react hook in built-in Reactor like https://preactjs.com/guide/v10/hooks ?

If their implementation is ES2020 compatible then hooks should work right now.

[veluxa]

Try please v. 4.4.5.10. At least it will not crash. Yet, this <script src="app.js?618264de5b27c26c90e6"> will not work if you are testing this from local drive. file://... urls have no notion of query parameters. Yet check, PReact demos in SDK: https://github.com/c-smile/sciter-js-sdk/tree/main/samples/preact PReact is more humanistic I would say than React. But the best of them is Sciter.JS's built-in Reactor - simple and effective as it is implemented natively : https://github.com/c-smile/sciter-js-sdk/tree/main/samples.sciter/reactor

Can use react hook in built-in Reactor like https://preactjs.com/guide/v10/hooks ?

The hook works fine for me,Try this : https://github.com/veluxa/sciterjs-react 基于最新preact且支持aardio