4 |
5 | Logo by @elisiri
6 |
2 |
3 |
4 |
5 | Logo by @elisiri
6 |
40 | 
41 |
42 |
43 | ## [Documentation](https://proton-native.js.org)
44 |
45 | See the documentation for how to get started and details on all the components.
46 |
47 | ## Examples
48 |
49 | Examples can be found in [`examples/`](https://github.com/kusti8/proton-native/tree/master/examples).
50 |
51 | ## Contributing
52 |
53 | All contributions are welcome. Just make a PR.
54 |
55 | Accelerated by KeyCDN
56 |
--------------------------------------------------------------------------------
/__mocks__/node-qt.js:
--------------------------------------------------------------------------------
1 | const qt = jest.genMockFromModule('node-qt-napi');
2 |
3 | function desktopSize() {
4 | return { w: 1920, h: 1080 };
5 | }
6 |
7 | qt.desktopSize = desktopSize;
8 |
9 | export default qt;
10 |
--------------------------------------------------------------------------------
/docs/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kusti8/proton-native/ab482b120542951628292211b989e504fa4a3985/docs/.nojekyll
--------------------------------------------------------------------------------
/docs/CNAME:
--------------------------------------------------------------------------------
1 | proton-native.js.org
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Proton Native
2 |
3 | > Create desktop applications with React Native components, on all platforms
4 |
5 | 
6 | 
7 |
8 | ## What's new in V2?
9 |
10 | V2 brought along a complete overhaul, written from the ground up. The source code is better organized, we now support flexbox layout, CSS
11 | styling, the same components as React Native, hot reloading, and are working on unit testing. More components and features can now be added easily. It is easier to install, with no compiling required.
12 |
13 | For the user,
14 | you can now copy and paste your React Native code with minimal to no changes. For our collaborators, it should now be more easy and friendly to
15 | bring this project right in line as the desktop port of React Native.
16 |
17 | For more information and a full writeup, see the [V2 page](v2_changes.md).
18 |
19 | ## Native Components?
20 |
21 | Currently we use Qt, which does not ship with true native components. Performance is basically the same and the look is very similar on almost all
22 | platforms, but we realize there is still a large demand for true native components in this project. There is a current experimental
23 | backend for wxWidgets and is described [here](wx_backend.md). Please note this is very not complete and still needs a lot more work.
24 |
25 | ## Why?
26 |
27 | On mobile, it used to be hard to build beautiful cross-platform apps. Then React Native came along, giving us
28 | a seamless way to build user interfaces and manage state in code, all while doing it cross platform.
29 |
30 | On desktop, there is no such tool. You can create a GUI using something like Qt, but for people who are used to the React workflow and JSX, there currently isn't an alternative.
31 |
32 | Some of you might be saying that you could do it in Electron. It's a good tool, but it brings in a lot of overhead, running a full webbrowser
33 | to manage a small GUI, while Proton Native can do the same, using native tools, with a smaller size and with less resource usage.
34 |
35 | Proton Native does the same
36 | to desktop that React Native did to mobile. Build cross-platform apps for the desktop, all while never leaving the React eco-system. Popular
37 | React packages such as Redux still work.
38 |
39 | **Here's a simple example in Proton Native:**
40 |
41 | [js_example.js](js_example.js ':include :type=code jsx')
42 |
43 | ## Features
44 |
45 | - Same syntax and components as React Native
46 | - Works with existing React libraries such as Redux
47 | - Cross platform
48 | - No more Electron
49 | - Compatible with all normal Node.js packages
50 | - Hot reloading
51 | - Flexbox
52 | - CSS styling
53 |
54 | ## Examples
55 |
56 | Check out [the examples](https://github.com/kusti8/proton-native/tree/master/examples) to see more.
57 |
58 | Accelerated by KeyCDN
59 |
--------------------------------------------------------------------------------
/docs/SVG/Artboard 1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/docs/SVG/proton native.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kusti8/proton-native/ab482b120542951628292211b989e504fa4a3985/docs/SVG/proton native.ai
--------------------------------------------------------------------------------
/docs/_coverpage.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 |
247 |
248 | ```jsx
249 | class Calculator extends Component {
250 | // ...
251 | render() {
252 | return (
253 | (
5 | props: P,
6 | propTypes: T,
7 | defaultProps: D,
8 | name: string
9 | ): any {
10 | // for (let prop in defaultProps) {
11 | // if (!(prop in props) || typeof props[prop] === 'undefined') {
12 | // props[prop] = defaultProps[prop];
13 | // }
14 | // }
15 | props = _.merge(defaultProps, props);
16 | PropTypes.checkPropTypes(propTypes, props, "prop", name);
17 | return props;
18 | }
19 |
20 | export default propChecker;
21 |
--------------------------------------------------------------------------------
/src/utils/propsUpdater.ts:
--------------------------------------------------------------------------------
1 | const propsUpdater = (...updateMaps: any[]) => (changes: object) =>
2 | updateMaps.forEach(updateMap => {
3 | /** updateMap can be any of:
4 | * A) { [prop]: (newValue) => void }
5 | * B) [ mutableObject, ...prop | { [prop]: [string objectKey] }]
6 | **/
7 |
8 | if (!Array.isArray(updateMap)) {
9 | // A
10 | return Object.entries(updateMap).forEach(([prop, updateFn]: any) => {
11 | if (prop in changes) {
12 | updateFn((changes as any)[prop]);
13 | }
14 | });
15 | }
16 |
17 | // B
18 | const mutableObject = updateMap[0];
19 | updateMap.slice(1).forEach(p => {
20 | if (typeof p === "object") {
21 | Object.entries(p).forEach(([prop, objectKey]: any) => {
22 | if (prop in changes) {
23 | mutableObject[objectKey] = (changes as any)[prop];
24 | }
25 | });
26 | } else {
27 | if (p in changes) {
28 | mutableObject[p] = (changes as any)[p];
29 | }
30 | }
31 | });
32 | });
33 |
34 | export default propsUpdater;
35 |
--------------------------------------------------------------------------------
/src/utils/requireImpl.ts:
--------------------------------------------------------------------------------
1 | //@ts-ignore
2 | import * as Module from "module";
3 | import * as fileType from "file-type";
4 | import readChunk from "read-chunk";
5 | //@ts-ignore
6 | import sizeOf from "image-size";
7 |
8 | //@ts-ignore
9 | const originalLoader = Module._load;
10 |
11 | //@ts-ignore
12 | Module._load = function (request, parent) {
13 | let buffer;
14 | try {
15 | buffer = readChunk.sync(request, 0, fileType.minimumBytes);
16 | } catch {
17 | return originalLoader.apply(this, arguments);
18 | }
19 | const fullType = fileType(buffer)
20 | if (!fullType) return originalLoader.apply(this, arguments);
21 | const type = fullType.mime
22 | if (type.split("/")[0] != "image")
23 | return originalLoader.apply(this, arguments);
24 |
25 | const size = sizeOf(request);
26 | return { uri: request, width: size.width, height: size.height };
27 | };
28 |
--------------------------------------------------------------------------------
/src/utils/yogaHelper.ts:
--------------------------------------------------------------------------------
1 | import * as yoga from "yoga-layout-prebuilt";
2 |
3 | const mixedYogaValueTransformers = {
4 | display(value: "flex" | "none") {
5 | switch (value) {
6 | case "flex":
7 | return yoga.DISPLAY_FLEX;
8 | case "none":
9 | return yoga.DISPLAY_NONE;
10 | }
11 | },
12 |
13 | top: {
14 | functionName: "setPosition",
15 | transform: (value: any) => [yoga.EDGE_TOP, value]
16 | },
17 | right: {
18 | functionName: "setPosition",
19 | transform: (value: any) => [yoga.EDGE_RIGHT, value]
20 | },
21 | bottom: {
22 | functionName: "setPosition",
23 | transform: (value: any) => [yoga.EDGE_BOTTOM, value]
24 | },
25 | left: {
26 | functionName: "setPosition",
27 | transform: (value: any) => [yoga.EDGE_LEFT, value]
28 | },
29 |
30 | border: {
31 | functionName: "",
32 | transform: (value: any) => [yoga.EDGE_ALL, value]
33 | },
34 | borderTop: {
35 | functionName: "",
36 | transform: (value: any) => [yoga.EDGE_TOP, value]
37 | },
38 | borderRight: {
39 | functionName: "",
40 | transform: (value: any) => [yoga.EDGE_RIGHT, value]
41 | },
42 | borderBottom: {
43 | functionName: "",
44 | transform: (value: any) => [yoga.EDGE_BOTTOM, value]
45 | },
46 | borderLeft: {
47 | functionName: "",
48 | transform: (value: any) => [yoga.EDGE_LEFT, value]
49 | },
50 |
51 | margin: {
52 | functionName: "setMargin",
53 | transform: (value: any) => [yoga.EDGE_ALL, value]
54 | },
55 | marginTop: {
56 | functionName: "setMargin",
57 | transform: (value: any) => [yoga.EDGE_TOP, value]
58 | },
59 | marginRight: {
60 | functionName: "setMargin",
61 | transform: (value: any) => [yoga.EDGE_RIGHT, value]
62 | },
63 | marginBottom: {
64 | functionName: "setMargin",
65 | transform: (value: any) => [yoga.EDGE_BOTTOM, value]
66 | },
67 | marginLeft: {
68 | functionName: "setMargin",
69 | transform: (value: any) => [yoga.EDGE_LEFT, value]
70 | },
71 |
72 | padding: {
73 | functionName: "setPadding",
74 | transform: (value: any) => [yoga.EDGE_ALL, value]
75 | },
76 | paddingTop: {
77 | functionName: "setPadding",
78 | transform: (value: any) => [yoga.EDGE_TOP, value]
79 | },
80 | paddingRight: {
81 | functionName: "setPadding",
82 | transform: (value: any) => [yoga.EDGE_RIGHT, value]
83 | },
84 | paddingBottom: {
85 | functionName: "setPadding",
86 | transform: (value: any) => [yoga.EDGE_BOTTOM, value]
87 | },
88 | paddingLeft: {
89 | functionName: "setPadding",
90 | transform: (value: any) => [yoga.EDGE_LEFT, value]
91 | },
92 |
93 | position: {
94 | functionName: "setPositionType",
95 | transform(value: "relative" | "absolute") {
96 | switch (value) {
97 | case "relative":
98 | return [yoga.POSITION_TYPE_RELATIVE];
99 | case "absolute":
100 | return [yoga.POSITION_TYPE_ABSOLUTE];
101 | }
102 | throw new Error("Position not supported: " + value);
103 | }
104 | },
105 |
106 | overflow(value: "visible" | "hidden" | "scroll") {
107 | switch (value) {
108 | case "visible":
109 | return yoga.OVERFLOW_VISIBLE;
110 | case "hidden":
111 | return yoga.OVERFLOW_HIDDEN;
112 | case "scroll":
113 | return yoga.OVERFLOW_SCROLL;
114 | }
115 | },
116 |
117 | alignItems(
118 | value:
119 | | "auto"
120 | | "flex-start"
121 | | "center"
122 | | "flex-end"
123 | | "stretch"
124 | | "baseline"
125 | | "space-between"
126 | | "space-around"
127 | ) {
128 | switch (value) {
129 | case "auto":
130 | return yoga.ALIGN_AUTO;
131 | case "flex-start":
132 | return yoga.ALIGN_FLEX_START;
133 | case "center":
134 | return yoga.ALIGN_CENTER;
135 | case "flex-end":
136 | return yoga.ALIGN_FLEX_END;
137 | case "stretch":
138 | return yoga.ALIGN_STRETCH;
139 | case "baseline":
140 | return yoga.ALIGN_BASELINE;
141 | case "space-between":
142 | return yoga.ALIGN_SPACE_BETWEEN;
143 | case "space-around":
144 | return yoga.ALIGN_SPACE_AROUND;
145 | }
146 | },
147 |
148 | alignSelf(
149 | value:
150 | | "auto"
151 | | "flex-start"
152 | | "center"
153 | | "flex-end"
154 | | "stretch"
155 | | "baseline"
156 | | "space-between"
157 | | "space-around"
158 | ) {
159 | switch (value) {
160 | case "auto":
161 | return yoga.ALIGN_AUTO;
162 | case "flex-start":
163 | return yoga.ALIGN_FLEX_START;
164 | case "center":
165 | return yoga.ALIGN_CENTER;
166 | case "flex-end":
167 | return yoga.ALIGN_FLEX_END;
168 | case "stretch":
169 | return yoga.ALIGN_STRETCH;
170 | case "baseline":
171 | return yoga.ALIGN_BASELINE;
172 | case "space-between":
173 | return yoga.ALIGN_SPACE_BETWEEN;
174 | case "space-around":
175 | return yoga.ALIGN_SPACE_AROUND;
176 | }
177 | },
178 |
179 | alignContent(
180 | value:
181 | | "auto"
182 | | "flex-start"
183 | | "center"
184 | | "flex-end"
185 | | "stretch"
186 | | "baseline"
187 | | "space-between"
188 | | "space-around"
189 | ) {
190 | switch (value) {
191 | case "auto":
192 | return yoga.ALIGN_AUTO;
193 | case "flex-start":
194 | return yoga.ALIGN_FLEX_START;
195 | case "center":
196 | return yoga.ALIGN_CENTER;
197 | case "flex-end":
198 | return yoga.ALIGN_FLEX_END;
199 | case "stretch":
200 | return yoga.ALIGN_STRETCH;
201 | case "baseline":
202 | return yoga.ALIGN_BASELINE;
203 | case "space-between":
204 | return yoga.ALIGN_SPACE_BETWEEN;
205 | case "space-around":
206 | return yoga.ALIGN_SPACE_AROUND;
207 | }
208 | },
209 |
210 | justifyContent(
211 | value:
212 | | "flex-start"
213 | | "center"
214 | | "flex-end"
215 | | "space-between"
216 | | "space-around"
217 | | "space-evenly"
218 | ) {
219 | switch (value) {
220 | case "flex-start":
221 | return yoga.JUSTIFY_FLEX_START;
222 | case "center":
223 | return yoga.JUSTIFY_CENTER;
224 | case "flex-end":
225 | return yoga.JUSTIFY_FLEX_END;
226 | case "space-between":
227 | return yoga.JUSTIFY_SPACE_BETWEEN;
228 | case "space-around":
229 | return yoga.JUSTIFY_SPACE_AROUND;
230 | case "space-evenly":
231 | return yoga.JUSTIFY_SPACE_EVENLY;
232 | }
233 | },
234 |
235 | flexDirection(value: "column" | "row") {
236 | switch (value) {
237 | case "column":
238 | return yoga.FLEX_DIRECTION_COLUMN;
239 | case "row":
240 | return yoga.FLEX_DIRECTION_ROW;
241 | }
242 | },
243 |
244 | flexWrap(value: "wrap" | "nowrap" | "wrap-reverse") {
245 | switch (value) {
246 | case "wrap":
247 | return yoga.WRAP_WRAP;
248 | case "nowrap":
249 | return yoga.WRAP_NO_WRAP;
250 | case "wrap-reverse":
251 | return yoga.WRAP_WRAP_REVERSE;
252 | }
253 | }
254 | };
255 |
256 | export function getYogaValueTransformer(propertyName: string) {
257 | const transformer = (mixedYogaValueTransformers as any)[propertyName];
258 | if (!transformer) {
259 | return {
260 | transform: (value: any) => [value],
261 | functionName: getYogaNodeSetFunctionName(propertyName)
262 | };
263 | }
264 |
265 | if (typeof transformer === "function") {
266 | return {
267 | transform: (value: any) => [transformer(value)],
268 | functionName: getYogaNodeSetFunctionName(propertyName)
269 | };
270 | }
271 |
272 | return transformer;
273 | }
274 |
275 | export function getYogaNodeSetFunctionName(propertyName: string) {
276 | return "set" + propertyName[0].toUpperCase() + propertyName.substr(1);
277 | }
278 |
--------------------------------------------------------------------------------
/test/components/Window.test.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { App, Window, AppRegistry } from '../../src';
3 | import qt from 'node-qt-napi';
4 | jest.unmock('node-qt-napi');
5 | const { toMatchImageSnapshot } = require('jest-image-snapshot');
6 | import { compareSnapshot, clearShown } from '../index';
7 | import { updateExpression } from '@babel/types';
8 |
9 | describe('Window', () => {
10 | beforeAll(() => {
11 | expect.extend({ toMatchImageSnapshot });
12 | });
13 | beforeEach(() => {
14 | jest.useFakeTimers();
15 | });
16 | afterEach(() => {
17 | clearShown();
18 | });
19 | test('Basic window', () => {
20 | class Test extends Component {
21 | render() {
22 | return (
23 |
Create desktop applications