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. 33
      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 # 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 ## To Use
@ -14,30 +13,17 @@ git clone https://github.com/nodegui/react-nodegui-starter
cd react-nodegui-starter cd react-nodegui-starter
# Install dependencies # Install dependencies
npm install npm install
# Run the app # Run the dev server
npm run dev
# Open andother terminal and run the app
npm start 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 ## License
MIT 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, "private": true,
"scripts": { "scripts": {
"build": "webpack -p", "build": "webpack -p",
"start": "webpack && qode ./dist/index.js", "dev": "webpack --mode=development",
"debug": "webpack && qode --inspect ./dist/index.js", "start": "qode --inspect ./dist/index.js"
"start:watch": "nodemon -e js,ts,tsx --ignore dist/ --ignore node_modules/ --exec npm start"
}, },
"dependencies": { "dependencies": {
"@nodegui/nodegui": "^0.2.1", "@nodegui/nodegui": "^0.3.1",
"@nodegui/react-nodegui": "^0.1.9", "@nodegui/react-nodegui": "^0.1.9",
"react": "^16.9.0" "react": "^16.9.0"
}, },
"devDependencies": { "devDependencies": {
"nodemon": "latest", "@babel/core": "^7.6.4",
"@types/react": "^16.8.23", "@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"@babel/preset-typescript": "^7.6.0",
"@types/node": "^12.6.8", "@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", "file-loader": "^4.2.0",
"node-loader": "^0.6.0", "node-loader": "^0.6.0",
"ts-loader": "^6.0.4", "fork-ts-checker-webpack-plugin": "^3.0.1",
"typescript": "^3.5.3", "typescript": "^3.5.3",
"webpack": "^4.39.2", "webpack": "^4.39.2",
"webpack-cli": "^3.3.6" "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 { import { Renderer } from "@nodegui/react-nodegui";
Renderer,
View,
Text,
Window,
Image,
ScrollArea
} from "@nodegui/react-nodegui";
import path from "path";
import React from "react"; import React from "react";
import { AspectRatioMode } from "@nodegui/nodegui"; import App from "./app";
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';
}
`;
Renderer.render(<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": { "compilerOptions": {
"incremental": true,
"target": "es2016", "target": "es2016",
"module": "commonjs", "module": "commonjs",
"allowJs": true,
"checkJs": false,
"jsx": "react", "jsx": "react",
"outDir": "./dist",
"sourceMap": true,
"strict": true, "strict": true,
"alwaysStrict": true, "alwaysStrict": true,
"moduleResolution": "node", "moduleResolution": "node",
"esModuleInterop": true "esModuleInterop": true
}, },
"include": ["**/*"] "include": ["**/*"],
"exclude": ["./node_modules/**/*"]
} }

@ -1,8 +1,11 @@
const path = require("path"); const path = require("path");
const webpack = require("webpack");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
module.exports = { module.exports = (env, argv) => {
mode: process.NODE_ENV || "development", const config = {
entry: "./src", mode: "production",
entry: ["./src/index.tsx"],
target: "node", target: "node",
output: { output: {
path: path.resolve(__dirname, "dist"), path: path.resolve(__dirname, "dist"),
@ -14,12 +17,15 @@ module.exports = {
module: { module: {
rules: [ rules: [
{ {
test: /\.tsx?$/, test: /\.(j|t)sx?$/,
use: "ts-loader", exclude: /node_modules/,
exclude: /node_modules/ use: {
loader: "babel-loader",
options: { cacheDirectory: true, cacheCompression: false }
}
}, },
{ {
test: /\.(png|jpe?g|gif|svg)$/i, test: /\.(png|jpe?g|gif|svg|bmp)$/i,
use: [{ loader: "file-loader" }] use: [{ loader: "file-loader" }]
}, },
{ {
@ -28,7 +34,18 @@ module.exports = {
} }
] ]
}, },
plugins: [],
resolve: { resolve: {
extensions: [".tsx", ".ts", ".js"] 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