@adcops/autocore-react 3.0.0

package/src/hub/HubSocketIo.ts

@@ -0,0 +1,166 @@
+/*
+ * Copyright (C) 2023 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2023-12-17 10:38:21
+ * Author: Thomas C. Bitsky Jr.
+ * -----
+ * Last Modified: 2024-03-08 09:46:20
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+import { HubBase } from './HubBase';
+import io, { Socket } from 'socket.io-client';
+
+/**
+ * Hub for integrating with a webserver/backend using Socket.IO as the pipeline.
+ * 
+ * The socket-io connection is expected to broadcast messages on the event
+ * name: 'autocore://broadcast_event'
+ * 
+ * This hub will capture those messages and dispatch them globally to any 
+ * listeners in the web app.
+ * 
+ * 
+ * Example: Listen to an event 'xarm-position':
+ * ```
+ * const {subscribe, unsubscribe} = useContext(EventEmitterContext);
+ * useEffect(() => {
+ *         const unsubscripeMp = subscribe('xarm-position', (value) => {
+ *            // The rust backend sent a JSON object of 3D position values. 
+ *            setX(value.x);
+ *            setY(value.y);
+ *            setZ(value.z);
+ *            setA(value.roll);
+ *            setB(value.yaw);
+ *            setC(value.pitch);
+ *        });
+ * 
+ *    return () => {
+ *        unsubscribe(unsubscripeMp);
+ *    }
+ * 
+ * }, [] );
+ *
+ * ```
+ * 
+ * The hub should also be used for invoking events in the Tauri backend.
+ * This example will call the function "update_count" in the rust backend, passing
+ * the expected argument "count".
+ * ```
+ * const {invoke} = useContext(EventEmitterContext);
+ * const incrementCount = () => {
+ *    count += 1;
+ *    invoke('update_count', {"count": count});        
+ * };
+ * ```
+ * 
+ * Of course, like any class derived from HubBase, the hub can be used to publish and subscribe to
+ * topics in the front-end, without need of interacting with the Tauri backed.
+ * 
+ * ```
+ * const {dispatch, subscribe, unsubscribe} = useContext(EventEmitterContext);
+ * const [controlPower, setControlPower] = useState(false);
+ * useEffect(() => {
+ *      const unsubscribeControlPower = subscribe('value-simulator-bBit1', (value) => {
+ *          setControlPower(value);
+ *      });  
+ *
+ *
+ *      return () => {
+ *           unsubscribe(unsubscribeControlPower);
+ *      }
+ * }, [] );
+ * 
+ * const onPbPressed = () => {
+ *      let count = 1;
+ *      dispatch({
+ *          topic: "my-awesome-topic",
+ *          payload: count
+ *      });
+ * }
+ * 
+ * ```
+ * 
+ */
+export class HubSocketIo extends HubBase {
+    private socket: Socket;
+
+    /**
+     * Constructor
+     */
+    constructor() {
+        super();
+
+        // Initialize the Socket.IO client to connect to the same domain and protocol
+        const socketUrl = window.location.origin; 
+
+        this.socket = io(socketUrl);
+
+        // Listen for a custom event from the backend
+        this.socket.on('autocore://broadcast_event', (ev: any) => {
+            let objPayload = JSON.parse(ev.payload);
+
+            if (objPayload.topic !== undefined && objPayload.topic !== null ) {
+                
+                if ( objPayload.payload !== undefined && objPayload.payload !== null ) {
+                    this.publish(objPayload.topic, objPayload.payload);
+                }
+                else {
+                    this.publish(objPayload.topic, undefined);
+                }
+                                
+            }
+        });
+
+    }
+
+    /**
+     * Invoke a method in the Socket.IO backend and wait for acknowledgment.
+     * 
+     * @param fname method name
+     * @param payload Optional data payload
+     * @param timeout Timeout in milliseconds after which the promise is rejected if no response is received.
+     * @returns A Promise that resolves to the response from the backend or rejects if a timeout occurs.
+     */
+    invoke(fname: string, payload?: object, timeout: number = 5000): Promise<object> {
+        return new Promise((resolve, reject) => {
+            // Flag to track if the response was received
+            let responseReceived = false;
+
+            this.socket.emit(fname, payload, (response: object) => {
+                responseReceived = true;
+                resolve(response);
+            });
+
+            // Set a timeout to reject the promise if no response is received
+            setTimeout(() => {
+                if (!responseReceived) {
+                    reject(new Error(`Timeout: No response received within ${timeout} ms`));
+                }
+            }, timeout);
+        });
+    }
+
+    /**
+     * Disconnects the Socket.IO client.
+     */
+    disconnect(): void {
+        this.socket.disconnect();
+    }
+
+
+    /**
+     * Emit an event to the Socket.IO server.
+     * The intention is that the invoke method is used instead.
+     * 
+     * @param eventName Name of the event to emit
+     * @param payload Optional data payload
+     */
+    protected emit(eventName: string, payload?: object): void {
+        this.socket.emit(eventName, payload);
+    }
+
+}
+
+export default HubSocketIo;

