mirror of
https://github.com/kusti8/proton-native.git
synced 2026-05-21 06:45:31 -06:00
Add calculator example; try to get devtools working
This commit is contained in:
kusti8
parent
5806065925
commit
6ac09c76ba
18 changed files with 6294 additions and 236 deletions
|
|
@ -2,6 +2,9 @@
|
|||
|
||||
> Create desktop applications with React Native components, on all platforms
|
||||
|
||||
<img src="calculator.png" alt="calculator" width="200"/>
|
||||
<img src="catapi_v2.png" alt="catapi_v2" height="300"/>
|
||||
|
||||
## What's new in V2?
|
||||
|
||||
V2 brought along a complete overhaul, written from the ground up. The source code is better organized, we now support flexbox layout, CSS
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
- [V2 Changes](v2_changes.md)
|
||||
- [Quick start](quickstart.md)
|
||||
- [Components](components.md)
|
||||
- Different Components
|
||||
- [Window](components/Window.md)
|
||||
- Advanced
|
||||
- [Packaging](packaging.md)
|
||||
- [Debugging](debugging.md)
|
||||
|
|
|
|||
BIN
docs/calculator.png
Normal file
BIN
docs/calculator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
|
|
@ -10,7 +10,7 @@ The root wrapper around your entire code.
|
|||
## Window
|
||||
|
||||
Takes the same props as View. Each window instance corresponds to a new window on the
|
||||
desktop.
|
||||
desktop. More detailed information can be seen [here](components/Window.md)
|
||||
|
||||
## Other components
|
||||
|
||||
|
|
|
|||
49
docs/components/Window.md
Normal file
49
docs/components/Window.md
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
# Window
|
||||
|
||||
Window is currently a component that is different than React Native. We create this as a separate component rather than
|
||||
just creating a window for you in case you want to create multiple windows.
|
||||
|
||||
The following creates a window that takes up 50% of the desktop in height, and 20% of the width.
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { AppRegistry, Window, App } from 'proton-native';
|
||||
|
||||
class Example extends Component {
|
||||
render() {
|
||||
return (
|
||||
<App>
|
||||
<Window style={{ height: '50%', width: '20%' }} />
|
||||
</App>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AppRegistry.registerComponent('Test', <Example />);
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
- [style](#style)
|
||||
- [onResize](#onResize)
|
||||
|
||||
## Reference
|
||||
|
||||
### style
|
||||
|
||||
Accepts all the same styles as View. Height and width can be specified as integers, where they are treated
|
||||
as pixel counts, or percentages, where they are treated as percentages of the entire desktop size.
|
||||
|
||||
| **Type** | **Required** | **Default** |
|
||||
| -------- | ------------ | ----------- |
|
||||
| object | No | {} |
|
||||
|
||||
### onResize
|
||||
|
||||
Called when the window is resized. An object is passed into the function, with the following
|
||||
object: `{w, h}`
|
||||
|
||||
| **Type** | **Required** | **Default** |
|
||||
| -------------------------------- | ------------ | ----------- |
|
||||
| function({h: number, w: number}) | No | () => {}) |
|
||||
|
|
@ -5,17 +5,14 @@ To install, simply download it from NPM:
|
|||
|
||||
You also need to have babel-cli and these babel-presets prepared in devDependencies
|
||||
|
||||
`npm install --save-dev babel-cli babel-preset-env babel-preset-stage-0 babel-preset-react`
|
||||
`npm install --save-dev @babel/cli @babel/preset-env @babel/preset-stage-0 @babel/preset-react @babel/plugin-proposal-class-properties`
|
||||
|
||||
Then create `.babelrc`:
|
||||
|
||||
```
|
||||
{
|
||||
"presets": [
|
||||
"env",
|
||||
"stage-0",
|
||||
"react"
|
||||
]
|
||||
"presets": ["@babel/preset-env", "@babel/preset-react"],
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,113 +0,0 @@
|
|||
# Area.Gradient
|
||||
|
||||
A class describing a gradient to be used as a fill or stroke brush as a `fill` or `stroke` prop (see [Area Props](component_APIs/area_props.md#fill)).
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react';
|
||||
import { render, App, Window, Box, Area } from 'proton-native';
|
||||
|
||||
const linearGradient = Area.Gradient.createLinear(30, 30, 100, 100, {
|
||||
0: 'red',
|
||||
1: 'blue',
|
||||
});
|
||||
|
||||
class Example extends Component {
|
||||
render() {
|
||||
return (
|
||||
<App>
|
||||
<Window title="Example" size={{ w: 500, h: 500 }}>
|
||||
<Box>
|
||||
<Area>
|
||||
<Area.Rectangle
|
||||
x="20"
|
||||
y="20"
|
||||
width="110"
|
||||
height="110"
|
||||
stroke={linearGradient}
|
||||
strokeWidth="20"
|
||||
strokeOpacity="50"
|
||||
/>
|
||||
</Area>
|
||||
</Box>
|
||||
</Window>
|
||||
</App>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render(<Example />);
|
||||
```
|
||||
|
||||
## Static methods
|
||||
|
||||
- [createLinear(x1, y1, x2, y2, stops)](#createlinearx1-y1-x2-y2-stops)
|
||||
- [createRadial(x, y, r, stops)](#createradialx-y-r-stops)
|
||||
- [createRadial(x, y, x_r, y_r, r, stops)](#createradialx-y-x_r-y_r-r-stops)
|
||||
|
||||
## Reference
|
||||
|
||||
### createLinear(x1, y1, x2, y2, stops)
|
||||
|
||||
Returns a gradient brush for a linear gradient between the start point (`x1`, `y1) and end point (`x2`,`y2) with the specified color stops.
|
||||
|
||||
`stops` is a object with keys specifying the position between the start (`= 0.0`) and end points (`= 1.0`). Example:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "red",
|
||||
0.25: "#ff00ff",
|
||||
1: "green"
|
||||
}
|
||||
```
|
||||
|
||||
| **Parameter** | **Type** | **Required** |
|
||||
| ------------- | --------------------------- | ------------ |
|
||||
| x1 | Number | Yes |
|
||||
| y1 | Number | Yes |
|
||||
| x2 | Number | Yes |
|
||||
| y2 | Number | Yes |
|
||||
| stops | Object<Number, Color> | Yes |
|
||||
|
||||
### createRadial(x, y, r, stops)
|
||||
|
||||
Returns a gradient brush for a radial gradient between the center point (`x`,`y`) and the circle with radius `r`.
|
||||
|
||||
`stops` is a object with keys specifying the position between the center point (with `0.0`) and the circle itself (`1.0`). Example:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "red",
|
||||
0.25: "#ff00ff",
|
||||
1: "green"
|
||||
}
|
||||
```
|
||||
|
||||
| **Parameter** | **Type** | **Required** |
|
||||
| ------------- | --------------------------- | ------------ |
|
||||
| x1 | Number | Yes |
|
||||
| y1 | Number | Yes |
|
||||
| r | Number | Yes |
|
||||
| stops | Object<Number, Color> | Yes |
|
||||
|
||||
### createRadial(x, y, x_r, y_r, r, stops)
|
||||
|
||||
Returns a gradient brush for a radial gradient between the point (`x`,`y`) and a circle with radius `r` and center (`x_r`,`y_r`). (This can produce asymetric gradients.)
|
||||
|
||||
`stops` is a object with keys specifying the position between the first point (with `0.0`) and the outer circle (`1.0`). Example:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "red",
|
||||
0.25: "#ff00ff",
|
||||
1: "green"
|
||||
}
|
||||
```
|
||||
|
||||
| **Parameter** | **Type** | **Required** |
|
||||
| ------------- | --------------------------- | ------------ |
|
||||
| x1 | Number | Yes |
|
||||
| y1 | Number | Yes |
|
||||
| x_r | Number | Yes |
|
||||
| y_r | Number | Yes |
|
||||
| r | Number | Yes |
|
||||
| stops | Object<Number, Color> | Yes |
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
# Dialog
|
||||
|
||||
A method to display an alert, or a dialog to save or open a file.
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { render, Window, App, TextInput, Dialog } from 'proton-native';
|
||||
|
||||
class Example extends Component {
|
||||
render() {
|
||||
return (
|
||||
<App>
|
||||
<Window title="Example" size={{ w: 500, h: 500 }}>
|
||||
<TextInput onChange={() => Dialog('Error', { title: 'Message' })} />
|
||||
</Window>
|
||||
</App>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render(<Example />);
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
||||
- [type](#type)
|
||||
- [options](#options)
|
||||
|
||||
## Reference
|
||||
|
||||
### type
|
||||
|
||||
What type the dialog is. The current types are:
|
||||
|
||||
- Message - a simple message
|
||||
- Error - an error message
|
||||
- Open - open a file
|
||||
- Save - save a file
|
||||
|
||||
| **Type** | **Required** |
|
||||
| ---------------------------------------- | ------------ |
|
||||
| enum('Message', 'Error', 'Open', 'Save') | Yes |
|
||||
|
||||
### options
|
||||
|
||||
Options for the title and description if it is a Message or Error.
|
||||
|
||||
| **Type** | **Required** |
|
||||
| ------------------------------------ | ------------------------------- |
|
||||
| {title: string, description: string} | One (if it is Message or Error) |
|
||||
4
examples/Calculator/.babelrc
Normal file
4
examples/Calculator/.babelrc
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"presets": ["@babel/preset-env", "@babel/preset-react"],
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
}
|
||||
307
examples/Calculator/index.js
Normal file
307
examples/Calculator/index.js
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
import React, { Component } from 'react';
|
||||
import {
|
||||
App,
|
||||
AppRegistry,
|
||||
Window,
|
||||
Text,
|
||||
View,
|
||||
TouchableOpacity,
|
||||
} from '../../bin';
|
||||
|
||||
class CircleButton extends Component {
|
||||
render() {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
backgroundColor: this.props.backgroundColor,
|
||||
borderRadius: 40,
|
||||
height: 80,
|
||||
width: this.props.width || 80,
|
||||
alignItems: this.props.start ? 'flex-start' : 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
onPress={this.props.onPress}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: this.props.color,
|
||||
fontSize: this.props.size,
|
||||
marginLeft: this.props.start ? 25 : 0,
|
||||
}}
|
||||
>
|
||||
{this.props.children}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Calculator extends Component {
|
||||
state = {
|
||||
secondary: 0,
|
||||
primary: 0,
|
||||
operator: '',
|
||||
justChanged: false,
|
||||
decimal: false,
|
||||
};
|
||||
buttonStyle = {
|
||||
primary: {
|
||||
backgroundColor: '#FC9E34',
|
||||
color: 'white',
|
||||
size: 40,
|
||||
},
|
||||
secondary: {
|
||||
backgroundColor: '#A4A4A4',
|
||||
color: '#010101',
|
||||
size: 30,
|
||||
},
|
||||
number: {
|
||||
backgroundColor: '#363636',
|
||||
color: 'white',
|
||||
size: 40,
|
||||
},
|
||||
};
|
||||
buttons = [
|
||||
[
|
||||
{
|
||||
text: 'AC',
|
||||
type: 'secondary',
|
||||
onPress: () =>
|
||||
this.setState({
|
||||
primary: 0,
|
||||
secondary: 0,
|
||||
operator: '',
|
||||
decimal: false,
|
||||
justChanged: false,
|
||||
}),
|
||||
},
|
||||
{
|
||||
text: '+/-',
|
||||
type: 'secondary',
|
||||
onPress: () => this.setState({ primary: -this.state.primary }),
|
||||
},
|
||||
{
|
||||
text: '%',
|
||||
type: 'secondary',
|
||||
onPress: () =>
|
||||
this.setState({
|
||||
primary: this.state.primary / 100,
|
||||
}),
|
||||
},
|
||||
{
|
||||
text: '÷',
|
||||
type: 'primary',
|
||||
onPress: () => this.changeOperator('/'),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
text: '7',
|
||||
type: 'number',
|
||||
onPress: () => this.addDigit(7),
|
||||
},
|
||||
{
|
||||
text: '8',
|
||||
type: 'number',
|
||||
onPress: () => this.addDigit(8),
|
||||
},
|
||||
{
|
||||
text: '9',
|
||||
type: 'number',
|
||||
onPress: () => this.addDigit(9),
|
||||
},
|
||||
{
|
||||
text: '×',
|
||||
type: 'primary',
|
||||
onPress: () => this.changeOperator('*'),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
text: '4',
|
||||
type: 'number',
|
||||
onPress: () => this.addDigit(4),
|
||||
},
|
||||
{
|
||||
text: '2',
|
||||
type: 'number',
|
||||
onPress: () => this.addDigit(2),
|
||||
},
|
||||
{
|
||||
text: '6',
|
||||
type: 'number',
|
||||
onPress: () => this.addDigit(6),
|
||||
},
|
||||
{
|
||||
text: '-',
|
||||
type: 'primary',
|
||||
onPress: () => this.changeOperator('-'),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
text: '1',
|
||||
type: 'number',
|
||||
onPress: () => this.addDigit(1),
|
||||
},
|
||||
{
|
||||
text: '2',
|
||||
type: 'number',
|
||||
onPress: () => this.addDigit(2),
|
||||
},
|
||||
{
|
||||
text: '3',
|
||||
type: 'number',
|
||||
onPress: () => this.addDigit(3),
|
||||
},
|
||||
{
|
||||
text: '+',
|
||||
type: 'primary',
|
||||
onPress: () => this.changeOperator('+'),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
text: '0',
|
||||
type: 'number',
|
||||
width: 185,
|
||||
start: true,
|
||||
onPress: () => this.addDigit(0),
|
||||
},
|
||||
{
|
||||
text: '.',
|
||||
type: 'number',
|
||||
onPress: () => this.setState({ decimal: true }),
|
||||
},
|
||||
{
|
||||
text: '=',
|
||||
type: 'primary',
|
||||
onPress: () => this.changeOperator('+'),
|
||||
},
|
||||
],
|
||||
];
|
||||
|
||||
addDigit(new_digit) {
|
||||
if (this.state.justChanged) {
|
||||
if (this.state.decimal) {
|
||||
this.setState({
|
||||
secondary: this.state.primary,
|
||||
primary: new_digit / 10,
|
||||
justChanged: false,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
secondary: this.state.primary,
|
||||
primary: new_digit,
|
||||
justChanged: false,
|
||||
});
|
||||
}
|
||||
} else if (!this.state.decimal) {
|
||||
this.setState({
|
||||
primary: 10 * this.state.primary + new_digit,
|
||||
});
|
||||
} else if (this.state.decimal) {
|
||||
if (this.state.primary.toString().indexOf('.') == -1) {
|
||||
this.setState({
|
||||
primary: parseFloat(
|
||||
this.state.primary.toString() + '.' + new_digit.toString()
|
||||
),
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
primary: parseFloat(
|
||||
this.state.primary.toString() + new_digit.toString()
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
changeOperator(new_operator) {
|
||||
if (this.state.operator === '+') {
|
||||
this.setState({
|
||||
secondary: 0,
|
||||
primary: this.state.secondary + this.state.primary,
|
||||
operator: new_operator,
|
||||
justChanged: true,
|
||||
});
|
||||
} else if (this.state.operator === '-') {
|
||||
this.setState({
|
||||
secondary: 0,
|
||||
primary: this.state.secondary - this.state.primary,
|
||||
operator: new_operator,
|
||||
justChanged: true,
|
||||
});
|
||||
} else if (this.state.operator === '/') {
|
||||
this.setState({
|
||||
secondary: 0,
|
||||
primary: this.state.secondary / this.state.primary,
|
||||
operator: new_operator,
|
||||
justChanged: true,
|
||||
});
|
||||
} else if (this.state.operator === '*') {
|
||||
this.setState({
|
||||
secondary: 0,
|
||||
primary: this.state.secondary * this.state.primary,
|
||||
operator: new_operator,
|
||||
justChanged: true,
|
||||
});
|
||||
} else {
|
||||
this.setState({ operator: new_operator, justChanged: true });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<App>
|
||||
<Window style={{ width: 450, height: 900, backgroundColor: 'black' }}>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '30%',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: 'white',
|
||||
fontSize: 80,
|
||||
textAlign: 'right',
|
||||
marginRight: 35,
|
||||
marginBottom: 15,
|
||||
fontWeight: 200,
|
||||
}}
|
||||
>
|
||||
{this.state.primary.toString().length >= 7
|
||||
? this.state.primary.toExponential(4)
|
||||
: this.state.primary}
|
||||
</Text>
|
||||
</View>
|
||||
{this.buttons.map(buttonGroup => (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-evenly',
|
||||
}}
|
||||
>
|
||||
{buttonGroup.map(button => (
|
||||
<CircleButton
|
||||
{...this.buttonStyle[button.type]}
|
||||
onPress={button.onPress}
|
||||
width={button.width}
|
||||
start={button.start}
|
||||
>
|
||||
{button.text}
|
||||
</CircleButton>
|
||||
))}
|
||||
</View>
|
||||
))}
|
||||
</Window>
|
||||
</App>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AppRegistry.registerComponent('calculator', <Calculator />);
|
||||
5768
examples/Calculator/package-lock.json
generated
Normal file
5768
examples/Calculator/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
25
examples/Calculator/package.json
Normal file
25
examples/Calculator/package.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "calculator",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "babel-node index.js"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"proton-native": "^1.1.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.4.4",
|
||||
"@babel/core": "^7.4.4",
|
||||
"@babel/node": "^7.2.2",
|
||||
"@babel/plugin-proposal-class-properties": "^7.4.4",
|
||||
"@babel/preset-env": "^7.4.4",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/preset-stage-0": "^7.0.0",
|
||||
"react-devtools": "^3.6.3",
|
||||
"ws": "^7.2.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
"dependencies": {
|
||||
"node-fetch": "^2.1.2",
|
||||
"opn": "^5.3.0",
|
||||
"proton-native": "^1.1.3",
|
||||
"proton-native": "^2.0.0",
|
||||
"react": "^16.3.2",
|
||||
"react-redux": "^5.0.7",
|
||||
"redux": "^4.0.0",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
"start": "babel-node index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"proton-native": "^1.0.11"
|
||||
"proton-native": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.4.4",
|
||||
|
|
|
|||
145
package-lock.json
generated
145
package-lock.json
generated
|
|
@ -2696,6 +2696,15 @@
|
|||
"array-find-index": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"d": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
|
||||
"integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
|
||||
"requires": {
|
||||
"es5-ext": "^0.10.50",
|
||||
"type": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"dashdash": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
|
||||
|
|
@ -3016,12 +3025,41 @@
|
|||
"is-symbol": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"es5-ext": {
|
||||
"version": "0.10.53",
|
||||
"resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
|
||||
"integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
|
||||
"requires": {
|
||||
"es6-iterator": "~2.0.3",
|
||||
"es6-symbol": "~3.1.3",
|
||||
"next-tick": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"es6-iterator": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
|
||||
"integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
|
||||
"requires": {
|
||||
"d": "1",
|
||||
"es5-ext": "^0.10.35",
|
||||
"es6-symbol": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"es6-promise": {
|
||||
"version": "4.2.8",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
|
||||
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
|
||||
"dev": true
|
||||
},
|
||||
"es6-symbol": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
|
||||
"integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
|
||||
"requires": {
|
||||
"d": "^1.0.1",
|
||||
"ext": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
|
||||
|
|
@ -3167,6 +3205,21 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"ext": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
|
||||
"integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
|
||||
"requires": {
|
||||
"type": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"type": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/type/-/type-2.0.0.tgz",
|
||||
"integrity": "sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
|
||||
|
|
@ -3495,8 +3548,7 @@
|
|||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
|
@ -3517,14 +3569,12 @@
|
|||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -3539,20 +3589,17 @@
|
|||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -3669,8 +3716,7 @@
|
|||
"inherits": {
|
||||
"version": "2.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -3682,7 +3728,6 @@
|
|||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -3697,7 +3742,6 @@
|
|||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
|
|
@ -3705,14 +3749,12 @@
|
|||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.9.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -3731,7 +3773,6 @@
|
|||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -3821,8 +3862,7 @@
|
|||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -3834,7 +3874,6 @@
|
|||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -3920,8 +3959,7 @@
|
|||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
|
@ -3957,7 +3995,6 @@
|
|||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -3977,7 +4014,6 @@
|
|||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
|
@ -4021,14 +4057,12 @@
|
|||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -4560,8 +4594,7 @@
|
|||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"is-finite": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -7357,6 +7390,11 @@
|
|||
"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
|
||||
"dev": true
|
||||
},
|
||||
"next-tick": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
|
||||
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
|
||||
},
|
||||
"nice-try": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
|
||||
|
|
@ -8151,8 +8189,6 @@
|
|||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-devtools-core": {
|
||||
"version": "3.6.3",
|
||||
|
|
@ -8162,8 +8198,8 @@
|
|||
"requires": {
|
||||
"shell-quote": "^1.6.1",
|
||||
"ws": "^3.3.1"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"ws": {
|
||||
"version": "3.3.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
|
||||
|
|
@ -8177,20 +8213,37 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-devtools-core": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.3.0.tgz",
|
||||
"integrity": "sha512-Vh2ZGW1h/D1Xka2jHA4/WyH0dXRjeiPOJWOPKptj/EBTHKYaKRAOEPMLz6gx8WmRtcKcUkR9VZnh8Vel2xtwLg==",
|
||||
"requires": {
|
||||
"es6-symbol": "^3",
|
||||
"shell-quote": "^1.6.1",
|
||||
"ws": "^7"
|
||||
},
|
||||
"dependencies": {
|
||||
"ws": {
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.2.1.tgz",
|
||||
"integrity": "sha512-sucePNSafamSKoOqoNfBd8V0StlkzJKL2ZAhGQinCfNQ+oacw+Pk7lcdAElecBF2VkLNZRiIb5Oi1Q5lVUVt2A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.8.6",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
|
||||
"integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
|
||||
},
|
||||
"react-reconciler": {
|
||||
"version": "0.20.4",
|
||||
"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.20.4.tgz",
|
||||
"integrity": "sha512-kxERc4H32zV2lXMg/iMiwQHOtyqf15qojvkcZ5Ja2CPkjVohHw9k70pdDBwrnQhLVetUJBSYyqU3yqrlVTOajA==",
|
||||
"version": "0.24.0",
|
||||
"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.24.0.tgz",
|
||||
"integrity": "sha512-gAGnwWkf+NOTig9oOowqid9O0HjTDC+XVGBCAmJYYJ2A2cN/O4gDdIuuUQjv8A4v6GDwVfJkagpBBLW5OW9HSw==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"scheduler": "^0.13.6"
|
||||
"scheduler": "^0.18.0"
|
||||
}
|
||||
},
|
||||
"read-chunk": {
|
||||
|
|
@ -8658,9 +8711,9 @@
|
|||
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
|
||||
},
|
||||
"scheduler": {
|
||||
"version": "0.13.6",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
|
||||
"integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz",
|
||||
"integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
|
|
@ -8737,8 +8790,7 @@
|
|||
"shell-quote": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
|
||||
"integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg=="
|
||||
},
|
||||
"shellwords": {
|
||||
"version": "0.1.1",
|
||||
|
|
@ -9407,6 +9459,11 @@
|
|||
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
|
||||
"dev": true
|
||||
},
|
||||
"type": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
|
||||
"integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
|
||||
},
|
||||
"type-check": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@
|
|||
"node-fetch": "^2.6.0",
|
||||
"node-qt-napi": "0.0.2",
|
||||
"react": "^16.12.0",
|
||||
"react-reconciler": "^0.20.4",
|
||||
"react-devtools-core": "^4.3.0",
|
||||
"react-reconciler": "^0.24.0",
|
||||
"read-chunk": "^3.2.0",
|
||||
"yoga-layout-prebuilt": "^1.9.3"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,22 +12,30 @@ const prequire = function(id) {
|
|||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
try {
|
||||
global.window = global;
|
||||
WebSocket = prequire('ws');
|
||||
connectToDevTools = prequire('react-devtools-core').connectToDevTools;
|
||||
const defineProperty = Object.defineProperty;
|
||||
defineProperty(global, 'WebSocket', {
|
||||
value: require('ws'),
|
||||
});
|
||||
defineProperty(global, 'window', {
|
||||
value: global,
|
||||
});
|
||||
connectToDevTools = require('react-devtools-core').connectToDevTools;
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
let ws;
|
||||
|
||||
function connectDevtools(reconciler) {
|
||||
if (connectToDevTools && WebSocket) {
|
||||
ws = new WebSocket('ws://localhost:8097');
|
||||
connectToDevTools({ websocket: ws });
|
||||
if (connectToDevTools) {
|
||||
connectToDevTools({
|
||||
host: 'localhost',
|
||||
port: 8097,
|
||||
resolveRNStyle: null,
|
||||
});
|
||||
reconciler.injectIntoDevTools({
|
||||
bundleType: 1,
|
||||
version: '0.1.0',
|
||||
rendererPackageName: 'custom-renderer',
|
||||
version: '2.0.0',
|
||||
rendererPackageName: 'proton-renderer',
|
||||
findHostInstanceByFiber: reconciler.findHostInstance,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ const DesktopRenderer = Reconciler({
|
|||
commitTextUpdate(textInstance, oldText, newText) {
|
||||
if (DEBUG) console.log('commitTextUpdate');
|
||||
textInstance.text = newText;
|
||||
textInstance.parent.updateText();
|
||||
},
|
||||
|
||||
supportsMutation: true,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue