From 817690deb362aac7dfd87cb0b76ea4bfc28e7041 Mon Sep 17 00:00:00 2001 From: Atul R Date: Sun, 3 Nov 2019 14:35:05 +0100 Subject: [PATCH] Adds new starter example --- .babelrc | 2 +- package-lock.json | 51 ++++++++++++++++++++++++- package.json | 2 + src/app.tsx | 77 +++++++++++++------------------------- src/components/mytext.tsx | 6 --- src/components/stepone.tsx | 29 ++++++++++++++ src/components/steptwo.tsx | 48 ++++++++++++++++++++++++ src/index.tsx | 3 +- 8 files changed, 158 insertions(+), 60 deletions(-) delete mode 100644 src/components/mytext.tsx create mode 100644 src/components/stepone.tsx create mode 100644 src/components/steptwo.tsx diff --git a/.babelrc b/.babelrc index a684cfe..307d965 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,6 @@ { "presets": [ - ["@babel/preset-env", { "targets": { "node": "current" } }], + ["@babel/preset-env", { "targets": { "node": "12" } }], "@babel/preset-typescript", "@babel/preset-react" ], diff --git a/package-lock.json b/package-lock.json index 457b6a0..578ecc2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1007,8 +1007,7 @@ "@types/node": { "version": "12.7.1", "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.1.tgz", - "integrity": "sha512-aK9jxMypeSrhiYofWWBf/T7O+KwaiAHzM4sveCdWPn71lzUSMimRnKzhXDKfKwV1kWoBo2P1aGgaIYGLf9/ljw==", - "dev": true + "integrity": "sha512-aK9jxMypeSrhiYofWWBf/T7O+KwaiAHzM4sveCdWPn71lzUSMimRnKzhXDKfKwV1kWoBo2P1aGgaIYGLf9/ljw==" }, "@types/prop-types": { "version": "15.7.1", @@ -1905,6 +1904,25 @@ "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.2.tgz", "integrity": "sha512-GkfeAQh+QNy3wquu9oIZr6SS5x7wGdSgNQvD10X3r+AZr1Oys22HW8kAmDMvNg2+Dm0TeGaEuO8gFwdBXxwO8A==" }, + "chrome-launcher": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-0.12.0.tgz", + "integrity": "sha512-rBUP4tvWToiileDi3UR0SbWKoUoDCYTRmVND2sdoBL1xANBgVz8V9h1yQluj3MEQaBJg0fRw7hW82uOPrJus7A==", + "requires": { + "@types/node": "*", + "is-wsl": "^2.1.0", + "lighthouse-logger": "^1.0.0", + "mkdirp": "0.5.1", + "rimraf": "^2.6.1" + }, + "dependencies": { + "is-wsl": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.1.1.tgz", + "integrity": "sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==" + } + } + }, "chrome-trace-event": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz", @@ -4298,6 +4316,15 @@ "invert-kv": "^2.0.0" } }, + "lighthouse-logger": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.2.0.tgz", + "integrity": "sha512-wzUvdIeJZhRsG6gpZfmSCfysaxNEr43i+QT+Hie94wvHDKFLi4n7C2GqZ4sTC+PH5b5iktmXJvU87rWvhP3lHw==", + "requires": { + "debug": "^2.6.8", + "marky": "^1.2.0" + } + }, "listenercount": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz", @@ -4393,6 +4420,11 @@ "object-visit": "^1.0.0" } }, + "marky": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/marky/-/marky-1.2.1.tgz", + "integrity": "sha512-md9k+Gxa3qLH6sUKpeC2CNkJK/Ld+bEz5X96nYwloqphQE0CKCVEKco/6jxEZixinqNdz5RFi/KaCyfbMDMAXQ==" + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -4850,6 +4882,21 @@ "wrappy": "1" } }, + "open": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/open/-/open-7.0.0.tgz", + "integrity": "sha512-K6EKzYqnwQzk+/dzJAQSBORub3xlBTxMz+ntpZpH/LyCa1o6KjXhuN+2npAaI9jaSmU3R1Q8NWf4KUWcyytGsQ==", + "requires": { + "is-wsl": "^2.1.0" + }, + "dependencies": { + "is-wsl": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.1.1.tgz", + "integrity": "sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==" + } + } + }, "os-browserify": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz", diff --git a/package.json b/package.json index 9240029..d01f9e8 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "dependencies": { "@nodegui/nodegui": "^0.3.1", "@nodegui/react-nodegui": "^0.1.9", + "chrome-launcher": "^0.12.0", + "open": "^7.0.0", "react": "^16.9.0" }, "devDependencies": { diff --git a/src/app.tsx b/src/app.tsx index d55c329..4bc98be 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,65 +1,42 @@ -import { - View, - Text, - Window, - Image, - ScrollArea, - hot -} from "@nodegui/react-nodegui"; -import path from "path"; +import { Text, Window, hot, View } from "@nodegui/react-nodegui"; import React from "react"; -import { AspectRatioMode } from "@nodegui/nodegui"; -import { MyText } from "./components/mytext"; -import imageUrl from "../assets/nodegui.jpg"; +import { StepOne } from "./components/stepone"; +import { StepTwo } from "./components/steptwo"; -const distImgUrl = path.resolve(__dirname, imageUrl); -const minSize = { width: 500, height: 400 }; +const minSize = { width: 500, height: 500 }; class App extends React.Component { render() { return ( - <> - - Yo!! - - - - - - Testing - - - - - - - + + + Welcome to NodeGui 🐕 + 1. Play around + + 2. Debug + + + ); } } -const imageStyle = ` - height: "700px"; - width: "700px"; - qproperty-alignment: 'AlignHCenter'; - `; +const containerStyle = ` + flex: 1; +`; 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'; - } + #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); diff --git a/src/components/mytext.tsx b/src/components/mytext.tsx deleted file mode 100644 index 6805c99..0000000 --- a/src/components/mytext.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { Text } from "@nodegui/react-nodegui"; -import React from "react"; - -export const MyText = () => { - return {`Yolo`}; -}; diff --git a/src/components/stepone.tsx b/src/components/stepone.tsx new file mode 100644 index 0000000..b053439 --- /dev/null +++ b/src/components/stepone.tsx @@ -0,0 +1,29 @@ +import { Text, View } from "@nodegui/react-nodegui"; +import React from "react"; + +export function StepOne() { + return ( + + + Edit App.tsx to make changes to this screen. Then come back to see your + changes. Changes should reflect live thanks to Hot Reloading. 🔥 + + + {` +

