How to enable hot reload?

I tried to use a style sheet on a ScrollArea like so:

  QScrollBar { background-color: transparent; }
  QScrollBar::sub-page:horizontal { background-color: red; }
  QScrollBar::add-page:horizontal { background-color: green; }
  QScrollBar::sub-page:vertical { background-color: blue; }
  QScrollBar::add-page:vertical { background-color: yellow; }

but it doesn't actually change the scroll bar, so I'm just wondering if I'm doing something wrong, or if there is something that needs to be implemented for this to work.

When I use the react-nodegui to write a desktop application, how do I request remote resources in React-nodegui? like the lifeCycleMethod in react syntax？？

Hello, look like a really promising project.

Do you know if it's possible and if it would be hard to provide a way to create native menu like File Edit, etc ?

Something like this : https://electronjs.org/docs/api/menu

maybe even something like dock menu :
https://electronjs.org/docs/tutorial/macos-dock

I didn't use Qt in many many years but would making the bindings be a hard thing to do?

Is your feature request related to a problem? Please describe.
I saw how to use Button in this example. But I wanna use Button by useEventHandler. But I don't know what deps means.
How can I use it?

Describe the solution you'd like
Example of it

Describe alternatives you've considered
...

Additional context
...

on npm start get below error

error in index.ts
Module not found : Error : cant resolve @nodegui/nodegui in c/user/lenovo/node-sarter/src
npm ERR! [email protected] start .......

• OS: windows 7
• NodeGUI version v 12.10
• React NodeGUI version
  npm 6.10.3

Kindly suggest

**Packing for **react-nodegui

This requires a bit of restructuring of the repo. Since Packer executes the src/index file when the executable is run, I recommend renaming src/index.ts to src/exports.ts and creating your app root at src/index.tsx.

Remember to change your imports to something like:
import { Renderer, View, Button, Window, LineEdit, Text } from "./exports";

Describe the bug
npm install fails

To Reproduce

1. npm install

Expected behavior
npm install is expected to finish without error

Screenshots
Error Log:

npm run build:addon

@nodegui/[email protected] build:addon G:\react-nodegui-starter\node_modules@nodegui\nodegui
node-gyp -j 8 configure build

G:\react-nodegui-starter\node_modules@nodegui\nodegui>if not defined npm_config_node_gyp (node "C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\....\node_modules\node-gyp\bin\node-gyp.js" -j 8 configure build ) else (node "C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" -j 8 configure build )
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Users\Admin\AppData\Local\Programs\Python\Python37\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack File "", line 1
gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack at ChildProcess.exithandler (child_process.js:297:12)
gyp ERR! stack at ChildProcess.emit (events.js:197:13)
gyp ERR! stack at maybeClose (internal/child_process.js:978:16)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\Admin\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "-j" "8" "configure" "build"
gyp ERR! cwd G:\react-nodegui-starter\node_modules@nodegui\nodegui
gyp ERR! node -v v11.9.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @nodegui/[email protected] build:addon: node-gyp -j 8 configure build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @nodegui/[email protected] build:addon script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Admin\AppData\Roaming\npm-cache_logs\2019-10-10T23_19_19_270Z-debug.log
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @nodegui/[email protected] postinstall: npm run build:addon
npm ERR! Exit status 1

Desktop (please complete the following information):

• OS: Windows 10 Home 64 bit using Git Bash
• NodeGUI version: 0.1.9 ?
• React NodeGUI version: 1.0.0

Additional context
None I can think of.

Hello!

First of all, I've just run into nodegui a couple of days ago and it seems absolutely amazing. While not the first react desktop solution out there, it sure does deliver simplicity of set up and ease of use. Kudos.

I've a question regarding scrolling: I'm trying to figure out how I can make certain views scrollable. overflow: scroll has no effect, and I'm not sure whether or not I should use QScrollArea. Help would be much appreciated :)

Also, if you need help with the documentation - I've a knack for writing docs. With a little bit of guidance I'd love to contribute back to the readme.

