@vuu-ui/vuu-data-remote 4.0.0-alpha.9 → 4.0.0-beta.1

package/package.json

@@ -1,26 +1,24 @@
 {
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.0-beta.1",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
-  "type": "module",
   "scripts": {
-    "build": "node ../../scripts/run-build-worker.mjs && node ../../scripts/run-build-rslib.ts",
-    "build:dev": "node ../../scripts/run-build-worker.mjs &&  node ../../scripts/run-build.mjs -- --dev",
-    "build:worker": "node ../../scripts/run-build-worker.mjs",
+    "build": "node ../../scripts/build-worker.ts && node ../../scripts/run-build-rslib.ts",
+    "build:dev": "node ../../scripts/build-worker.ts &&  node ../../scripts/run-build.mjs -- --dev",
+    "build:worker": "node ../../scripts/build-worker.ts",
     "test": "vitest run",
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.9"
+    "@vuu-ui/vuu-data-types": "4.0.0-beta.1",
+    "@vuu-ui/vuu-table-types": "4.0.0-beta.1",
+    "@vuu-ui/vuu-filter-types": "4.0.0-beta.1",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-beta.1"
   },
   "dependencies": {
-    "@vuu-ui/vuu-data-editing": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.9"
+    "@vuu-ui/vuu-filter-parser": "4.0.0-beta.1",
+    "@vuu-ui/vuu-utils": "4.0.0-beta.1"
   },
   "files": [
     "README.md",
@@ -30,10 +28,12 @@
   "exports": {
     ".": {
       "import": "./src/index.js",
+      "default": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
   "module": "./src/index.js",
   "name": "@vuu-ui/vuu-data-remote",
+  "type": "module",
   "types": "types/index.d.ts"
 }

package/src/ConnectionManager.js

@@ -2,55 +2,20 @@ import { DeferredPromise, EventEmitter, isConnectionQualityMetrics, isRequestRes
 import { isWebSocketConnectionStatus } from "./WebSocketConnection.js";
 import { DedicatedWorker } from "./DedicatedWorker.js";
 import { shouldMessageBeRoutedToDataSource } from "./data-source.js";
-const DEFAULT_CONNECTION_ID = "portal";
-class ConnectionChannel {
-    onConnectionStatus;
-    onConnectionMetrics;
+class ConnectionManager extends EventEmitter {
+    static #instance;
     #connectionStatus = "closed";
     #deferredServerAPI = new DeferredPromise();
     #pendingRequests = new Map();
     #viewports = new Map();
     #worker;
-    #serverAPI;
-    constructor(onConnectionStatus, onConnectionMetrics){
-        this.onConnectionStatus = onConnectionStatus;
-        this.onConnectionMetrics = onConnectionMetrics;
+    constructor(){
+        super();
         this.#worker = new DedicatedWorker(this.handleMessageFromWorker);
-        this.#serverAPI = {
-            subscribe: (message, callback)=>{
-                if (this.#viewports.get(message.viewport)) throw Error("ConnectionManager attempting to subscribe with an existing viewport id");
-                this.#viewports.set(message.viewport, {
-                    status: "subscribing",
-                    request: message,
-                    postMessageToClientDataSource: callback
-                });
-                this.#worker.send({
-                    type: "subscribe",
-                    ...message
-                });
-            },
-            unsubscribe: (viewport)=>{
-                this.#worker.send({
-                    type: "unsubscribe",
-                    viewport
-                });
-            },
-            send: (message)=>{
-                this.#worker.send(message);
-            },
-            destroy: (viewportId)=>{
-                if (viewportId && this.#viewports.has(viewportId)) this.#viewports.delete(viewportId);
-            },
-            rpcCall: async (message)=>this.asyncRequest(message),
-            select: async (selectRequest)=>this.asyncRequest(selectRequest),
-            getTableList: async ()=>this.asyncRequest({
-                    type: "GET_TABLE_LIST"
-                }),
-            getTableSchema: async (table)=>this.asyncRequest({
-                    type: "GET_TABLE_META",
-                    table
-                })
-        };
+    }
+    static get instance() {
+        if (!ConnectionManager.#instance) ConnectionManager.#instance = new ConnectionManager();
+        return ConnectionManager.#instance;
     }
     get connectionStatus() {
         return this.#connectionStatus;
@@ -58,45 +23,28 @@ class ConnectionChannel {
     get connected() {
         return "connected" === this.#connectionStatus || "reconnected" === this.#connectionStatus;
     }
-    get serverAPI() {
-        return this.#deferredServerAPI.promise;
-    }
     async connect(options, throwOnRejected = false) {
         try {
             const result = await this.#worker.connect(options);
-            if ("connected" === result.status || "reconnected" === result.status) this.#deferredServerAPI.resolve(this.#serverAPI);
+            if ("connected" === result) this.#deferredServerAPI.resolve(this.connectedServerAPI);
             return result;
         } catch (err) {
-            if (throwOnRejected) throw err;
-            return {
-                status: "rejected"
-            };
+            if (!throwOnRejected) return "connection-failed";
+            throw err;
         }
     }
     disableActiveSubscriptions() {
+        console.log("[ConnectionManager] disableActiveSubscriptions");
         this.#worker.send({
             type: "disable-all-active"
         });
     }
     enableActiveSubscriptions() {
+        console.log("[ConnectionManager] enableActiveSubscriptions");
         this.#worker.send({
             type: "enable-all-active"
         });
     }
-    async disconnect() {
-        try {
-            this.#worker.send({
-                type: "disconnect"
-            });
-            this.#deferredServerAPI = new DeferredPromise();
-            return "disconnected";
-        } catch  {
-            return "rejected";
-        }
-    }
-    destroy() {
-        this.#worker.terminate();
-    }
     handleMessageFromWorker = (message)=>{
         if (shouldMessageBeRoutedToDataSource(message)) {
             const viewport = this.#viewports.get(message.clientViewportId);
@@ -104,8 +52,8 @@ class ConnectionChannel {
             else console.error(`[ConnectionManager] ${message.type} message received, viewport not found`);
         } else if (isWebSocketConnectionStatus(message)) {
             this.#connectionStatus = message;
-            this.onConnectionStatus(message);
-        } else if (isConnectionQualityMetrics(message)) this.onConnectionMetrics(message);
+            this.emit("connection-status", message);
+        } else if (isConnectionQualityMetrics(message)) this.emit("connection-metrics", message);
         else if (isRequestResponse(message)) {
             const { requestId } = message;
             if (this.#pendingRequests.has(requestId)) {
@@ -116,112 +64,71 @@ class ConnectionChannel {
             } else console.warn("%cConnectionManager Unexpected message from the worker", "color:red;font-weight:bold;");
         }
     };
+    get serverAPI() {
+        return this.#deferredServerAPI.promise;
+    }
+    connectedServerAPI = {
+        subscribe: (message, callback)=>{
+            if (this.#viewports.get(message.viewport)) throw Error("ConnectionManager attempting to subscribe with an existing viewport id");
+            this.#viewports.set(message.viewport, {
+                status: "subscribing",
+                request: message,
+                postMessageToClientDataSource: callback
+            });
+            this.#worker.send({
+                type: "subscribe",
+                ...message
+            });
+        },
+        unsubscribe: (viewport)=>{
+            this.#worker.send({
+                type: "unsubscribe",
+                viewport
+            });
+        },
+        send: (message)=>{
+            this.#worker.send(message);
+        },
+        destroy: (viewportId)=>{
+            if (viewportId && this.#viewports.has(viewportId)) this.#viewports.delete(viewportId);
+        },
+        rpcCall: async (message)=>this.asyncRequest(message),
+        select: async (selectRequest)=>this.asyncRequest(selectRequest),
+        getTableList: async ()=>this.asyncRequest({
+                type: "GET_TABLE_LIST"
+            }),
+        getTableSchema: async (table)=>this.asyncRequest({
+                type: "GET_TABLE_META",
+                table
+            })
+    };
     asyncRequest = (msg)=>{
         const requestId = uuid();
         this.#worker.send({
             requestId,
             ...msg
         });