+ Red dot + You can even use Rich Html text like this if you want 😎. +

+
+ `} + + + ); +} + +const containerStyle = ` + margin-horizontal: 20px; + padding-horizontal: 10px; +`; diff --git a/src/components/steptwo.tsx b/src/components/steptwo.tsx new file mode 100644 index 0000000..ab0e6ca --- /dev/null +++ b/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 ( + + + {` +
    +
  1. + Open chrome and navigate to chrome://inspect. You should see a target below with your app. +
    2. +
    +
  2. + Next click on "Open dedicated DevTools for Node" +
    3. +
    +
  3. + On the dedicated devtools. Click on Source > Node > "Your node process" +
    4. +
+ `} + + + + ); +} + +const textStyle = ` + padding-right: 20px; +`; + +const btnStyle = ` + margin-horizontal: 20px; + height: 40px; +`; diff --git a/src/index.tsx b/src/index.tsx index 01ee1fb..b4b11a6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,10 +2,11 @@ import { Renderer } from "@nodegui/react-nodegui"; import React from "react"; import App from "./app"; +process.title = "My NodeGui App"; Renderer.render(); // This is for hot reloading (this will be stripped off in production by webpack) if (module.hot) { - module.hot.accept(["./app"], () => { + module.hot.accept(["./app"], function() { Renderer.forceUpdate(); }); }