clayrisser / react-gtk Goto Github PK

View Code? Open in Web Editor NEW

306.0 13.0 19.0 76.68 MB

react Native bridge for gtk desktop applications

Home Page: https://clayrisser.com

License: MIT License

JavaScript 3.70% Shell 1.61% TypeScript 90.37% Makefile 4.07% Nix 0.26%

react react-native gtk gtk3 bridge featured

react-gtk's Introduction

react-gtk

cross-platform react native desktop applications

Please ★ this repo if you found it useful ★ ★ ★

Built with Node GTK and Gjsify

GTK 4.0 Support Coming Soon!

After a few years away from this project, I have finally returned. I will be refactoring the entire project from scratch to reach general availablilty. The new refactor will support GTK 4.0 and CSS using Yoga.

You can follow the development in the React GTK Discord

JOIN DISCORD

FILE ISSUE

This project is under active development. Please help by sharing your experience, bugs, comments, complaints, etc . . .

If you think it, say it 😆

Features

supports native osx desktop
supports native linux desktop
supports native windows desktop

Installation

npm install --save @react-gtk/binding

Dependencies

Gtk 3

Make sure you have gtk 3 installed on your operating system.

Ubuntu

sudo apt install libgtk-3-dev libgirepository1.0-dev

OSX

brew install gtk+3

Usage

import React, { Component } from 'react';
import { render, Button, Box } from '@react-gtk/binding';

class App extends Component {
  render() {
    return (
      <Box>
        <Button label="One" />
        <Button label="Two" />
      </Box>
    );
  }
}

render(<App />, 'My App');

Example

git clone https://github.com/codejamninja/react-gtk.git
cd react-gtk/examples/elements
npm install
npm run start

Support

Submit an issue

Screenshots

Contribute a screenshot

Contributing

Review the guidelines for contributing

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

MIT License

Changelog

Review the changelog

Credits

Jam Risser - Author

Support on Liberapay

A ridiculous amount of coffee ☕ ☕ ☕ was consumed in the process of building this project.

Add some fuel if you'd like to keep me going!

react-gtk's People

Contributors

Stargazers

Watchers

Forkers

alexxnica kryndex harisvsulaiman bsott jakejarrett opencollective ecreeth kizmanj anthony2698 linecode adelinopds southwhale strogo benwaffle crossstream sgnconnects brugarolas

react-gtk's Issues

Need to access window object

It would be nice to be able to access or control the window object.

Use case: saving/restoring window dimensions (or any other data) on open/close events.
Use case: prevent window closing if there is unsaved data.

can't figure out how to use

i can't figure out how to use things .there not much docs or references . Can you create a documentation or few sample apps it will be really helpful. or just a list available components and props.

React renderer

This issue is for discussion relating to the react renderer.

Consider using preact or inferno

I recently tested this project: https://github.com/vadimdemedes/ink.

The first question that came to my mind was: "Why rewrite React in place of a new render on the original React?" Luckily someone came first vadimdemedes/ink#16.

And in fact analyzing the code of the renders (including the new: fibers) you can see that the extensibility and documentation is not strong from the React project.

I think this project could benefit from starting with something less painful than a render for React.

Gives some error. Any help?

When installing the module, gives an error.