-        return new Promise((resolve)=>{
+        return new Promise((resolve, reject)=>{
             this.#pendingRequests.set(requestId, {
-                resolve: (value)=>resolve(value)
+                resolve,
+                reject
             });
         });
     };
-}
-class ConnectionManager extends EventEmitter {
-    static #instance;
-    #connections = new Map();
-    #connectionStatusListeners = new Map();
-    constructor(){
-        super();
-    }
-    static get instance() {
-        if (!ConnectionManager.#instance) ConnectionManager.#instance = new ConnectionManager();
-        return ConnectionManager.#instance;
-    }
-    getConnection(connectionId = DEFAULT_CONNECTION_ID) {
-        const existing = this.#connections.get(connectionId);
-        if (existing) return existing;
-        const connection = new ConnectionChannel((status)=>{
-            this.#connectionStatusListeners.get(connectionId)?.forEach((listener)=>listener(status));
-            if (connectionId === DEFAULT_CONNECTION_ID) this.emit("connection-status", status);
-        }, (metrics)=>{
-            if (connectionId === DEFAULT_CONNECTION_ID) this.emit("connection-metrics", metrics);
-        });
-        this.#connections.set(connectionId, connection);
-        return connection;
-    }
-    get connectionStatus() {
-        return this.connectionStatusFor(DEFAULT_CONNECTION_ID);
-    }
-    get connected() {
-        return this.connectedFor(DEFAULT_CONNECTION_ID);
-    }
-    connectionStatusFor(connectionId) {
-        return this.getConnection(connectionId).connectionStatus;
-    }
-    connectedFor(connectionId) {
-        return this.getConnection(connectionId).connected;
-    }
-    onConnectionStatus(connectionId, listener) {
-        const listeners = this.#connectionStatusListeners.get(connectionId) ?? new Set();
-        listeners.add(listener);
-        this.#connectionStatusListeners.set(connectionId, listeners);
-        return ()=>{
-            listeners.delete(listener);
-            if (0 === listeners.size) this.#connectionStatusListeners.delete(connectionId);
-        };
-    }
-    async connect(options, throwOnRejected = false) {
-        return this.connectTo(DEFAULT_CONNECTION_ID, options, throwOnRejected);
-    }
-    async connectTo(connectionId, options, throwOnRejected = false) {
-        const result = await this.connectWithLoginResponseTo(connectionId, options, throwOnRejected);
-        return "rejected" === result.status ? "connection-failed" : result.status;
-    }
-    async connectWithLoginResponseTo(connectionId, options, throwOnRejected = false) {
-        return this.getConnection(connectionId).connect(options, throwOnRejected);
-    }
-    disableActiveSubscriptions() {
-        for (const connection of this.#connections.values())connection.disableActiveSubscriptions();
-    }
-    enableActiveSubscriptions() {
-        for (const connection of this.#connections.values())connection.enableActiveSubscriptions();
-    }
-    disableActiveSubscriptionsFor(connectionId) {
-        this.getConnection(connectionId).disableActiveSubscriptions();
-    }
-    enableActiveSubscriptionsFor(connectionId) {
-        this.getConnection(connectionId).enableActiveSubscriptions();
-    }
-    get serverAPI() {
-        return this.serverAPIFor(DEFAULT_CONNECTION_ID);
-    }
-    serverAPIFor(connectionId) {
-        return this.getConnection(connectionId).serverAPI;
-    }
     async disconnect() {
-        return this.disconnectFrom(DEFAULT_CONNECTION_ID);
-    }
-    async disconnectFrom(connectionId) {
-        return this.getConnection(connectionId).disconnect();
-    }
-    async destroyConnection(connectionId) {
-        const connection = this.#connections.get(connectionId);
-        if (connection) {
-            await connection.disconnect();
-            connection.destroy();
-            this.#connections.delete(connectionId);
+        try {
+            this.#worker.send({
+                type: "disconnect"
+            });
+            this.#deferredServerAPI = new DeferredPromise();
+            return "disconnected";
+        } catch (err) {
+            return "rejected";
         }
-        this.#connectionStatusListeners.delete(connectionId);
     }
     destroy() {
-        for (const connection of this.#connections.values())connection.destroy();
-        this.#connections.clear();
-        this.#connectionStatusListeners.clear();
+        this.#worker.terminate();
     }
 }
 var src_ConnectionManager = ConnectionManager.instance;
 export default src_ConnectionManager;
-export { DEFAULT_CONNECTION_ID };

package/src/DedicatedWorker.js

@@ -21,10 +21,7 @@ class DedicatedWorker {
             if ("ready" === message.type) {
                 window.clearTimeout(timer);
                 deferredWorker.resolve(worker);
-            } else if ("connected" === message.type) this.#deferredConnection?.resolve({
-                loginResponse: message.loginResponse,
-                status: "connected"
-            });
+            } else if ("connected" === message.type) this.#deferredConnection?.resolve("connected");
             else if ("connection-failed" === message.type) this.#deferredConnection?.reject(message.reason);
             else onMessage(message);
         };

