Updates the boilterplate to be ready for hot-reloading

.all-contributorsrc

@@ -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"
-}

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

README.md

@@ -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!

assets.d.ts

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

extras.d.ts

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

package.json

@@ -7,22 +7,26 @@
   "private": true,
   "scripts": {
     "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": {
-    "@nodegui/nodegui": "^0.2.1",
+    "@nodegui/nodegui": "^0.3.1",
     "@nodegui/react-nodegui": "^0.1.9",
     "react": "^16.9.0"
   },
   "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/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"

src/app.tsx

@@ -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);

src/components/mytext.tsx

@@ -0,0 +1,6 @@
+import { Text } from "@nodegui/react-nodegui";
+import React from "react";
+
+export const MyText = () => {
+  return <Text>{`Yolo`}</Text>;
+};

src/index.tsx

@@ -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 { 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 />);
+// This is for hot reloading (this will be stripped off in production by webpack)
+if (module.hot) {
+  module.hot.accept(["./app"], () => {
+    Renderer.forceUpdate();
+  });
+}

tsconfig.json

@@ -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/**/*"]
 }

webpack.config.js

@@ -1,8 +1,11 @@
 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",
     output: {
       path: path.resolve(__dirname, "dist"),
@@ -14,12 +17,15 @@ module.exports = {
     module: {
       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" }]
         },
         {
@@ -28,7 +34,18 @@ module.exports = {
         }
       ]
     },
+    plugins: [],
     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;
 };