WARNING in ./node_modules/node-fetch/lib/index.mjs 156:11-38
Module not found: Error: Can't resolve 'encoding' in 'D:\Workspace\svelte-nodegui-starter\node_modules\node-fetch\lib'
@ ./src/components/StepTwo.svelte 19:0-31 126:25-30
@ ./src/App.svelte 26:0-50 50:15-22
@ ./src/app.ts 2:0-31 3:14-17

after recompiled by npm rebuild --nodedir=node_modules/@nodegui/qode

also error

See https://docs.nodegui.org/docs/guides/handle-events/#how-do-i-know-which-events-are-supported- and the links mentioned in that text.

For nodegui/svelte-nodegui-starter#2

I'm unable to publish @nodegui/svelte-nodegui. Just to confirm, I am logged in as shirakaba when using npm via the CLI:

$ npm whoami
shirakaba

... And I can confirm via npmjs.com that this user is part of the @nodegui organisation:

However, when I come to deploy the app, I get stopped for some reason. It says I must sign up for private packages (it says this even though I've removed the private field in package.json).

$ npm run deploy
# Build output...
npm notice === Tarball Details === 
npm notice name:          @nodegui/svelte-nodegui                 
npm notice version:       0.0.1-alpha                             
npm notice package size:  47.6 kB                                 
npm notice unpacked size: 215.0 kB                                
npm notice shasum:        9082d02629423361d3aae51242d659ce2b1847a8
npm notice integrity:     sha512-2j+D0vhh2ANAc[...]f8hOv0UH5e+UA==
npm notice total files:   93                                      
npm notice 
npm ERR! code E402
npm ERR! 402 Payment Required - PUT https://registry.npmjs.org/@nodegui%2fsvelte-nodegui - You must sign up for private packages

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jamie/.npm/_logs/2021-02-21T23_30_02_437Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @nodegui/[email protected] deploy: `npm run build && cd dist && npm publish`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @nodegui/[email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jamie/.npm/_logs/2021-02-21T23_30_02_462Z-debug.log

Any idea what's going on @a7ul?

There are several typos here in the license text:
https://www.npmjs.com/package/@nodegui/nodegui/v/0.0.11?activeTab=readme#license

I don't know how to contribute a fix.

I don't have the necessary access to install this bot for the repo; @a7ul, would you be able to help with this, please? Thanks!

https://allcontributors.org/docs/en/bot/usage

When trying this code:

<script lang="ts">
    import { onMount } from "svelte";
    import type { NSVElement, RNWindow } from "@nodegui/svelte-nodegui";
    import { Direction } from "@nodegui/nodegui";
    import fetch from "node-fetch";

    /**
     * The exact type for this is: NSVElement<RNWindow>
     * ... However, the Svelte language tools erroneously expect all bind:this values to extend HTMLElement, so
     * for now, we have to rely on reasserting the type.
     */
    let win;
    let urlWidget;
    let dataWidget;
    let jsonData="";

    async function loadPressed(){
        let dataPromise = await loadData(urlWidget.textContent);
        jsonData = JSON.stringify(dataPromise);
    }

    async function loadData(url){
        try{
            let response = await fetch(url);
            let jsonResponse = await response.json();
            return jsonResponse;
        }
        catch(error){
            console.error(error);
        }
    }

    onMount(() => {
        (window as any).win = win; // Prevent garbage collection, otherwise the window quickly disappears!
        (win as NSVElement<RNWindow>).nativeView.show();

        urlWidget.textContent = "https://reqres.in/api/products/3";

        return () => {
            delete (window as any).win;
        };
    });
</script>

<window
    bind:this={win}
    windowTitle="Seafile Share link DL">
    <view class="vertical">
        <view class="horizontal">
            <text>Share link url:</text>
            <lineEdit id="lineEdit" bind:this={urlWidget}/>
            <button text="Load" on:clicked={loadPressed}/>
        </view>
        <view>
            <text id="dataWidget" wordWrap={true} bind:this={dataWidget}>{jsonData}</text>
            <plainTextEdit readOnly={true} text={jsonData}></plainTextEdit>
        </view>
    </view>
</window>

<style>
    /* 
     * CSS has a few gotchas for now.
     * 1) Some values need to be enclosed with quotes (e.g. `width: '100%';` rather than `width: 100%;`).
     *    See: https://github.com/nodegui/svelte-nodegui/issues/4
     * 2) Classes are not supported yet; they're a bit weird in Qt5.
          See: https://github.com/nodegui/svelte-nodegui/issues/6
     * 3) You can't write element-level rules like `text { color: 'red'; }`, unless they're global (not scoped).
     *    For scoped rules, you have to refer to the underlying native element, e.g. `QLabel { color: 'red'; }`.
     *    See: https://github.com/nodegui/svelte-nodegui/issues/7
     */
    .vertical{
        flex-direction: column;
    }

    .horizontal{
        flex-direction: row;
    }

    #lineEdit{
        flex: 1;
    }
</style>

the text widget does not wrap and the plainTextEdit is not readonly.

Reported on the Svelte Discord, on the #nativedev channel by user _nothing, who had just been experimenting with svelte-nodegui-starter:

I tried out svelte-nodegui and got it running! Any tips on how to avoid this weirdness? I'm assuming it takes a moment for the styles to be applied to the other component, but it's just slow enough that it's very obvious.

The second component is rendered conditionally via:

{#if showSecond}
  <StepTwo />
{/if}

It's happening when the elements are added, by the way. Not removed.

_nothing confirmed that setting a fixed window size didn't improve the situation.

The instructions mention click on "Source -> Node -> 'Your node process'" There is no "Source" thing to click, while there is sources? Also after clicking sources and node tab, there is no node process to look at.

Unable to debug app when following the docs. Target is not listed.

Found in #40 (comment):

1. If you wrap the whole {#await}...{/await} block with an {#if dataPromise}, the enclosed text elements fail to update, with reasons relating to the next point.
2. The console is spamming addChild() called on an element that doesn't implement nodeOps.remove() [ undefined ]. This is something to do with updating the child text nodes passed into the <text> element. That's a bug with the text-updating logic, though somehow we get away with it in this example. I'll track it.

Problem

When text content is specified in between HTML tags, I'd expected the Svelte runtime to to create a new text node for each line, and for each text node to have its text trimmed. I might be mistaken, though.

It's unclear what are the responsibilities of the Svelte runtime relative to the renderer (and NodeGUI itself), and so I'm cautious about performing any splitting and trimming on the renderer if it may lead to downstream problems upon state changes (e.g. text nodes subsequently being removed).

Svelte source

<script>
    import { onMount } from 'svelte';

    let win;

    onMount(() => {
        window.win = win;
        win.nativeView.show();

        return () => {
            clearInterval(timer);
            delete window.win;
        };
    });
</script>

<window bind:this={win}>
    <view id="container" style="background-color: 'cyan';">
        <text>
            Some text
            with actual
            children
        </text>
    </view>
</window>

<style>
    #container {
        align-items: 'center';
        justify-content: 'space-around';
    }
    #nice_button {
        font-weight: 900;
    }
</style>

Svelte runtime handling

The text content is treated as a single text node, rather than being split up based on white space:

This leads to:

Further reading

The first source of truth should be this specification: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace

We should also refer to how Svelte Native handles this.

svelte-nodegui is probably a better description of what the project is (Node-based JS runtime, with a GUI, rendered by Svelte). But svelte-desktop kinda spells out that it's a desktop app development framework. So it's a debate between describing what it is vs. what it's for.

Both Node.js and Qt can target mobile, however, so if NodeGUI ever one day targeted mobile as well, then we'd be shooting ourselves in the feet for calling it Svelte Desktop.

So let's officially call it "Svelte NodeGUI", but also include an "A.K.A. Svelte Desktop" wherever possible to communicate its value proposition. It'll also help with SEO.

I'm not sure whether there is an official way to capitalise NodeGUI, but I'd prefer to capitalise it as such (GUI being an acronym) rather than NodeGui.

See:

• https://doc.qt.io/qt-5/stylesheet-reference.html
• https://doc.qt.io/qt-5/stylesheet-syntax.html
• https://forum.qt.io/topic/17237/using-css-class/6

The forum post suggested this approach:

parent.nativeView.setProperty("class", "my_supa_button");

*[class=my_supa_button] {
    font: 50px;
    color: black;
}

Svelte NodeGUI literally uses React NodeGUI under-the-hood so I'm somewhat tempted to just point users at that docs site and call it a job done; but at the same time, people like things in one place. Wondering whether there's a low-effort way to move forwards on this?

CC @a7ul

i tried to add a new view on current window as follow,successed
import CustomView from "./CustomView .svelte"; let viewContainer= document.createElement("view") viewContainer['setStyle']("width", "400px") viewContainer["setStyle"]("height", "400px") document.body.childNodes[0].childNodes[0].appendChild(viewContainer) let viewInstance = new CustomView ( { target: viewContainer, props: {} } )
i tried to create a new window as app.ts done but failed

The example starter won't work.
OSX. v11.5.1, m1.
Node v.16.3.0

git clone https://github.com/nodegui/svelte-nodegui-starter
cd svelte-nodegui-starter && npm install && npm run dev

Run `npm audit` for details.
❯ npm run dev

> [email protected] dev
> webpack --mode=development

asset nodegui_core-03615e63696900d1383da152cd3c5c85.node 7.28 MiB [emitted] (auxiliary name: main)
asset index.js 1.39 MiB [emitted] (name: main) 1 related asset
asset 08ef36629f2fe40bdcbe135ae303d949.jpg 58.1 KiB [emitted] [immutable] [from: assets/nodegui.jpg] (auxiliary name: main)
runtime modules 21.9 KiB 10 modules
modules by path ./node_modules/@nodegui/nodegui/ 510 KiB 212 modules
modules by path ./node_modules/postcss/lib/*.js 479 KiB 25 modules
modules by path ./node_modules/source-map/ 99.4 KiB 11 modules
modules by path ./src/ 10.8 KiB
  modules by path ./src/components/ 6.85 KiB 3 modules
  2 modules
modules by path ./node_modules/cuid/ 2.88 KiB 4 modules
modules by path ./node_modules/webpack/hot/*.js 3.75 KiB 3 modules
modules by path ./node_modules/chalk/ 12.1 KiB 3 modules
modules by path ./node_modules/color-convert/*.js 20.3 KiB 3 modules
modules by path ./node_modules/svelte/ 54.1 KiB
  ./node_modules/svelte/internal/index.mjs 53.9 KiB [built] [code generated]
  ./node_modules/svelte/index.mjs 212 bytes [built] [code generated]
18 modules

ERROR in ./src/app.ts 1:0-56
Module not found: Error: Can't resolve '@nodegui/svelte-nodegui' in '/Users/def/Documents/Projects/sveltekit-todo-nodegui/nodetest1/svelte-nodegui-starter/src'
resolve '@nodegui/svelte-nodegui' in '/Users/def/Documents/Projects/sveltekit-todo-nodegui/nodetest1/svelte-nodegui-starter/src'
  Parsed request is a module
  using description file: /Users/def/Documents/Projects/sveltekit-todo-nodegui/nodetest1/svelte-nodegui-starter/package.json (relative path: ./src)
    resolve as module
      /Users/def/Documents/Projects/sveltekit-todo-nodegui/nodetest1/svelte-nodegui-starter/src/node_modules doesn't exist or is not a directory
      looking for modules in /Users/def/Documents/Projects/sveltekit-todo-nodegui/nodetest1/svelte-nodegui-starter/node_modules
        single file module
          using description file: /Users/def/Documents/Projects/sveltekit-todo-nodegui/nodetest1/svelte-nodegui-starter/package.json (relative path: ./node_modules/@nodegui/svelte-nodegui)
            no extension```

Quite annoying that it keeps snapping back to the dead centre of the screen.

See https://github.com/halfnelson/svelte-native-preprocessor:

It performs the following transforms to provide a better developer experience when using Svelte-Native:

• Adds <svelte:options namespace="xmlns" /> to the component, ensuring the generated code is compatible with svelte-native
• Changes bind:text="{email}" to text="{email}" on:textChanged="{e => email = e.value}"

We at least need the namespace aspect, as if PR sveltejs/svelte#5652 lands, we'll require such preprocessing in order to close https://github.com/shirakaba/svelte-nodegui/issues/9.

I'm unsure whether we'll need it for bind:text; I haven't yet tried that feature (and indeed may not be able to if event listener names are forced to lower case – though I'm not sure of the casing used by NodeGUI yet).

This doesn't seem to work for me using fish, I had to switch to bash. While this isn't a problem it would be nice to support it.

OS: Manjaro Linux
Fish: 3.2.1
Node: 12 (latest)
Node gui: Starter template

The documentation states that any components enclosed with a <scrollArea></scrollArea> element should become scrollable. However when including such an element in a component, nodejs complains with a UnhandledPromiseRejectionWarning: Error: No known component for element scrollArea. when starting the application.

Other values like align-items: flex-end; work happily.

Workaround

Instead of:

align-items: center;

Set:

align-items: 'center';

Have troubles running nodegui. Any ideas why this is happening?

node -v v14.15.4
gcc version 11.0.0
cmake version 3.19.7
GNU Make 4.3
Fedora 34

`
npm run dev

[email protected] dev
webpack --mode=development

assets by status 58.1 KiB [cached] 1 asset
asset index.js 1.57 MiB [compared for emit] (name: main) 1 related asset
runtime modules 21.9 KiB 10 modules
modules by path ./node_modules/@nodegui/ 672 KiB 214 modules
modules by path ./node_modules/postcss/lib/.js 479 KiB 25 modules
modules by path ./node_modules/source-map/ 99.4 KiB 11 modules
modules by path ./src/ 10.8 KiB 5 modules
modules by path ./node_modules/cuid/ 2.88 KiB 4 modules
modules by path ./node_modules/webpack/hot/.js 3.75 KiB 3 modules
modules by path ./node_modules/centra/ 4.73 KiB 3 modules
modules by path ./node_modules/chalk/ 12.1 KiB 3 modules
modules by path ./node_modules/color-convert/*.js 20.3 KiB 3 modules
modules by path ./node_modules/svelte/ 54.1 KiB
./node_modules/svelte/internal/index.mjs 53.9 KiB [built] [code generated]
./node_modules/svelte/index.mjs 212 bytes [built] [code generated]
24 modules

ERROR in ./node_modules/@nodegui/nodegui/dist/lib/utils/addon.js 3:14-65
Module not found: Error: Can't resolve '../../../build/Release/nodegui_core.node' in '/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/dist/lib/utils'
resolve '../../../build/Release/nodegui_core.node' in '/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/dist/lib/utils'
using description file: /home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/package.json (relative path: ./dist/lib/utils)
using description file: /home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/package.json (relative path: ./build/Release/nodegui_core.node)
no extension
/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/build/Release/nodegui_core.node doesn't exist
.ts
/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/build/Release/nodegui_core.node.ts doesn't exist
.mjs
/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/build/Release/nodegui_core.node.mjs doesn't exist
.js
/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/build/Release/nodegui_core.node.js doesn't exist
.svelte
/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/build/Release/nodegui_core.node.svelte doesn't exist
.scss
/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/build/Release/nodegui_core.node.scss doesn't exist
.css
/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/build/Release/nodegui_core.node.css doesn't exist
.json
/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/build/Release/nodegui_core.node.json doesn't exist
as directory
/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/nodegui/build/Release/nodegui_core.node doesn't exist
@ ./node_modules/@nodegui/nodegui/dist/lib/QtGui/QApplication.js 7:32-57
@ ./node_modules/@nodegui/nodegui/dist/index.js 22:21-56
@ ./src/App.svelte 24:0-41 112:21-26
@ ./src/app.ts 2:0-31 3:14-17

webpack 5.24.2 compiled with 1 error in 13901 ms
No issues found.

npm run start

[email protected] start
./livereload.sh node_modules/.bin/qode ./dist/index.js

events.js:292
throw er; // Unhandled 'error' event
^

Error: spawn /home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/qode/binaries/qode ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21) {
errno: -2,
code: 'ENOENT',
syscall: 'spawn /home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/qode/binaries/qode',
path: '/home/denis/projects/svelte-nodegui-starter/node_modules/@nodegui/qode/binaries/qode',
spawnargs: [ './dist/index.js' ]
}

`

Would be best to add it to here, rather than this repo: https://github.com/nodegui/examples

Copying one of the existing apps like the Calculator would be adequate.

We will admin privileges to transfer the private mrsauravsahu/svelte-nodegui-preprocessor repo to this org. @a7ul can you please help with this? 😄

Not too sure what would be involved with this, but may not be out of reach.

Just spotted this. Although AllContributors is installed as an action (established in #18), it hasn't made a PR to fill out the table of contributors in the README (which I'd have expected to sync up with the .all-contributorsrc that I've written here). I'm not sure how to force it to update.

Maybe now that it's public for the first time, we should make a whitespace-only edit to that file and see if the integration picks it up.

The first time I do npm start, the attached screenshot is the window I see. This is on MacOS 11.6.

I did have some other problems getting it running at all for the first time. I was able to get past them, but I am mentioning them here in case they're related. The first is described at this link, which was resolved by following the "Try the following" comment at the bottom of the linked page. The other was resolved by doing export NODE_OPTIONS=--openssl-legacy-provider.

I'm no longer concerned about those earlier problems, but obviously, the screenshot shows a serious current problem.

This is possible, as long as you don't write it into a <style> element (Svelte compiles it out, as it finds no element in your HTML tree):

QLabel {
    color: red;
}

This would be preferred, as we use elements with names like :

text {
    color: red;
}

To achieve this, we'd need to implement a Svelte postprocessor that renames text to the corresponding underlying component, i.e. QLabel.

We could work around this using global styles, with the natural caveat that they would be unscoped. For now, the best we can do is:

:global(QLabel) {
    color: red;
}

Live reload

The minimal bash script livereload.sh seems to do the trick for live reload, simply by killing the app and relaunching it upon any Webpack hot update; I'm not sure we need anything more than that. It remains to be seen whether it works on non-bash CLIs, like that of Windows.

I initially had some other thoughts about how we could implement it (https://github.com/remy/nodemon/ and https://github.com/napcs/node-livereload, though both may not be quite what we need).

I suppose the disadvantage of my approach of killing the app altogether is that your debugger would keep detaching. That might be par for the course for live reload implementations, however – not too sure.

Current implementation

In our Webpack config, we inject a globally-available variable into the runtime context: __HMR_MODE__. This variable accepts the values "live-reload" | "hmr" | "none".

The only place we accept hot updates is in the entrypoint file, app.ts. Depending on the value of __HMR_MODE__, we do the following upon detecting a hot update in that file (which may have bubbled up from another file):

• "live-reload": Sends a special exit signal (64), so that the app will be relaunched if running via livereload.sh.
• "hmr": Applies the hot update without exiting the app (not yet implemented – see "HMR" section below).
• "none": The app remains alive, but doesn't apply the update.
• undefined: Behaves as "none".

We'd then instruct users to run the app by defining their npm run start script as ./livereload.sh node_modules/.bin/qode ./dist/index.js.

livereload.sh simply runs the given command (in this case, node_modules/.bin/qode ./dist/index.js) in a loop until it receives an appropriate exit signal like SIGTERM. If it receives our custom exit signal 64 (which we emit upon receiving a hot update when __HMR_MODE__ is set to "live-reload", then we terminate the process and execute it again. In other words, we relaunch the app. The Ctrl+C signal will still kill the app as normal, and all console logs from the process are still captured and shown in the terminal.

Extra reading

Some of this reading may be relevant for HMR. I looked into how Live Reload was implemented (under the name "LiveSync") in NativeScript:

• A webpack loader prepends this HMR script to each script file (this may be more complicated in .svelte files as they go through pre-processing, but then again we could just let the hot update bubble up to app.ts which is simply a TypeScript file): https://github.com/NativeScript/NativeScript/blob/1f790edc8032fd36bde4b7a24e4d1c1c4b4dea49/packages/webpack/bundle-config-loader.ts#L26-L46
• Something calls application.livesync() upon the hot update and that does all this state tear-down: https://github.com/NativeScript/NativeScript/blob/1f790edc8032fd36bde4b7a24e4d1c1c4b4dea49/packages/core/application/application-common.ts#L62-L81
• How the iOS Application class handles LiveSyncs: https://github.com/NativeScript/NativeScript/blob/2243660080ce6877d68a3f32fd64625f86023f77/packages/core/application/index.ios.ts#L287-L343
• Dimitar Tachev explains what webpack-dev-server and webpack-dev-middleware are: NativeScript/nativescript-dev-webpack#1027 (comment)
• Some more cryptic code on how Angular supports HMR/LiveSync in NativeScript: https://github.com/NativeScript/NativeScript/blob/020ad4da37f551e934cd6054ca983ab5083a4042/packages/webpack/transformers/ns-support-hmr-ng.ts#L82-L103
• How Frame navigation components handle LiveSync: https://github.com/NativeScript/NativeScript/blob/020ad4da37f551e934cd6054ca983ab5083a4042/packages/core/ui/frame/frame-common.ts#L598-L663
• How generic View components handle LiveSync: https://github.com/NativeScript/NativeScript/blob/020ad4da37f551e934cd6054ca983ab5083a4042/packages/core/ui/core/view/view-common.ts#L157-L214
• When the application is notified that livesync is in progress, it kicks off the HMR update by
  calling the hot.js module from nativescript-dev-webpack: https://github.com/NativeScript/nativescript-dev-webpack/blob/master/hot.js

HMR

This is far tougher to solve. HMR is experimental even in Svelte for Web, and Rixo (who developed it) said that supporting HMR for Svelte Native required bespoke work. So this is not something we can get "for free" just by setting things up right.

Extra reading

• Svelte's hot loader plugin for Rollup https://github.com/rixo/rollup-plugin-svelte-hot. The webpack one is called svelte-loader-hot.
• Svelte Native's Webpack config: https://github.com/halfnelson/svelte-native-template/blob/dcc048c247394a3acbc11e70b6a559696219675c/svelte-native.webpack.config.js#L8-L25, which inherits the largely irrelevant NativeScript common Webpack config: https://github.com/NativeScript/NativeScript/blob/master/packages/webpack/templates/webpack.javascript.js

Svelte NodeGUI sounds just what I need for my application.

The docs list only a number of very basic widgets.
These seem to be implemented in React NodeGUI, and Svelte NodeGUI just bridges over the React implementations.

For my real world application, I need a much larger number of Qt widgets. Without more widgets, I cannot even make a feasability study whether Svelte NodeGUI is suitable for my application, because the current set of widgets is just too small to find out whether it would work. Theoretically, I could add the widgets myself, but there are too many missing.

However, I am faced with 5 layers of abstraction:

1. OS widgets ->
2. Qt ->
3. Node GUI ->
4. React NodeGUI ->
5. Svelte NodeGUI

This makes it difficult to add new widgets, because I need to understand a lot of intermediate wiring code, to add a widget. Worse, the mappings seem to be hand-written.

May I suggest a different approach? Why don't you take the Qt widget API descriptions in computer-readable form, and then use Swig or a custom-made software to generate the bindings, for NodeGUI and each of React/Vue/Svelte NodeGUI?

This would have the following advantages:

• All Qt widgets supported, in all variants of NodeGUI
• API up to date with new Qt versions
• SvelteGUI would no longer need to use React NodeGUI, eliminating at least one level of indirection. (compare #21)

Hey @shirakaba!
We (the SvelteSummit team) would love to have you submit a talk about svelte-nodegui to SvelteSummit 2021!

https://sessionize.com/svelte-summit-spring-2021

Do let me know if you have any questions about the conference or about submitting a talk!

Svelte NodeGUI is built upon a few other projects. I've been careful to copy in and include the licences for each project, but they may be scattered around the source code. It would be better, I think, to concatenate them into a single LICENSE file.

Hi! I tried out svelte-nodegui but found that reactivity isn't working. See this example component:

<script type="ts">
  let lastClick: number | null = null;
  let times: number[] = [];

  function tap() {
    const timestamp = new Date().getTime();

    if (lastClick) {
      times = [...times, timestamp - lastClick];
    }

    lastClick = timestamp;

    if (times.length > 10) {
      times = times.slice(1);
    }
  }

  $: averageTimeBetweenClicks =
    times.reduce((acc, current) => acc + current, 0) / times.length;
  $: bpm = lastClick ? Math.round(60000 / averageTimeBetweenClicks) : "?";
</script>

<view>
  <button id="tap" on:clicked={tap}>Tap</button>
  <text>BPM: {bpm}</text>
</view>

<style>
  #tap {
    width: 100px;
    height: 100px;
  }
</style>

hello, I cloned the repo and do "npm install", but got the following error that I couldn't fix by myself.

_

info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'install' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 6d39a763f88c3b4a
5 silly install runPreinstallTopLevelLifecycles
6 silly preinstall [email protected]
7 info lifecycle [email protected]~preinstall: [email protected]
8 silly install loadCurrentTree
9 silly install readLocalPackageData
10 timing stage:loadCurrentTree Completed in 7ms
11 silly install loadIdealTree
12 silly install cloneCurrentTreeToIdealTree
13 timing stage:loadIdealTree:cloneCurrentTree Completed in 1ms
14 silly install loadShrinkwrap
15 timing stage:loadIdealTree:loadShrinkwrap Completed in 182ms
16 silly install loadAllDepsIntoIdealTree
17 timing stage:loadIdealTree:loadAllDepsIntoIdealTree Completed in 232ms
18 timing stage:loadIdealTree Completed in 479ms
19 silly currentTree [email protected]
20 silly idealTree [email protected]
20 silly idealTree ├── @babel/[email protected]
20 silly idealTree ├── @babel/[email protected]
...
...
10275 silly saveTree │ ├─┬ [email protected]
10275 silly saveTree │ │ └── [email protected]
10275 silly saveTree │ └── [email protected]
10275 silly saveTree ├── [email protected]
10275 silly saveTree └─┬ [email protected]
10275 silly saveTree └── [email protected]
10276 verbose stack Error: @nodegui/[email protected] postinstall: cross-env npm run setupqt && (node ./scripts/skip.js || npm run prebuild:install || npm run build:addon)
10276 verbose stack Exit status 1
10276 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
10276 verbose stack at EventEmitter.emit (events.js:209:13)
10276 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
10276 verbose stack at ChildProcess.emit (events.js:209:13)
10276 verbose stack at maybeClose (internal/child_process.js:1021:16)
10276 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
10277 verbose pkgid @nodegui/[email protected]
10278 verbose cwd /Users/zhoux/sites/github/svelte-projects/svelte-nodegui-starter
10279 verbose Darwin 18.7.0
10280 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
10281 verbose node v12.10.0
10282 verbose npm v6.14.10
10283 error code ELIFECYCLE
10284 error errno 1
10285 error @nodegui/[email protected] postinstall: cross-env npm run setupqt && (node ./scripts/skip.js || npm run prebuild:install || npm run build:addon)
10285 error Exit status 1
10286 error Failed at the @nodegui/[email protected] postinstall script.
10286 error This is probably not a problem with npm. There is likely additional logging output above.
10287 verbose exit [ 1, true ]

_

Found in #40 (comment).

Apparently we should set "noEmitHelpers": false in the tsconfig.json for our app in order for async/await to work correctly. Here's a working config:

{
    "extends": "@tsconfig/svelte/tsconfig.json",

    "compilerOptions": {
        "module": "esnext",
        "declaration": true,
        "removeComments": true,
        "noLib": false,
        "jsxFactory": "svelteNodeGUI.createElement",
        "emitDecoratorMetadata": false,
        "experimentalDecorators": true,
        "pretty": true,
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "noEmitHelpers": false,
        "noEmitOnError": false,
        "noImplicitAny": false,
        "noImplicitReturns": false,
        "noImplicitUseStrict": false,
        "noFallthroughCasesInSwitch": true,
        "allowSyntheticDefaultImports": true,
        "lib": ["es6", "dom", "es2015.iterable", "es2017.string", "es2018.promise"],
        "baseUrl": ".",
        "types": ["node", "svelte"],
        "paths": {
            "~/*": ["src/*"],
            "*": ["./node_modules/*"]
        }
    },
    /**
     * `svelte-nodegui.d.ts` provides the JSX typings needed to support Svelte components using lang="ts".
     * If you'd prefer not to introduce a "files" property into your tsconfig, you can add this
     * triple-slash directive to the top line of `src/app.ts` instead:
     * /// <reference path="../node_modules/@nodegui/svelte-nodegui/svelte-nodegui.d.ts" />
     * Remember to restart the Svelte Language Service after any significant changes to configuration.
    */
    "files": ["./node_modules/@nodegui/svelte-nodegui/svelte-nodegui.d.ts"],
    "include": ["src/**/*"],
    "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

nodegui/react-nodegui@f0feda0

The root cause of: #2.

From Atul:

A: yeah so nodegui just passes on the css string after some pre processing (nodegui autoprefixer) to qt

A: maybe it could be fixed there?

J: Have you seen the same problem occur in NodeGUI, or is it just in Svelte NodeGUI?

A: no it happens across all nodegui projects

Sounds like I'd better address this in NodeGUI itself rather than just Svelte NodeGUI.

Hiya - quick question : does this support WebRTC?

We're currently bundling some of the source for React NodeGUI in src/dom/react-nodegui, rather than just importing build files from node_modules/react-nodegui.

There was a compelling reason for this, but unfortunately I've forgotten.

We use React NodeGUI in a few places:

• To fill in the Svelte NodeGUI JSX Intrinsic typings: src/svelte-nodegui.ts
• To implement RNObject src/dom/svelte/RNObject.ts, a basic DOM-conforming wrapper for all native elements (QObjects) that is not necessarily a visual element. e.g. we use it for the <head>, <style> and <template> elements as well as document, all found in src/dom/svelte. It's also referenced in src/dom/svelte-elements.ts, where each of those elements are registered.
• src/dom/nativescript-vue-next/runtime, for providing proper typings when registering elements.
• src/dom/svelte/SvelteNodeGUIDocument.ts to grab the RNWindow typing.

I think the reason for copying the source in may have simply been to avoid any coupling with the React side of React NodeGUI. For example, we need to reference src/dom/react-nodegui/src/components/config.ts, but that file in its original state imports from "react-reconciler". I wanted to avoid users having to install react-reconciler into their app bundle. I therefore decoupled that file from "react-reconciler" in this commit: 2acccb1#diff-1fecc56b01094743ee99d3d1c501a51a25634e2faeeb1a8aafbdc44bd7514263. I'm not sure I've made any other changes to the library otherwise (and have been careful not to, as it would make updates harder to manage).

I also recall that I had problems importing the built code, due to a mismatch between esm and commonjs modules.

Let's add a contributors field to package.json. We'll add @mrsauravsahu in there for a start.

Hey there! Absolutely love this project!!

I was wondering if there was a story around integration with rollup / vite? Perhaps there is an example integration I could read over?

Anyways- thanks for this awesome project. It's a much needed addition to the native landscape!

It is suggested that this is one of the CSS properties that should apply to all widgets:

https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties

Using quotes, i.e. text-align: 'center'; (see https://github.com/shirakaba/svelte-nodegui/issues/1), does not improve things, either.

Note that QLabel does support an alignment attribute, though React NodeGUI does not implement this prop for .

which steps would need to be taken to enable webGPU in nodegui?

Issue

Cannot resolve phin package

• Here's a screenshot of the error.

Workaround

Installing phin with an npm install phin fixes this issue for now.

Hello,

I'm struggling at making a simple thing work : async data fetch. The documentation (https://svelte.nodegui.org/docs/guides/networking) explains how to write a function that make this async call, but not how to call it.

I've tried calling this async function directly in the (async) event handler of a button but the app crashes with FATAL ERROR: v8::HandleScope::CreateHandle() Cannot create a handle without a HandleScope.

If I try to use svelte await blocks like this :

<script lang="ts">
    import { onMount } from "svelte";
    import type { NSVElement, RNWindow } from "@nodegui/svelte-nodegui";
    import { Direction } from "@nodegui/nodegui";
    import fetch from "node-fetch";

    /**
     * The exact type for this is: NSVElement<RNWindow>
     * ... However, the Svelte language tools erroneously expect all bind:this values to extend HTMLElement, so
     * for now, we have to rely on reasserting the type.
     */
    let win;
    let urlWidget;
    let dataPromise = loadData("https://reqres.in/api/products/3");
 
    function loadPressed(){
        dataPromise = loadData(urlWidget.textContent);
    }

    async function loadData(url){
        try{
            let response = await fetch(url);
            let jsonResponse = await response.json();
            return jsonResponse;
        }
        catch(error){
            console.error(error);
        }
    }

    onMount(() => {
        (window as any).win = win; // Prevent garbage collection, otherwise the window quickly disappears!
        (win as NSVElement<RNWindow>).nativeView.show();

        return () => {
            delete (window as any).win;
        };
    });
</script>

<window
    bind:this={win}
    windowTitle="Seafile Share link DL">
    <view class="vertical">
        <view class="horizontal">
            <text>Share link url:</text>
            <lineEdit id="lineEdit" bind:this={urlWidget}/>
            <button text="Load" on:clicked={loadPressed}/>
        </view>
        <view>
            {#await dataPromise}
                <text>Nothing loaded</text>
            {:then data}
                <text>{data}</text>
            {:catch error}
                <text>{error.message}</text>
            {/await}
        </view>
    </view>
</window>

<style>
    /* 
     * CSS has a few gotchas for now.
     * 1) Some values need to be enclosed with quotes (e.g. `width: '100%';` rather than `width: 100%;`).
     *    See: https://github.com/nodegui/svelte-nodegui/issues/4
     * 2) Classes are not supported yet; they're a bit weird in Qt5.
          See: https://github.com/nodegui/svelte-nodegui/issues/6
     * 3) You can't write element-level rules like `text { color: 'red'; }`, unless they're global (not scoped).
     *    For scoped rules, you have to refer to the underlying native element, e.g. `QLabel { color: 'red'; }`.
     *    See: https://github.com/nodegui/svelte-nodegui/issues/7
     */
    .vertical{
        flex-direction: column;
    }

    .horizontal{
        flex-direction: row;
    }

    #lineEdit{
        flex: 1;
    }
</style>

then I get a UnhandledPromiseRejectionWarning: ReferenceError: __awaiter is not defined...

What is the correct way to do ?

See: nodegui/nodegui#827

Description:

• Rendering breaks if App.svelte used user components (e.g: StepOne.svelte & StepTwo.svelte in starter template). Please, refer to nodegui/svelte-nodegui-starter#4 for image.
• This started from @nodegui/[email protected]. The most recent version @0.1.2 isn't fixing this.
• The last version tested to work without breaking the rendering is @nodegui/[email protected]

Test Platform:

• Linux LMDE 4
• node.js/qode v16.7.0 & v14.17.5

In order to publish an npm package named @nodegui/svelte-nodegui, I would need npm access to the @nodegui organisation; is this the right way to go about things and could you please help with this, @a7ul? Thanks!

My npm user is shirakaba.