Updates the boilterplate to be ready for hot-reloading

master
Atul R 5 years ago
parent 19e6503662
commit 0b214b3019
  1. 23
      .all-contributorsrc
  2. 8
      .babelrc
  3. 28
      README.md
  4. 6
      assets.d.ts
  5. 1
      extras.d.ts
  6. 1410
      package-lock.json
  7. 18
      package.json
  8. 65
      src/app.tsx
  9. 6
      src/components/mytext.tsx
  10. 61
      src/index.tsx
  11. 8
      tsconfig.json
  12. 77
      webpack.config.js

@ -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": []
}

@ -1,7 +1,6 @@
# react-nodegui-starter
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)
**Clone and run for a quick way to see React NodeGUI in action.**
**Clone and run for a quick way to see React NodeGui in action.**
## To Use
@ -14,30 +13,17 @@ git clone https://github.com/nodegui/react-nodegui-starter
cd react-nodegui-starter
# Install dependencies
npm install
# Run the app
# Run the dev server
npm run dev
# Open andother terminal and run the app
npm start
```
## Installation & Resources for Learning NodeGUI/React NodeGUI
## Installation & Resources for learning React NodeGUI
- [nodegui.github.io/nodegui](https://nodegui.github.io/nodegui) - all of NodeGui and React NodeGUI's documentation
- [Documentation](https://react.nodegui.org) - all of React NodeGui's documentation.
- [NodeGui](https://nodegui.org) - all of NodeGui's documentation.
## License
MIT
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
<table>
<tr>
<td align="center"><a href="http://blog.pepf.nl"><img src="https://avatars1.githubusercontent.com/u/1265435?v=4" width="100px;" alt="Pepijn"/><br /><sub><b>Pepijn</b></sub></a><br /><a href="https://github.com/nodegui/react-nodegui-starter/commits?author=pepf" title="Code">💻</a></td>
</tr>
</table>
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

6
assets.d.ts vendored

@ -0,0 +1,6 @@
declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.bmp";

1
extras.d.ts vendored

@ -1 +0,0 @@
declare module "*.jpg";

1410
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -7,22 +7,26 @@
"private": true,
"scripts": {
"build": "webpack -p",
"start": "webpack && qode ./dist/index.js",
"debug": "webpack && qode --inspect ./dist/index.js",
"start:watch": "nodemon -e js,ts,tsx --ignore dist/ --ignore node_modules/ --exec npm start"
"dev": "webpack --mode=development",
"start": "qode --inspect ./dist/index.js"
},
"dependencies": {
"@nodegui/nodegui": "^0.2.1",
"@nodegui/nodegui": "^0.3.1",
"@nodegui/react-nodegui": "^0.1.9",
"react": "^16.9.0"
},
"devDependencies": {
"nodemon": "latest",
"@types/react": "^16.8.23",
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"@babel/preset-typescript": "^7.6.0",
"@types/node": "^12.6.8",
"@types/react": "^16.8.23",
"@types/webpack-env": "^1.14.1",
"babel-loader": "^8.0.6",
"file-loader": "^4.2.0",
"node-loader": "^0.6.0",
"ts-loader": "^6.0.4",
"fork-ts-checker-webpack-plugin": "^3.0.1",
"typescript": "^3.5.3",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.6"

@ -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…
Cancel
Save