package/src/LostConnectionHandler.js

@@ -0,0 +1,89 @@
+function _to_primitive(input, hint) {
+    if ("object" !== _type_of(input) || null === input) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (void 0 !== prim) {
+        var res = prim.call(input, hint || "default");
+        if ("object" !== _type_of(res)) return res;
+        throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === hint ? String : Number)(input);
+}
+function _to_property_key(arg) {
+    var key = _to_primitive(arg, "string");
+    return "symbol" === _type_of(key) ? key : String(key);
+}
+function _type_of(obj) {
+    return obj && "u" > typeof Symbol && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+let _computedKey;
+class RetryOptionsImpl {
+    retryIntervals;
+    ind = 0;
+    constructor(retryIntervals){
+        this.retryIntervals = retryIntervals;
+        console.log("[RetryOptionsImpl] constructor");
+    }
+    next() {
+        this.ind = Math.min(this.retryIntervals.length, this.ind + 1);
+    }
+    get remaining() {
+        return this.retryIntervals.length - this.ind;
+    }
+    get interval() {
+        if (this.ind === this.retryIntervals.length) return -1;
+        return 1000 * this.retryIntervals[this.ind];
+    }
+}
+function RetryOptions(retryIntervals) {
+    if (Array.isArray(retryIntervals)) return new RetryOptionsImpl(retryIntervals);
+    throw Error("[lostConnectionHandler] RetryOptions, invalid retryIntervals");
+}
+const defaultRetryIntervals = [
+    1,
+    2,
+    3,
+    5,
+    10,
+    30,
+    60,
+    120
+];
+_computedKey = _to_property_key(Symbol.asyncIterator);
+class RetryGenerator {
+    vuuAuth;
+    options;
+    constructor(vuuAuth, options){
+        this.vuuAuth = vuuAuth;
+        this.options = options;
+        console.log("[RetryGenerator] constructor");
+    }
+    async *[_computedKey]() {
+        let connected = false;
+        do {
+            await new Promise((resolve)=>setTimeout(resolve, this.options.interval));
+            try {
+                await this.vuuAuth.login();
+                connected = true;
+                yield "connected";
+            } catch (err) {}
+            this.options.next();
+        }while (!connected && -1 !== this.options.interval)
+        if (!connected) yield "connection-failed";
+    }
+}
+class LostConnectionHandler {
+    vuuAuth;
+    retryIntervals;
+    constructor(vuuAuth, retryIntervals = defaultRetryIntervals){
+        this.vuuAuth = vuuAuth;
+        this.retryIntervals = retryIntervals;
+    }
+    async reconnect() {
+        for await (const result of new RetryGenerator(this.vuuAuth, RetryOptions(this.retryIntervals))){
+            console.log(`  ... async iterator result = ${result}`);
+            if ("connected" === result) return result;
+        }
+        return "connection-failed";
+    }
+}
+export { LostConnectionHandler, RetryGenerator, RetryOptions };

package/src/VuuAuthProvider.js

@@ -0,0 +1,78 @@
+import { getCookieValue } from "@vuu-ui/vuu-utils";
+import { parseVuuUserFromToken } from "./authenticate.js";
+class VuuAuthProvider {
+    authEndpoint;
+    constructor(authEndpoint){
+        this.authEndpoint = authEndpoint;
+    }
+    login = async (username, password)=>{
+        const date = new Date();
+        const days = 1;
+        date.setTime(date.getTime() + 24 * days * 3600000);
+        if (username && password) {
+            const { token } = await this.getVuuTokenWithUsernameAndPassword(username, password);
+            document.cookie = `vuu-auth-user=${username};expires=${date.toUTCString()};path=/`;
+            document.cookie = `vuu-auth-password=${password};expires=${date.toUTCString()};path=/`;
+            document.cookie = `vuu-auth-token=${token};expires=${date.toUTCString()};path=/`;
+            return this.redirectToApplication();
+        }
+        {
+            const userName = getCookieValue("vuu-auth-user");
+            const password = getCookieValue("vuu-auth-password");
+            if (!userName || !password) return this.redirectToLoginPage();
+            {
+                const { authorizations, token } = await this.getVuuTokenWithUsernameAndPassword(userName, password);
+                document.cookie = `vuu-auth-token=${token};expires=${date.toUTCString()};path=/`;
+                return {
+                    authorizations,
+                    user: {
+                        userName
+                    },
+                    token
+                };
+            }
+        }
+    };
+    async getVuuTokenWithUsernameAndPassword(username, password) {
+        const response = await fetch(this.authEndpoint, {
+            method: "POST",
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json",
+                "access-control-allow-origin": location.host
+            },
+            body: JSON.stringify({
+                username,
+                password
+            })
+        });
+        if (response.ok) {
+            const vuuAuthToken = response.headers.get("vuu-auth-token");
+            if ("string" == typeof vuuAuthToken && vuuAuthToken.length > 0) {
+                const { authorizations } = parseVuuUserFromToken(vuuAuthToken);
+                return {
+                    authorizations,
+                    token: vuuAuthToken
+                };
+            }
+            throw Error("Authentication failed auth token not returned by server");
+        }
+        throw Error(`Authentication failed, ${response.status}`);
+    }
+    clear() {
+        document.cookie = "vuu-auth-user= ; expires = Thu, 01 Jan 1970 00:00:00 GMT";
+        document.cookie = "vuu-auth-password= ; expires = Thu, 01 Jan 1970 00:00:00 GMT";
+        document.cookie = "vuu-auth-token= ; expires = Thu, 01 Jan 1970 00:00:00 GMT";
+    }
+    redirectToLoginPage() {
+        window.location.href = "login.html";
+    }
+    redirectToApplication() {
+        window.location.href = "index.html";
+    }
+    logout() {
+        this.clear();
+        this.redirectToLoginPage();
+    }
+}
+export { VuuAuthProvider };

