Hey there, Wohoo! Finally an alternative to electron, great job! I ran the example code and the note editor showed up just fine. However the menu is missing. See the attached screenshot.

My OS is Mac OS High Sierra 10.13.3

Hi, nice project. I'm thinking it would be great to use https://facebook.github.io/yoga/ to create with the same support for flexbox as React Native, thoughts?

Hi! Awesome library!

I don't know how the libui-node works properly, so please help.

If I render a <Window /> element on the tree, without any children, the Window get the right size. But, as soon as I insert the children, the window fits to the children and ignore the specified width and height. Is it expected?

Also, it looks like updating the height of the window via state doesn't work as well. My code is the following:

import React, { Component } from 'react'

import { render, Window, App, Button } from 'proton-native'

class Example extends Component {
  state = {
    height: 300,
  }

  componentWillMount() {
    this.handleResize = this._handleResize.bind(this)
  }

  _handleResize() {
    this.setState({
      height: 400,
    })
  }

  render() {
    console.log(this.state.height)

    return (
      <App>
        <Window
          title="Example"
          margined
          size={{
            w: 300,
            h: this.state.height
          }}
        >
          <Button onClicked={this.handleResize}>
            Change my size!
          </Button>
        </Window>
      </App>
    )
  }
}

render(<Example />)

I was with you until I got to your bundle section in the docs. This is the all import bit really.

"Currently, the easiest way is to simply download a node binary for your platform, copy it into your project root. Then create a shortcut/script to execute that.

Make sure you have babel transpile it, in case you use any new syntax not supported by your current version of node."

Ok downloaded node-v8.9.4-darwin-x64.tar.gz and copied to root. Do I unzip. Create what shortcut to where and then place shortcut where? Make sure you "babel transpile it", do what????

Hope you can make that clearer, I'm a react developer.

Docs use width/height props, but they don't exist.

Sizes to 640x480:

<Window size={{ w: 640, h: 480 }} />

Defaults to 500x500:

<Window width={640} height={480} />

This is not an issue per se. But can Proton-native be used for production or is it still an hobby project. I am a part-time Qt developer and I have been actively using React and React-native for about a year now.

I’ve noticed that many if not most boolean props in this library default to true. For example, in <Box />, all of the props except padded default to true. This makes it more difficult to adjust their values. For example, to render a horizontal, invisible box, you need to do this:

<Box vertical={false} visible={false} />

However, if the API was changed to use false props by default, this could be written this way instead:

<Box hidden horizontal />

This saves on typing (no ={false}) and is clearer IMO since you specify which features to enable, instead of which ones to disable.

What do you think?

Are you aware of react-libui?
Even if it is now under my account, it is entirely the work of @PaulBGD.

I think to make you aware of that, even if it's probably not production-ready, it could be worth to give it a look...

Look like there is no ability to style right now at all?
Tried StyleSheet and styled-components library

During an install on Linux, This is the error it gave, any insight would be great

npm WARN optional dep failed, continuing [email protected]
npm WARN deprecated [email protected]: ⚠️ WARNING ⚠️ tar.gz module has been deprecated and your application is vulnerable. Please use tar module instead: https://npmjs.com/tar

[email protected] install /home/mp/node_modules/proton-native/node_modules/libui-node
libui-download && autogypi && npm run build && npm run copy-node

Downloaded zip: /home/mp/.libui/libui-shared-linux-x64-pre11.alpha.4.tar.gz
Libui binaries extracted to: /home/mp/node_modules/proton-native/node_modules/libui-node
module.js:327
throw err;
^

Error: Cannot find module 'dezalgo'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (/home/mp/node_modules/npm/lib/utils/correct-mkdir.js:2:15)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
npm ERR! Linux 4.14.0-041400-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "i" "-S" "proton-native"
npm ERR! node v4.8.7
npm ERR! npm v2.15.11
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: libui-download && autogypi && npm run build && npm run copy-node
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'libui-download && autogypi && npm run build && npm run copy-node'.
npm ERR! This is most likely a problem with the libui-node package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! libui-download && autogypi && npm run build && npm run copy-node
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs libui-node
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls libui-node
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/mp/npm-debug.log

Some headings are larger:

Hello!

I forked the repo and I'm having issues when I run npm install

I'm getting this (a LOT of times)

