Dashboard

package.json

@@ -1,13 +1,15 @@
 {
   "private": true,
   "scripts": {
+    "dashboard": "node packages/dashboard/run",
     "build-nars-common": "cd packages/nars-common && yarn && ./generate_proto.sh && yarn build",
     "build-nars": "cd packages/nars && yarn && yarn build",
     "build-nars-client": "cd packages/nars-client && yarn build",
     "build": "yarn build-nars-common && yarn build-nars && yarn build-nars-client"
   },
   "workspaces": [
     "packages/nars",
+    "packages/dashboard",
     "packages/nars-common",
     "packages/nars-client",
     "packages/reason-react-reconciler",

packages/dashboard/Process.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { spawn } from "child_process";
+
+import stylesheet from "./stylesheet";
+
+// type Props = {
+//   label: string;
+//   arg: string;
+//   width: string;
+//   height: string;
+//   top: string;
+//   right: string;
+//   left: string;
+// };
+
+const Pro = ({ width, height, top, right, left, label, arg }) => {
+  const [logs, setLogs] = React.useState([]);
+
+  React.useEffect(() => {
+    const subprocess = spawn("yarn", [arg], {
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+
+    subprocess.stdout.on("data", data => {
+      setLogs(state => [data.toString("utf-8"), ...state]);
+    });
+
+    return () => subprocess.kill();
+  }, []);
+
+  return (
+    <box
+      label={label}
+      class={stylesheet.bordered}
+      top={top}
+      right={right}
+      left={left}
+      width={width}
+      height={height}
+      draggable={true}
+    >
+      <list items={logs} />
+    </box>
+  );
+};
+
+export default Pro;

packages/dashboard/core.js

@@ -0,0 +1,53 @@
+import React from "react";
+import blessed from "blessed";
+import { render } from "react-blessed";
+
+import Process from "./Process";
+
+const Core = () => {
+  return (
+    <element>
+      <Process label="Nars - TS" arg="build-nars-ts" height="50%" width="50%" />
+
+      <Process
+        label="Nars - RE"
+        arg="build-nars-re"
+        top="50%"
+        height="50%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars Client"
+        arg="build-nars-client"
+        right="0"
+        height="50%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars Common"
+        arg="build-nars-common"
+        top="50%"
+        right="0"
+        height="50%"
+        width="50%"
+      />
+    </element>
+  );
+};
+
+/**
+ * Rendering the screen.
+ */
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: "Nars core dashboard",
+});
+
+screen.key(["escape", "q", "C-c"], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<Core />, screen);

packages/dashboard/examples.js

@@ -0,0 +1,45 @@
+import React from "react";
+import blessed from "blessed";
+import { render } from "react-blessed";
+
+import Process from "./Process";
+
+const Examples = () => {
+  return (
+    <element>
+      <Process label="Client" arg="build-client" height="50%" width="100%" />
+
+      <Process
+        label="Server"
+        arg="build-server"
+        top="50%"
+        height="50%"
+        width="70%"
+      />
+
+      <Process
+        label="Common"
+        arg="build-common"
+        top="50%"
+        height="50%"
+        width="30%"
+        right="0"
+      />
+    </element>
+  );
+};
+
+/**
+ * Rendering the screen.
+ */
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: "Nars examples dashboard",
+});
+
+screen.key(["escape", "q", "C-c"], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<Examples />, screen);

packages/dashboard/full.js

