@arcanejs/toolkit 0.2.2 → 0.3.0

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+import * as _arcanejs_protocol_logging from '@arcanejs/protocol/logging';
+import { Logger } from '@arcanejs/protocol/logging';
 import _ from 'lodash';
 import * as http from 'http';
 import { Application } from 'express';
@@ -5,7 +7,7 @@ import { WebSocket } from 'ws';
 import { ClientMessage, ServerMessage } from '@arcanejs/protocol';
 import { Group } from './backend/components/group.mjs';
 export { GroupHeader } from './backend/components/group.mjs';
-import { Component } from './backend/components/base.mjs';
+import { Parent, Component } from './backend/components/base.mjs';
 export { Button } from './backend/components/button.mjs';
 export { Label } from './backend/components/label.mjs';
 export { Rect } from './backend/components/rect.mjs';
@@ -25,7 +27,8 @@ declare class Server {
     private readonly onNewConnection;
     private readonly onClosedConnection;
     private readonly onMessage;
-    constructor(options: LightDeskOptions, onNewConnection: (connection: Connection) => void, onClosedConnection: (connection: Connection) => void, onMessage: (connection: Connection, message: ClientMessage) => void);
+    private readonly log?;
+    constructor(options: LightDeskOptions, onNewConnection: (connection: Connection) => void, onClosedConnection: (connection: Connection) => void, onMessage: (connection: Connection, message: ClientMessage) => void, log?: Logger | undefined);
     handleHttpRequest: (req: http.IncomingMessage, res: http.ServerResponse) => Promise<void>;
     private sendStaticFile;
     handleWsConnection: <S extends WebSocket>(ws: S) => void;
@@ -38,12 +41,26 @@ interface LightDeskOptions {
      * This is important if a express server will be used that serves other paths.
      */
     path: string;
+    /**
+     * An optional object that can be used to output log events,
+     * we recommend using `pino` for this,
+     * as log levels etc... can be controlled.
+     *
+     * You can also always use `console` for logging,
+     * but this will be quite verbose.
+     */
+    log?: Logger;
 }
 type InitializationOptions = 
 /** automatically start a simple  */
 {
     mode: 'automatic';
     port: number;
+    /**
+     * Optional callback that is called when the server is ready,
+     * with the url that the server is running on.
+     */
+    onReady?: (url: string) => void;
 }
 /** Create a websocket server that attaches to an existing express and http server */
  | {
@@ -57,7 +74,7 @@ type InitializationOptions =
     setup: (server: Server) => void;
 };
 
-declare class Toolkit {
+declare class Toolkit implements Parent {
     private readonly options;
     /**
      * Mapping from components to unique IDs that identify them
@@ -68,6 +85,7 @@ declare class Toolkit {
     constructor(options?: Partial<LightDeskOptions>);
     start: (opts: InitializationOptions) => void;
     setRoot: (group: Group) => void;
+    log(): _arcanejs_protocol_logging.Logger | null;
     updateTree: _.DebouncedFuncLeading<() => void>;
     removeChild: (component: Component) => void;
     private onNewConnection;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import * as _arcanejs_protocol_logging from '@arcanejs/protocol/logging';
+import { Logger } from '@arcanejs/protocol/logging';
 import _ from 'lodash';
 import * as http from 'http';
 import { Application } from 'express';
@@ -5,7 +7,7 @@ import { WebSocket } from 'ws';
 import { ClientMessage, ServerMessage } from '@arcanejs/protocol';
 import { Group } from './backend/components/group.js';
 export { GroupHeader } from './backend/components/group.js';
-import { Component } from './backend/components/base.js';
+import { Parent, Component } from './backend/components/base.js';
 export { Button } from './backend/components/button.js';
 export { Label } from './backend/components/label.js';
 export { Rect } from './backend/components/rect.js';
@@ -25,7 +27,8 @@ declare class Server {
     private readonly onNewConnection;
     private readonly onClosedConnection;
     private readonly onMessage;
-    constructor(options: LightDeskOptions, onNewConnection: (connection: Connection) => void, onClosedConnection: (connection: Connection) => void, onMessage: (connection: Connection, message: ClientMessage) => void);
+    private readonly log?;
+    constructor(options: LightDeskOptions, onNewConnection: (connection: Connection) => void, onClosedConnection: (connection: Connection) => void, onMessage: (connection: Connection, message: ClientMessage) => void, log?: Logger | undefined);
     handleHttpRequest: (req: http.IncomingMessage, res: http.ServerResponse) => Promise<void>;
     private sendStaticFile;
     handleWsConnection: <S extends WebSocket>(ws: S) => void;
@@ -38,12 +41,26 @@ interface LightDeskOptions {
      * This is important if a express server will be used that serves other paths.
      */
     path: string;
+    /**
+     * An optional object that can be used to output log events,
+     * we recommend using `pino` for this,
+     * as log levels etc... can be controlled.
+     *
+     * You can also always use `console` for logging,
+     * but this will be quite verbose.
+     */
+    log?: Logger;
 }
 type InitializationOptions = 
 /** automatically start a simple  */
 {
     mode: 'automatic';
     port: number;
+    /**
+     * Optional callback that is called when the server is ready,
+     * with the url that the server is running on.
+     */
+    onReady?: (url: string) => void;
 }
 /** Create a websocket server that attaches to an existing express and http server */
  | {
@@ -57,7 +74,7 @@ type InitializationOptions =
     setup: (server: Server) => void;
 };
 
-declare class Toolkit {
+declare class Toolkit implements Parent {
     private readonly options;
     /**
      * Mapping from components to unique IDs that identify them
@@ -68,6 +85,7 @@ declare class Toolkit {
     constructor(options?: Partial<LightDeskOptions>);
     start: (opts: InitializationOptions) => void;
     setRoot: (group: Group) => void;
+    log(): _arcanejs_protocol_logging.Logger | null;
     updateTree: _.DebouncedFuncLeading<() => void>;
     removeChild: (component: Component) => void;
     private onNewConnection;

package/dist/index.js

@@ -1,36 +1,36 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2;
 
 
-var _chunkRJS32OOAjs = require('./chunk-RJS32OOA.js');
+var _chunkWXSKMMCVjs = require('./chunk-WXSKMMCV.js');
 
 
-var _chunkMDFDWKGWjs = require('./chunk-MDFDWKGW.js');
+var _chunkIW3JCC73js = require('./chunk-IW3JCC73.js');
 
 
-var _chunkOEIGZ3NQjs = require('./chunk-OEIGZ3NQ.js');
+var _chunkDV5WTSFWjs = require('./chunk-DV5WTSFW.js');
 
 
 var _chunkEABM5X65js = require('./chunk-EABM5X65.js');
 
 
-var _chunkKVJU3EADjs = require('./chunk-KVJU3EAD.js');
+var _chunkJ46AJUGEjs = require('./chunk-J46AJUGE.js');
 
 
 
-var _chunkK24YPCR5js = require('./chunk-K24YPCR5.js');
+var _chunkQUA3NBLDjs = require('./chunk-QUA3NBLD.js');
 
 
-var _chunkP43QUQ4Tjs = require('./chunk-P43QUQ4T.js');
+var _chunkTSC5C5XRjs = require('./chunk-TSC5C5XR.js');
 
 
-var _chunkRGIB65TIjs = require('./chunk-RGIB65TI.js');
+var _chunkWIPEQNWRjs = require('./chunk-WIPEQNWR.js');
 
 
-var _chunkT2PJEXYOjs = require('./chunk-T2PJEXYO.js');
+var _chunkYN3FZMXYjs = require('./chunk-YN3FZMXY.js');
 
 
-var _chunkM6EFK4GPjs = require('./chunk-M6EFK4GP.js');
-require('./chunk-UBWCVW2U.js');
+var _chunkDNCHAOYHjs = require('./chunk-DNCHAOYH.js');
+require('./chunk-NZUYU32Z.js');
 
 
 var _chunk3RG5ZIWIjs = require('./chunk-3RG5ZIWI.js');
@@ -79,16 +79,17 @@ var STATIC_FILES = {
     contentType: "font/woff2"
   }
 };
-console.log("STATIC_FILES", STATIC_FILES);
 var Server = (_class = class {
-  constructor(options, onNewConnection, onClosedConnection, onMessage) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);
+  constructor(options, onNewConnection, onClosedConnection, onMessage, log) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);
     this.options = options;
     this.onNewConnection = onNewConnection;
     this.onClosedConnection = onClosedConnection;
     this.onMessage = onMessage;
+    this.log = log;
+    _optionalChain([log, 'optionalAccess', _14 => _14.debug, 'call', _15 => _15("Static Assets: %o", STATIC_FILES)]);
   }
   __init() {this.handleHttpRequest = async (req, res) => {
-    console.log("handleHttpRequest", req.url);
+    _optionalChain([this, 'access', _16 => _16.log, 'optionalAccess', _17 => _17.debug, 'call', _18 => _18("handleHttpRequest %s", req.url)]);
     if (req.url === this.options.path) {
       const content = `
           <html>
@@ -114,7 +115,7 @@ var Server = (_class = class {
             this.sendStaticFile(f.path, res, f.contentType);
           },
           (err) => {
-            console.error(err);
+            _optionalChain([this, 'access', _19 => _19.log, 'optionalAccess', _20 => _20.error, 'call', _21 => _21(err)]);
             res.writeHead(500, { "Content-Type": "text/plain" });
             res.end("Expected static file not found", "utf-8");
           }
@@ -125,7 +126,7 @@ var Server = (_class = class {
     res.end("not found", "utf-8");
   }}
   __init2() {this.sendStaticFile = (file, response, contentType) => {
-    fs.readFile(file, function(error, content) {
+    fs.readFile(file, (error, content) => {
       if (error) {
         if (error.code === "ENOENT") {
           response.writeHead(404, { "Content-Type": "text/plain" });
@@ -133,7 +134,7 @@ var Server = (_class = class {
         } else {
           response.writeHead(500, { "Content-Type": "text/plain" });
           response.end("Error", "utf-8");
-          console.error(error);
+          _optionalChain([this, 'access', _22 => _22.log, 'optionalAccess', _23 => _23.error, 'call', _24 => _24(`Error reading static file: %s`, error)]);
         }
       } else {
         response.writeHead(200, { "Content-Type": contentType });
@@ -146,7 +147,7 @@ var Server = (_class = class {
       sendMessage: (msg) => ws.send(JSON.stringify(msg))
     };
     this.onNewConnection(connection);
-    console.log("new connection");
+    _optionalChain([this, 'access', _25 => _25.log, 'optionalAccess', _26 => _26.debug, 'call', _27 => _27("new connection")]);
     ws.on(
       "message",
       (msg) => this.onMessage(connection, JSON.parse(msg.toString()))
@@ -158,7 +159,6 @@ var Server = (_class = class {
 // src/backend/toolkit.ts
 var _ws = require('ws');
 var _http = require('http');
-console.log(_diff.diffJson);
 var Toolkit = (_class2 = class {
   
   /**
@@ -183,7 +183,8 @@ var Toolkit = (_class2 = class {
       this.options,
       this.onNewConnection,
       this.onClosedConnection,
-      this.onMessage
+      this.onMessage,
+      this.options.log
     );
     if (opts.mode === "automatic") {
       const httpServer = _http.createServer.call(void 0, server.handleHttpRequest);
@@ -191,10 +192,10 @@ var Toolkit = (_class2 = class {
         server: httpServer
       });
       wss.on("connection", server.handleWsConnection);
+      const url = `http://localhost:${opts.port}${this.options.path}`;
       httpServer.listen(opts.port, () => {
-        console.log(
-          `Light Desk Started: http://localhost:${opts.port}${this.options.path}`
-        );
+        _optionalChain([opts, 'access', _45 => _45.onReady, 'optionalCall', _46 => _46(url)]);
+        _optionalChain([this, 'access', _47 => _47.options, 'access', _48 => _48.log, 'optionalAccess', _49 => _49.info, 'call', _50 => _50(`Light Desk Started: ${url}`)]);
       });
     } else if (opts.mode === "express") {
       const wss = new (0, _ws.WebSocketServer)({
@@ -215,6 +216,9 @@ var Toolkit = (_class2 = class {
     this.rootGroup = group;
     this.rootGroup.setParent(this);
   }}
+  log() {
+    return _nullishCoalesce(this.options.log, () => ( null));
+  }
   __init9() {this.updateTree = _lodash2.default.throttle(
     () => {
       setImmediate(() => {
@@ -239,7 +243,7 @@ var Toolkit = (_class2 = class {
     }
   }}
   __init11() {this.onNewConnection = (connection) => {
-    const lastTreeSent = _nullishCoalesce(_optionalChain([this, 'access', _5 => _5.rootGroup, 'optionalAccess', _6 => _6.getProtoInfo, 'call', _7 => _7(this.componentIDMap)]), () => ( void 0));
+    const lastTreeSent = _nullishCoalesce(_optionalChain([this, 'access', _51 => _51.rootGroup, 'optionalAccess', _52 => _52.getProtoInfo, 'call', _53 => _53(this.componentIDMap)]), () => ( void 0));
     this.connections.set(connection, { lastTreeSent });
     if (lastTreeSent) {
       connection.sendMessage({
@@ -249,11 +253,11 @@ var Toolkit = (_class2 = class {
     }
   }}
   __init12() {this.onClosedConnection = (connection) => {
-    console.log("removing connection");
+    _optionalChain([this, 'access', _54 => _54.options, 'access', _55 => _55.log, 'optionalAccess', _56 => _56.debug, 'call', _57 => _57("removing connection")]);
     this.connections.delete(connection);
   }}
   __init13() {this.onMessage = (_connection, message) => {
-    console.log("got message", message);
+    _optionalChain([this, 'access', _58 => _58.options, 'access', _59 => _59.log, 'optionalAccess', _60 => _60.debug, 'call', _61 => _61("got message: %o", message)]);
     switch (message.type) {
       case "component-message":
         if (this.rootGroup)
@@ -275,4 +279,4 @@ var Toolkit = (_class2 = class {
 
 
 
-exports.Button = _chunkKVJU3EADjs.Button; exports.Group = _chunkK24YPCR5js.Group; exports.GroupHeader = _chunkK24YPCR5js.GroupHeader; exports.Label = _chunkP43QUQ4Tjs.Label; exports.Rect = _chunkRGIB65TIjs.Rect; exports.SliderButton = _chunkT2PJEXYOjs.SliderButton; exports.Switch = _chunkM6EFK4GPjs.Switch; exports.Tab = _chunkRJS32OOAjs.Tab; exports.Tabs = _chunkRJS32OOAjs.Tabs; exports.TextInput = _chunkMDFDWKGWjs.TextInput; exports.Timeline = _chunkOEIGZ3NQjs.Timeline; exports.Toolkit = Toolkit;
+exports.Button = _chunkJ46AJUGEjs.Button; exports.Group = _chunkQUA3NBLDjs.Group; exports.GroupHeader = _chunkQUA3NBLDjs.GroupHeader; exports.Label = _chunkTSC5C5XRjs.Label; exports.Rect = _chunkWIPEQNWRjs.Rect; exports.SliderButton = _chunkYN3FZMXYjs.SliderButton; exports.Switch = _chunkDNCHAOYHjs.Switch; exports.Tab = _chunkWXSKMMCVjs.Tab; exports.Tabs = _chunkWXSKMMCVjs.Tabs; exports.TextInput = _chunkIW3JCC73js.TextInput; exports.Timeline = _chunkDV5WTSFWjs.Timeline; exports.Toolkit = Toolkit;

package/dist/index.mjs

@@ -1,36 +1,36 @@
 import {
   Tab,
   Tabs
-} from "./chunk-TQ27Y7F4.mjs";
+} from "./chunk-YIXRQHTA.mjs";
 import {
   TextInput
-} from "./chunk-IXTM35YM.mjs";
+} from "./chunk-NKNDCRUR.mjs";
 import {
   Timeline
-} from "./chunk-SOC4TF3J.mjs";
+} from "./chunk-POUQGJN4.mjs";
 import {
   IDMap
 } from "./chunk-RGHJEMWG.mjs";
 import {
   Button
-} from "./chunk-TAZH4BBH.mjs";
+} from "./chunk-EH73E5FP.mjs";
 import {
   Group,
   GroupHeader
-} from "./chunk-3O4P67DM.mjs";
+} from "./chunk-3Y3HRYLC.mjs";
 import {
   Label
-} from "./chunk-HNEUZVCX.mjs";
+} from "./chunk-7ITSSJE2.mjs";
 import {
   Rect
-} from "./chunk-ZU5H6SVA.mjs";
+} from "./chunk-SMTUN6HG.mjs";
 import {
   SliderButton
-} from "./chunk-JW4GXS54.mjs";
+} from "./chunk-H2UQDFTS.mjs";
 import {
   Switch
-} from "./chunk-APCR3ITH.mjs";
-import "./chunk-ZCHM3JJJ.mjs";
+} from "./chunk-YYM7PBRN.mjs";
+import "./chunk-EDTJ75FT.mjs";
 import {
   __require
 } from "./chunk-Y6FXYEAI.mjs";
@@ -79,16 +79,17 @@ var STATIC_FILES = {
     contentType: "font/woff2"
   }
 };
-console.log("STATIC_FILES", STATIC_FILES);
 var Server = class {
-  constructor(options, onNewConnection, onClosedConnection, onMessage) {
+  constructor(options, onNewConnection, onClosedConnection, onMessage, log) {
     this.options = options;
     this.onNewConnection = onNewConnection;
     this.onClosedConnection = onClosedConnection;
     this.onMessage = onMessage;
+    this.log = log;
+    log?.debug("Static Assets: %o", STATIC_FILES);
   }
   handleHttpRequest = async (req, res) => {
-    console.log("handleHttpRequest", req.url);
+    this.log?.debug("handleHttpRequest %s", req.url);
     if (req.url === this.options.path) {
       const content = `
           <html>
@@ -114,7 +115,7 @@ var Server = class {
             this.sendStaticFile(f.path, res, f.contentType);
           },
           (err) => {
-            console.error(err);
+            this.log?.error(err);
             res.writeHead(500, { "Content-Type": "text/plain" });
             res.end("Expected static file not found", "utf-8");
           }
@@ -125,7 +126,7 @@ var Server = class {
     res.end("not found", "utf-8");
   };
   sendStaticFile = (file, response, contentType) => {
-    fs.readFile(file, function(error, content) {
+    fs.readFile(file, (error, content) => {
       if (error) {
         if (error.code === "ENOENT") {
           response.writeHead(404, { "Content-Type": "text/plain" });
@@ -133,7 +134,7 @@ var Server = class {
         } else {
           response.writeHead(500, { "Content-Type": "text/plain" });
           response.end("Error", "utf-8");
-          console.error(error);
+          this.log?.error(`Error reading static file: %s`, error);
         }
       } else {
         response.writeHead(200, { "Content-Type": contentType });
@@ -146,7 +147,7 @@ var Server = class {
       sendMessage: (msg) => ws.send(JSON.stringify(msg))
     };
     this.onNewConnection(connection);
-    console.log("new connection");
+    this.log?.debug("new connection");
     ws.on(
       "message",
       (msg) => this.onMessage(connection, JSON.parse(msg.toString()))
@@ -158,7 +159,6 @@ var Server = class {
 // src/backend/toolkit.ts
 import { WebSocketServer } from "ws";
 import { createServer } from "http";
-console.log(diffJson);
 var Toolkit = class {
   options;
   /**
@@ -183,7 +183,8 @@ var Toolkit = class {
       this.options,
       this.onNewConnection,
       this.onClosedConnection,
-      this.onMessage
+      this.onMessage,
+      this.options.log
     );
     if (opts.mode === "automatic") {
       const httpServer = createServer(server.handleHttpRequest);
@@ -191,10 +192,10 @@ var Toolkit = class {
         server: httpServer
       });
       wss.on("connection", server.handleWsConnection);
+      const url = `http://localhost:${opts.port}${this.options.path}`;
       httpServer.listen(opts.port, () => {
-        console.log(
-          `Light Desk Started: http://localhost:${opts.port}${this.options.path}`
-        );
+        opts.onReady?.(url);
+        this.options.log?.info(`Light Desk Started: ${url}`);
       });
     } else if (opts.mode === "express") {
       const wss = new WebSocketServer({
@@ -215,6 +216,9 @@ var Toolkit = class {
     this.rootGroup = group;
     this.rootGroup.setParent(this);
   };
+  log() {
+    return this.options.log ?? null;
+  }
   updateTree = _.throttle(
     () => {
       setImmediate(() => {
@@ -249,11 +253,11 @@ var Toolkit = class {
     }
   };
   onClosedConnection = (connection) => {
-    console.log("removing connection");
+    this.options.log?.debug("removing connection");
     this.connections.delete(connection);
   };
   onMessage = (_connection, message) => {
-    console.log("got message", message);
+    this.options.log?.debug("got message: %o", message);
     switch (message.type) {
       case "component-message":
         if (this.rootGroup)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/toolkit",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "private": false,
   "description": "Build web-accessible control interfaces for your long-running Node.js processes",
   "keywords": [
@@ -106,7 +106,7 @@
     "tsup": "^8.1.0",
     "typescript": "^5.3.3",
     "@arcanejs/eslint-config": "^0.0.0",
-    "@arcanejs/toolkit-frontend": "^0.0.3",
+    "@arcanejs/toolkit-frontend": "^0.1.0",
     "@arcanejs/typescript-config": "^0.0.0"
   },
   "dependencies": {
@@ -114,8 +114,8 @@
     "lodash": "^4.17.21",
     "material-symbols": "^0.25.0",
     "ws": "^8.18.0",
-    "@arcanejs/protocol": "^0.1.1",
-    "@arcanejs/diff": "^0.3.2"
+    "@arcanejs/diff": "^0.4.0",
+    "@arcanejs/protocol": "^0.2.0"
   },
   "files": [
     "dist"