├── .circleci └── config.yml ├── .editorconfig ├── .gitignore ├── .npmignore ├── CONTRIBUTING.md ├── README.md ├── example └── TodoApp.tsx ├── package-lock.json ├── package.json ├── preprocessor.js ├── src ├── GtkContainer.ts ├── ReactNativeGtk.ts ├── Reconciler.ts ├── createElement.ts ├── elements │ ├── Button.ts │ ├── GtkContainerElement.ts │ ├── GtkElement.ts │ ├── Label.ts │ ├── ListBox.ts │ ├── ListBoxRow.ts │ ├── TextInput.ts │ ├── View.ts │ ├── index.ts │ └── util │ │ └── signals.ts ├── flexbox │ ├── cssToYogaValue.ts │ └── flex.ts ├── index.ts ├── logger.ts └── style │ ├── StyleAttributes.ts │ ├── Stylesheet.ts │ ├── __tests__ │ └── styleShorthands.test.ts │ ├── index.ts │ └── styleShorthands.ts ├── tsconfig.json ├── tslint.json └── types ├── jsx.d.ts ├── node-gir.d.ts └── yoga.d.ts /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | jobs: 4 | build: 5 | docker: 6 | - image: node:8-stretch 7 | steps: 8 | - checkout 9 | - run: apt-get update 10 | - run: apt-get install -y xvfb # xvfb for running headless tests (headless X11 server). 11 | - run: apt-get install -y libgirepository1.0-dev libgtk-3-dev # system dependencies for node-gir and GTK 12 | - run: npm install 13 | - run: npm run lint 14 | - run: xvfb-run -a npm run test 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | indent_style = space 7 | indent_size = 2 8 | 9 | [*.{js,ts,jsx,tsx,cpp,hpp}] 10 | charset = utf-8 11 | 12 | [Makefile] 13 | indent_style = tab 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | example/ 3 | .vscode/ 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We accept contributions of every kind: documentation, code, artwork. Any help is greatly 4 | appreciated. This document contains everything needed to get started with your first contribution. 5 | 6 | 7 | ## Contributing Code 8 | 9 | We keep the source code on [GitHub](https://www.github.com) and take contributions through 10 | [GitHub pull requests](https://help.github.com/articles/using-pull-requests). 11 | 12 | For smaller patches and bug fixes just go ahead and either report an issue or submit a pull 13 | request. 14 | 15 | It is usually a good idea to discuss major changes with the developers, this will help us 16 | determine whether the contribution would be a good fit for the project and if it is likely to be 17 | accepted. There's nothing worse than seeing your hard work being rejected because it falls outside 18 | of the scope of the project. 19 | 20 | Make sure your editor respects the [EditorConfig](http://editorconfig.org) configuration file we 21 | put at the root of the repository. 22 | 23 | We follow [GitHub Flow](http://scottchacon.com/2011/08/31/github-flow.html) as our git workflow of 24 | choice which boils down to: 25 | 26 | * The `master` branch is always stable and deployable. 27 | * To work on something new, branch off `master` and give the new branch a descriptive name (e.g.: 28 | `sort-packages-by-name`, `issue-32`, etc). 29 | * Regularly __rebase__ that branch against `master` and push your work to a branch with the same 30 | name on the server. 31 | * When you need feedback, help or think you are ready, 32 | [submit a pull request](https://help.github.com/articles/using-pull-requests). 33 | * Once the branch has been merged (or rebased) into `master`, delete it from both your local and 34 | remote repository. 35 | 36 | We invite you to follow 37 | [these guidelines](http://who-t.blogspot.de/2009/12/on-commit-messages.html) to write useful 38 | commit messages. 39 | 40 | Additionally, you don't need to add entries to the [CHANGELOG.md](CHANGELOG.md) file, this is our 41 | responsibility. 42 | 43 | 44 | ## Reading List 45 | 46 | * [GitHub Flow](http://scottchacon.com/2011/08/31/github-flow.html) 47 | * [Keep a Changelog](http://keepachangelog.com/) 48 | * [On Commit Messages](http://who-t.blogspot.de/2009/12/on-commit-messages.html) 49 | * [Semantic Versioning](http://semver.org/) 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Abandoned. I recommend looking at Proton Native instead: https://github.com/kusti8/proton-native 2 | 3 | # React Native GTK (WIP) 4 | [![CircleCI](https://circleci.com/gh/Place1/react-native-gtk/tree/master.svg?style=shield)](https://circleci.com/gh/Place1/react-native-gtk/tree/master) 5 | [![npm](https://img.shields.io/npm/v/react-native-gtk.svg?style=flat-square)](https://www.npmjs.com/package/react-native-gtk) 6 | [![npm](https://img.shields.io/npm/dt/react-native-gtk.svg?style=flat-square)](https://www.npmjs.com/package/react-native-gtk) 7 | 8 | React Native GTK allows developers to write ReactJS apps for desktop with native UI elements! 9 | 10 | ## Developing 11 | You can setup the project locally to develop in 1 command! 12 | ``` 13 | npm install 14 | ``` 15 | 16 | ## Check/Test 17 | ``` 18 | npm run lint 19 | npm test 20 | ``` 21 | 22 | ## Examples 23 | There are example applications in the `example/` directory. You can run any of these examples 24 | with the following command: 25 | ``` 26 | ./node_modules/.bin/ts-node ./example/.tsx 27 | 28 | # e.g. running the todo app 29 | 30 | ./node_modules/.bin/ts-node ./example/TodoApp.tsx 31 | ``` 32 | 33 | ## Debug / develop the GI Bindings 34 | This package makes use of [node-gir](https://github.com/Place1/node-gir). The node-gir package provides the 35 | [GObject Introspection](https://wiki.gnome.org/Projects/GObjectIntrospection) bindings that this library uses 36 | to interact with [GTK](https://developer.gnome.org/gtk3/stable/). In some cases you might want to 37 | debug/develop these two libraries (node-gir and react-native-gtk) together. Thankfully NPM provides a nice 38 | tool to do this called `npm link` 39 | 40 | ``` 41 | git clone https://github.com/Place1/react-native-gtk 42 | git clone https://github.com/Place1/node-gir 43 | 44 | cd react-native-gtk 45 | npm link ../node-gir 46 | 47 | # now 'react-native-gtk' will use your local copy of node-gir! 48 | ``` 49 | 50 | ## Contributing 51 | Send us a Pull Request! Here is how: 52 | 1. Fork it! 53 | 2. Create your feature branch: git checkout -b my-new-feature 54 | 3. Stage your changes: git add . 55 | 3. Commit your changes: git commit -m 'Add some feature' 56 | 4. Push to the branch: git push origin my-new-feature 57 | 5. Submit a pull request 58 | 59 | Here are some helpful tips for code contributors: 60 | - Open an issue before you start coding so others know what you're working on. 61 | - Open your pull request early, even if you're not done so others can provide input/feedback! 62 | 63 | If you have input but don't want to/can't contribute code just yet, here's some other options: 64 | - Open issues to track bugs you've found using react-native-gtk 65 | - Open issues to contribute your thoughts/suggestions/questions about the future of the package 66 | and the direction the developers are taking! 67 | - Documentation: we haven't started our documentation efforts just yet but this will be a very 68 | important aspect of the project! 69 | 70 | 71 | ## Roadmap 72 | react-native-gtk is currently in its infancy and should be considered a work in progress! 73 | 74 | * There is still a lot of work to be done on the parent project, [node-gir](https://github.com/Place1/node-gir), 75 | to provide bullet proof GObject Introspection bindings for us to consume here. 76 | 77 | Many aspects of react-native-gtk are still being developed as well. The layout system (flexbox 78 | using YogaLayout) still requires a lot of work to make sure it's fast and 'works as expected' 79 | on-top of GTK. The architecture behind the intrinsic react elements could also benefit from 80 | some detailed research and design proposal/improvements! 81 | 82 | This project may also want to consider producing CLI tools to make bundling/packaging 83 | applications easier. A react-native-gtk application will have three primary environmental 84 | dependencies: node.js, gobject-introspection and GTK. How will our consumers (primarily NodeJS/JavaScript developers making 85 | desktop apps) convert their react-native-gtk code into an installable application for Mac, Windows 86 | and Linux? The process from _hello world_ to final app should be quick and easy! If you have suggestions 87 | on this topic then please open an issue or contribute to existing issues relating to! 88 | -------------------------------------------------------------------------------- /example/TodoApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | View, 4 | ListBox, 5 | ListBoxRow, 6 | Label, 7 | TextInput, 8 | Button, 9 | StyleSheet, 10 | render, 11 | } from '../src'; 12 | 13 | interface Todo { 14 | title: string; 15 | } 16 | 17 | interface State { 18 | draftTodo: string; 19 | todos: Todo[], 20 | } 21 | 22 | class App extends React.Component<{}, State> { 23 | 24 | state = { 25 | draftTodo: '', 26 | todos: [{ title: 'hello' }], 27 | }; 28 | 29 | onDraftTodoChanged = (value: string) => { 30 | this.setState({ draftTodo: value }); 31 | } 32 | 33 | createTodo = () => { 34 | const { draftTodo, todos } = this.state; 35 | if (draftTodo !== '') { 36 | const newTodo = { 37 | title: draftTodo, 38 | }; 39 | this.setState({ 40 | todos: [...todos, newTodo], 41 | draftTodo: '', 42 | }); 43 | } 44 | } 45 | 46 | removeTodo = (index: number) => { 47 | const todos = this.state.todos.slice(); 48 | todos.splice(index, 1); 49 | this.setState({ todos }); 50 | } 51 | 52 | componentDidUpdate() { 53 | console.log(JSON.stringify(this.state, undefined, 2)); 54 | } 55 | 56 | render() { 57 | return ( 58 | 59 | 60 | {this.state.todos.map((todo, i) => ( 61 | 62 | 63 |