diff --git a/docs/index.html b/docs/index.html
index 60b8ea0f5..f3d4fea76 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -28,6 +28,11 @@
--heading-h2-color: hsl(204, 90%, 45%);
--cover-background-color: white;
}
+ h1#main-doc {
+ height: 0;
+ opacity: 0;
+ z-index: -2;
+ }
@@ -36,7 +41,7 @@
window.$docsify = {
name: "NodeGui",
repo: "https://github.com/nodegui/nodegui",
- coverpage: true,
+ coverpage: ["/", "/react/"],
themeable: {
readyTransition: true, // default
responsiveTables: true // default
diff --git a/docs/react/README.md b/docs/react/README.md
new file mode 100644
index 000000000..0d2aeb316
--- /dev/null
+++ b/docs/react/README.md
@@ -0,0 +1,61 @@
+# React Desktop
+
+- [About React Desktop](react/about.md)
+- [Examples](https://github.com/master-atul/react-desktop/tree/master/examples)
+- [Setting up the Development Environment](tutorial/development-environment.md)
+- [Creating your First App](react/first-app.md)
+ - [Hello World](react/first-app.md#Hello-World)
+ - [React Desktop Development in a Nutshell](react/first-app.md#react-desktop-development-in-a-nutshell)
+ - [Running Your App](react/first-app.md#running-your-app)
+ // TODO from here
+- [Application Architecture](react/application-architecture.md)
+ - [Qode](tutorial/application-architecture.md#qode)
+ - [Using NodeGui's APIs](tutorial/application-architecture.md#using-NodeGui-apis)
+ - [Using Node.js APIs](tutorial/application-architecture.md#using-nodejs-apis)
+ - [Using Native Node.js Modules](tutorial/using-native-node-modules.md)
+- [Testing and Debugging](tutorial/debugging-app.md)
+ - [Debugging Qode/NodeGui Process](tutorial/debugging-qode-process.md)
+ - [Debugging a NodeGui app with Visual Studio Code](tutorial/debugging-app-vscode.md)
+- [Distribution](tutorial/application-distribution.md)
+ - [Supported Platforms](tutorial/support.md#supported-platforms)
+ - [Code Signing](tutorial/code-signing.md)
+ - [Mac App Store](tutorial/mac-app-store-submission-guide.md)
+ - [Windows Store](tutorial/windows-store-guide.md)
+ - [Snapcraft](tutorial/snapcraft.md)
+- [Getting Support](tutorial/support.md)
+
+## API References
+
+- [Synopsis](api/synopsis.md)
+- [Process Object](api/process.md)
+
+### Modules from NodeGui:
+
+- [QMainWindow (Window)](api/QMainWindow.md)
+- [QWidget (View)](api/QWidget.md)
+- [QLabel (Text/Image)](api/QLabel.md)
+- [QPushButton (Button)](api/QPushButton.md)
+- [QRadioButton (RadioButton)](api/QRadioButton.md)
+- [QCheckBox (CheckBox)](api/QCheckBox.md)
+- [QLineEdit (LineEdit)](api/QLineEdit.md)
+- [QProgressBar (ProgressBar)](api/QProgressBar.md)
+- [FlexLayout](api/FlexLayout.md)
+- [QPixmap](api/QPixmap.md)
+- [Qt Enums](api/QtEnums.md)
+
+### Internal Modules
+
+- [NodeWidget](api/NodeWidget.md)
+- [NodeLayout](api/NodeLayout.md)
+- [EventWidget](api/EventWidget.md)
+- [Component](api/Component.md)
+- [YogaWidget](api/YogaWidget.md)
+
+## Usage
+
+- [Events usage](todo)
+- [Yoga properties using stylesheet usage](todo)
+
+## Development/Contributor's Guide
+
+See [development](development/README.md)
diff --git a/docs/react/about.md b/docs/react/about.md
new file mode 100644
index 000000000..cf414d152
--- /dev/null
+++ b/docs/react/about.md
@@ -0,0 +1,23 @@
+# About React Desktop
+
+[React Desktop](https://github.com/master-atul/react-desktop) is an open source library for building cross-platform desktop applications with React and CSS like styling. React Desktop is a custom react renderer for [NodeGui](https://github.com/master-atul/nodegui). React Desktop combines the power and flexibility of React with ease of NodeJs and maturity of Qt5. With React desktop you can build native desktop applications which are underneath Qt applications. This means you could in theory use all of Qt's Gui APIs in Javascript.
+
+As React Native was an improvement over Cordova based applications in Mobile app development with web technologies, React Desktop aims to achieve the same with respect to Electron and other chromium based cross platform Gui solutions. React Desktop wants to incorporate everything that is good about Electron: The ease of development, freedom of styling, Native APIs, great documentation, etc. At the same time it aims to be memory and CPU efficient.
+
+Also, React Desktop (like NodeGui) is built with Typescript which means you get autocomplete and strong typechecking support from the IDE even when used in a Javascript project.
+
+Get started building with React Desktop in the [First React Desktop app](react/first-app.md).
+
+### Updating Dependencies
+
+As soon as a new version of NodeGui is released a corresponding version of React Desktop will be released simultaneously. This makes sure that both NodeGui and React Desktop releases go out in sync. NodeGui an React Desktop will be released as separate packages in order keep everything easily maintainable.
+
+### Versioning
+
+NodeGui/React Desktop follows [`semver`](https://semver.org).
+For most applications, and using any recent version of npm,
+running `$ npm install @nodegui/react-desktop` will do the right thing.
+
+## Core Philosophy
+
+[See core philosophy of NodeGui](tutorial/about?id=core-philosophy)
diff --git a/docs/react/first-app.md b/docs/react/first-app.md
new file mode 100644
index 000000000..bdf32ce96
--- /dev/null
+++ b/docs/react/first-app.md
@@ -0,0 +1,116 @@
+# Writing Your First React Desktop App
+
+React Desktop enables you to create desktop applications with JavaScript (React). React Desktop is a react renderer for NodeGui. This makes it extrememly memory and CPU efficient as compared to other popular Javascript Desktop GUI solutions.
+
+## Hello World
+
+Clone and run the code in this tutorial by using the
+[`nodegui/react-desktop-starter`][quick-start] repository.
+
+**Note**: Running this requires [Git](https://git-scm.com) and [npm](https://www.npmjs.com/).
+
+```sh
+# Clone the repository
+$ git clone https://github.com/nodegui/react-desktop-starter
+# Go into the repository
+$ cd react-desktop-starter
+# Install dependencies
+$ npm install
+# Run the app
+$ npm start
+```
+
+As far as development is concerned, an React Desktop application is essentially a
+Node.js application. The starting point is a `package.json` that is identical
+to that of a Node.js module. A most basic React Desktop app would have the following
+folder structure:
+
+```text
+your-app/
+├── package.json
+├── index.js
+```
+
+## React Desktop Development in a Nutshell
+
+React Desktop apps are developed in JavaScript using the same principles and methods
+found in React Native development. React Desktop exposes native widgets in the form of React components. Also, since we are now not running inside a browser, there is no DOM. Hence browser based APIs are NOT available. But you do have access to complete NodeJs APIs along with some exported Qt Apis.All APIs related to React Desktop are found in `@nodegui/react-desktop` module. Additionally you can also access APIs and features from NodeGui via
+the `@nodegui/nodegui` module. These can be required like any other Node.js module:
+
+```javascript
+require("@nodegui/nodegui");
+require("@nodegui/react-desktop");
+```
+
+A simple `main.js`.
+
+```javascript
+import { Renderer, View, Text, Button, Window } from "@nodegui/react-desktop";
+import React, { useState } from "react";
+
+const App = () => {
+ const [time, setTime] = useState(new Date());
+ return (
+
+
+
+
+ );
+};
+
+const styleSheet = `
+ #container {
+ qproperty-flex: 1;
+ qproperty-flexDirection: column;
+ qproperty-minHeight: '100%';
+ qproperty-alignItems: 'center';
+ qproperty-justifyContent: 'center';
+ }
+ #opBtn {
+ font-size: 20px;
+ }
+ #result {
+ font-size: 12px;
+ qproperty-flex: 1;
+ color: cyan;
+ }
+`;
+
+Renderer.render(, () => {});
+```
+
+The `index.js` should create windows and handle all the system events your
+application might encounter.
+
+## Running Your App
+
+You can try your app by running `npm start` from your application's
+directory.
+
+## Trying this Example
+
+Clone and run the code in this tutorial by using the
+[`nodegui/react-desktop-starter`][quick-start] repository.
+
+**Note**: Running this requires [Git](https://git-scm.com) and [npm](https://www.npmjs.com/).
+
+```sh
+# Clone the repository
+$ git clone https://github.com/nodegui/react-desktop-starter
+# Go into the repository
+$ cd react-desktop-starter
+# Install dependencies
+$ npm install
+# Run the app
+$ npm start
+```
+
+[quick-start]: https://github.com/nodegui/react-desktop-starter
diff --git a/docs/tutorial/about.md b/docs/tutorial/about.md
index e81e7786e..1c8805d01 100644
--- a/docs/tutorial/about.md
+++ b/docs/tutorial/about.md
@@ -6,7 +6,7 @@ NodeGui began in 2019 as part of frustrations related to Electron and other chro
Also, NodeGui is built with Typescript which means you get autocomplete and strong typechecking support from the IDE even when used in a Javascript project.
-Get started building with NodeGui in the [First NodeGui app](first-app.md).
+Get started building with NodeGui in the [First NodeGui app](tutorial/first-app.md).
### Updating Dependencies
diff --git a/src/cpp/QtGui/QWidget/nwidget.h b/src/cpp/QtGui/QWidget/nwidget.h
index 6a1cb0cab..5b1c8bc72 100644
--- a/src/cpp/QtGui/QWidget/nwidget.h
+++ b/src/cpp/QtGui/QWidget/nwidget.h
@@ -9,7 +9,7 @@ class NWidget: public QWidget, public NodeWidget
{
NODEWIDGET_IMPLEMENTATIONS
public:
- using QWidget::QWidget; //inherit all constructors of QWidget
+ using QWidget::QWidget;
// https://doc.qt.io/qt-5/stylesheet-reference.html
void paintEvent(QPaintEvent *)
{
diff --git a/src/cpp/QtWidgets/QGridLayout/qgridlayout_wrap.cpp b/src/cpp/QtWidgets/QGridLayout/qgridlayout_wrap.cpp
index 75841aff5..f5f961a96 100644
--- a/src/cpp/QtWidgets/QGridLayout/qgridlayout_wrap.cpp
+++ b/src/cpp/QtWidgets/QGridLayout/qgridlayout_wrap.cpp
@@ -1,7 +1,6 @@
#include "qgridlayout_wrap.h"
#include "src/cpp/QtGui/QWidget/qwidget_wrap.h"
#include "src/cpp/Extras/Utils/nutils.h"
-#include "src/cpp/core/Component/component_macro.h"
Napi::FunctionReference QGridLayoutWrap::constructor;
@@ -10,7 +9,7 @@ Napi::Object QGridLayoutWrap::init(Napi::Env env, Napi::Object exports) {
char CLASSNAME[] = "QGridLayout";
Napi::Function func = DefineClass(env, CLASSNAME, {
InstanceMethod("addWidget", &QGridLayoutWrap::addWidget),
- COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE
+ QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE(QGridLayoutWrap)
});
constructor = Napi::Persistent(func);
exports.Set(CLASSNAME, func);
diff --git a/src/cpp/QtWidgets/QGridLayout/qgridlayout_wrap.h b/src/cpp/QtWidgets/QGridLayout/qgridlayout_wrap.h
index dad361d29..e78b15a30 100644
--- a/src/cpp/QtWidgets/QGridLayout/qgridlayout_wrap.h
+++ b/src/cpp/QtWidgets/QGridLayout/qgridlayout_wrap.h
@@ -1,8 +1,8 @@
-#ifndef QGRIDLAYOUT_WRAP_H
-#define QGRIDLAYOUT_WRAP_H
+#pragma once
#include
#include
+#include "src/cpp/QtWidgets/QLayout/qlayout_macro.h"
class QGridLayoutWrap : public Napi::ObjectWrap{
private:
@@ -17,6 +17,6 @@ class QGridLayoutWrap : public Napi::ObjectWrap{
static Napi::FunctionReference constructor;
//wrapped methods
Napi::Value addWidget(const Napi::CallbackInfo& info);
+ QLAYOUT_WRAPPED_METHODS_DECLARATION
};
-#endif
\ No newline at end of file
diff --git a/src/cpp/QtWidgets/QLayout/qlayout_macro.h b/src/cpp/QtWidgets/QLayout/qlayout_macro.h
new file mode 100644
index 000000000..1a5caa716
--- /dev/null
+++ b/src/cpp/QtWidgets/QLayout/qlayout_macro.h
@@ -0,0 +1,46 @@
+#pragma once
+
+#include "src/cpp/core/Component/component_macro.h"
+#include
+/*
+
+ This macro adds common QLayout exported methods
+ The exported methods are taken into this macro to avoid writing them in each and every layout we export.
+ */
+
+#ifndef QLAYOUT_WRAPPED_METHODS_DECLARATION
+#define QLAYOUT_WRAPPED_METHODS_DECLARATION \
+\
+Napi::Value activate(const Napi::CallbackInfo& info) { \
+ Napi::Env env = info.Env(); \
+ Napi::HandleScope scope(env); \
+ bool wasRedone = this->instance->activate(); \
+ return Napi::Boolean::New(env, wasRedone); \
+} \
+Napi::Value invalidate(const Napi::CallbackInfo& info) { \
+ Napi::Env env = info.Env(); \
+ Napi::HandleScope scope(env); \
+ this->instance->invalidate(); \
+ return env.Null(); \
+} \
+Napi::Value update(const Napi::CallbackInfo& info) { \
+ Napi::Env env = info.Env(); \
+ Napi::HandleScope scope(env); \
+ this->instance->update(); \
+ return env.Null(); \
+} \
+
+#endif //QLAYOUT_WRAPPED_METHODS_DECLARATION
+
+#ifndef QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE
+#define QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE(LayoutWrapName) \
+\
+ COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE \
+ InstanceMethod("activate", &LayoutWrapName::activate), \
+ InstanceMethod("invalidate", &LayoutWrapName::invalidate), \
+ InstanceMethod("update", &LayoutWrapName::update), \
+
+#endif // QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE
+
+
+
diff --git a/src/cpp/QtWidgets/QLayout/qlayout_wrap.cpp b/src/cpp/QtWidgets/QLayout/qlayout_wrap.cpp
index e18f2f1df..860eff5bb 100644
--- a/src/cpp/QtWidgets/QLayout/qlayout_wrap.cpp
+++ b/src/cpp/QtWidgets/QLayout/qlayout_wrap.cpp
@@ -1,12 +1,11 @@
#include "qlayout_wrap.h"
-#include "src/cpp/core/Component/component_macro.h"
Napi::FunctionReference QLayoutWrap::constructor;
void QLayoutWrap::init(Napi::Env env) {
char CLASSNAME[] = "QLayout";
Napi::Function func = DefineClass(env, CLASSNAME, {
- COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE
+ QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE(QLayoutWrap)
});
constructor = Napi::Persistent(func);
}
diff --git a/src/cpp/QtWidgets/QLayout/qlayout_wrap.h b/src/cpp/QtWidgets/QLayout/qlayout_wrap.h
index 7ed0e1cbb..91e08ca37 100644
--- a/src/cpp/QtWidgets/QLayout/qlayout_wrap.h
+++ b/src/cpp/QtWidgets/QLayout/qlayout_wrap.h
@@ -1,8 +1,10 @@
-#ifndef QLAYOUT_WRAP_H
-#define QLAYOUT_WRAP_H
+#pragma once
+
#include
#include
+#include "src/cpp/QtWidgets/QLayout/qlayout_macro.h"
+
//ABSTRACT CLASS
class QLayoutWrap : public Napi::ObjectWrap{
private:
@@ -14,6 +16,7 @@ class QLayoutWrap : public Napi::ObjectWrap{
QLayout* getInternalInstance();
//class constructor
static Napi::FunctionReference constructor;
+ //wrapped methods
+ QLAYOUT_WRAPPED_METHODS_DECLARATION
};
-#endif
\ No newline at end of file
diff --git a/src/cpp/core/FlexLayout/flexlayout_wrap.cpp b/src/cpp/core/FlexLayout/flexlayout_wrap.cpp
index 580adf562..f7f943f70 100644
--- a/src/cpp/core/FlexLayout/flexlayout_wrap.cpp
+++ b/src/cpp/core/FlexLayout/flexlayout_wrap.cpp
@@ -1,7 +1,6 @@
#include "flexlayout_wrap.h"
#include "src/cpp/QtGui/QWidget/qwidget_wrap.h"
#include "src/cpp/Extras/Utils/nutils.h"
-#include "src/cpp/core/Component/component_macro.h"
Napi::FunctionReference FlexLayoutWrap::constructor;
@@ -13,7 +12,7 @@ Napi::Object FlexLayoutWrap::init(Napi::Env env, Napi::Object exports) {
InstanceMethod("insertChildBefore", &FlexLayoutWrap::insertChildBefore),
InstanceMethod("removeWidget", &FlexLayoutWrap::removeWidget),
InstanceMethod("setFlexNode", &FlexLayoutWrap::setFlexNode),
- COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE
+ QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE(FlexLayoutWrap)
});
constructor = Napi::Persistent(func);
exports.Set(CLASSNAME, func);
diff --git a/src/cpp/core/FlexLayout/flexlayout_wrap.h b/src/cpp/core/FlexLayout/flexlayout_wrap.h
index 37e4ab236..1faf9b7f5 100644
--- a/src/cpp/core/FlexLayout/flexlayout_wrap.h
+++ b/src/cpp/core/FlexLayout/flexlayout_wrap.h
@@ -1,8 +1,8 @@
-#ifndef FLEXLAYOUT_WRAP_H
-#define FLEXLAYOUT_WRAP_H
+#pragma once
#include
#include "flexlayout.h"
+#include "src/cpp/QtWidgets/QLayout/qlayout_macro.h"
class FlexLayoutWrap : public Napi::ObjectWrap{
private:
@@ -20,6 +20,6 @@ class FlexLayoutWrap : public Napi::ObjectWrap{
Napi::Value insertChildBefore(const Napi::CallbackInfo& info);
Napi::Value removeWidget(const Napi::CallbackInfo& info);
Napi::Value setFlexNode(const Napi::CallbackInfo& info);
+ QLAYOUT_WRAPPED_METHODS_DECLARATION
};
-#endif //FLEXLAYOUT_WRAP_H
\ No newline at end of file
diff --git a/src/lib/QtWidgets/QLayout/index.ts b/src/lib/QtWidgets/QLayout/index.ts
index d8340959d..32c19e191 100644
--- a/src/lib/QtWidgets/QLayout/index.ts
+++ b/src/lib/QtWidgets/QLayout/index.ts
@@ -5,6 +5,15 @@ import { NodeWidget } from "../../QtGui/QWidget";
export abstract class NodeLayout extends Component {
type: string = "layout";
abstract addWidget: (childWidget: NodeWidget, ...args: any[]) => void;
+ activate = (): boolean => {
+ return this.native.activate();
+ };
+ invalidate = () => {
+ this.native.invalidate();
+ };
+ update = () => {
+ this.native.update();
+ };
}
// export class QLayout extends NodeLayout { //Dont need QLayout for now
-
-