$ npm install --save @react-gtk/binding
npm WARN deprecated [email protected]: 'github' has been renamed to '@octokit/rest' (https://git.io/vNB11)

> [email protected] install /mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/node-gtk
> if [ "$(uname)" = "Darwin" ] && [ "$(which brew)" != "" ]; then export PKG_CONFIG_PATH=$(brew --prefix libffi)/lib/pkgconfig; fi; node-pre-gyp install --fallback-to-build

node-pre-gyp WARN Tried to download(403): https://node-gtk-1.s3.amazonaws.com/node_gtk/v0.2.2/node_gtk-node-v72-linux-x64.tar.gz 
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v72 ABI, glibc) (falling back to source compile with node-gyp) 
Package gobject-introspection-1.0 was not found in the pkg-config search path.
Perhaps you should add the directory containing `gobject-introspection-1.0.pc'
to the PKG_CONFIG_PATH environment variable
No package 'gobject-introspection-1.0' found
gyp: Call to 'pkg-config --cflags gobject-introspection-1.0' returned exit status 1 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:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:310:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Linux 5.4.0-28-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/node-gtk/lib/binding/node-v72-linux-x64/node_gtk.node" "--module_name=node_gtk" "--module_path=/mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/node-gtk/lib/binding/node-v72-linux-x64" "--napi_version=5" "--node_abi_napi=napi"
gyp ERR! cwd /mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/node-gtk
gyp ERR! node -v v12.16.3
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/node-gtk/lib/binding/node-v72-linux-x64/node_gtk.node --module_name=node_gtk --module_path=/mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/node-gtk/lib/binding/node-v72-linux-x64 --napi_version=5 --node_abi_napi=napi' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:310:20)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:1021:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
node-pre-gyp ERR! System Linux 5.4.0-28-generic
node-pre-gyp ERR! command "/usr/bin/node" "/mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/node-gtk
node-pre-gyp ERR! node -v v12.16.3
node-pre-gyp ERR! node-pre-gyp -v v0.10.2
node-pre-gyp ERR! not ok 
Failed to execute '/usr/bin/node /usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/node-gtk/lib/binding/node-v72-linux-x64/node_gtk.node --module_name=node_gtk --module_path=/mnt/Files/Workspace/React Projects/gtkteste/gtktestapp/node_modules/node-gtk/lib/binding/node-v72-linux-x64 --napi_version=5 --node_abi_napi=napi' (1)
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
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 WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/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 WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack/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 WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/jest-haste-map/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: `if [ "$(uname)" = "Darwin" ] && [ "$(which brew)" != "" ]; then export PKG_CONFIG_PATH=$(brew --prefix libffi)/lib/pkgconfig; fi; node-pre-gyp install --fallback-to-build`
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.

Add typescript examples

In main now I see only js, in refactor branch there are one example on C heh.

P.S. cant wait to try this out.
Will it be possible to use mobx with it?

Projects Using React GTK

Please list any and all projects that are using react-gtk. I will put them in the README.md file, plus I'm just pumped to see how this project is being used.

node-gyp error on Ubuntu 20.04 Arm while running example

parallels@ubuntu-linux-20-04-desktop:~/Documents/react-gtk/examples/elements$ uname -a
Linux ubuntu-linux-20-04-desktop 5.4.0-91-generic #102-Ubuntu SMP Fri Nov 5 16:30:45 UTC 2021 aarch64 aarch64 aarch64 GNU/Linux
parallels@ubuntu-linux-20-04-desktop:~/Documents/react-gtk/examples/elements$ npm install
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future
npm WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path /home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk
npm ERR! command failed
npm ERR! command sh -c if [ "$(uname)" = "Darwin" ] && [ "$(which brew)" != "" ]; then export PKG_CONFIG_PATH=$(brew --prefix libffi)/lib/pkgconfig; fi; node-pre-gyp install --fallback-to-build
npm ERR! make: Entering directory '/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/build'
npm ERR!   CXX(target) Release/obj.target/node_gtk/src/boxed.o
npm ERR!   CXX(target) Release/obj.target/node_gtk/src/callback.o
npm ERR!   CXX(target) Release/obj.target/node_gtk/src/closure.o
npm ERR!   CXX(target) Release/obj.target/node_gtk/src/debug.o
npm ERR!   CXX(target) Release/obj.target/node_gtk/src/error.o
npm ERR!   CXX(target) Release/obj.target/node_gtk/src/function.o
npm ERR!   CXX(target) Release/obj.target/node_gtk/src/gi.o
npm ERR!   CXX(target) Release/obj.target/node_gtk/src/gobject.o
npm ERR!   CXX(target) Release/obj.target/node_gtk/src/loop.o
npm ERR! make: Leaving directory '/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/build'
npm ERR! Failed to execute '/home/parallels/.nvm/versions/node/v16.13.0/bin/node /home/parallels/.nvm/versions/node/v16.13.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64/node_gtk.node --module_name=node_gtk --module_path=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64 --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | linux | arm64
npm ERR! node-pre-gyp WARN Using request for node-pre-gyp https download 
npm ERR! node-pre-gyp info check checked for "/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64/node_gtk.node" (not found)
npm ERR! node-pre-gyp http GET https://node-gtk-1.s3.amazonaws.com/node_gtk/v0.4.0/node_gtk-node-v93-linux-arm64.tar.gz
npm ERR! node-pre-gyp http 403 https://node-gtk-1.s3.amazonaws.com/node_gtk/v0.4.0/node_gtk-node-v93-linux-arm64.tar.gz
npm ERR! node-pre-gyp WARN Tried to download(403): https://node-gtk-1.s3.amazonaws.com/node_gtk/v0.4.0/node_gtk-node-v93-linux-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v93 ABI, glibc) (falling back to source compile with node-gyp) 
npm ERR! node-pre-gyp http 403 status code downloading tarball https://node-gtk-1.s3.amazonaws.com/node_gtk/v0.4.0/node_gtk-node-v93-linux-arm64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | arm64
npm ERR! gyp info find Python using Python version 3.8.10 found at "/usr/bin/python3"
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/home/parallels/.nvm/versions/node/v16.13.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/parallels/.nvm/versions/node/v16.13.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/parallels/snap/codium/common/.cache/node-gyp/16.13.0/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/home/parallels/snap/codium/common/.cache/node-gyp/16.13.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/home/parallels/.nvm/versions/node/v16.13.0/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/home/parallels/snap/codium/common/.cache/node-gyp/16.13.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | arm64
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/boxed.h:4,
npm ERR!                  from ../src/boxed.cc:5:
npm ERR! ../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
npm ERR! ../../nan/nan.h:2298:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!  2298 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
npm ERR!       |                                                              ^
npm ERR! In file included from ../../nan/nan.h:2784,
npm ERR!                  from ../src/boxed.h:4,
npm ERR!                  from ../src/boxed.cc:5:
npm ERR! ../../nan/nan_weak.h: In instantiation of ‘Nan::WeakCallbackInfo<P>::WeakCallbackInfo(Nan::Persistent<v8::Value>*, Nan::WeakCallbackInfo<P>::Callback, void*, void*, void*) [with T = GNodeJS::Boxed; Nan::WeakCallbackInfo<P>::Callback = void (*)(const Nan::WeakCallbackInfo<GNodeJS::Boxed>&)]’:
npm ERR! ../../nan/nan_weak.h:264:12:   required from ‘void Nan::Persistent<T, M>::SetWeak(P*, typename Nan::WeakCallbackInfo<P>::Callback, Nan::WeakCallbackType) [with P = GNodeJS::Boxed; T = v8::Object; M = v8::NonCopyablePersistentTraits<v8::Object>; typename Nan::WeakCallbackInfo<P>::Callback = void (*)(const Nan::WeakCallbackInfo<GNodeJS::Boxed>&); Nan::WeakCallbackType = v8::WeakCallbackType]’
npm ERR! ../src/boxed.cc:244:84:   required from here
npm ERR! ../../nan/nan_weak.h:58:16: warning: ‘void* memcpy(void*, const void*, size_t)’ writing to an object of type ‘class v8::Persistent<v8::Value>’ with no trivial copy-assignment; use copy-assignment or copy-initialization instead [-Wclass-memaccess]
npm ERR!    58 |     std::memcpy(&persistent_, persistent, sizeof (v8::Persistent<v8::Value>));
npm ERR!       |     ~~~~~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! In file included from /home/parallels/snap/codium/common/.cache/node-gyp/16.13.0/include/node/node.h:63,
npm ERR!                  from ../../nan/nan.h:54,
npm ERR!                  from ../src/boxed.h:4,
npm ERR!                  from ../src/boxed.cc:5:
npm ERR! /home/parallels/snap/codium/common/.cache/node-gyp/16.13.0/include/node/v8.h:668:35: note: ‘class v8::Persistent<v8::Value>’ declared here
npm ERR!   668 | template <class T, class M> class Persistent : public PersistentBase<T> {
npm ERR!       |                                   ^~~~~~~~~~
npm ERR! In file included from ../src/callback.cc:2:
npm ERR! ../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
npm ERR! ../../nan/nan.h:2298:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!  2298 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
npm ERR!       |                                                              ^
npm ERR! In file included from ../src/closure.cc:2:
npm ERR! ../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
npm ERR! ../../nan/nan.h:2298:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!  2298 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
npm ERR!       |                                                              ^
npm ERR! ../src/closure.cc: In static member function ‘static void GNodeJS::Closure::Marshal(GClosure*, GValue*, uint, const GValue*, gpointer, gpointer)’:
npm ERR! ../src/closure.cc:41:38: warning: missing initializer for member ‘_GSignalQuery::signal_name’ [-Wmissing-field-initializers]
npm ERR!    41 |     GSignalQuery signal_query = { 0, };
npm ERR!       |                                      ^
npm ERR! ../src/closure.cc:41:38: warning: missing initializer for member ‘_GSignalQuery::itype’ [-Wmissing-field-initializers]
npm ERR! ../src/closure.cc:41:38: warning: missing initializer for member ‘_GSignalQuery::signal_flags’ [-Wmissing-field-initializers]
npm ERR! ../src/closure.cc:41:38: warning: missing initializer for member ‘_GSignalQuery::return_type’ [-Wmissing-field-initializers]
npm ERR! ../src/closure.cc:41:38: warning: missing initializer for member ‘_GSignalQuery::n_params’ [-Wmissing-field-initializers]
npm ERR! ../src/closure.cc:41:38: warning: missing initializer for member ‘_GSignalQuery::param_types’ [-Wmissing-field-initializers]
npm ERR! In file included from ../src/value.h:5,
npm ERR!                  from ../src/debug.cc:7:
npm ERR! ../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
npm ERR! ../../nan/nan.h:2298:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!  2298 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
npm ERR!       |                                                              ^
npm ERR! In file included from ../src/type.h:11,
npm ERR!                  from ../src/error.cc:3:
npm ERR! ../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
npm ERR! ../../nan/nan.h:2298:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!  2298 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
npm ERR!       |                                                              ^
npm ERR! In file included from ../src/boxed.h:4,
npm ERR!                  from ../src/function.cc:5:
npm ERR! ../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
npm ERR! ../../nan/nan.h:2298:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!  2298 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
npm ERR!       |                                                              ^
npm ERR! In file included from ../src/gi.cc:3:
npm ERR! ../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
npm ERR! ../../nan/nan.h:2298:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!  2298 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
npm ERR!       |                                                              ^
npm ERR! In file included from ../src/boxed.h:4,
npm ERR!                  from ../src/gobject.cc:4:
npm ERR! ../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
npm ERR! ../../nan/nan.h:2298:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!  2298 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
npm ERR!       |                                                              ^
npm ERR! ../src/gobject.cc: At global scope:
npm ERR! ../src/gobject.cc:222:13: warning: ‘bool GNodeJS::HasReturnValue(GICallableInfo*, GITypeInfo*)’ defined but not used [-Wunused-function]
npm ERR!   222 | static bool HasReturnValue(GICallableInfo *signalInfo, GITypeInfo *returnInfo) {
npm ERR!       |             ^~~~~~~~~~~~~~
npm ERR! In file included from ../src/loop.cc:3:
npm ERR! ../../nan/nan.h: In function ‘void Nan::AsyncQueueWorker(Nan::AsyncWorker*)’:
npm ERR! ../../nan/nan.h:2298:62: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*, int)’} [-Wcast-function-type]
npm ERR!  2298 |     , reinterpret_cast<uv_after_work_cb>(AsyncExecuteComplete)
npm ERR!       |                                                              ^
npm ERR! ../src/loop.cc: In function ‘void GNodeJS::CallMicrotaskHandlers()’:
npm ERR! ../src/loop.cc:111:28: error: ‘class v8::Isolate’ has no member named ‘RunMicrotasks’
npm ERR!   111 |     Isolate::GetCurrent()->RunMicrotasks();
npm ERR!       |                            ^~~~~~~~~~~~~
npm ERR! make: *** [node_gtk.target.mk:142: Release/obj.target/node_gtk/src/loop.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/home/parallels/.nvm/versions/node/v16.13.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Linux 5.4.0-91-generic
npm ERR! gyp ERR! command "/home/parallels/.nvm/versions/node/v16.13.0/bin/node" "/home/parallels/.nvm/versions/node/v16.13.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64/node_gtk.node" "--module_name=node_gtk" "--module_path=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93"
npm ERR! gyp ERR! cwd /home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk
npm ERR! gyp ERR! node -v v16.13.0
npm ERR! gyp ERR! node-gyp -v v8.2.0
npm ERR! gyp ERR! not ok 
npm ERR! node-pre-gyp ERR! build error 
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/home/parallels/.nvm/versions/node/v16.13.0/bin/node /home/parallels/.nvm/versions/node/v16.13.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64/node_gtk.node --module_name=node_gtk --module_path=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64 --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! node-pre-gyp ERR! System Linux 5.4.0-91-generic
npm ERR! node-pre-gyp ERR! command "/home/parallels/.nvm/versions/node/v16.13.0/bin/node" "/home/parallels/Documents/react-gtk/examples/elements/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd /home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk
npm ERR! node-pre-gyp ERR! node -v v16.13.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.13.0
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/parallels/.npm/_logs/2021-12-03T22_26_53_774Z-debug.log
parallels@ubuntu-linux-20-04-desktop:~/Documents/react-gtk/examples/elements$

Same issue on fedora.

[parallels@fedora elements]$ npm install
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm notice 
npm notice New minor version of npm available! 8.1.2 -> 8.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.3.0
npm notice Run npm install -g [email protected] to update!
npm notice 
npm ERR! code 1
npm ERR! path /home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk
npm ERR! command failed
npm ERR! command sh -c if [ "$(uname)" = "Darwin" ] && [ "$(which brew)" != "" ]; then export PKG_CONFIG_PATH=$(brew --prefix libffi)/lib/pkgconfig; fi; node-pre-gyp install --fallback-to-build
npm ERR! Failed to execute '/home/parallels/.nvm/versions/node/v16.13.1/bin/node /home/parallels/.nvm/versions/node/v16.13.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64/node_gtk.node --module_name=node_gtk --module_path=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64 --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | linux | arm64
npm ERR! node-pre-gyp WARN Using request for node-pre-gyp https download 
npm ERR! node-pre-gyp info check checked for "/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64/node_gtk.node" (not found)
npm ERR! node-pre-gyp http GET https://node-gtk-1.s3.amazonaws.com/node_gtk/v0.4.0/node_gtk-node-v93-linux-arm64.tar.gz
npm ERR! node-pre-gyp http 403 https://node-gtk-1.s3.amazonaws.com/node_gtk/v0.4.0/node_gtk-node-v93-linux-arm64.tar.gz
npm ERR! node-pre-gyp WARN Tried to download(403): https://node-gtk-1.s3.amazonaws.com/node_gtk/v0.4.0/node_gtk-node-v93-linux-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v93 ABI, glibc) (falling back to source compile with node-gyp) 
npm ERR! node-pre-gyp http 403 status code downloading tarball https://node-gtk-1.s3.amazonaws.com/node_gtk/v0.4.0/node_gtk-node-v93-linux-arm64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | arm64
npm ERR! gyp info find Python using Python version 3.9.9 found at "/usr/bin/python3"
npm ERR! gyp http GET https://nodejs.org/download/release/v16.13.1/node-v16.13.1-headers.tar.gz
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.13.1/node-v16.13.1-headers.tar.gz
npm ERR! gyp http GET https://nodejs.org/download/release/v16.13.1/SHASUMS256.txt
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.13.1/SHASUMS256.txt
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/home/parallels/.nvm/versions/node/v16.13.1/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/parallels/.nvm/versions/node/v16.13.1/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/parallels/.cache/node-gyp/16.13.1/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/home/parallels/.cache/node-gyp/16.13.1',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/home/parallels/.nvm/versions/node/v16.13.1/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/home/parallels/.cache/node-gyp/16.13.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! Package gobject-introspection-1.0 was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `gobject-introspection-1.0.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! Package 'gobject-introspection-1.0', required by 'virtual:world', not found
npm ERR! gyp: Call to 'pkg-config --cflags gobject-introspection-1.0 cairo' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/home/parallels/.nvm/versions/node/v16.13.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:261:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Linux 5.11.12-300.fc34.aarch64
npm ERR! gyp ERR! command "/home/parallels/.nvm/versions/node/v16.13.1/bin/node" "/home/parallels/.nvm/versions/node/v16.13.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64/node_gtk.node" "--module_name=node_gtk" "--module_path=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93"
npm ERR! gyp ERR! cwd /home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk
npm ERR! gyp ERR! node -v v16.13.1
npm ERR! gyp ERR! node-gyp -v v8.3.0
npm ERR! gyp ERR! not ok 
npm ERR! node-pre-gyp ERR! build error 
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/home/parallels/.nvm/versions/node/v16.13.1/bin/node /home/parallels/.nvm/versions/node/v16.13.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64/node_gtk.node --module_name=node_gtk --module_path=/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk/lib/binding/node-v93-linux-arm64 --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/home/parallels/Documents/react-gtk/examples/elements/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! node-pre-gyp ERR! System Linux 5.11.12-300.fc34.aarch64
npm ERR! node-pre-gyp ERR! command "/home/parallels/.nvm/versions/node/v16.13.1/bin/node" "/home/parallels/Documents/react-gtk/examples/elements/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd /home/parallels/Documents/react-gtk/examples/elements/node_modules/node-gtk
npm ERR! node-pre-gyp ERR! node -v v16.13.1
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.13.0
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/parallels/.npm/_logs/2021-12-16T20_44_29_517Z-debug.log
[parallels@fedora elements]$ uname -a
Linux fedora 5.11.12-300.fc34.aarch64 #1 SMP Wed Apr 7 16:12:21 UTC 2021 aarch64 aarch64 aarch64 GNU/Linux
[parallels@fedora elements]$