package/src/hub/HubTauri.ts

@@ -0,0 +1,145 @@
+/*
+ * Copyright (C) 2023 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2023-12-17 09:50:23
+ * Author: Thomas C. Bitsky Jr.
+ * -----
+ * Last Modified: 2024-03-07 13:20:46
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+import { InvokeArgs } from '@tauri-apps/api/tauri';
+import { HubBase } from './HubBase';
+import {event, invoke} from '@tauri-apps/api';
+
+
+/**
+ * Hub for integrating with the Tauri backend.
+ * 
+ * The tauri backend is expected to broadcast messages on the event
+ * name: 'autocore://broadcast_event'
+ * 
+ * This hub will capture those messages and dispatch them globally to any 
+ * listeners in the web app.
+ * 
+ * 
+ * Example: Listen to an event 'xarm-position':
+ * ```
+ * const {subscribe, unsubscribe} = useContext(EventEmitterContext);
+ * useEffect(() => {
+ *         const unsubscripeMp = subscribe('xarm-position', (value) => {
+ *            // The rust backend sent a JSON object of 3D position values. 
+ *            setX(value.x);
+ *            setY(value.y);
+ *            setZ(value.z);
+ *            setA(value.roll);
+ *            setB(value.yaw);
+ *            setC(value.pitch);
+ *        });
+ * 
+ *    return () => {
+ *        unsubscribe(unsubscripeMp);
+ *    }
+ * 
+ * }, [] );
+ *
+ * ```
+ * 
+ * The hub should also be used for invoking events in the Tauri backend.
+ * This example will call the function "update_count" in the rust backend, passing
+ * the expected argument "count".
+ * ```
+ * const {invoke} = useContext(EventEmitterContext);
+ * const incrementCount = () => {
+ *    count += 1;
+ *    invoke('update_count', {"count": count});        
+ * };
+ * ```
+ * 
+ * Of course, like any class derived from HubBase, the hub can be used to publish and subscribe to
+ * topics in the front-end, without need of interacting with the Tauri backed.
+ * 
+ * ```
+ * const {dispatch, subscribe, unsubscribe} = useContext(EventEmitterContext);
+ * const [controlPower, setControlPower] = useState(false);
+ * useEffect(() => {
+ *      const unsubscribeControlPower = subscribe('value-simulator-bBit1', (value) => {
+ *          setControlPower(value);
+ *      });  
+ *
+ *
+ *      return () => {
+ *           unsubscribe(unsubscribeControlPower);
+ *      }
+ * }, [] );
+ * 
+ * const onPbPressed = () => {
+ *      let count = 1;
+ *      dispatch({
+ *          topic: "my-awesome-topic",
+ *          payload: count
+ *      });
+ * }
+ * 
+ * ```
+ * 
+ */
+export class HubTauri extends HubBase {
+
+    /**
+     * Constructor
+     */
+    constructor() {
+        super();
+
+
+        /**
+         * Receive broadcasts from the Tauri backend. Data is received as a payload object,
+         * {topic: string, payload: any | null}
+         * From here, we extract into a form HubBase can use, then pass on to the
+         * dispatcher.
+         * 
+         * Events without a topic are ignored.
+         */
+        event.listen('autocore://broadcast_event', (ev: any) => {
+
+            let objPayload = JSON.parse(ev.payload);
+
+            if (objPayload.topic !== undefined && objPayload.topic !== null ) {
+                
+                if ( objPayload.payload !== undefined && objPayload.payload !== null ) {
+                    this.publish(objPayload.topic, objPayload.payload);
+                }
+                else {
+                    this.publish(objPayload.topic, undefined);
+                }
+                                
+            }
+            
+        });
+
+    }
+
+    /**
+     * Invoke a method in the rust backend.
+     * 
+     * @param fname method name
+     * @param payload Optional data payload
+     * @returns The return value of the backend method.
+     */
+    invoke(fname: string, payload?: object | undefined): Promise<object> {
+
+        console.log(JSON.stringify(event));
+
+        if (payload !== undefined && payload !== null) {
+            console.log(`Payload: ${JSON.stringify(payload)}`);
+            return invoke(fname, payload as InvokeArgs);
+        }            
+        else {
+            return invoke(fname);
+        }
+            
+    }
+
+}

