Atul R
5 years ago
committed by
GitHub
commit
b769a43d46
@ -1,23 +0,0 @@ |
||||
{ |
||||
"files": [ |
||||
"README.md" |
||||
], |
||||
"imageSize": 100, |
||||
"commit": false, |
||||
"contributors": [ |
||||
{ |
||||
"login": "pepf", |
||||
"name": "Pepijn", |
||||
"avatar_url": "https://avatars1.githubusercontent.com/u/1265435?v=4", |
||||
"profile": "http://blog.pepf.nl", |
||||
"contributions": [ |
||||
"code" |
||||
] |
||||
} |
||||
], |
||||
"contributorsPerLine": 7, |
||||
"projectName": "react-nodegui-starter", |
||||
"projectOwner": "nodegui", |
||||
"repoType": "github", |
||||
"repoHost": "https://github.com" |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
{ |
||||
"presets": [ |
||||
["@babel/preset-env", { "targets": { "node": "12" } }], |
||||
"@babel/preset-typescript", |
||||
"@babel/preset-react" |
||||
], |
||||
"plugins": [] |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
declare module "*.svg"; |
||||
declare module "*.png"; |
||||
declare module "*.jpg"; |
||||
declare module "*.jpeg"; |
||||
declare module "*.gif"; |
||||
declare module "*.bmp"; |
||||
|
After Width: | Height: | Size: 163 KiB |
@ -1 +0,0 @@ |
||||
declare module "*.jpg"; |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,50 @@ |
||||
import { Text, Window, hot, View } from "@nodegui/react-nodegui"; |
||||
import React from "react"; |
||||
import { QIcon } from "@nodegui/nodegui"; |
||||
import path from "path"; |
||||
import { StepOne } from "./components/stepone"; |
||||
import { StepTwo } from "./components/steptwo"; |
||||
import nodeguiIcon from "../assets/nodegui.jpg"; |
||||
|
||||
const minSize = { width: 500, height: 520 }; |
||||
const winIcon = new QIcon(path.resolve(__dirname, nodeguiIcon)); |
||||
class App extends React.Component { |
||||
render() { |
||||
return ( |
||||
<Window |
||||
windowIcon={winIcon} |
||||
windowTitle="Hello 👋🏽" |
||||
minSize={minSize} |
||||
styleSheet={styleSheet} |
||||
> |
||||
<View style={containerStyle}> |
||||
<Text id="welcome-text">Welcome to NodeGui 🐕</Text> |
||||
<Text id="step-1">1. Play around</Text> |
||||
<StepOne /> |
||||
<Text id="step-2">2. Debug</Text> |
||||
<StepTwo /> |
||||
</View> |
||||
</Window> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const containerStyle = ` |
||||
flex: 1;
|
||||
`;
|
||||
|
||||
const styleSheet = ` |
||||
#welcome-text { |
||||
font-size: 24px; |
||||
padding-top: 20px; |
||||
qproperty-alignment: 'AlignHCenter'; |
||||
} |
||||
|
||||
#step-1, #step-2 { |
||||
font-size: 18px; |
||||
padding-top: 10px; |
||||
padding-horizontal: 20px; |
||||
} |
||||
`;
|
||||
|
||||
export default hot(App); |
||||
@ -0,0 +1,30 @@ |
||||
module.exports = `data:image/png;base64,
|
||||
iVBORw0KGgoAAAANSUhEUgAAADIAAAAzCAMAAADivasmAAACglBMVEUAAABPPz9RQj9QQUBPPj5PPz5TRENQQEBTQUFRQUFRQUFTQ0J |
||||
RQUFQQEBkWFdXSkpVSUhTQEFRQUFUQUFQQUBQQEBOPj1QQD9WQkVdUE5RRERZTEtWRkdRQUFQQEBQQEBSQUJRQUFRQEBURUVQQEBPPT |
||||
1aRUVOPT1VRkZPQUBRQEBRQUBSQUFPQEBTQUFSQ0NRQEFQQkFUPkFUQkNOPz5RPj9SP0BTRERVRUVUQEFWRUX///+jnpz+//6lnpykn
|
||||
pz9/f2inpyinZv9/v2kn538+/v///6inpv7+vmknZv+/v/+/f22s7KnoJ6Xj4+ln51SQkJVP0ClnZtTQEK0sa6koJ38/Pr19fTT0c+m
|
||||
oJ6Gfn3w7u6wrKuhm5lOQkBSPj/l5OLBv72sp6Wmo6CdlpSblJL6f4f3gIRRQD9NQD78/fv5+fbz8/Lr6enf3dzFw8G/u7qkm5qgmJa |
||||
MhoV6cnF/T1D8/f3y8vLt7Ovh4N/a2NjLx8bIxsWuqaeknp+nn52akZCTi4mRiIePhoV/eXjKcnh5bWxrYmFpYF9gVVVdUVJYSklMPT |
||||
v49/jl5OTd29nOy8rMycjHxsS8uLaopKShmZf2goiLg4KIfn2DeXh5cG9yaGdvZmVoXV1cTU9VR0dLPzry8O/p6Ofm5ubZ1tbW1NLS0 |
||||
tHRzszDwb+6trS1srD4gomEfXt1a2q0ZWpsZWT29/Xo5ePV0tO7ubicl5iYkpKVjY3ofofde4KMgYHNc3qtZmuRWFhZTUxPQ0RbQEG1 |
||||
sLGyrq6qqqr4gYbzhYXpfYXxhISJfHx+dHPDbnO/bnOAcnK+bHG5a3B0bGy2ZWqgZGicWVxlXFqWXFlyUE9KQ0GhVcLgAAAAO3RSTlM |
||||
AB9CjBc/izbaqZzInDf759e7DbmtGGxYR+fj29cm5rpaNXT07A/3669mdkoV7elJPLSHz6d3UfV9UML/w/okAAAWkSURBVEjHhZZlVx |
||||
tBFIaXUqAtdXd3d8vszmp2kwBpQkJKDCkUd0pb3IpTijvU3d3dXf9PZzbaNpy+n/acO8+ZK+/chHBq8taoLZOWEENp/YiGCfOnE96a1 |
||||
1cK4y9NnOYbWLJgbFlWdvcE7/D6aiNDUdqLgaN9EWNG9tmgFlJvVhIejSgHkRl7AF8euOhfYurEXIZlY4p4/bLhhFsBYfA8d6AIsKWz |
||||
tv9NLArsAiLVRO8Gobu8kGFhqhAFmWoQqezabcP/IKaMKwOqPdEaNUb8/kTUCkVKDOCz+uYFL1w9NyggIGji/FHBawbieWC1cErSJ0J |
||||
y0hGWonIH+7orwuLjS8vNVY/62wE4Z9JofCIKJGVEPqVS6bUqIIsvofR6NkNCkSERWkqPpbCgg4EQaItPN9LkkAh9IITVeiMMw7AQxh |
||||
6klT4RkpRORQJfgmzGVR8IG0JLLSLwKR6KBhN3mvkHkWJYMJQgtJr+RuJhSAEKoSJUFAUckmtyVAUBb2iGoYNjvAwTB5HDcJCNDImJs |
||||
TIOiI3NjGltc14eCUMHFruJ4cvaoXzKGJt/lVMqNZYCxIut1yRSyUnR50Un1O9B/HaFyveLISaOIxUKNak53sacitCQaCAcLRU623Bp |
||||
oRtZ3M8DrKJUdMYh8ng+7frWSJlGXBBzcZUbmZQLZEXTCrdIr0/StEdGbs91IyNzRJzWuQhSofYc9bBk8hmMAP3MMa5SJthkd6RzKCp |
||||
o8jgPRguCgJlUESFU6JV1rldUIxtlTwqnIKXMysp8wUVwaW1XbqZqUGqZGKE6/d15AawMDacQCjMK7HXHSLUDicg5lpPIRqCvJhnJmu |
||||
1YTBvHsRRuYboSpdU2UBueeNJ1i+lRTZKuBzdlPyuPoWeNjCzo5jHCpqKc8zISdbp6iwsRzFE63U2McFaMiPEr8GYYPd4GMGJNxu0Ur |
||||
N97rgvu6k/k1N2yYCSvQEb4S6PwDuviIUYKOXxILUg0zSmUSGq1mkSjp+WRcgdle1Jxy8cQC/uLKWxeMZ1WDC3cZoeju/2JQHOkFiPs |
||||
ftITpzlSo9HQ3mbgrPLsjKV2InhOrh6iPA0aT1x54JzBYHgacpL0Qo7gJ1TSuXwKmn1ANQ+Y4utqD6Ix66KiUK/CD3vdk8aiVO5tmib |
||||
vcDMDQPF+hUf0xXAkXXiSl09JwYBqiZuNXRY8I4sBtsI8TxJqrqkWM3aD4IXQuGclH9aiFxlUoaLgs0YXoUy2SHmk5UZvfVFThJo7Jr |
||||
mpiLNQD22zRhOTe1V6isqU3EiavVBADr5Vm5JMk8cftwhuZDdaHvy9EcSksXF4k2SaXMyBpGKENH7edQ25tDmx2YmQEmoZ1LJVIwli1 |
||||
LhyLaofbVGalMs0DzZLJmuiPceSnF5dt9/Z47QQBhHxY1f5YZMFvAUQjf9Gmpy2cLhmV/3jcN0T+6+BpMEznEyYWkQegpKKpTucO8m/ |
||||
JptisAEcDUs/+vPh+wf77n/bl9jq2B/CcxSm9D1zNhJO4eSMenBK40ji8NFDLxK+7HvZcUcXo3Q6OhKC0rELvH8T59exVKRrcCca7if |
||||
svbyv48Ir3Vm1YyaWIhHkziG8FVSm5QF/JCUZp45uwciFvXdkhKalfLSU+PZZU72RwM4SlK0q9mQjbrMLuRtVgBITDhoYgJCw+g3eyN |
||||
QVlUZeXjMt0SkpV3683nvoQcfeT1HREWlnYkXAMCqqc8IU4g/5jazOptALQn1Rnb8d9bEjISHh7tKqViMAPH6N2b0TdxJ/a/J4M4WjE |
||||
DJ8r/3hu0Nfn9S2Q4AlZnWNn+zrb9QG/xlmG3p3AIr6rrqkpPrcLIik0trMM/ynEb4V7D++qow1AkYE2uw4VssyjJEtq5q9cjQxtKaP |
||||
mjuzurIiLM5GUWxcWEVlzcx5k6YS/5HforX+iUkNDQ32zUH+q9dN/+fAbySYWHnCNGc5AAAAAElFTkSuQmCC`;
|
||||
@ -0,0 +1,30 @@ |
||||
import { Text, View } from "@nodegui/react-nodegui"; |
||||
import React from "react"; |
||||
const dogImg = require("./dog"); |
||||
|
||||
export function StepOne() { |
||||
return ( |
||||
<View style={containerStyle}> |
||||
<Text wordWrap={true}> |
||||
Edit App.tsx to make changes to this screen. Then come back to see your |
||||
changes. Changes should reflect live thanks to Hot Reloading. 🔥 |
||||
</Text> |
||||
<Text> |
||||
{` |
||||
<p style="color: rgb(255,72,38);">
|
||||
<center> |
||||
<img src="${dogImg}" alt="doggy" />
|
||||
</center> |
||||
<center>You can even use <i><strong>Rich Html</strong></i> text like this if you want 😎.</center> |
||||
</p> |
||||
<hr /> |
||||
`}
|
||||
</Text> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const containerStyle = ` |
||||
margin-horizontal: 20px; |
||||
padding-horizontal: 10px; |
||||
`;
|
||||
@ -0,0 +1,48 @@ |
||||
import { Text, View, Button } from "@nodegui/react-nodegui"; |
||||
import { QPushButtonEvents } from "@nodegui/nodegui"; |
||||
import React from "react"; |
||||
import open from "open"; |
||||
|
||||
const buttonEventHandler = { |
||||
[QPushButtonEvents.clicked]: () => { |
||||
open("https://react.nodegui.org").catch(console.log); |
||||
} |
||||
}; |
||||
|
||||
export function StepTwo() { |
||||
return ( |
||||
<View> |
||||
<Text style={textStyle} wordWrap={true}> |
||||
{` |
||||
<ol> |
||||
<li> |
||||
Open chrome and navigate to <code>chrome://inspect</code>. You should see a target below with your app.
|
||||
</li> |
||||
<br/> |
||||
<li> |
||||
Next click on "<code>Open dedicated DevTools for Node</code>" |
||||
</li> |
||||
<br/> |
||||
<li> |
||||
On the dedicated devtools. Click on <code> Source > Node > "Your node process" </code> |
||||
</li> |
||||
</ol> |
||||
`}
|
||||
</Text> |
||||
<Button |
||||
style={btnStyle} |
||||
on={buttonEventHandler} |
||||
text={`Open React NodeGui docs`} |
||||
></Button> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const textStyle = ` |
||||
padding-right: 20px; |
||||
`;
|
||||
|
||||
const btnStyle = ` |
||||
margin-horizontal: 20px; |
||||
height: 40px; |
||||
`;
|
||||
@ -1,56 +1,12 @@ |
||||
import { |
||||
Renderer, |
||||
View, |
||||
Text, |
||||
Window, |
||||
Image, |
||||
ScrollArea |
||||
} from "@nodegui/react-nodegui"; |
||||
import path from "path"; |
||||
import { Renderer } from "@nodegui/react-nodegui"; |
||||
import React from "react"; |
||||
import { AspectRatioMode } from "@nodegui/nodegui"; |
||||
|
||||
import imageUrl from "../assets/nodegui.jpg"; |
||||
const distImgUrl = path.resolve(__dirname, imageUrl); |
||||
const minSize = { width: 500, height: 400 }; |
||||
|
||||
const App = () => { |
||||
return ( |
||||
<Window minSize={minSize} styleSheet={styleSheet}> |
||||
<ScrollArea style={`height: '100%';width: '100%';`}> |
||||
<View id="container"> |
||||
<Text style="font-size: 15px; font-weight: bold; margin-bottom: 20px;"> |
||||
Hello World |
||||
</Text> |
||||
<Image |
||||
style={imageStyle} |
||||
src={distImgUrl} |
||||
aspectRatioMode={AspectRatioMode.KeepAspectRatio} |
||||
/> |
||||
</View> |
||||
</ScrollArea> |
||||
</Window> |
||||
); |
||||
}; |
||||
|
||||
const imageStyle = ` |
||||
height: "700px"; |
||||
width: "700px"; |
||||
qproperty-alignment: 'AlignHCenter'; |
||||
`;
|
||||
|
||||
const styleSheet = ` |
||||
#container { |
||||
flex: 1; |
||||
min-height: 0; |
||||
min-width: 0; |
||||
width: '900'; |
||||
height: '900'; |
||||
flex-direction: column; |
||||
align-items: 'center'; |
||||
justify-content: 'center'; |
||||
background-color: 'grey'; |
||||
} |
||||
`;
|
||||
import App from "./app"; |
||||
|
||||
process.title = "My NodeGui App"; |
||||
Renderer.render(<App />); |
||||
// This is for hot reloading (this will be stripped off in production by webpack)
|
||||
if (module.hot) { |
||||
module.hot.accept(["./app"], function() { |
||||
Renderer.forceUpdate(); |
||||
}); |
||||
} |
||||
|
||||
@ -1,34 +1,58 @@ |
||||
const path = require("path"); |
||||
const webpack = require("webpack"); |
||||
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin"); |
||||
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); |
||||
|
||||
module.exports = { |
||||
mode: process.NODE_ENV || "development", |
||||
entry: "./src", |
||||
target: "node", |
||||
output: { |
||||
path: path.resolve(__dirname, "dist"), |
||||
filename: "index.js" |
||||
}, |
||||
node: { |
||||
__dirname: false |
||||
}, |
||||
module: { |
||||
rules: [ |
||||
{ |
||||
test: /\.tsx?$/, |
||||
use: "ts-loader", |
||||
exclude: /node_modules/ |
||||
}, |
||||
{ |
||||
test: /\.(png|jpe?g|gif|svg)$/i, |
||||
use: [{ loader: "file-loader" }] |
||||
}, |
||||
{ |
||||
test: /\.node/i, |
||||
use: [{ loader: "node-loader" }, { loader: "file-loader" }] |
||||
} |
||||
] |
||||
}, |
||||
resolve: { |
||||
extensions: [".tsx", ".ts", ".js"] |
||||
module.exports = (env, argv) => { |
||||
const config = { |
||||
mode: "production", |
||||
entry: ["./src/index.tsx"], |
||||
target: "node", |
||||
output: { |
||||
path: path.resolve(__dirname, "dist"), |
||||
filename: "index.js" |
||||
}, |
||||
node: { |
||||
__dirname: false, |
||||
__filename: false |
||||
}, |
||||
module: { |
||||
rules: [ |
||||
{ |
||||
test: /\.(j|t)sx?$/, |
||||
exclude: /node_modules/, |
||||
use: { |
||||
loader: "babel-loader", |
||||
options: { cacheDirectory: true, cacheCompression: false } |
||||
} |
||||
}, |
||||
{ |
||||
test: /\.(png|jpe?g|gif|svg|bmp)$/i, |
||||
use: [{ loader: "file-loader" }] |
||||
}, |
||||
{ |
||||
test: /\.node/i, |
||||
use: [{ loader: "node-loader" }, { loader: "file-loader" }] |
||||
} |
||||
] |
||||
}, |
||||
plugins: [], |
||||
resolve: { |
||||
extensions: [".tsx", ".ts", ".js", ".jsx", ".json"] |
||||
} |
||||
}; |
||||
|
||||
if (argv.mode === "development") { |
||||
config.mode = "development"; |
||||
config.plugins.push(new webpack.HotModuleReplacementPlugin()); |
||||
config.plugins.push(new ForkTsCheckerWebpackPlugin()); |
||||
config.devtool = "source-map"; |
||||
config.watch = true; |
||||
config.entry.unshift("webpack/hot/poll?100"); |
||||
} |
||||
|
||||
if (argv.p) { |
||||
config.plugins.push(new CleanWebpackPlugin()); |
||||
} |
||||
return config; |
||||
}; |
||||
|
||||
Loading…
Reference in new issue