Cheers!

Describe the bug
Having a View with a flex row layout and two children Views with different width: 'x%' fields doesn't render properly.

To Reproduce

import React from "react";
import {
  Renderer,
  Window,
  View,
} from "./index";

const App = () => {
  return (
    <Window styleSheet={containerStyle}>
      <View id="container">
            <View id="left"></View>
            <View id="right"></View>
          </View>
    </Window>
  );
};

const containerStyle = `
#container {
  flex: 1;
  flex-direction: row;
}

#left {
  background: red;
  flex: 1;
  width: '20%';
  height: '100%';
}

#right {
  background: green;
  flex: 1;
  width: '80%';
  height: '100%';
}
`;

Renderer.render(<App />);

Expected behavior
The Views should use the specified width percentages.

Screenshots

Desktop (please complete the following information):

• OS: Linux
• NodeGUI version: 0.13.1
• React NodeGUI version: 0.4.0
• OS Version: 4.19.94-1-lts

export interface QLineEditSignals extends QWidgetSignals {
    // omit rest
    textChanged: (text: string) => void;
}

I can get his value by textChanged

but:

export interface QPlainTextEditSignals extends QAbstractScrollAreaSignals {
    textChanged: () => void;
    blockCountChanged: (blockCount: number) => void;
    copyAvailable: (yes: boolean) => void;
    cursorPositionChanged: () => void;
    modificationChanged: (changed: boolean) => void;
    redoAvailable: (available: boolean) => void;
    selectionChanged: () => void;
    undoAvailable: (available: boolean) => void;
}

Describe the bug

Not sure this is the right repo to file this in, but when performing npm install in the react-nodegui-starter, I got

AssertionError: Spaces in action output filenames not supported (/Users/adam/Documents/Mac Projects/react-nodegui-starter/node_modules/@nodegui/qode/dist/1.0.5/include/QtCore)

To Reproduce
Steps to reproduce the behavior:

1. Create and cd to a directory path with a space in it
2. git clone https://github.com/nodegui/react-nodegui-starter
3. npm i

Expected behavior
Dependencies install correctly

Screenshots

Desktop:

• OS: macOS
• NodeGUI version: @nodegui/[email protected]
• React NodeGUI version: @nodegui/[email protected]
• OS Version: 10.15 Beta (19A582a)

Is there a known workaround for this (besides working in a folder without spaces, which I am doing for the moment)?

i cant run dist after i run command npm run build

I'm testing calculator but it throw a error typing 😭

I try to set custom width and height but it seems like these props are ignored. Am I doing it wrong?

QuarkPlayer on  master [!] is 📦 v1.0.0 via ⬢ v12.13.0 
❯ yarn start
yarn run v1.19.1
$ qode --inspect ./dist/index.js
Debugger listening on ws://127.0.0.1:9229/782a4de1-09c1-45b1-9e31-c1bba1328b18
For help, see: https://nodejs.org/en/docs/inspector
[2019-11-19 13:51:42.230] [info] EventWidget: subscribed to Resize : 14, size: 1
[2019-11-19 13:51:42.235] [info] flexlayout: count 0
[2019-11-19 13:51:42.238] [info] flexlayout: count 0
[2019-11-19 13:51:42.242] [info] flexlayout: count 0
[2019-11-19 13:51:42.243] [info] flexlayout: count 0
Could not parse stylesheet of object NWidget(0x31435c0)
[2019-11-19 13:51:42.302] [info] set border: nan
Could not parse stylesheet of object NWidget(0x31435c0)
[2019-11-19 13:51:42.304] [info] set border: nan
[2019-11-19 13:51:42.304] [info] set alignItems: center
[2019-11-19 13:51:42.304] [info] set flex: 1
[2019-11-19 13:51:42.304] [info] set alignItems: center
[2019-11-19 13:51:42.304] [info] set flex: 1
[2019-11-19 13:51:42.304] [info] set yWidth: 100%
[2019-11-19 13:51:42.304] [info] set yHeight: 100%
Done in 3.42s.

