@colyseus/monitor 0.16.0-preview.2 → 0.16.0-preview.4

package/build/static/styles.css

@@ -1,140 +1,151 @@
-.json-view {
-	display: block;
-	color: #4d4d4d;
-	--json-property: #009033;
-	--json-index: #676dff;
-	--json-number: #676dff;
-	--json-string: #b2762e;
-	--json-boolean: #dc155e;
-	--json-null: #dc155e;
-}
-.json-view .json-view--property {
-	color: var(--json-property);
-}
-.json-view .json-view--index {
-	color: var(--json-index);
-}
-.json-view .json-view--number {
-	color: var(--json-number);
-}
-.json-view .json-view--string {
-	color: var(--json-string);
-}
-.json-view .json-view--boolean {
-	color: var(--json-boolean);
-}
-.json-view .json-view--null {
-	color: var(--json-null);
-}
-
-.json-view .jv-indent {
-	padding-left: 1em;
-}
-.json-view .jv-chevron {
-	display: inline-block;
-	vertical-align: -20%;
-	cursor: pointer;
-	opacity: 0.4;
-	width: 1em;
-	height: 1em;
-}
-:is(.json-view .jv-chevron:hover, .json-view .jv-size:hover + .jv-chevron) {
-	opacity: 0.8;
-}
-.json-view .jv-size {
-	cursor: pointer;
-	opacity: 0.4;
-	font-size: 0.875em;
-	font-style: italic;
-	margin-left: 0.5em;
-	vertical-align: -5%;
-	line-height: 1;
-}
-
-.json-view :is(.json-view--copy, .json-view--edit) {
-	display: none;
-	width: 1em;
-	height: 1em;
-	margin-left: 0.25em;
-	cursor: pointer;
-}
-
-.json-view .json-view--input {
-	width: 120px;
-	margin-left: 0.25em;
-	border-radius: 4px;
-	border: 1px solid currentColor;
-	padding: 0px 4px;
-	font-size: 87.5%;
-	line-height: 1.25;
-	background: transparent;
-}
-.json-view .json-view--deleting {
-	outline: 1px solid #da0000;
-	background-color: #da000011;
-	text-decoration-line: line-through;
-}
-
-:is(.json-view:hover, .json-view--pair:hover) > :is(.json-view--copy, .json-view--edit) {
-	display: inline-block;
-}
-
-.json-view .jv-button {
-	background: transparent;
-	outline: none;
-	border: none;
-	cursor: pointer;
-}
-.json-view .cursor-pointer {
-	cursor: pointer;
-}
-
-/* Themes */
-.json-view_a11y {
-	color: #545454;
-	--json-property: #aa5d00;
-	--json-index: #007299;
-	--json-number: #007299;
-	--json-string: #008000;
-	--json-boolean: #d91e18;
-	--json-null: #d91e18;
-}
-.json-view_github {
-	color: #005cc5;
-	--json-property: #005cc5;
-	--json-index: #005cc5;
-	--json-number: #005cc5;
-	--json-string: #032f62;
-	--json-boolean: #005cc5;
-	--json-null: #005cc5;
-}
-.json-view_vscode {
-	color: #005cc5;
-	--json-property: #0451a5;
-	--json-index: #0000ff;
-	--json-number: #0000ff;
-	--json-string: #a31515;
-	--json-boolean: #0000ff;
-	--json-null: #0000ff;
-}
-.json-view_atom {
-	color: #383a42;
-	--json-property: #e45649;
-	--json-index: #986801;
-	--json-number: #986801;
-	--json-string: #50a14f;
-	--json-boolean: #0184bc;
-	--json-null: #0184bc;
-}
-.json-view_winter-is-coming {
-	color: #0431fa;
-	--json-property: #3a9685;
-	--json-index: #ae408b;
-	--json-number: #ae408b;
-	--json-string: #8123a9;
-	--json-boolean: #0184bc;
-	--json-null: #0184bc;
-}
+.json-view {
+	display: block;
+	color: #4d4d4d;
+	text-align: left;
+	--json-property: #009033;
+	--json-index: #676dff;
+	--json-number: #676dff;
+	--json-string: #b2762e;
+	--json-boolean: #dc155e;
+	--json-null: #dc155e;
+}
+.json-view .json-view--property {
+	color: var(--json-property);
+}
+.json-view .json-view--index {
+	color: var(--json-index);
+}
+.json-view .json-view--number {
+	color: var(--json-number);
+}
+.json-view .json-view--string {
+	color: var(--json-string);
+}
+.json-view .json-view--boolean {
+	color: var(--json-boolean);
+}
+.json-view .json-view--null {
+	color: var(--json-null);
+}
+
+.json-view .jv-indent {
+	padding-left: 1em;
+}
+.json-view .jv-chevron {
+	display: inline-block;
+	vertical-align: -20%;
+	cursor: pointer;
+	opacity: 0.4;
+	width: 1em;
+	height: 1em;
+}
+:is(.json-view .jv-chevron:hover, .json-view .jv-size:hover + .jv-chevron) {
+	opacity: 0.8;
+}
+.json-view .jv-size {
+	cursor: pointer;
+	opacity: 0.4;
+	font-size: 0.875em;
+	font-style: italic;
+	margin-left: 0.5em;
+	vertical-align: -5%;
+	line-height: 1;
+}
+
+.json-view :is(.json-view--copy, .json-view--edit),
+.json-view .json-view--link svg {
+	display: none;
+	width: 1em;
+	height: 1em;
+	margin-left: 0.25em;
+	cursor: pointer;
+}
+
+.json-view .json-view--input {
+	width: 120px;
+	margin-left: 0.25em;
+	border-radius: 4px;
+	border: 1px solid currentColor;
+	padding: 0px 4px;
+	font-size: 87.5%;
+	line-height: 1.25;
+	background: transparent;
+}
+.json-view .json-view--deleting {
+	outline: 1px solid #da0000;
+	background-color: #da000011;
+	text-decoration-line: line-through;
+}
+
+:is(.json-view:hover, .json-view--pair:hover) > :is(.json-view--copy, .json-view--edit),
+:is(.json-view:hover, .json-view--pair:hover) > .json-view--link svg {
+	display: inline-block;
+}
+
+.json-view .jv-button {
+	background: transparent;
+	outline: none;
+	border: none;
+	cursor: pointer;
+	color: inherit;
+}
+.json-view .cursor-pointer {
+	cursor: pointer;
+}
+
+.json-view svg {
+	vertical-align: -10%;
+}
+.jv-size-chevron ~ svg {
+	vertical-align: -16%;
+}
+
+/* Themes */
+.json-view_a11y {
+	color: #545454;
+	--json-property: #aa5d00;
+	--json-index: #007299;
+	--json-number: #007299;
+	--json-string: #008000;
+	--json-boolean: #d91e18;
+	--json-null: #d91e18;
+}
+.json-view_github {
+	color: #005cc5;
+	--json-property: #005cc5;
+	--json-index: #005cc5;
+	--json-number: #005cc5;
+	--json-string: #032f62;
+	--json-boolean: #005cc5;
+	--json-null: #005cc5;
+}
+.json-view_vscode {
+	color: #005cc5;
+	--json-property: #0451a5;
+	--json-index: #0000ff;
+	--json-number: #0000ff;
+	--json-string: #a31515;
+	--json-boolean: #0000ff;
+	--json-null: #0000ff;
+}
+.json-view_atom {
+	color: #383a42;
+	--json-property: #e45649;
+	--json-index: #986801;
+	--json-number: #986801;
+	--json-string: #50a14f;
+	--json-boolean: #0184bc;
+	--json-null: #0184bc;
+}
+.json-view_winter-is-coming {
+	color: #0431fa;
+	--json-property: #3a9685;
+	--json-index: #ae408b;
+	--json-number: #ae408b;
+	--json-string: #8123a9;
+	--json-boolean: #0184bc;
+	--json-null: #0184bc;
+}
 html, body {
     margin: 0;
     padding: 0;

package/build/static/styles.css.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css","sources":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;A","sourceRoot":""}
+{"version":3,"file":"styles.css","sources":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;A","sourceRoot":""}

package/build.mjs

@@ -0,0 +1,90 @@
+import path from 'path';
+import glob from 'fast-glob';
+import { fileURLToPath } from 'url';
+import ts from "typescript";
+import esbuild from "esbuild";
+
+// we need to change up how __dirname is used for ES6 purposes
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+async function main() {
+  // Absolute path to package directory
+  const basePath = __dirname;
+  const target = "es2017";
+
+  // Get all .ts as input files
+  const entryPoints = glob.sync(path.resolve(basePath, "src-backend", "**", "**.ts")
+    .replace(/\\/g, '/')); // windows support
+
+  const outdir = path.join(basePath, 'build');
+
+  // Emit only .d.ts files
+  const emitTSDeclaration = () => {
+    console.log("Generating .d.ts...");
+    const program = ts.createProgram(entryPoints, {
+      declaration: true,
+      emitDeclarationOnly: true,
+      skipLibCheck: true,
+      module: "commonjs",
+      target,
+      outDir: outdir,
+      esModuleInterop: true,
+      experimentalDecorators: true,
+    });
+    const emitResult = program.emit();
+
+    const allDiagnostics = ts
+      .getPreEmitDiagnostics(program)
+      .concat(emitResult.diagnostics);
+
+    allDiagnostics.forEach(diagnostic => {
+      if (diagnostic.file) {
+        const { line, character } = ts.getLineAndCharacterOfPosition(diagnostic.file, diagnostic.start);
+        const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n");
+        console.log(`${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`);
+      } else {
+        console.log(ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n"));
+      }
+    });
+  }
+
+  // CommonJS output
+  console.log("Generating CJS build...");
+  esbuild.build({
+    entryPoints,
+    outdir,
+    target,
+    format: "cjs",
+    target: "es2017",
+    sourcemap: "external",
+    platform: "node",
+  });
+
+  // ESM output
+  console.log("Generating ESM build...");
+  esbuild.build({
+    entryPoints,
+    outdir,
+    target,
+    format: "esm",
+    bundle: true,
+    sourcemap: "external",
+    platform: "node",
+    outExtension: { '.js': '.mjs', },
+    plugins: [{
+      name: 'add-mjs',
+      setup(build) {
+        build.onResolve({ filter: /.*/ }, (args) => {
+          if (args.importer) return { path: args.path.replace(/^\.(.*)\.js$/, '.$1.mjs'), external: true }
+        })
+      },
+    }]
+  });
+
+  // emit .d.ts files
+  emitTSDeclaration();
+  console.log("Done!");
+}
+
+export default await main();
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colyseus/monitor",
-  "version": "0.16.0-preview.2",
+  "version": "0.16.0-preview.4",
   "description": "Web Monitoring Panel for Colyseus",
   "input": "./src/index.ts",
   "main": "./build/index.js",
@@ -8,8 +8,8 @@
   "typings": "./build/index.d.ts",
   "scripts": {
     "start": "ts-node example/Server.ts",
-    "build": "tsc && NODE_OPTIONS=--openssl-legacy-provider webpack --env.production",
-    "prepublishOnly": "tsc && npm run build"
+    "build": "node build.mjs && NODE_OPTIONS=--openssl-legacy-provider webpack --env.production",
+    "prepublishOnly": "node build.mjs && npm run build"
   },
   "repository": {
     "type": "git",
@@ -45,7 +45,9 @@
     "@types/superagent": "^3.5.8",
     "colyseus": "^0.16.0-preview.0",
     "css-loader": "^0.28.11",
+    "esbuild": "^0.23.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "fast-glob": "^3.3.2",
     "file-loader": "^1.1.11",
     "history": "^5.3.0",
     "html-webpack-plugin": "^3.2.0",

package/src-backend/api.ts

@@ -0,0 +1,84 @@
+import { matchMaker } from '@colyseus/core';
+
+import express from 'express';
+import osUtils from 'node-os-utils';
+
+import type { MonitorOptions } from './index.js';
+
+const UNAVAILABLE_ROOM_ERROR = "@colyseus/monitor: room $roomId is not available anymore.";
+
+export function getAPI (opts: Partial<MonitorOptions>) {
+    const api = express.Router();
+
+    api.get("/", async (req: express.Request, res: express.Response) => {
+        try {
+            const rooms: any[] = await matchMaker.query({});
+            const columns = opts.columns || ['roomId', 'name', 'clients', 'maxClients', 'locked', 'elapsedTime'];
+
+            // extend columns to expose "publicAddress", if present
+            if (!opts.columns && rooms[0] && rooms[0].publicAddress !== undefined) {
+                columns.push("publicAddress");
+            }
+
+            let connections: number = 0;
+
+            res.json({
+                columns,
+                rooms: rooms.map(room => {
+                    const data = JSON.parse(JSON.stringify(room));
+
+                    connections += room.clients;
+
+                    // additional data
+                    data.locked = room.locked || false;
+                    data.private = room.private;
+
+                    data.maxClients = `${room.maxClients}`;
+
+                    data.elapsedTime = Date.now() - new Date(room.createdAt).getTime();
+                    return data;
+                }),
+
+                connections,
+                cpu: await osUtils.cpu.usage(),
+                memory: await osUtils.mem.used()
+            });
+        } catch (e) {
+            const message = e.message;
+            console.error(message);
+            res.status(500);
+            res.json({ message });
+        }
+    });
+
+    api.get("/room", async (req: express.Request, res: express.Response) => {
+        const roomId = req.query.roomId as string;
+        try {
+            const inspectData = await matchMaker.remoteRoomCall(roomId, "getInspectData");
+            res.json(inspectData);
+        } catch (e) {
+            const message = UNAVAILABLE_ROOM_ERROR.replace("$roomId", roomId);
+            console.error(message);
+            res.status(500);
+            res.json({ message });
+        }
+    });
+
+    api.get("/room/call", async (req: express.Request, res: express.Response) => {
+        const roomId = req.query.roomId as string;
+        const method = req.query.method as string;
+        const args = JSON.parse(req.query.args as string);
+
+        try {
+            const data = await matchMaker.remoteRoomCall(roomId, method, args);
+            res.json(data);
+        } catch (e) {
+            const message = UNAVAILABLE_ROOM_ERROR.replace("$roomId", roomId);
+            console.error(message);
+            res.status(500);
+            res.json({ message });
+        }
+    });
+
+    return api;
+}

package/src-backend/ext/Room.ts

@@ -0,0 +1,67 @@
+//
+// Monkey-patch Colyseus' default behaviour
+//
+import { Room, Client, ClientPrivate } from "@colyseus/core";
+
+function getStateSize(room) {
+    // TODO: `Serializer<T>` should provide a method for this (e.g. `serializer.hasState()`)
+    const hasState = (
+      room._serializer.encoder || // schema v3
+      room._serializer.state || // schema v2
+      room._serializer.previousState // legacy-fossil-delta
+    );
+    const fullState = hasState && room._serializer.getFullState();
+    return fullState && (fullState.byteLength || fullState.length) || 0;
+}
+
+(<any>Room.prototype).getAvailableData = function () {
+    return {
+        clients: this.clients.length,
+        maxClients: this.maxClients,
+        metadata: this.metadata,
+        roomId: this.roomId,
+    };
+};
+
+(<any>Room.prototype).getRoomListData = async function () {
+    const stateSize = getStateSize(this);
+    const elapsedTime = this.clock.elapsedTime;
+    const locked = this.locked;
+    const data = this.getAvailableData();
+
+    return { ...data, locked, elapsedTime, stateSize };
+};
+
+(<any>Room.prototype).getInspectData = async function () {
+    const state = this.state;
+    const stateSize = getStateSize(this);
+    const roomElapsedTime = this.clock.elapsedTime;
+
+    const data = this.getAvailableData();
+    const clients = this.clients.map((client: Client & ClientPrivate) => ({
+        sessionId: client.sessionId,
+        elapsedTime: roomElapsedTime - client._joinedAt
+    }));
+    const locked = this.locked;
+
+    return { ...data, locked, clients, state, stateSize };
+};
+
+// Actions
+(<any>Room.prototype)._forceClientDisconnect = async function (sessionId) {
+    for (let i = 0; i < this.clients.length; i++) {
+        if (this.clients[i].sessionId === sessionId) {
+            this.clients[i].leave();
+            break;
+        }
+    }
+};
+
+(<any>Room.prototype)._sendMessageToClient = async function (sessionId, type, data) {
+    for (let i = 0; i < this.clients.length; i++) {
+        if (this.clients[i].sessionId === sessionId) {
+            this.clients[i].send(type, data);
+            break;
+        }
+    }
+};

package/src-backend/index.ts

@@ -0,0 +1,31 @@
+import express from 'express';
+import path from 'path';
+
+import { getAPI } from './api.js';
+import './ext/Room.js';
+
+const frontendDirectory = path.resolve(__dirname, "..", "build", "static");
+
+export interface MonitorOptions {
+    columns: Array<
+        'roomId' |
+        'name' |
+        'clients' |
+        'maxClients' |
+        'locked' |
+        'elapsedTime' |
+        { metadata: string } |
+        'processId' |
+        "publicAddress"
+    >
+}
+
+/**
+ * TODO: expose the `router` instead on next major version.
+ */
+export function monitor (opts: Partial<MonitorOptions> = {}): express.Router {
+    const router = express.Router();
+    router.use(express.static(frontendDirectory));
+    router.use('/api', getAPI(opts));
+    return router;
+}

package/tsconfig.json

@@ -13,9 +13,9 @@
         "jsx": "react"
     },
     "include": [
-      "src/**/*.ts"
+      "src-backend/**/*.ts"
     ],
     "exclude": [
-      "src/frontend/**"
+      "src/**"
     ]
 }

package/webpack.config.js

@@ -16,7 +16,7 @@ module.exports = function(options) {
   return {
     mode: MODE,
 
-    entry: path.resolve("src", "frontend", "index.tsx"),
+    entry: path.resolve("src", "index.tsx"),
 
     output: {
       path: __dirname + "/build/static",
@@ -40,7 +40,7 @@ module.exports = function(options) {
       }),
       new ExtractTextPlugin("styles.css"),
       new HtmlWebpackPlugin({
-        template: path.resolve("src", "frontend", "index.html")
+        template: path.resolve("src", "index.html")
       }),
     ],