Publish TypeDefinitions

I found this project looking at Node-gtk and was hoping to get some type definitions for Typescript, is there any way we could get the work you've already done published to somewhere like DefinitlyTyped ?

Please give an example how eventhandlers ar used.

Hello, awesome project! I believe this project and the node-gtk project could boost app development on Linux.

I am trying to recreate the gjs tutorial and I can't figure out how to do event handling.

For example I want to do handle a click event on a button:

import React, { Component } from 'react';
import { render, Button, Box } from '@react-gtk/binding';

class App extends Component {

    

  onClicked() {
      console.log("clicked");
      
  }
  render() {
    return (
        <Button label="Click Here" clicked={this.onClicked} />
    );
  }
}

render(<App />, 'Hello World');

The event name would be clicked but I don't know how to handle the event in my component.

What is the state of this project?

I can see the commit rate is very low but I was able to run some examples on my machine. Will it just work™ with react-native and react-native-windows?
What are things that still need to be done?

Thanks.

Yoga Implementation

Discussion on approaches to implementing yoga flexbox.

https://facebook.github.io/yoga/

Please stop making React.JS shit

The worst quality products are made with JavaScript. Don't ruin the GTK like this please!

Can't run properly the example

Hello everyone,

Thank you very much for this project. It sounds great to be able to develop a desktop app from react like components.