Here's the code:

import React from 'react'
import { Image, View } from '@nodegui/react-nodegui'
import { AspectRatioMode } from '@nodegui/nodegui'

type ImageProps = {
  src: string
}

const coverStyle = `
  flex: 2;
  #img {
    flex: 1;
    height: '40px';
    width: '40px';
    qproperty-alignment: 'AlignCenter';
  }
`

const Cover = ({ src }: ImageProps) => (
  <View styleSheet={coverStyle}>
    <Image
      id="img"
      src={src}
      aspectRatioMode={AspectRatioMode.KeepAspectRatio}
    />
  </View>
)

export default Cover

Describe the bug
When following steps on Getting started block, got an error with CMake.

To Reproduce
Steps to reproduce the behavior:

1. Clone project from GitHub
2. Go to project folder
3. Run npm install
4. See error

Expected behavior
Dependencies installed.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• NodeGUI version: 0.6.7
• React NodeGUI version: 0.2.6
• OS Version: 10.15.1

Additional context
The problem is gone when install CMake using brew. I think to add install CMake requirement to Getting started page for not confusing people.

Running npm install yields the following error:

error Couldn't find package "@nodegui/qode@^1.0.0" required by "@nodegui/nodegui@^0.1.1" on the "npm" registry.

Is your feature request related to a problem? Please describe.
Big thanks for any help for using QSystemTrayIcon with react-nodegui.

Describe the solution you'd like
Using QSystemTrayIcon with react-nodegui.

When creating a component it would be a nice feature to be able to set any other properties that we might want.
For example,

const windowProps = {WA_TranslucentBackground: true};
<Window setProperties={windowProps}>
...
</Window>

or any of the other widgetAttributes.

That way we can always pass all the attributes we want to set at once, and you don't have to make a property on the component for every possible attribute.

Edit: Might actually be better to name it setAttributes.

I've been working on a small "notes" app and encounter the following issue when trying to implement "remove a note with id x feature". I believe the bug might be more generic than just my notes app (updating state? trigger re-renders?) but this is just an easy way to expose the behaviour.

Node version: v10.15.2
@nodegui/react-nodegui: 0.1.5,

Expected:
Pressing the trash icon next to a note triggers a state changes, returns an array without the given note. Therefore, the note disappears from the screen.

Observed behaviour:
As seen from the console.log statements, the note correctly disappears from state. Also the "counter" on top correctly reflects the amount of notes is going down by 1. The note itself however does not disappear from remove. Repeated clicks on this or other buttons at some point will just crash the app.

What I've tried
At first I thought it might have to do with passing the callbacks around which might not be supported from some reason. Based on the calculator example I refactored the notes app to useReducer() instead, so state is more centralised and predictable. This didn't seem to make any difference for this bug.

Diff with relevant code changes:
pepf/react-nodegui-starter@08560d5

Reproduction branch:
https://github.com/pepf/react-nodegui-starter/tree/notes-app

Describe the bug
App suddenly closes by itself due to being garbage collected.

Temporary workaround is to use the onInit function to put the reconciler as a global variable, like so.

Renderer.render(<App />, {
  onInit: (reconciler) => {
    (global as any)._reconcile = reconciler;
  },
});

I know that this is in FAQ, but it's not clear how you would actually do this in React NodeGUI.

Since the container is put to Renderer.container, I suppose there would be no problem with putting a global variable as well?

To Reproduce

1. Build any application as normal (best on production mode)
2. Run the app (npx qode ./dist/index.js)
3. Wait for several seconds, the app will suddenly close by itself with exit code 0

Expected behavior
The app shouldn't close itself.

Desktop (please complete the following information):

• Arch Linux 5.4.0-zen1-1-zen
• NodeGUI version: 0.6.9
• React NodeGUI version: 0.2.7

The styling should feel more natural to the user just as in using with react and other web development frameworks . so it would be very helpful to add translation of many unsupported css properties into corresponding Qt css properties.

