How to help?

[c-smile]

Tasks that I think make sense to do at this moment:

Native components and extensions (plugins):

Video provider native behavior

Idea

Idea is to wrap ffmpeg lib as video source behavior for Sciter. The code can be based on behvaior_video_generator and How to Write a Video Player in Less Than 1000 Lines tutorial.

Output

Ideally implementation should support as static linkage as a dll (sciter-ffmpeg.dll). Pretty much in the same way as current SQLite component that supports dual linkage.

Goals

This project will help to establish mechanism for loadable native behaviors.

video {
   behavior: ffmpeg-streams "sciter-ffmpeg.dll"
}

It is not clear yet what such behaviors will need from Sciter side (other that passing Sciter API reference as it is).

Goals

Ideally implementation should be "promise capable" - so the project will help to establish API for native promises.

Scripting frameworks and components

VueJS and ReactJS

Makes sense to try to port any of these.

Goals

These will help:

• to discover DOM features that Sciter definitely need to support to run Vue or React applications;
• to decide what to implement in JS in copmptibility-layer.js and what needs to be implemented natively;

Any popular Charts library

The one that use <canvas> for rendering.

Goals

To test and improve my current quite basic <canvas> implementation.

Maps

Leaflet anyone?

Please let me know if you want to take any one of these or have other ideas.

Chat Component

Idea

That's brand new component that needs to be designed from scratch. And I will help as much as I can on this.

Seems like many of us need a component that can be built-in into applications.
Something along the lines of Slack, Skype, etc:

Goals

This will end up with "virtual tape" - tape of messages. We need to decide if script is enough for that or do I need to add native support for virtual lists.

[jsprog]

Scripting frameworks and components
VueJS and ReactJS
Makes sense to try to port any of these.

I don't know if my request is too heavy for sciter.js, but the future is there. At least, consider adding the features not needed by the app through a dynamic library that will be used solely for development purposes.

I recommend that you focus on the use of https://github.com/vitejs/vite and https://www.snowpack.dev/ whenever possible. Reactive frameworks are moving away from bundlers to Native ES modules during development. The bunlders are staying there to focus solely on bundling production builds. This modern approach is tested to be much lighter for development (creation for projects, neat package.json, starting development Server and HMR).

Vite:
it has templates for creating Vue, react and preact projects with support for HMR out of the box. For production builds, it delegate the bundling work to rollup.
For svelte users, there is a plugin https://madewithsvelte.com/vite-plugin-svelte and I managed to use it successfully with HMR support (of course, with a web browser).

Snowpack:
You gain similar experience as vite. many templates are available out of the box (React, Preact, Svelte, Vue, etc...) with support for HMR. Webpack is used for bundling production builds but rollup is joining soon. If you scroll down the main page, you'll see a graph explaining the differences between the older and the newer approaches.

Requirements for vite and snowpack

• ESM Modules: ES2020 is supported by quickjs
• ESM Hot module replacement: https://modern-web.dev/docs/dev-server/plugins/hmr/: import.meta is available (empty object). Not sure if vite or snowpack will fill this empty object.
• Loading app from HTTP server
• WebSocket

[c-smile]

I don't know if my request is too heavy for sciter.js, but the future is there. At least, consider adding the features not needed by the app through a dynamic library that will be used solely for development purposes.

Could you elaborate more on that? In particular purpose "a dynamic library that will be used solely for development purposes".
What is that and why do we need it?

Vite & Co,

Not sure I understand how Sciter.JS is related to all that. And what is so difficult in hot reload?

Loading app from HTTP server

Are we talking about desktop UI here?

[jsprog]

Could you elaborate more on that? In particular purpose "a dynamic library that will be used solely for development purposes".
What is that and why do we need it?

Adding some features may improve the developer's experience, but they may not be needed by a production app. You may have some reservations about a possible negative impact on binary size, and that's why I'm suggesting a work around for this if any.

Not sure I understand how Sciter.JS is related to all that. And what is so difficult in hot reload?

Are we talking about desktop UI here?

You already said 'Makes sense to try to port any of these.', and that's whey I wanted to share my thoughts. Usually, developers depend on ready made templates to kick starting new reactive projects. Vite and Snowpack are the new school tools to achieve this and Sciter.js is already having supprort for modern javascript syntax. They're just exploiting the web standard, and by focusing on their requirements from the browser side during development, we should be able to use them with sciter.js:

• Loading the app and ES modules from server during development:

  • scapp http://localhost:port
  • import module from './module.js'. The module may come either from local files or server depending how we started the app.

• For hot reload to work, Sciter.js should be able to communicate with the development server using WebSocket, and it should be able to replace modules. In fact, I haven't done any test with the replacement and it's too early for this unless if the support for WebSocket landed.

In fact, I'm planning to give it some efforts, but let's seek stability first (native modules, parent.removeChild, WebSocket, etc...)

[intrnl]