@@ -0,0 +1,79 @@
+import React from "react";
+import blessed from "blessed";
+import { render } from "react-blessed";
+
+import Process from "./Process";
+
+const Full = () => {
+  return (
+    <element>
+      <Process label="Client" arg="build-client" height="33%" width="50%" />
+
+      <Process
+        label="Server"
+        arg="build-server"
+        top="33%"
+        height="33%"
+        width="50%"
+      />
+
+      <Process
+        label="Common"
+        arg="build-common"
+        top="66%"
+        height="33%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars - TS"
+        arg="build-nars-ts"
+        right="0"
+        height="25%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars - RE"
+        arg="build-nars-re"
+        top="25%"
+        right="0"
+        height="25%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars Client"
+        arg="build-nars-client"
+        top="50%"
+        right="0"
+        height="25%"
+        width="50%"
+      />
+
+      <Process
+        label="Nars Common"
+        arg="build-nars-common"
+        top="75%"
+        right="0"
+        height="25%"
+        width="50%"
+      />
+    </element>
+  );
+};
+
+/**
+ * Rendering the screen.
+ */
+const screen = blessed.screen({
+  autoPadding: true,
+  smartCSR: true,
+  title: "Nars dashboard",
+});
+
+screen.key(["escape", "q", "C-c"], function(ch, key) {
+  return process.exit(0);
+});
+
+render(<Full />, screen);

packages/dashboard/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "dashboard",
+  "version": "0.1.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build-client": "cd ../../examples/client && yarn start",
+    "build-server": "cd ../../examples/server && yarn start",
+    "build-common": "cd ../../examples/common && yarn build",
+    "build-nars-re": "cd ../nars && yarn re:watch",
+    "build-nars-ts": "cd ../nars && yarn watch",
+    "build-nars-client": "cd ../nars-client && yarn watch",
+    "build-nars-common": "cd ../nars-common && yarn watch"
+  },
+  "dependencies": {
+    "@babel/core": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.6.0",
+    "blessed": "^0.1.81",
+    "react": "^16.9.0",
+    "react-blessed": "^0.6.1",
+    "react-devtools-core": "^3.6.3",
+    "ws": "^7.1.2"
+  }
+}

packages/dashboard/run.js

@@ -0,0 +1,20 @@
+require("@babel/register")({
+  presets: [["@babel/preset-env"], ["@babel/preset-react"]],
+});
+
+const argv = process.argv.slice(2);
+
+const version = argv[0];
+const versions = ["full", "examples", "core"];
+
+if (versions.indexOf(version) === -1) {
+  console.warn(
+    "Invalid dashboard type %s selected. Must be one of:\n *",
+    version,
+    versions.join("\n  * ")
+  );
+
+  process.exit(0);
+}
+
+require("./" + version);

packages/dashboard/stylesheet.js

@@ -0,0 +1,14 @@
+const stylesheet = {
+  bordered: {
+    border: {
+      type: "line",
+    },
+    style: {
+      border: {
+        fg: "blue",
+      },
+    },
+  },
+};
+
+export default stylesheet;

packages/nars-client/package.json

@@ -9,7 +9,8 @@
   "license": "MIT",
   "private": false,
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "watch": "tsc --watch"
   },
   "peerDependencies": {
     "react-native": ">=0.60.0"

packages/nars-common/package.json

@@ -9,7 +9,8 @@
   "license": "MIT",
   "private": false,
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "watch": "tsc --watch"
   },
   "devDependencies": {
     "prettier": "^1.18.2",

packages/nars/package.json

@@ -9,7 +9,9 @@
   "license": "MIT",
   "private": false,
   "scripts": {
-    "build": "bsb -make-world && tsc && cp ./src/*.bs.js ./dist/"
+    "build": "bsb -make-world && tsc && cp ./src/*.bs.js ./dist/",
+    "re:watch": "bsb -make-world -w",
+    "watch": "tsc --watch"
   },
   "dependencies": {
     "@types/analytics-node": "^3.1.1",

packages/nars/src/ComponentRegistry.rei

@@ -16,4 +16,4 @@ let registerRawTextEncodedReactElementInitializer:
   (string => Instance.encodedReactElement) => unit;
 
 [@genType]
-let createRawTextEncodedReactElement: string => Instance.encodedReactElement;
+let createRawTextEncodedReactElement: string => Instance.encodedReactElement;