Is your feature request related to a problem? Please describe.
Hi. Thank you for the project. It looks really great and makes me want to dig in, despite the fact I am not a react developer. I have checked the examples and my concern is that even with simple apps things are getting complex really fast. What I am missing is some kind of DOM-less router to attach/detach components based on global state.

Describe the solution you'd like
I would like to create components for 'app pages' with encapsulation and attach/detach them based on store property value.

Describe alternatives you've considered
Maybe react-router-native will do the job? If so, could you provide an example how to use it?

in version 0.1.9,the package name is ‘react-nodegui’,but in components,you use it with 'require("@nodegui/nodegui")'.
You should reference it with ‘require("@nodegui/react-nodegui")’ or change the package name

<View styleSheet={containerStyle}>
   <Text  id="text">{this.state.text}</Text>
</View>

text: <li>hello</li>

const containerStyle = `
  #text  li{
    color:'red';
   }

   LI{
     color:red;
   }
   
   UL{
     color:red;
   }
`

None of the above code works

If can, that's best

Describe the bug
When I attempt to load an image from a remote repository I get an error message "QPixmap::scaled: Pixmap is a null pixmap"
To Reproduce
Steps to reproduce the behavior:

import * as React from 'react';
import {Image, View , Window, Renderer } from '@nodegui/react-nodegui';
import { AspectRatioMode } from '@nodegui/nodegui';

const minSize = {width:414, height:736};


const App : React.FC = () =>(
     <Window minSize={minSize}>
          <View  style="flex:1">
              <Image 
            aspectRatioMode={AspectRatioMode.KeepAspectRatio}
            src={'https://randomuser.me/api/portraits/thumb/men/1.jpg'}
               />
         </View>
      </Window>
) 

Renderer.render(<App />)

Expected behavior
I expect that I am able to load Images from remote URLs

Desktop (please complete the following information):

• OS: Windows
• NodeGUI version: 0.1.9
• React NodeGUI version : 0.1.9
• OS Version Windows 10

Additional context
I used the react-nodegui starter template

More of an enhancement than a bug report, but using the ScrollArea isn't the easiest thing in the world. for example, I can't seem to get it to fill the parent, nor, will it render its content whatsoever.

I so far have only been ale to declare one with fixed sizes declared in pixels through CSS, but I need it to fill the parent. If not, perhaps an automatically overflowing View would be a better approach, something React Developers, coming from the web might be more comfortable with.