2 warnings generated.
  CXX(target) Release/obj.target/nbind/src/UiArea/UiDrawPath.o
In file included from ../src/UiArea/UiDrawPath.cc:3:
In file included from ../../nbind/include/nbind/nbind.h:8:
In file included from ../../nbind/include/nbind/BindDefiner.h:20:
../../nbind/include/nbind/v8/Overloader.h:105:42: warning: 'NewInstance' is deprecated [-Wdeprecated-declarations]
                args.GetReturnValue().Set(constructor->NewInstance(argc, &argv[0]));
                                                       ^
/Users/alejandro/.node-gyp/8.9.1/include/node/v8.h:3831:3: note: 'NewInstance' has been explicitly marked deprecated here
  V8_DEPRECATED("Use maybe version",
  ^
/Users/alejandro/.node-gyp/8.9.1/include/node/v8config.h:321:29: note: expanded from macro 'V8_DEPRECATED'
  declarator __attribute__((deprecated))

- node 8.9.1
- npm 5.6.0
- OSX

Let me know if I can help with anything.

Hi.

(Sorry for the glitches in English, I had to use the translator)

By performing the quick-start of the documentation, I came across the error below.

>npm run start

> [email protected] start c:\backup\projetos\javascript\teste-proton
> babel-node index.js

module.js:540
    throw err;
    ^

Error: Cannot find module 'yoga-layout'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (c:\backup\projetos\javascript\teste-proton\node_modules\proton-native\bin\components\View.js:23:19)
    at Module._compile (module.js:643:30)
    at Module._extensions..js (module.js:654:10)
    at Object.require.extensions.(anonymous function) [as .js] (c:\backup\projetos\javascript\teste-proton\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `babel-node index.js`
npm ERR! Exit status 1
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!     C:\Users\david\scoop\persist\nodejs-lts\cache\_logs\2018-04-04T17_28_14_560Z-debug.log

{
  "name": "teste-proton",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/.bin/babel-node index.js",
    "build": "node_modules/.bin/babel index.js -d bin/",
    "package-linux": "bash ./scripts/appimage.sh"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "proton-native": "^1.0.17"
  }
}

NodeJS V9 was throwing this error/ very similar error as if in an infinite loop when running npm install.

Bit of research that I did, don't know if it helps.
nbind is a Wrapper that allows JavaScript to run c/c++ code.
libui-node requires nbind.

When I removed NodeJS V9.6.1 and npm V5.6 and installed NodeJS 8.9.4 and Npm V5.6 every worked as expected.

OS: Kubuntu 17.10
NodeV9 Install Type: Package Manager apt
NodeV8 Install Type: Manual from NodeJS downloads.

.node-gyp/9.6.1/include/node/v8config.h:318:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^~~~~~~~~~
  CXX(target) Release/obj.target/nbind/src/PointDouble.o
In file included from ../../nbind/include/nbind/BindDefiner.h:20:0,
                 from ../../nbind/include/nbind/nbind.h:8,
                 from ../src/PointDouble.cc:3:
../../nbind/include/nbind/v8/Overloader.h: In static member function ‘static void nbind::Overloader::callNew(const Nan::FunctionCallbackInfo<v8::Value>&)’:
../../nbind/include/nbind/v8/Overloader.h:105:68: warning: ‘v8::Local<v8::Object> v8::Function::NewInstance(int, v8::Local<v8::Value>*) const’ is deprecated: Use maybe version [-Wdeprecated-declarations]
   args.GetReturnValue().Set(constructor->NewInstance(argc, &argv[0]));

Update:
Above error says .node-gyp/9.6.1 downgrading to 8.9.4 didn't seem to solve the problem.

.node-gyp/8.9.4/include/node/v8config.h:318:3: note: in definition of macro ‘V8_DEPRECATED’
   declarator __attribute__((deprecated(message)))
   ^~~~~~~~~~
In file included from ../node_modules/nbind/include/nbind/BindDefiner.h:22:0,
                 from ../node_modules/nbind/include/nbind/nbind.h:8,
                 from ../src/UiArea/DrawTextFont.cc:3:

Checked the versions I installed using npm install, all dependencies state latest.
Checked the libui-node project on github and build is failing.
After multiple reinstalls npm run build works, npm run demo causes the issues captured above

https://github.com/parro-it/libui-node

I can't find the bridge code...

Hi, Is it possible to use system calls using Proton-native? For example log key events when window is not focused.

My biggest question going into this is whether any arbitrary Node.js package (including native bindings) can be required and used as with Electron. Based on this example which uses fs I believe that's the case. If so, that may be worth documenting in the list of "Features" (makes a difference for me if I have access to Node implementations of browser JS APIs like web audio).

The docs point to an example folder that does not exist.

I'd like to add yoga layout, because Grid is pretty buggy and it would make it more similar to React Native. There are a few things that need to be done to make this work.

• Add fixed position support to libui (andlabs/libui#306)
• Add yoga-layout on the JS side
• Create a wrapper called View over the libui Fixed widget

I don't see a Grid component on this page.
https://proton-native.js.org/#/component_APIs/grid

I have built a cli tool to package proton apps (currently only macOS bundles are supported).
Maybe there is someone who knows how the linux (or windows) packaging should work and would like to contribute (platform-independent parts can be reused).

https://github.com/mischnic/proton-packager

This could be added the Mac section of the "Packaging" docs.

#39 @GordyGordy This will create a proper .app bundle.

The main thing on macOS, that is keeping bundles from being indistinguishable from native apps, is #13.

Setting type on Menu.Item to Quit, About, or Preference does not have the desired effect. The items do not appear in the menu. When Quit is used, using Command+Q does quit the app. So, it's at least partly working I suppose.

The issue also exists in the sample Notepad app.

• Menu: contains the props for Seperator
• Grid: "Whether the Form is enabled."

This is not true as of Node 6, where 99% of ES6 is supported with only 3 particular subfeatures missing (and Babel doesn't transpile them all for you, such as tail-call optimization).

Here's a chart: http://node.green

You may be thinking of other features that developers commonly use, like async/await or object rest/spread, but these are not part of "ES6" (ES2015) but rather later yearly standards revisions (ES2016 - ES 2018)

Many of these features are indeed supported in the most recent stable + LTS releases of Node (8 and 9) - the ones offered by default for download on the Node site

The universal prop stretchy doesn't seem to be working for me with the following versions:

  "dependencies": {
    "proton-native": "^1.0.9",
    "react": "^16.2.0"
  },

TextInput, Button, Box for example always fill the available space regardless of adding stretchy={false}.

I also was unable to find out how to position and size components - is that somewhere in the docs that I missed?

npx create-proton-app quickBuild

and then I get the error：

Creating a new Proton Native app on E:\workspace2017\myproject\quickBuild

Installing packages... This may take a few minutes.


An error ocurred:
 npm.cmd install --save --loglevel error proton-native babel-cli babel-preset-env babel-preset-stage-0 babel-preset-react has failed.

How can i deal with it?

https://github.com/parro-it/libui-node/blob/master/docs/window.md#setchild:

setChild
Allow to specify the control to show in window content area. UiWindow instances could contains only one control. If you need more, you have to use Containers.

This

<App>
  <Window title="Test" size={{ w: 500, h: 500 }} margined={true}>
    <Text>Input:</Text>
    <Box>
      <Button>Hello</Button>
      <TextInput />
    </Box>
    <Button>Test</Button>
  </Window>
</App>

will display only:

<Button>Test</Button>

(the last child).

This should be documented and even better a warning/error be shown.

Code:

class Notepad extends Component {
  state = { text: ''};

  render() {
    return (
      <App onShouldQuit={() => console.log('Quitting')}>
        <Window title="Test" size={{ w: 500, h: 500 }}>
            <TextInput onChange={text => this.setState({text})} multiline={true}>
              {this.state.text}
            </TextInput>
        </Window>
      </App>
    );
  }
}

I added

console.log(this, prop, this.eventParameter, translatedProp)

before the if statement here:

Error message:

App {
  children:
   [ MenuBar {
       children: [Array],
       root: [Root],
       props: [Object],
       element: [UiMenu] },
     Window { children: [Array], root: [Root], props: [Object] } ],
  root: Root { children: [ [Circular] ] },
  props:
   { onShouldQuit: [Function: onShouldQuit],
     children: [ [Object], [Object] ] },
  element: {} } 'onShouldQuit' undefined undefined

The above error occurred in the <APP> component:
    in APP (created by Notepad)
    in Notepad

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
/Users/niklas/Desktop/DEV-TEST/libui/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6780
      throw _error4;
      ^

TypeError: Cannot read property 'undefined' of undefined
    at _loop (/Users/niklas/Desktop/DEV-TEST/libui/proton-native/src/components/DesktopComponent.js:153:22)
    at App.update (/Users/niklas/Desktop/DEV-TEST/libui/proton-native/src/components/DesktopComponent.js:147:32)
    at commitUpdate (/Users/niklas/Desktop/DEV-TEST/libui/proton-native/src/reconciler/index.js:92:18)
    at commitWork (/Users/niklas/Desktop/DEV-TEST/libui/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:5045:15)
    at commitAllHostEffects (/Users/niklas/Desktop/DEV-TEST/libui/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:5706:13)
    at Object.invokeGuardedCallback$1 (/Users/niklas/Desktop/DEV-TEST/libui/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:1562:10)
    at invokeGuardedCallback (/Users/niklas/Desktop/DEV-TEST/libui/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:1509:29)
    at commitRoot (/Users/niklas/Desktop/DEV-TEST/libui/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:5801:9)
    at performWorkOnRoot (/Users/niklas/Desktop/DEV-TEST/libui/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6803:42)
    at performWork (/Users/niklas/Desktop/DEV-TEST/libui/proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6753:7)

I tried the Grid example given in the doc. I guess the two components should be displayed one next to the other, but only the first cell is displayed.

Feature Request

Currently, when using the Dialog method, we can use the DialogTypeEnum to determine if we want a dialog for:

• Message - a simple message
• Error - an error message
• Open - open a file
• Save - save a file

Well, it turns out that sometimes we want the user to also select a folder instead of a file. So I would like to propose a new DialogType:

• Folder - select a folder

User Story

As a user,
I want to be able to select a folder,
In order to select the destiny of a generated file, for example.

As a developer,
I want to be able to popup a Dialog to request a folder destiny to the user,
In order to get the path I should use as destiny of a generated file, for example.

(I'm no good at writing user stories, but well, I tried)

The quit menu item is throwing an error. Using windows 10.

<Menu.Item type="Quit"></Menu.Item>

Here is the error

npm ERR! code ELIFECYCLE
npm ERR! errno 2147483651
npm ERR! [email protected] start: `babel-node index.js`
npm ERR! Exit status 2147483651

Hey mates. I'm working on a cli plugin create-proton-app to start a Proton Native app with a simple template. Is currently functional, may have bugs but still in its first days. @kusti8 thanks for this project! Also, I would like to know if there is an IRC channel or somewhere else where people interested in this project could meet.

For example, Box has a property 'vertical', which is true when not specified. This is not made clear in the documentation: https://proton-native.js.org/#/component_APIs/box?id=vertical

I would expect an additional column in the reference tables called "default", which e.g. for vertical would show true, and for padded would show false.

(https://github.com/kusti8/proton-native/blob/master/src/components/Text.js)

When I tried to install proton-native with npm i -S proton-native like the quick-start guide suggests I got this error:

> npm i -S proton-native
npm WARN deprecated [email protected]: ⚠️  WARNING ⚠️ tar.gz module has been deprecated and your application is vulnerable. Please use tar module instead: https://npmjs.com/tar

> [email protected] install /home/manuel/projekte/playground/proton-native/quickstart/node_modules/libui-node
> libui-download && autogypi && npm run build && npm run copy-node

Downloaded zip: /home/manuel/.libui/libui-shared-linux-x64-pre11.alpha.4.tar.gz
Libui binaries extracted to: /home/manuel/projekte/playground/proton-native/quickstart/node_modules/libui-node

> [email protected] build /home/manuel/projekte/playground/proton-native/quickstart/node_modules/libui-node
> node-gyp configure build

Package gtk+-3.0 was not found in the pkg-config search path.
Perhaps you should add the directory containing `gtk+-3.0.pc'
to the PKG_CONFIG_PATH environment variable
No package 'gtk+-3.0' found
gyp: Call to 'pkg-config gtk+-3.0 --cflags-only-I | sed s/-I//g' returned exit status 0 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:336:16)
gyp ERR! stack     at ChildProcess.emit (events.js:160:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:12)
gyp ERR! System Linux 4.13.0-26-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "build"
gyp ERR! cwd /home/manuel/projekte/playground/proton-native/quickstart/node_modules/libui-node
gyp ERR! node -v v9.4.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node-gyp configure build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build 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!     /home/manuel/.npm/_logs/2018-02-17T23_35_39_011Z-debug.log
npm WARN enoent ENOENT: no such file or directory, open '/home/manuel/projekte/playground/proton-native/quickstart/package.json'
npm WARN quickstart No description
npm WARN quickstart No repository field.
npm WARN quickstart No README data
npm WARN quickstart No license field.
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":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `libui-download && autogypi && npm run build && npm run copy-node`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install 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/manuel/.npm/_logs/2018-02-17T23_35_39_612Z-debug.log

My machine has Linux Mint 18.3 installed which is based on ubuntu 16.04.
After some searching in the web I found out that I have to sudo apt-get install build-essential libgtk-3-dev. Now it works. Maybe you could add this info to the guide so that others can have an easier start with your framework. Maybe something like a preconditions paragraph?

It serves similar purpose to nexe. It might be worth comparing results of both.

Link

I've referenced #16 regarding the GTK requirement and have it installed. However, the error I'm getting is still persisting.

In this I'm using create-proton-app although it occurs even when using just npm install

Creating a new Proton Native app on /home/tristan/ProtonDemo

Installing packages... Make take a few minutes.


> [email protected] install /home/tristan/ProtonDemo/node_modules/libui-node
> libui-download && autogypi && npm run build && npm run copy-node

Downloaded zip: /home/tristan/.libui/libui-shared-linux-x64-pre11.alpha.4.tar.gz
Libui binaries extracted to: /home/tristan/ProtonDemo/node_modules/libui-node

> [email protected] build /home/tristan/ProtonDemo/node_modules/libui-node
> node-gyp configure build

Package gtk+-3.0 was not found in the pkg-config search path.
Perhaps you should add the directory containing `gtk+-3.0.pc'
to the PKG_CONFIG_PATH environment variable
No package 'gtk+-3.0' found
gyp: Call to 'pkg-config gtk+-3.0 --cflags-only-I | sed s/-I//g' returned exit status 0 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/home/tristan/.nvm/versions/node/v8.8.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:336:16)
gyp ERR! stack     at emitTwo (events.js:125:13)
gyp ERR! stack     at ChildProcess.emit (events.js:213:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Linux 4.4.0-116-generic
gyp ERR! command "/home/tristan/.nvm/versions/node/v8.8.1/bin/node" "/home/tristan/.nvm/versions/node/v8.8.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "build"
gyp ERR! cwd /home/tristan/ProtonDemo/node_modules/libui-node
gyp ERR! node -v v8.8.1
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node-gyp configure build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build 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/tristan/.npm/_logs/2018-02-27T16_01_47_970Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `libui-download && autogypi && npm run build && npm run copy-node`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install 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/tristan/.npm/_logs/2018-02-27T16_01_48_356Z-debug.log

An error ocurred:
 npm install --save --loglevel error proton-native has failed.

Are you planning on implementing a Stylesheet API like react-native has? Curious how we could tie in something like styled-components/native to enable a full visual solution.

Currently, proton-native depends on babel-cli and babel-core, babel-preset-* and so on (https://www.npmjs.com/package/proton-native?activeTab=dependencies).

So, as proton-native should be specified as a production dependency (https://github.com/kusti8/proton-native/blob/master/examples/Notepad/package.json#L7), it leads to bloated packaged final app.

electron-builder excludes libui-download for now and can exclude babel in the same way, but I thinkproton-native should be splitted into production-only and development-only parts.

(Code:

import React, { Component } from 'react'; // import from react

import { render, Window, App, Box, Button, TextInput, Picker } from 'proton-native'; // import the proton-native components

class Example extends Component {
  render() { // all Components must have a render method
    return (
      <App> // you must always include App around everything
        <Window title="Proton Native Rocks!" menuBar={false}>
          <Box>
            <Picker stretchy={false} selected={0}>
              <Picker.Item>Option 1</Picker.Item>
              <Picker.Item>Option 2</Picker.Item>
              <Picker.Item>Option 3</Picker.Item>
            </Picker>
            <Button stretchy={false}>Hello</Button>
            <TextInput stretchy={false} />
          </Box>
        </Window>
      </App>
    );
  }
}

render(<Example />); // and finally render your main component

libui correctly displays literal newline characters (\n) in labels.
This works:

<Text stretchy={false}>{"AutoUpdate sucht nach Updateversionen der Microsoft-Software. Weitere Informationen zu \n AutoUpdate finden sie in der Hilfe."}</Text> 

This doesn't:

<Text stretchy={false}>AutoUpdate sucht nach Updateversionen der Microsoft-Software. Weitere Informationen zu {'\n'} AutoUpdate finden sie in der Hilfe.</Text> 

Results in some extra commas and an error message: text , <line break>, text

$ npx babel-node app.js
Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Text`, expected `string`.
$

So the children array needs to be properly joined when rendering.

In React, events are typically called onChange and onClick rather than onChanged and onClicked. How do you feel about changing this? Great project btw!

I think babel-cli (babel node ) dep is missing npm i babel-cli but after getting that fixed it's looking for a missing env.

Error: Couldn't find preset "env" relative to directory "/home/gnb/Sites/create-proton-app"

I'm on Ubuntu 17.10

Hi, thank you for your efforts in creating this framework!

I have an existing RN app that is under development and would love to add a desktop (Mac, windows, linux) target to it ... I understand I'd have to build new views but my redux actions, reducers, api, etc could all be re-used by them.

Any tips on how to structure the code so that I can keep it to one code base?

It appears that they are added as standard menu item,
but then switched to check when checked property is set to default value of false here: https://github.com/kusti8/proton-native/blob/master/src/components/MenuBar.js#L74

Commenting this line make menu items appear as they should.
I don't know why libui change the menu item type once constructed, anyway, seems better to just remove the property setting on proton side, since a default menu item does not have the prop.

The button "Show Preferences" correctly opens a window. The "Hide Preferences" button doesn't hide the window (but sets state.showPreferences to false). Furthermore, pressing "Show" after "Hide" opens a second child window because the old one didn't close.

class Notepad extends Component {
  state = { showPreferences: false};

  render() {
    return (
      <App>
        <Menu title="File">
          <Menu.Item type="Preferences" onClick={()=>this.setState({showPreferences: true})}/>
        </Menu>
        <Window title="Test" size={{ w: 500, h: 500 }} margined={true}>
          <Box>
            <Text>Hi!</Text>
            <Button onClick={()=>this.setState({showPreferences: true})}>Show Preferences</Button>
            <Button onClick={()=>this.setState({showPreferences: false})}>Hide Preferences</Button>
          </Box>
        </Window>
        {
          this.state.showPreferences &&
            <Window title="Preferences" size={{ w: 100, h: 100 }}
                    onClose={()=>this.setState({showPreferences: false})} lastWindow={false}>
            </Window>
        }
      </App>
    );
  }
}

After issuing "Show" - "Hide" - "Show":

The upstream libui-node master should now equal your fork ($ORIGIN rpath on linux and copying nbind.node to the root folder), but it also sets the rpath correctly for macOS.

Would it be possible to use material-ui or react-native-material-ui in proton-native ?

If no, what would be the challenge into creating this?
If yes, why doesn't it work? 😢

Or should I actually use react-native-material-ui instead of material-ui, because that would make sense!

Not sure about other versions, but this is what happens on macos Sierra 10.12.6

$ babel-node index.js
2018-02-15 08:06:58.128 node[29387:27624113] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'nextEventMatchingMask should only be called from the Main Thread!'
*** First throw call stack:
(
	0   CoreFoundation                      0x00007fffadc082cb __exceptionPreprocess + 171
	1   libobjc.A.dylib                     0x00007fffc2a2048d objc_exception_throw + 48
	2   AppKit                              0x00007fffabdf3e82 -[NSApplication(NSEvent) _nextEventMatchingEventMask:untilDate:inMode:dequeue:] + 4480
	3   nbind.node                          0x00000001051cfe91 _Z10pollEventsPv + 193
	4   libsystem_pthread.dylib             0x00007fffc351f93b _pthread_body + 180
	5   libsystem_pthread.dylib             0x00007fffc351f887 _pthread_body + 0
	6   libsystem_pthread.dylib             0x00007fffc351f08d thread_start + 13
)
libc++abi.dylib: terminating with uncaught exception of type NSException
[1]    29385 abort      babel-node index.js

The package installed fine (with a ton of warnings.)