Merge pull request #27 from Kitware/add-js-client-only

Add js client only

.github/workflows/publish_js_lib.yaml

@@ -0,0 +1,25 @@
+name: Publish trame client to npmjs
+on:
+    push:
+        branches: [ master ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ./js-lib
+      - name: Build library
+        run: npm run build
+        working-directory: ./js-lib
+      - name: Publish library
+        run: npm publish --provenance --access public
+        working-directory: ./js-lib
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

js-lib/.eslintrc.cjs

@@ -0,0 +1,22 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "eslint:recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  env : {
+    browser : true,
+    es6 : true,
+  },
+  rules : {
+    "no-unused-vars" : 2,
+    "no-undef" : 2
+  },
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: "latest",
+  },
+};

js-lib/.gitignore

@@ -0,0 +1 @@
+dist

js-lib/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Kitware Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

js-lib/README.md

@@ -0,0 +1,11 @@
+## Trame client library for plain JS
+
+This library aims to simplify integration of any web client with a trame server.
+
+
+## Dev setup
+
+```bash
+npm install
+npm run build
+```

js-lib/examples

@@ -0,0 +1,103 @@
+import { Trame } from "@kitware/trame-client";
+
+// -----------------------------------
+// Global Trame API
+// -----------------------------------
+const trame = new Trame(wsProxyToUseIfAny)
+
+// Connect to server and wait until connected
+// - sessionURL
+// - sessionManagerURL
+await trame.connect({ application: "trame" });
+
+// custom serializer registration for method/state
+trame.registerDecorator()
+
+// same as waiting on connect
+await trame.ready
+
+// Listen to connection status change
+const unsubscribeOnClose = trame.onClose((info) => {
+    console.log("connection closed", info);
+});
+unsubscribeOnClose();
+
+// Listen to connection status change
+const unsubscribeOnError = trame.onError((info) => {
+    console.log("connection error", info);
+});
+unsubscribeOnError();
+
+// Listen to connection status change
+const unsubscribeOnDisconnect = trame.onDisconnect(() => {
+    console.log("Client is disconnecting");
+});
+unsubscribeOnDisconnect();
+
+// Ask server to exit and disconnect
+trame.exit(timeout);
+
+// Disconnect from server but don't ask the server to exit
+trame.disconnect();
+
+// Try to reconnect using the same info as before after a onClose
+await trame.reconnect();
+
+// -----------------------------------
+// WsClient API
+// -----------------------------------
+console.log(trame.client);
+
+// -----------------------------------
+// State API
+// -----------------------------------
+console.log(trame.state);
+
+// set
+trame.state.set("a", 2);
+trame.state.set('b', 3);
+trame.state.update({
+    a: 2.5,
+    b: 3.5,
+    c: 4.5,
+})
+
+// get
+console.log(trame.state.get("c"));
+console.log(trame.state.get('a'));
+
+// force send to server
+trame.state.flush('a', 'b');
+
+// listener for state change
+const unsubscribe = trame.state.onChange(({ type, keys }) => {
+    if (type === "dirty-state") {
+        console.log(`${keys} have changed`);
+    } else if (type === "new-keys") {    
+        console.log(`${keys} have been added`);
+    } else {
+        console.log(`Unkown type(${type}) of message`)
+    }
+});
+unsubscribe();
+
+// simpler api for state change
+const unsubscribe2 = trame.state.watch(
+    ["a", "b", "c"], 
+    (a, b, c) => {
+        console.log(`a(${a}) or b(${b}) or c(${c}) have changed`);
+    }
+);
+unsubscribe2();
+
+// -----------------------------------
+// Method execution API
+// -----------------------------------
+
+// method execution on Python side
+trame.trigger("name", ['arg_0', 'arg_1'], { kwarg_0: 1,  kwarg_1: 2 });
+
+// object registration on JS side so Python can execute methods on them
+trame.refs["ref_name"] = console;
+
+