Hi, im trying to use a second window to make a file/folder picker (i didn't find anything, but is there a simpler way to do it? maybe some widget, or something from the os?), but i can't figure out if theres a way to close it from the javascript side (should close according to some user input), after watching this video https://youtu.be/8jH5gaEEDv4?t=1376 , i tried this:

function App() {
  const [showWindow, setShowWindow] = useState(false);
  const toggleWindow = () => {
    setShowWindow(!showWindow);
  };
  return (
    <>
      <Window windowTitle="Hello 👋🏽" size={mainWindowSize}>
        <View>
          <Button text="Toggle Window" on={{ clicked: toggleWindow }}></Button>
        </View>
      </Window>
      {showWindow && (
        <Window
          windowTitle="Second Window"
          size={secondWindowSize}
        >
          <View>
            <Text>Second Window</Text>
          </View>
        </Window>
      )}
    </>
  );
}

but the second window doesn't close when showWindow is toggled to false, and when it is toggled to true, it opens another "Second Window".

Not seeing it in the docs or example repos. Is this not available yet? I'm eager to try this out, so thanks for your work and sharing it.

how to get the selected value from ComboBox? also, is there any event listeners for change?

Describe the bug
Icon size is not being changed using pixmap

To Reproduce
Steps to reproduce the behavior:

1. git clone https://github.com/talentlessguy/QuarkPlayer
2. Run yarn && yarn dev in one window, yarn start in another window
3. See icon size is not being changed

Expected behavior
I expected for icon to increase its size by changing width and height

Screenshots

Desktop (please complete the following information):

• OS: Manjaro Linux x86_64
• NodeGUI version: 0.5.1
• React NodeGUI version: 0.2.2
• OS Version: Plasma 5.17.2

Additional context

Code snippet where I try to resize icon:

import { QIcon } from '@nodegui/nodegui'
import icon from '../../assets/play.png'

const Icon = new QIcon(`${__dirname}/${icon}`)

Icon.pixmap(100, 100)

I append text to the control QPlainTextEdit after interval, please help me how to scroll to the bottom,

I can't find any APIs: https://docs.nodegui.org/docs/api/generated/classes/qplaintextedit

Thanks

Describe the bug
The documentation page for debugging process is not found.

To Reproduce
Steps to reproduce the behavior:

1. Follow ink [https://docs.nodegui.org/#/tutorial/debugging-qode-process]
2. See error

Example:

import { Renderer, View, Button, Window, LineEdit } from '@nodegui/react-nodegui'
import React, { useState } from 'react'

const App = () => {
  const [text, setText] = useState("")

  return (
    <Window minSize={{ width: 500, height: 200 }}>
      <View>
        <LineEdit text={text} on={{ textChanged: setText }} />
        <Button on={{ clicked: () => setText("") }} />
      </View>
    </Window>
  )
}

Renderer.render(<App />)

I'm unable to run the example apps. npm install and yarn fail.

output:

> @nodegui/[email protected] install /Users/[redacted]/Web/react-nodegui/examples/weather-app-widget/node_modules/@nodegui/nodegui
> npm -v

6.10.1

> @nodegui/[email protected] postinstall /Users/[redacted]/Web/react-nodegui/examples/weather-app-widget/node_modules/@nodegui/qode
> node install.js

Local Qode 1.0.0 archive doesnt exists... Copying Qode from cache...
Extracting binaries...

> @nodegui/[email protected] postinstall /Users/[redacted]/Web/react-nodegui/examples/weather-app-widget/node_modules/@nodegui/nodegui
> npm run build:addon


> @nodegui/[email protected] build:addon /Users/[redacted]/Web/react-nodegui/examples/weather-app-widget/node_modules/@nodegui/nodegui
> node-gyp -j 8 configure build

  CC(target) Release/obj.target/nothing/../../node-addon-api/src/nothing.o
  TOUCH 8d54a0613d50a84adae49a5312f848b52b1b3ed9.intermediate
  ACTION binding_gyp_qtnode_target_symlink_qt_headers 8d54a0613d50a84adae49a5312f848b52b1b3ed9.intermediate
  LIBTOOL-STATIC Release/nothing.a
Traceback (most recent call last):
  File "./gyp-mac-tool", line 611, in <module>
    sys.exit(main(sys.argv[1:]))
  File "./gyp-mac-tool", line 30, in main
    exit_code = executor.Dispatch(args)
  File "./gyp-mac-tool", line 45, in Dispatch
    return getattr(self, method)(*args[1:])
  File "./gyp-mac-tool", line 248, in ExecFilterLibtool
    if not libtool_re.match(line) and not libtool_re5.match(line):
TypeError: cannot use a string pattern on a bytes-like object
make: *** [Release/nothing.a] Error 1
rm 8d54a0613d50a84adae49a5312f848b52b1b3ed9.intermediate
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:190:23)
gyp ERR! stack     at ChildProcess.emit (events.js:196:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:256:12)
gyp ERR! System Darwin 18.6.0
gyp ERR! command "/usr/local/Cellar/node/12.1.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "-j" "8" "configure" "build"
gyp ERR! cwd /Users/[redacted]/Web/react-nodegui/examples/weather-app-widget/node_modules/@nodegui/nodegui
gyp ERR! node -v v12.1.0
gyp ERR! node-gyp -v v5.0.2
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @nodegui/[email protected] build:addon: `node-gyp -j 8 configure build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @nodegui/[email protected] build:addon script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/[redacted]/.npm/_logs/2019-08-15T19_04_16_298Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @nodegui/[email protected] postinstall: `npm run build:addon`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @nodegui/[email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Or something can use an image as background?
If true, how can do it?

Is your feature request related to a problem? Please describe.
Please add a dropdown-list component like select tag.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

I cloned the examples followed everything I need (CMake & so on..)

I expected the app after successful install to start the Calculator but I got this error

> [email protected] start d:\Development\Node\node-gui-examples\examples-master\react-nodegui\calculator
> tsc && qode dist/index.js

node_modules/@nodegui/nodegui/dist/lib/QtWidgets/QMainWindow.d.ts:161:9 - error TS1086: An accessor cannot be declared in an ambient context.

161     get layout(): NodeLayout | undefined;
            ~~~~~~

test/nodegui-starter/src/index.ts:45:2 - error TS2304: Cannot find name 'global'.

45 (global as any).win = win;
    ~~~~~~


Found 2 errors.

Additional context
Add any other context about the problem here.

Ubuntu 19.04
[email protected]
[email protected]

Error when running npm start:

eli@ubuntu:~/react-nodegui-starter$ npm start

> [email protected] start /home/eli/react-nodegui-starter
> tsc && qode ./dist/index.js

/home/eli/react-nodegui-starter/node_modules/@nodegui/qode/dist/1.0.0/qode: error while loading shared libraries: libicui18n.so.60: cannot open shared object file: No such file or directory
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `tsc && qode ./dist/index.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] start 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!     /home/eli/.npm/_logs/2019-08-15T19_53_15_146Z-debug.log

