Atul R
5 years ago
parent
19e6503662
commit
0b214b3019
@ -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": "current" } }], |
||||
"@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"; |
||||
@ -1 +0,0 @@ |
||||
declare module "*.jpg"; |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,65 @@ |
||||
import { |
||||
View, |
||||
Text, |
||||
Window, |
||||
Image, |
||||
ScrollArea, |
||||
hot |
||||
} from "@nodegui/react-nodegui"; |
||||
import path from "path"; |
||||
import React from "react"; |
||||
import { AspectRatioMode } from "@nodegui/nodegui"; |
||||
import { MyText } from "./components/mytext"; |
||||
import imageUrl from "../assets/nodegui.jpg"; |
||||
|
||||
const distImgUrl = path.resolve(__dirname, imageUrl); |
||||
const minSize = { width: 500, height: 400 }; |
||||
|
||||
class App extends React.Component { |
||||
render() { |
||||
return ( |
||||
<> |
||||
<Window minSize={minSize} styleSheet={styleSheet}> |
||||
<Text>Yo!!</Text> |
||||
</Window> |
||||
<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;"> |
||||
Testing |
||||
</Text> |
||||
<MyText /> |
||||
<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'; |
||||
} |
||||
`;
|
||||
|
||||
export default hot(App); |
||||
@ -0,0 +1,6 @@ |
||||
import { Text } from "@nodegui/react-nodegui"; |
||||
import React from "react"; |
||||
|
||||
export const MyText = () => { |
||||
return <Text>{`Yolo`}</Text>; |
||||
}; |
||||
@ -1,56 +1,11 @@ |
||||
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"; |
||||
|
||||
Renderer.render(<App />); |
||||
// This is for hot reloading (this will be stripped off in production by webpack)
|
||||
if (module.hot) { |
||||
module.hot.accept(["./app"], () => { |
||||
Renderer.forceUpdate(); |
||||
}); |
||||
} |
||||
|
||||
@ -1,17 +1,13 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"incremental": true, |
||||
"target": "es2016", |
||||
"module": "commonjs", |
||||
"allowJs": true, |
||||
"checkJs": false, |
||||
"jsx": "react", |
||||
"outDir": "./dist", |
||||
"sourceMap": true, |
||||
"strict": true, |
||||
"alwaysStrict": true, |
||||
"moduleResolution": "node", |
||||
"esModuleInterop": true |
||||
}, |
||||
"include": ["**/*"] |
||||
"include": ["**/*"], |
||||
"exclude": ["./node_modules/**/*"] |
||||
} |
||||
|
||||
@ -1,34 +1,51 @@ |
||||
const path = require("path"); |
||||
const webpack = require("webpack"); |
||||
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-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 |
||||
}, |
||||
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"); |
||||
} |
||||
return config; |
||||
}; |
||||
|
||||
Loading…
Reference in new issue