package/src/VuuAuthenticator.js

@@ -0,0 +1,36 @@
+import ConnectionManager from "./ConnectionManager.js";
+const VuuAuthTokenIssuePolicy = {
+    BearerToken: "bearer-token",
+    UsernamePassword: "username-password"
+};
+class VuuAuthenticator {
+    authProvider;
+    authTokenIssuePolicy;
+    websocketUrl;
+    constructor({ authProvider, authTokenIssuePolicy = VuuAuthTokenIssuePolicy.BearerToken, websocketUrl }){
+        this.authProvider = authProvider;
+        this.authTokenIssuePolicy = authTokenIssuePolicy;
+        this.websocketUrl = websocketUrl;
+    }
+    openWebsocketConnection = async (vuuToken)=>{
+        await ConnectionManager.connect({
+            url: this.websocketUrl,
+            token: vuuToken
+        }, true);
+    };
+    login = async ()=>{
+        const { authorizations, user, token, websocket = true } = await this.authProvider.login();
+        if (token && user) {
+            if (websocket) await this.openWebsocketConnection(token);
+            return [
+                user,
+                authorizations
+            ];
+        }
+        throw Error("[VuuAuthenticator] login failed");
+    };
+    logout = ()=>{
+        this.authProvider.logout();
+    };
+}
+export { VuuAuthTokenIssuePolicy, VuuAuthenticator };