package/src/hub/index.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 21:07:29
+ * -----
+ * Last Modified: 2024-03-08 10:20:06
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+import { HubBase as Hub } from './HubBase';
+import { HubTauri } from './HubTauri';
+import { HubSocketIo } from "./HubSocketIo";
+import {HubSimulate} from "./HubSimulate"
+
+/**
+ * Creates a connection to the backend.
+ * @returns Hub 
+ */
+export function createHub(): Hub {
+    if (window.__TAURI__) {
+        return new HubTauri();
+    }
+    else if (window.location.port !== '80' && window.location.port !== '443' ) {
+    
+        // We're loaded in some development environment
+        return new HubSimulate();
+
+    } 
+    else {
+        return new HubSocketIo();
+    }
+}
+
+
+// Export HubBase for convenience to save importing throughout the
+// application.
+export {HubBase as Hub} from './HubBase';
+export {HubTauri}
+export {HubSocketIo}
+export {HubSimulate}

package/terser.config.cjs

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-15 09:43:10
+ * Author: Thomas C. Bitsky Jr.
+ * -----
+ * Last Modified: 2024-01-15 10:11:50
+ * Modified By: Thomas C. Bitsky Jr.
+ * -----
+ * 
+ */
+
+
+
+module.exports = {
+    compress: {
+        drop_console: true, // Remove console statements (optional)
+        warnings: false,   // Suppress warnings (optional)
+        keep_fnames: true, // Preserve function names for better debugging
+        keep_fargs: true,  // Preserve function arguments for better hinting
+    },
+    mangle: true,
+    format: {
+      comments: /@preserve|@license|@cc_on|^!|^\*!|^\*\*!/,
+    },    
+};

package/todo.md

