modality-kit 0.8.5 → 0.8.6

package/dist/index.js

@@ -5644,9 +5644,429 @@ class JSONRPCManager extends JSONRPCCall {
     this.methods.clear();
   }
 }
+// src/websocket-client.ts
+var logger3 = getLoggerInstance("WebSocket-Client");
+
+class WebSocketClient {
+  ws = null;
+  url;
+  config = {
+    initialReconnectDelay: 1000,
+    maxReconnectDelay: 30000,
+    maxReconnectAttempts: 10,
+    callTimeout: 5000,
+    heartbeatInterval: 30000,
+    enableKeepAlive: true,
+    handleMessage: (_validMessage, _ws) => {}
+  };
+  connectionId = null;
+  cleanupInterval = null;
+  isManualDisconnect = false;
+  reconnectAttempts = 0;
+  reconnectDelay;
+  heartbeatInterval = null;
+  constructor(url, config) {
+    if (!this.isValidWebSocketUrl(url)) {
+      throw new Error(`Invalid WebSocket URL: ${url}. Must use ws:// or wss:// protocol.`);
+    }
+    this.config = { ...this.config, ...config };
+    this.url = url;
+    this.reconnectDelay = this.config.initialReconnectDelay;
+  }
+  isValidWebSocketUrl(url) {
+    try {
+      const parsed = new URL(url);
+      return parsed.protocol === "ws:" || parsed.protocol === "wss:";
+    } catch {
+      return false;
+    }
+  }
+  stopCleanupInterval() {
+    if (this.cleanupInterval !== null) {
+      clearInterval(this.cleanupInterval);
+      this.cleanupInterval = null;
+    }
+  }
+  stopHeartbeat() {
+    if (this.heartbeatInterval !== null) {
+      clearInterval(this.heartbeatInterval);
+      this.heartbeatInterval = null;
+    }
+  }
+  startHeartbeat() {
+    if (!this.config.enableKeepAlive)
+      return;
+    this.stopHeartbeat();
+    this.heartbeatInterval = setInterval(() => {
+      if (this.isConnected()) {
+        this.send({ method: "ping" });
+      }
+    }, this.config.heartbeatInterval);
+  }
+  attemptReconnect() {
+    if (this.reconnectAttempts < this.config.maxReconnectAttempts) {
+      this.reconnectAttempts++;
+      logger3.info(`Attempting to reconnect (${this.reconnectAttempts}/${this.config.maxReconnectAttempts}) in ${this.reconnectDelay}ms`);
+      setTimeout(() => {
+        this.isManualDisconnect = false;
+        this.connect();
+      }, this.reconnectDelay);
+      this.reconnectDelay = Math.min(this.reconnectDelay * 2, this.config.maxReconnectDelay);
+    } else {
+      logger3.error("Max reconnection attempts reached, will try again in 60 seconds");
+      setTimeout(() => {
+        this.reconnectAttempts = 0;
+        this.reconnectDelay = this.config.initialReconnectDelay;
+        this.attemptReconnect();
+      }, 300000);
+    }
+  }
+  onOpen(event) {
+    logger3.info("WebSocket connection opened:", event);
+  }
+  onClose(event) {
+    logger3.info("WebSocket connection closed:", event);
+  }
+  getClientId() {
+    const url = new URL(this.url);
+    return url.searchParams.get("clientId") ?? (this.connectionId ? String(this.connectionId) : "");
+  }
+  send(data) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      try {
+        const message = JSON.stringify({
+          ...data,
+          jsonrpc: "2.0",
+          timestamp: new Date().toISOString()
+        });
+        this.ws.send(message);
+        logger3.info("Message sent:", message);
+        return true;
+      } catch (error) {
+        logger3.error("Error sending message:", error);
+        return false;
+      }
+    } else {
+      logger3.warn("WebSocket is not connected during send operation.");
+      return false;
+    }
+  }
+  isConnected() {
+    return this.ws?.readyState === WebSocket.OPEN;
+  }
+  getInfo() {
+    return {
+      url: this.url,
+      connected: this.isConnected(),
+      connectionId: this.connectionId,
+      clientId: this.getClientId()
+    };
+  }
+  forceReconnect() {
+    logger3.info("Forcing reconnection...");
+    this.isManualDisconnect = false;
+    this.reconnectAttempts = 0;
+    this.reconnectDelay = this.config.initialReconnectDelay;
+    if (this.ws) {
+      this.ws.close(1000, "Force reconnect");
+    } else {
+      this.connect();
+    }
+  }
+  getHeartbeatInterval() {
+    return this.config.heartbeatInterval;
+  }
+  getEnableKeepAlive() {
+    return this.config.enableKeepAlive;
+  }
+  disconnect() {
+    this.isManualDisconnect = true;
+    this.stopCleanupInterval();
+    this.stopHeartbeat();
+    if (this.ws) {
+      this.ws.close(1000, "Manual disconnect");
+      this.ws = null;
+      this.connectionId = null;
+    }
+  }
+  connect() {
+    try {
+      this.isManualDisconnect = false;
+      this.ws = new WebSocket(this.url);
+      this.ws.onopen = (event) => {
+        logger3.info("WebSocket connected:", event);
+        this.reconnectAttempts = 0;
+        this.reconnectDelay = this.config.initialReconnectDelay;
+        this.startHeartbeat();
+        this.onOpen(event);
+      };
+      this.ws.onclose = (event) => {
+        this.connectionId = null;
+        this.stopHeartbeat();
+        this.onClose(event);
+        if (!this.isManualDisconnect) {
+          this.attemptReconnect();
+        }
+      };
+      this.ws.onmessage = (event) => {
+        logger3.info("WebSocket message received:", event.data);
+        try {
+          const message = JSONRPCUtils.deserialize(event.data);
+          if (!message) {
+            throw new Error(`deserialize returned null or undefined ${event.data}`);
+          }
+          const validMessage = JSONRPCUtils.validateMessage(message);
+          if (validMessage.valid) {
+            const message2 = validMessage.message;
+            if (message2.method === "server.connected") {
+              this.connectionId = (message2.params || {}).connectionId;
+            } else {
+              this.config.handleMessage(validMessage, this);
+            }
+          } else {
+            throw new Error(`Invalid message: ${validMessage.error}`);
+          }
+        } catch (error) {
+          logger3.error("Error deserializing WebSocket message:", error);
+          return;
+        }
+      };
+    } catch (error) {
+      logger3.error("Error creating WebSocket connection:", error);
+    }
+  }
+}
+// src/ReactiveComponent.ts
+class ReactiveComponent extends HTMLElement {
+  #state;
+  #isRendering = false;
+  #pendingUpdate = false;
+  #hasRendered = false;
+  #shadow;
+  #options;
+  #delegatedEventListeners = {};
+  #eventTypes = [
+    "click",
+    "dblclick",
+    "mousedown",
+    "mouseup",
+    "mousemove",
+    "mouseover",
+    "mouseout",
+    "focus",
+    "blur",
+    "change",
+    "input",
+    "submit",
+    "keydown",
+    "keyup",
+    "keypress"
+  ];
+  _stores;
+  _storeListeners;
+  constructor(options = {}) {
+    super();
+    this.#options = options;
+    this.#state = options.initialState || {};
+  }
+  get state() {
+    return Object.freeze({ ...this.#state });
+  }
+  setState(updator, _action, prevState) {
+    const oldState = prevState || { ...this.#state };
+    let newUpdates;
+    if (typeof updator === "function") {
+      newUpdates = updator(this.#state);
+    } else {
+      newUpdates = updator;
+    }
+    const newState = { ...this.#state, ...newUpdates };
+    if (this.#options.shouldUpdate && !this.#options.shouldUpdate(newState, oldState)) {
+      return this.#state;
+    } else {
+      this.#state = newState;
+      this.#scheduleUpdate(oldState);
+      return newState;
+    }
+  }
+  forceUpdate() {
+    this.#scheduleUpdate({ ...this.#state });
+  }
+  #scheduleUpdate(previousState) {
+    if (this.#isRendering || this.#pendingUpdate) {
+      return;
+    }
+    this.#pendingUpdate = true;
+    queueMicrotask(() => {
+      if (this.#pendingUpdate && this.isConnected) {
+        this.#performUpdate(previousState);
+      }
+    });
+  }
+  #performUpdate(previousState) {
+    this.#isRendering = true;
+    this.#pendingUpdate = false;
+    const wasFirstRender = !this.#hasRendered;
+    const prevState = previousState || { ...this.#state };
+    try {
+      this.#updateDOM();
+      this.#hasRendered = true;
+      if (!wasFirstRender && typeof this.componentDidUpdate === "function") {
+        this.componentDidUpdate(this.#state, prevState);
+      }
+    } catch (error) {
+      console.error("Error during component update:", error);
+    } finally {
+      this.#isRendering = false;
+    }
+  }
+  static #trustedTypesPolicy = (() => {
+    if (typeof window !== "undefined" && window.trustedTypes && window.trustedTypes.createPolicy) {
+      try {
+        return window.trustedTypes.createPolicy("reactive-component", {
+          createHTML: (string) => string
+        });
+      } catch (e) {
+        console.warn("Failed to create trusted types policy:", e);
+        return null;
+      }
+    }
+    return null;
+  })();
+  #safeSetInnerHTML(element, html) {
+    if (ReactiveComponent.#trustedTypesPolicy) {
+      element.innerHTML = ReactiveComponent.#trustedTypesPolicy.createHTML(html);
+    } else {
+      element.innerHTML = html;
+    }
+  }
+  #updateDOM() {
+    if (!this.#shadow) {
+      this.#shadow = this.shadowRoot || this.attachShadow({ mode: "open" });
+      this.#setupEventDelegation();
+    }
+    if (typeof window !== "undefined" && window.trustedTypes && window.trustedTypes.emptyHTML) {
+      this.#shadow.innerHTML = window.trustedTypes.emptyHTML;
+    } else {
+      while (this.#shadow.firstChild) {
+        this.#shadow.removeChild(this.#shadow.firstChild);
+      }
+    }
+    const renderResult = this.render();
+    if (typeof renderResult === "string") {
+      const template = document.createElement("template");
+      this.#safeSetInnerHTML(template, renderResult);
+      this.#shadow.appendChild(template.content.cloneNode(true));
+    } else if (renderResult instanceof DocumentFragment || renderResult instanceof Element) {
+      this.#shadow.appendChild(renderResult);
+    }
+  }
+  #setupEventDelegation() {
+    this.#eventTypes.forEach((eventType) => {
+      const listener = (e) => {
+        this.#handleDelegatedEvent(e);
+      };
+      this.#delegatedEventListeners[eventType] = listener;
+      const usePassive = !["mousedown", "keydown", "submit"].includes(eventType);
+      this.#shadow.addEventListener(eventType, listener, {
+        passive: usePassive
+      });
+    });
+  }
+  #handleDelegatedEvent(e) {
+    const eventType = e.type;
+    const target = e.target;
+    if (!target)
+      return;
+    const handlerAttribute = `data-${eventType}`;
+    const elementsWithHandlers = this.#shadow.querySelectorAll(`[${handlerAttribute}]`);
+    Array.from(elementsWithHandlers).forEach((element) => {
+      if (target.isSameNode(element) || element.contains(target)) {
+        const handlerName = element.getAttribute(handlerAttribute);
+        if (handlerName && typeof this[handlerName] === "function") {
+          this[handlerName](e);
+        }
+      }
+    });
+  }
+  connectedCallback() {
+    if (this._stores && this._stores.length > 0) {
+      this._storeListeners = [];
+      this._stores.forEach((store) => {
+        const boundSetState = this.setState.bind(this);
+        store.addListener(boundSetState);
+        this._storeListeners.push({ store, listener: boundSetState });
+        const initialState = store.getState();
+        this.setState(initialState);
+      });
+    }
+    this.#performUpdate();
+    if (typeof this.componentDidMount === "function") {
+      this.componentDidMount();
+    }
+  }
+  disconnectedCallback() {
+    if (this.#shadow && Object.keys(this.#delegatedEventListeners).length > 0) {
+      this.#eventTypes.forEach((eventType) => {
+        const listener = this.#delegatedEventListeners[eventType];
+        if (listener) {
+          this.#shadow.removeEventListener(eventType, listener);
+        }
+      });
+      this.#delegatedEventListeners = {};
+    }
+    if (this._storeListeners && this._storeListeners.length > 0) {
+      this._storeListeners.forEach(({ store, listener }) => {
+        store.removeListener(listener);
+      });
+      this._storeListeners = [];
+    }
+  }
+}
+function render(componentName, props = {}, stores) {
+  const element = document.createElement(componentName);
+  const { appendTo = document.body, ...restProps } = props;
+  Object.keys(restProps).forEach((key) => {
+    const value = restProps[key];
+    if (value != null) {
+      const stringValue = typeof value === "object" ? JSON.stringify(value) : String(value);
+      element.setAttribute(key, stringValue);
+    }
+  });
+  if (stores && stores.length > 0) {
+    element._stores = stores;
+  }
+  if (appendTo instanceof HTMLElement) {
+    appendTo.appendChild(element);
+  }
+  return element;
+}
+var lazyStores = { current: {} };
+function registerStore(componentName, stores) {
+  const connectionSectionElement = document.querySelector("connection-section");
+  if (connectionSectionElement) {
+    connectionSectionElement._stores = stores;
+  } else {
+    lazyStores.current[componentName] = stores;
+  }
+}
+if (typeof document !== "undefined") {
+  document.addEventListener("DOMContentLoaded", () => {
+    const promise = Object.keys(lazyStores.current).map(async (componentName) => {
+      const connectionSectionElement = document.querySelector(componentName);
+      if (connectionSectionElement) {
+        connectionSectionElement._stores = lazyStores.current[componentName];
+        delete lazyStores.current[componentName];
+      }
+    });
+    Promise.all(promise);
+  });
+}
 export {
   withErrorHandling,
   setupAITools,
+  render,
+  registerStore,
   loadVersion,
   getLoggerInstance,
   formatSuccessResponse,
@@ -5654,7 +6074,9 @@ export {
   emptySchema,
   createDataPendingOperations,
   compressWithLanguageDetection as compressText,
+  WebSocketClient,
   exports_schemas_symbol as SymbolTypes,
+  ReactiveComponent,
   JSONRPCUtils,
   JSONRPCManager,
   JSONRPCErrorCode,

package/dist/types/ReactiveComponent.d.ts

@@ -11,7 +11,7 @@ type StateType<TState> = Partial<TState> | StateCallbackHandler<TState> | TState
 /**
  * Base class for reactive web components
  */
-export declare abstract class ReactiveHTMLElement<TState = any> extends HTMLElement {
+export declare abstract class ReactiveComponent<TState = any> extends HTMLElement {
     #private;
     _stores?: Array<any>;
     _storeListeners?: Array<{
@@ -60,5 +60,5 @@ export type { ReactiveComponentOptions };
  * Generic render function for ReactiveHTMLElement components
  * Creates and displays a component with specified componentName and optional stores
  */
-export declare function render<T extends ReactiveHTMLElement>(componentName: string, props?: Record<string, any>, stores?: Array<any>): T;
+export declare function render<T extends ReactiveComponent>(componentName: string, props?: Record<string, any>, stores?: Array<any>): T;
 export declare function registerStore(componentName: string, stores: Array<any>): void;

package/dist/types/index.d.ts

@@ -14,3 +14,5 @@ export { JSONRPCUtils, JSONRPCErrorCode } from "./schemas/jsonrpc";
 export type { JSONRPCMessage, JSONRPCRequest, JSONRPCNotification, JSONRPCResponse, JSONRPCBatchRequest, JSONRPCBatchResponse, JSONRPCErrorResponse, JSONRPCValidationResult, JSONRPCError, JSONRPCParams, CommandExecuteParams, NotificationSendParams, } from "./schemas/jsonrpc";
 export { JSONRPCManager } from "./jsonrpc-manager";
 export type { JSONRPCManagerEvents, JSONRPCManagerConfig, } from "./jsonrpc-manager";
+export { WebSocketClient } from "./websocket-client";
+export { ReactiveComponent, render, registerStore } from "./ReactiveComponent";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.5",
+  "version": "0.8.6",
   "name": "modality-kit",
   "repository": {
     "type": "git",