I'm currently unable to run the examples successfully. What is happening is that the window opens, displays nothing, and the program doesn't respond. I'm on macOS Big Sur. I get the following warnings, hope they have nothing to do with it.

The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding ["@babel/plugin-proposal-private-methods", { "loose": true }] to the "plugins" section of your Babel config.
Successfully compiled 4 files with Babel (925ms).
[WARN] gi.cc: GetConstantValue: 137: Couldn't load HarfBuzz.LANGUAGE_INVALID: invalid constant size: 0

Can you please help me running the examples?

Thank you very much!

NodeGTK bindings

I'm first going to build the node bindings in a separate repo using FFI. Then I'm going to port the node bindings over to React. The reason I'm building my own node bindings is that existing Node bindings are either abandoned or require custom runtime environments.

You can follow and contribute to this project at node-gtk.

How to package as snap or flatpack

Hii jam! I just finished my simple app with react-gtk . But i confused how to distribute this. Please help..

Contribution guide

This issue is for discussion on a contribution guide. I've had several requests to create one.

TypeScript Refactor

I have refactored this project with TypeScript

Is it possible to integrate ReactJS components into react-gtk library

I am working on a project on ARM processor/Linux combo. We are using gjs and created basic application layout.
Now we want to integrate the reactJS components into the solution.
Is this possible?

Create Gtk Widgets

I have created all of the gtk widgets

Port a simple React app as part of documentation

Tic-tac-toe game or something easier, think it will be hyper useful and make this project more interested for developers.

I have no idea how to get this working with TypeScript.

I've been trying to use your package but nothing I do seems to work.
Is there an example project with TypeScript?

Project roadmap

This issue is for discussion about a project roadmap. I've had several requests to create one.

Declare JSX namespace for typescript

Hi, I'm trying to run your example project using typescript but I can't seem to get it to work. Can you give me some pointers?

Make it easier to start a project with react-gtk

The readme contains a Usage section with sample code, but it needs to be transpiled to work. Maybe we could create a simple react-gtk-example repository that could be forked as a base to start a react-gtk project? Put in everything needed to transpile & build it: babel config, etc.

Ideally something like create-react-app would be awesome, but an example repository would work fine for the moment.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.