Full log:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/home/eli/.nvm/versions/node/v12.8.1/bin/node',
1 verbose cli   '/home/eli/.nvm/versions/node/v12.8.1/bin/npm',
1 verbose cli   'run',
1 verbose cli   'start'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~start: PATH: /home/eli/.nvm/versions/node/v12.8.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/eli/react-nodegui-starter/node_modules/.bin:/home/eli/.nvm/versions/node/v12.8.1/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/usr/local/go/bin:/home/eli/go/bin:/usr/local/go/bin:/home/eli/go/bin
9 verbose lifecycle [email protected]~start: CWD: /home/eli/react-nodegui-starter
10 silly lifecycle [email protected]~start: Args: [ '-c', 'tsc && qode ./dist/index.js' ]
11 info lifecycle [email protected]~start: Failed to exec start script
12 verbose stack Error: [email protected] start: `tsc && qode ./dist/index.js`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/home/eli/.nvm/versions/node/v12.8.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at ChildProcess.emit (events.js:203:13)
12 verbose stack     at maybeClose (internal/child_process.js:1021:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
13 verbose pkgid [email protected]
14 verbose cwd /home/eli/react-nodegui-starter
15 verbose Linux 5.0.0-25-generic
16 verbose argv "/home/eli/.nvm/versions/node/v12.8.1/bin/node" "/home/eli/.nvm/versions/node/v12.8.1/bin/npm" "run" "start"
17 verbose node v12.8.1
18 verbose npm  v6.10.2
19 error file sh
20 error code ELIFECYCLE
21 error errno ENOENT
22 error syscall spawn
23 error [email protected] start: `tsc && qode ./dist/index.js`
23 error spawn ENOENT
24 error Failed at the [email protected] start script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

Is your feature request related to a problem? Please describe.
As you know, React can merge multiple stylesheets like following.

<View style={styles.container}>
  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>

But I don't know how to merge multiple stylesheets in react-nodegui.
Because I wanna make some custom components that have own stylesheet can add additional stylesheet, so I need this function.

Describe the solution you'd like
Please add new prop for this.

Describe alternatives you've considered
...

Additional context
...

The link in the repo goes to https://nodegui.github.io/nodegui%20, removing the %20 makes it work.

_{^{Might be a little nitpicky, sorry.}}

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
Browsed through both react-nodegui and nodegui, but couldn't find any example.
Tried using axios/http on button click and keyboard listeners but the app crashed with

FATAL ERROR: v8::HandleScope::CreateHandle() Cannot create a handle without a HandleScope

It worked fine in componentDidMount though.

Describe the solution you'd like
Examples or guides for networking

Describe alternatives you've considered

Additional context

Describe the bug
Opening and closing new windows doesn't work properly when nested inside another window

To Reproduce
Run the following example code

import React, { useState } from "react";
import { Renderer, Window, View, Button, Text } from "@nodegui/react-nodegui";

function MainWindow() {
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);
  const [open3, setOpen3] = useState(false);

  return (
    <>
      <Window windowTitle="Main window">
        <View>
          <Button text="Nested in view"   on={{clicked: () => setOpen1(!open1)}}/>
          <Button text="Nested in window" on={{clicked: () => setOpen2(!open2)}}/>
          <Button text="Not nested"       on={{clicked: () => setOpen3(!open3)}}/>
          {open1 && <Dialog text="Nested in view"/>}{/* Does not work */}
        </View>
        {open2 && <Dialog text="Nested in window"/>}{/* Partialy working */}
      </Window>
      {open3 && <Dialog text="Not nested"/>}{/* This works */}
    </>
  );
}

