Merge pull request #17 from nodegui/feature/add-hot-reloading

Adds a hot reloaded starter

.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": "12" } }],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

README.md

@@ -1,7 +1,8 @@
 # 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.**
+
+<img alt="logo" src="https://github.com/nodegui/react-nodegui-starters/raw/master/assets/demo.png" height="300" />
 
 ## To Use
 
@@ -14,30 +15,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,28 @@
   "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",
+    "@nodegui/react-nodegui": "^0.2.2",
+    "open": "^7.0.0",
     "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",
+    "clean-webpack-plugin": "^3.0.0",
     "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^3.0.1",
     "node-loader": "^0.6.0",
-    "ts-loader": "^6.0.4",
     "typescript": "^3.5.3",
     "webpack": "^4.39.2",
     "webpack-cli": "^3.3.6"

src/app.tsx

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

src/components/dog.js

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

src/components/stepone.tsx

@@ -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;
+`;

src/components/steptwo.tsx

@@ -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;
+`;

src/index.tsx

@@ -1,56 +1,12 @@
-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';
-  }
-`;
 
+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();
+  });
+}

tsconfig.json

@@ -1,13 +1,8 @@
 {
   "compilerOptions": {
-    "incremental": true,
     "target": "es2016",
     "module": "commonjs",
-    "allowJs": true,
-    "checkJs": false,
     "jsx": "react",
-    "outDir": "./dist",
-    "sourceMap": true,
     "strict": true,
     "alwaysStrict": true,
     "moduleResolution": "node",

webpack.config.js

@@ -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 = {
+module.exports = (env, argv) => {
-  mode: process.NODE_ENV || "development",
+  const config = {
-  entry: "./src",
+    mode: "production",
-  target: "node",
+    entry: ["./src/index.tsx"],
-  output: {
+    target: "node",
-    path: path.resolve(__dirname, "dist"),
+    output: {
-    filename: "index.js"
+      path: path.resolve(__dirname, "dist"),
-  },
+      filename: "index.js"
-  node: {
+    },
-    __dirname: false
+    node: {
-  },
+      __dirname: false,
-  module: {
+      __filename: false
-    rules: [
+    },
-      {
+    module: {
-        test: /\.tsx?$/,
+      rules: [
-        use: "ts-loader",
+        {
-        exclude: /node_modules/
+          test: /\.(j|t)sx?$/,
-      },
+          exclude: /node_modules/,
-      {
+          use: {
-        test: /\.(png|jpe?g|gif|svg)$/i,
+            loader: "babel-loader",
-        use: [{ loader: "file-loader" }]
+            options: { cacheDirectory: true, cacheCompression: false }
-      },
+          }
-      {
+        },
-        test: /\.node/i,
+        {
-        use: [{ loader: "node-loader" }, { loader: "file-loader" }]
+          test: /\.(png|jpe?g|gif|svg|bmp)$/i,
-      }
+          use: [{ loader: "file-loader" }]
-    ]
+        },
-  },
+        {
-  resolve: {
+          test: /\.node/i,
-    extensions: [".tsx", ".ts", ".js"]
+          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;
 };