• Preact breaks because it's trying to check the length of childNodes of an element
• React breaks due to ReactDOM checking whether or not an element is an instance of window.HTMLIFrameElement
• Svelte is able to render a click counter (a button that shows how many times it's been clicked) successfully, but clicking the button does nothing because it's trying to change the count value through TextNode#data

[jsprog]

Please don't throw everything here. I can confirm that your first post is due to element.childNodes = undefined and better to create a new issue for this instead of messing up this topic. not only this but also document.createNodeIterator that's used by malinajs is undefined

For your problem with svelte, just change text.data to text.nodeValue using @rollup/plugin-replace and it's already explained by me in a different issue created by another person

Since you're the one who discovered the problem about element.childNodes, I can't claim this for myself and can you create a new issue with a clear title and a single html example containing a simple script.

[intrnl]

Yeah I realize, my bad. I think we could make an umbrella issue for the issues regarding these frameworks and libraries though.

[jsprog]

I think we could make an umbrella issue for the issues regarding these frameworks and libraries though.

• Issues in general are more suitable for bugs and the features expected to be available or behaving in a different way.
• Pull requests are more suitable for recommendations to be added by the maintainer. e.g: I could recommend some deviations from the standard to support non trusted keyboard events and my recommendation should be justified with a use case (e.g: barcode scanners)
• I don't consider the current subject as a real issue for these reasons:
  • It's created by the maintainer and self assigned from the start
  • It's more suitable for sharing recommendations about the topics mentioned above.

@intrnl Opening an umbrella issue about reactive frameworks is better be done in a place like a forum and I'd rather recommend opening a general topic, followed by more focused topics for some frameworks.

• sciter.js + reactive frameworks (This is the general topic)
• sciter.js + sveltejs/template (This is to make sciter.js workins with the default template for svelte with livereload)
• sciter.js + vite/vue
• sciter.js + snowpack/preact
• etc...

But I might be wrong for a simple reason: I'm already registered at https://sciter.com/forums/ but I can't create any post at the moment (I'm new), and my comments aren't landing there yet. I'm starting to worry about others not to be able to join our discussions if any. Maybe creating some projects at Github is much better

@c-smile What would you suggest about this?

[c-smile]

To @jsprog : it does not matter at this stage where feature requests will appear.

But all this should really be more organized, so forum is better, I think. But it could be also Wiki page here.

At this phase (this November) I am aiming on two goals:

1. implementation of minimal set of DOM APIs that is needed for popular JS frameworks so I appreciate list of mandatory methods.
2. to make inspector operational: console, DOM tree, style list, JS debugger.

[c-smile]

• Svelte is able to render a click counter (a button that shows how many times it's been clicked) successfully, but clicking the button does nothing because it's trying to change the count value through TextNode#data

@intrnl, I cannot find any mentioning about data property anywhere in specs. Any idea what does it mean?

[jsprog]

the 'data' property is valid for 'text nodes' and 'comment nodes' and the information about it is quite limited. just use google and type 'textNode.data vs'

https://stackoverflow.com/questions/12286975/when-working-with-text-nodes-should-i-use-the-data-nodevalue-textcontent

svelte is updating state visible text by using text.data = data; and the text here is a textNode. To get arround this, I had to replace it with text.nodeValue = data; using rollup. You may check node_modules/svelte/internal/index.js and node_modules/svelte/internal/index.mjs or online at these links:

• https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/dev.ts
• https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/dom.ts

According to my last test with malina.js (think of it as a deviation from svelte with support for other features) I could confirm that they're using .nodeValue

implementation of minimal set of DOM APIs that is needed for popular JS frameworks so I appreciate list of mandatory methods.

to @intrnl, I think that we can use this topic to write about DOM features failing with sciter.js and sorry for my previous words

[jsprog]

@c-smile: Anyway to reload the window (like F5) from javascript. I needed this since 2 days to proceed with tests, to later share back my full work.

[intrnl]

The data property comes from CharacterData abstract, implemented by TextNode and CommentNode.

[jsprog]

I already started my first git repository jsprog/sciterjs-svelte-template to share with others my work about bringing the default svelte template to sciter.js. No content at the moment, but It should be there very soon.

By doing this, I'm trying to:

• Help others benefit from existing work to kick start their svelte projects.
• Help others to understand how I'm tracking the missing requirements, and by time they should be able to do similar work by them selves or to be more effective when recommending some features for sciter.js
  • Give a man a fish, you feed him for a day.
  • Teach him to fish, and you feed him for life

[jsprog]

I created sciterjs-svelte-template, that would help developers in kick starting their sciterjs+svelte projects will less efforts.

Others interested in knowing the details behind this work, may read svelte_to_sciterjs_startup_instructions.md

More is coming soon

• Livereload: code and some detailed information.
• Adding more structure to the project.
• Allowing others to run existing samples.

[jsprog]

to @c-smile: We need an alternative to Location.reload() and Window.this.reload() isn't available yet

Is it possible to achieve this with javascript only?

[c-smile]

See: https://github.com/c-smile/sciter-js-sdk/blob/main/samples/debug-peer.js#L65

[jsprog]

Thank you, I succeeded with live reload with minimal changes (svelte). It's not fully perfect, but It's working and It should help developers coding faster.

• create a new file livereload_fix.js with content from below
• import it from main.js
• for production builds, we don't need to import the fix. That's why, we need rollup replacement.
• we need rollup replacement again for other 2 patches:
  • "l.getElementsByTagName('head')[0].appendChild(r)": "document.head.appendChild(r)"
  • "r.id = 'livereloadscript'": "Object.defineProperty(r, 'id', { value: 'livereloadscript' })"
• Edit: we also need to add another script tag before the main script for a polyfill

<!-- index.html: place this before the main script -->

<script>
    !window.location && (window.location = { "host": 'localhost' })
</script>

// top of main.js

import './livereload_fix'

// livereload_fix.js

// note-1: This isn't final and expect it to change with improvements and some fixes
// note-2: The port is hardcoded to the default value used by livereload (35729)
// note-3: Unwanted logs after closing the app (only if you used 'new WebSocket(uri)' at least once)
// note-4: Handshaking with the dev server isn't implemented yet.
//    - issue: the reason behind this is that the app will crash with "Segmentation fault (core dumped)"
//        if it tried to connect to a disconnected websocket server
// note-5: I'm not sending the 'hello' command on connection 
//        (ws.send(JSON.stringify({ command, 'hello', ...other-params }))
//        - doing this will case the server to send a reply, that I'm trying to avoid this time,
//            because I'm only receiving empty messages
// note-6: I'm only receiving empty messages from the development server,
//    and I'm debouncing them to trigger the reload
//    - likely I'm not sending the 'hello' command with the correct parameters (not sure)
// note-7: the script injection for livereload-js is kept as it is for these reasons:
//    - To keep compatibility with browsers
//    - It has no effect to Sciter.js

import debounce from 'lodash/debounce'

const debounce_duration = 200
const reconnection_timeout = 1000
const ws_uri = `ws://localhost:35729/livereload`

if (Window.this) {
    let ws

    const debounce_then_reload = debounce(() => {
        document.dispatchEvent(new Event("reloaddocument", {bubbles:true}),true);        
    }, debounce_duration)

    function connect () {
        ws = new WebSocket(ws_uri)
        
        ws.onopen = () => {}
 
        // just crash the app if the connection with server is closed.
        //    Better than keeping it to not receive the updates from a restarted server
        ws.onclose = () => { setTimeout(() => { connect() }, reconnection_timeout) }

        ws.onmessage = () => { debounce_then_reload() }

        ws.onerror = (err) => {}
    }
   
    connect()
}

// rollup.config.js

production && replace({
    delimiters: ['', ''],
    // we don't need livereload_fix for production builds
    "import './livereload_fix'": ""
}),

replace({
    delimiters: ['', ''],
    // fix: use alternative supported syntax
    "l.getElementsByTagName('head')[0].appendChild(r)": "document.head.appendChild(r)",
    // fix: no setter for property
    "r.id = 'livereloadscript'": "Object.defineProperty(r, 'id', { value: 'livereloadscript' })"
}),

// example App.svelte

<script>
    let count = 0
    setInterval(() => {
	count++
	console.log('count:', count)
    }, 1000)
</script>

<div>Count: {count}</div>

@c-smile: The next steps are:

• Fixing WebSocket in order to improve livereload_fix.js. Likely, I'll open a new issue after some extensive tests with WebSocket.
• Access to routes: we need this for:
  • To preserve navigation after reload (like browsers)
  • It could be done with custom code and persistence, but we have to stick with the routing notion that's to be implemented by Sciter.js

[c-smile]

What's the problem with WebSockets?

As of preserving navigation, I will add data property. It's content will survive reloading. Is this what you are looking for?

[jsprog]

What's the problem with WebSockets?

I can't say too much about this without some extensive tests. Sorry about this, I had to spend my day tracking some hard to recreate CSS bugs, and I'll try to report about them within 24 hours).

As of preserving navigation, I will add data property. It's content will survive reloading. Is this what you are looking for?

I think that you understand better than me. I suggested to keep navigation state across reloads and you're suggesting something that would help with:

• preserving navigation (route)
• preserving login state
• preserving other state passed through navigation
• preserving other state like sessionStorage or a simple embedded key/value store, with the difference that we're storing objects rather than strings or binaries.

Sometimes, the programmer may prefer to start with a new state. In this case, he should be able to reload without keeping state. For this, we've got some scenarios:

• He has to manually clean all state at app startup.
• He has to dispatch a different type for event (i.e: one type for reload and the other one for full reload).
• He has to set a flag when dispatching the reload event.

[jsprog]

Question: Are there plans for Web Workers or Worker Threads?

• https://github.com/saghul/txiki.js/blob/master/examples/hello_workers.js
• https://github.com/saghul/txiki.js/blob/master/examples/worker.js