package/src/VuuDataSource.js

@@ -16,7 +16,6 @@ class VuuDataSource extends BaseDataSource {
     bufferSize;
     server = null;
     rangeRequest;
-    #connectionId;
     #allColumns;
     #autosubscribeColumns = [];
     #pendingVisualLink;
@@ -33,13 +32,12 @@ class VuuDataSource extends BaseDataSource {
     #tableSchema;
     isRemote = true;
     table;
-    constructor({ session, connectionId = "portal", sessionTableMessageColumn, ...props }){
+    constructor({ session, sessionTableMessageColumn, ...props }){
         super(props);
         const { bufferSize = 100, table, visualLink } = props;
         if (!table) throw Error("RemoteDataSource constructor called without table");
         this.bufferSize = bufferSize;
         this.table = table;
-        this.#connectionId = connectionId;
         this.#pendingVisualLink = visualLink;
         this.#session = session;
         this.#sessionTableMessageColumn = sessionTableMessageColumn;
@@ -51,15 +49,11 @@ class VuuDataSource extends BaseDataSource {
     }
     async subscribe(subscribeProps, callback) {
         super.subscribe(subscribeProps, callback);
-        let viewport = subscribeProps.viewport ?? this.viewport;
-        if (!viewport) {
-            viewport = uuid();
-            this.viewport = viewport;
-        }
+        const { viewport = this.viewport || (this.viewport = uuid()) } = subscribeProps;
         if ("disabled" === this.#status || "disabling" === this.#status || "enabling" === this.#status) return void this.enable(callback);
         if ("initialising" !== this.#status && "unsubscribed" !== this.#status) throw Error(`[VuuDataSource] invalid status ${this.#status} for subscribe`);
         this.#status = "subscribing";
-        this.server = await ConnectionManager.serverAPIFor(this.#connectionId);
+        this.server = await ConnectionManager.serverAPI;
         const { bufferSize } = this;
         const { columns, ...dataSourceConfig } = combineFilters(this.config);
         this.server?.subscribe({
@@ -440,7 +434,6 @@ class VuuDataSource extends BaseDataSource {
             assertExpectedSessionTable(sessionTable, effectiveOverrides?.table);
             const sessionDataSource = new VuuDataSource({
                 ...sessionDataSourceConfig(this.config, effectiveOverrides?.columns),
-                connectionId: this.#connectionId,
                 table: sessionTable,
                 viewport: sessionTable.table
             });
@@ -483,6 +476,10 @@ class VuuDataSource extends BaseDataSource {
         });
     }
     async endEditSession(saveChanges = false, force = false) {
+        if ("unsubscribed" === this.#status || !this.server || !this.viewport) {
+            if (!saveChanges) return;
+            throw Error("Cannot save changes: server or viewport are undefined");
+        }
         const type = "RPC_REQUEST";
         const rpcName = "endEditSession";
         const rpcResponse = await this.rpcRequest(saveChanges ? {

package/src/WebSocketConnection.js

@@ -81,14 +81,7 @@ class WebSocketConnection extends EventEmitter {
         const timer = setTimeout(()=>{
             throw Error(`Failed to open WebSocket connection to ${url}, timed out after ${connectionTimeout}ms`);
         }, connectionTimeout);
-        console.log(`create websocket ${url} ${protocols}`);
-        try {
-            this.#ws = new WebSocket(url, protocols);
-        } catch (e) {
-            console.error(e);
-            return;
-        }
-        const ws = this.#ws;
+        const ws = this.#ws = new WebSocket(url, protocols);
         ws.onopen = ()=>{
             this.connectionStatus = "websocket-open";
             clearTimeout(timer);