@@ -0,0 +1,18 @@
+# TODO
+
+## Integration
+- [x] Hub class to route to and from the back end
+- -[x] The Hub should also be the dispatcher. I can't think of a reason they should be separate.
+- [x] Wrapper to link any control and one of its properties or methods to a signal from the backend
+- - [x] update value from a topic
+- - [ ] write topic and callback for accepted value
+
+## Controls
+- [ ] Alarm List Dialog
+- [ ] Alarm List Widget
+- [ ] Settings view
+- [-] JoyPad widget
+- [-] On-screen keyboard (based on https://github.com/hodgef/simple-keyboard)
+- - [-] Num pad
+- - [-] Text input
+

package/tools/copy-distribution-files.cjs

@@ -0,0 +1,73 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-08 13:01:16
+ * Author: Thomas C. Bitsky Jr.
+ * -----
+ * Last Modified: 2024-01-15 07:32:57
+ * Modified By: Thomas C. Bitsky Jr.
+ * -----
+ * 
+ */
+
+
+//
+// Copy items into dist needed for publication of the package.
+// Typescript files will be created autmatically, but other
+// resources need to be specified.
+//
+
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Copy css files recursively.
+ * @param {*} srcDir 
+ * @param {*} destDir 
+ */
+function copyFilesByType(srcDir, destDir, extension) {
+    // Create the destination directory if it doesn't exist
+    if (!fs.existsSync(destDir)) {
+        fs.mkdirSync(destDir, { recursive: true });
+    }
+
+    // Read the contents of the source directory
+    fs.readdir(srcDir, { withFileTypes: true }, (err, files) => {
+        if (err) {
+            console.error('Error reading directory:', err);
+            return;
+        }
+
+        files.forEach(file => {
+            const srcPath = path.join(srcDir, file.name);
+            const destPath = path.join(destDir, file.name);
+
+            if (file.isDirectory()) {
+                // If it's a directory, recurse into it
+                copyFilesByType(srcPath, destPath, extension);
+            } else if (path.extname(file.name) === `.${extension}`) {
+                // If it's a CSS file, copy it
+                fs.copyFile(srcPath, destPath, err => {
+                    if (err) {
+                        console.error('Error copying file:', err);
+                    }
+                });
+            }
+        });
+    });
+}
+
+
+// // destination.txt will be created or overwritten by default.
+// fs.copyFile("./package.json", './dist/package.json', (err) =>
+// {
+//     if (err) throw err;
+// });
+
+// copy in the files that won't be included by tsc
+
+copyFilesByType("./src", "./dist", "css");
+copyFilesByType("./src", "./dist", "ttf");
+copyFilesByType("./src", "./dist", "woff2");
+// JavaScript files won't be processed by tsc
+//copyFilesByType("./src", "./dist", "js");

package/tools/minify.cjs

@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-15 09:48:58
+ * Author: Thomas C. Bitsky Jr.
+ * -----
+ * Last Modified: 2024-01-16 16:30:39
+ * Modified By: Thomas C. Bitsky Jr.
+ * -----
+ * 
+ * These scripts recursively minify a directory in-place based on the settings in
+ * ./terser.config.cjs
+ * 
+ */
+
+
+
+const terser = require("terser");
+const fs = require("fs");
+const path = require("path");
+const terserConfig = require("../terser.config.cjs");
+
+const distFolder = './dist'; // Path to your dist folder
+
+
+
+
+/**
+ * Recursively minify the JS files in a folder.
+ * @param {string} s Target folder
+ */
+function minifyFolder(s) {
+
+    fs.readdirSync(s).forEach(file => {
+        const filePath = path.join(s, file);
+
+        console.log(`Minifying path ${filePath}`);
+
+        if (fs.lstatSync(filePath).isFile() && filePath.endsWith('.js')) {
+            console.log(`Minifying ${file}...`);
+            const fileContents = fs.readFileSync(filePath, 'utf8');
+            terser.minify(fileContents, terserConfig).then(minified => {
+                fs.writeFileSync(filePath, minified.code);
+            }).catch(error => {
+                console.error(`Error minifying ${file}:`, error);
+            });
+        }
+        else if (fs.lstatSync(filePath).isDirectory()) {
+            minifyFolder(filePath)
+        }
+    });
+}
+
+//
+// Start the process by scanning the top-level distribution folder.
+//
+minifyFolder(distFolder);

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+      "target": "ES2020", // Set the JavaScript language version for emitted JavaScript and include compatible library declarations
+      "outDir": "./dist", // Specify an output folder for all emitted files
+      "useDefineForClassFields": true, // Use 'define' semantics for class fields (as opposed to 'set')
+  
+      // Specify a set of compiled-in library files to be included in the compilation context
+      "lib": ["ES2020", "DOM", "DOM.Iterable"], 
+  
+      "module": "ESNext", // Specify what module code is generated (here, it's the latest module standard)
+      "declaration": true, // Generate the types files (*.d.ts)      
+      "skipLibCheck": true, // Skip type checking of declaration files (*.d.ts)
+
+      /* Bundler mode */
+      "moduleResolution": "node", // Choose the module resolution strategy: 'node' for Node.js
+      "allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
+      "resolveJsonModule": true, // Include modules imported with '.json' extension
+      "isolatedModules": true, // Ensure each file can be safely transpiled without relying on other imports
+      "noEmit": false, // Do not emit outputs (if set to true, no files are emitted)
+      "jsx": "react-jsx", // Specify JSX code generation: 'preserve', 'react', or 'react-jsx' (new transform)
+  
+      /* Linting */
+      "strict": true, // Enable all strict type checking options
+      "noUnusedLocals": true, // Report errors on unused locals
+      "noUnusedParameters": true, // Report errors on unused parameters
+      "noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
+    },
+    "include": ["src"], // Specify file glob patterns to include in the program
+    "exclude": [        // Specify file globa patterns to exclude from compilation
+        "node_modules",
+        "dist"
+    ]    
+  }
+  

package/typedoc.json

@@ -0,0 +1,13 @@
+{
+    "out": "docs",
+    "entryPoints": ["src"],
+    "entryPointStrategy": "expand",
+    "tsconfig": "tsconfig.json",
+    "exclude": [
+        "**/*.test.ts", "**/node_modules"
+    ],
+    "name": "autocore-react",
+    "includeVersion": true,
+    "readme": "readme.md",
+    "theme": "default"
+}