function Dialog({text}: {text: string}) {
  return (
    <Window windowTitle={text}>
      <View>
        <Text>{text}</Text>
      </View>
    </Window>
  )
}

Renderer.render(<MainWindow />);

Expected behavior
That windows can be open and closed no matter where they are placed in the react tree.

Desktop (please complete the following information):

• OS: Linux
• NodeGUI version: 0.12.1
• React NodeGUI version: 0.4.0
• OS Version: Arch Linux

Supporting inline SVG

React by default can support inline svg code. Because NodeGUI does not render to a browser window though, we can't use that.

Possible Solutions
One solution might be to bridge QTSvg albeit I am not savvy enough to do this.

Sample code that triggered error

import React from 'react';
import { letterFrequency } from '@vx/mock-data';
import { Group } from '@vx/group';
import { Bar } from '@vx/shape';
import { scaleLinear, scaleBand } from '@vx/scale';

const data = letterFrequency;

const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };

const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;

const x = (d: any) => d.letter;
const y = (d: any) => +d.frequency * 100;

const xScale = scaleBand({
  rangeRound: [0, xMax],
  domain: data.map(x),
  padding: 0.4,
});
const yScale = scaleLinear({
  rangeRound: [yMax, 0],
  domain: [0, Math.max(...data.map(y))],
});

const compose = (scale: any, accessor: any) => (data: any) => scale(accessor(data));
const xPoint = compose(
  xScale,
  x,
);
const yPoint = compose(
  yScale,
  y,
);

function BarGraph() {
  return (
    <svg width={width} height={height}>
      {data.map((d: any, i: any) => {
        const barHeight = yMax - yPoint(d);
        return (
          <Group key={`bar-${i}`}>
            <Bar x={xPoint(d)} y={yMax - barHeight} height={barHeight} width={xScale.bandwidth()} fill="#fc2e1c" />
          </Group>
        );
      })}
    </svg>
  );
}
export default BarGraph;
``


<!-- Issuehunt content -->

---

<details>
<summary>
<b>IssueHunt Summary</b>
</summary>


### Backers (Total: $20.00)

- $20.00 have been anonymously funded.

#### [Become a backer now!](https://issuehunt.io/r/nodegui/react-nodegui/issues/31)
#### [Or submit a pull request to get the deposits!](https://issuehunt.io/r/nodegui/react-nodegui/issues/31)
### Tips

- Checkout the [Issuehunt explorer](https://issuehunt.io/r/nodegui/react-nodegui/) to discover more funded issues.
- Need some help from other developers? [Add your repositories](https://issuehunt.io/r/new) on IssueHunt to raise funds.
---
IssueHunt has been backed by the following sponsors. [Become a sponsor](https://issuehunt.io/membership/members)
</details>
<!-- /Issuehunt content-->