@mml-io/networked-dom-web 0.18.1 → 0.19.0

package/README.md

@@ -0,0 +1,34 @@
+# Networked DOM Web
+#### `@mml-io/networked-dom-web`
+
+[![npm version](https://img.shields.io/npm/v/@mml-io/networked-dom-web.svg?style=flat)](https://www.npmjs.com/package/@mml-io/networked-dom-web)
+
+This package contains the `NetworkedDOMWebsocket` class which can connect to a WebSocket server using the `networked-dom-v0.1` protocol and interact with a `NetworkedDOM` document.
+
+## Example Usage 
+
+```typescript
+// Create an element to contain the remote document's elements
+const targetElement = document.createElement("div");
+
+const networkedDOMWebsocket = new NetworkedDOMWebsocket(
+  "wss://example.com/some-networked-dom-websocket",
+  NetworkedDOMWebsocket.createWebSocket, // Use the default websocket creator function
+  targetElement,
+  (time: number) => {
+    // The time of the remote document has updated
+  },
+  (status: NetworkedDOMWebsocketStatus) => {
+    // Handle status changes
+  },
+  { // Optional configuration
+    tagPrefix: "m-",// Limit which elements can be created
+    replacementTagPrefix: "mml-", // If elements do not have the tagPrefix, prepend this prefix
+  },
+);
+
+// Events for elements from the remote document can be sent to the remote document
+function sendEventToRemoteDocument(element: HTMLElement, event: CustomEvent<{ element: HTMLElement }>) {
+  networkedDOMWebsocket.handleEvent(element, event);
+}
+```

package/build/DOMSanitizer.d.ts

@@ -1,5 +1,10 @@
+export type DOMSanitizerOptions = {
+    tagPrefix?: string;
+    replacementTagPrefix?: string;
+};
 export declare class DOMSanitizer {
-    static sanitise(node: HTMLElement): void;
+    static sanitise(node: HTMLElement, options?: DOMSanitizerOptions): HTMLElement;
+    static replaceNodeTagName(node: HTMLElement, newTagName: string): HTMLElement;
     static stripAllAttributes(node: HTMLElement): void;
     static IsASCIIDigit(c: string): boolean;
     static IsASCIIAlpha(c: string): boolean;

package/build/NetworkedDOMWebsocket.d.ts

@@ -1,10 +1,23 @@
 export type NetworkedDOMWebsocketFactory = (url: string) => WebSocket;
 export declare enum NetworkedDOMWebsocketStatus {
     Connecting = 0,
-    Connected = 1,
-    Reconnecting = 2,
-    Disconnected = 3
+    ConnectionOpen = 1,// The websocket is open and connected, but no messages have been received yet
+    Connected = 2,// The websocket is open and connected, and messages are being received
+    Reconnecting = 3,
+    Disconnected = 4
 }
+export declare function NetworkedDOMWebsocketStatusToString(status: NetworkedDOMWebsocketStatus): string;
+export type NetworkedDOMWebsocketOptions = {
+    tagPrefix?: string;
+    replacementTagPrefix?: string;
+};
+export type NetworkedDOMWebsocketAdapter = {
+    receiveMessage: (message: MessageEvent) => void;
+    handleEvent: (element: HTMLElement, event: CustomEvent<{
+        element: HTMLElement;
+    }>) => void;
+    clearContents: () => boolean;
+};
 /**
  * NetworkedDOMWebsocket is a client for a NetworkedDOMServer. It connects to a server on the provided url and receives
  * updates to the DOM. It also sends events to the server for interactions with the DOM.
@@ -12,37 +25,27 @@ export declare enum NetworkedDOMWebsocketStatus {
  * The NetworkedDOMWebsocket is attached to a parentElement and synchronizes the received DOM under that element.
  */
 export declare class NetworkedDOMWebsocket {
-    private idToElement;
-    private elementToId;
-    private websocket;
-    private currentRoot;
     private url;
     private websocketFactory;
     private parentElement;
-    private timeCallback;
-    private statusUpdateCallback;
+    private timeCallback?;
+    private statusUpdateCallback?;
+    private options;
+    private websocket;
+    private websocketAdapter;
     private stopped;
     private backoffTime;
     private status;
     static createWebSocket(url: string): WebSocket;
-    constructor(url: string, websocketFactory: NetworkedDOMWebsocketFactory, parentElement: HTMLElement, timeCallback?: (time: number) => void, statusUpdateCallback?: (status: NetworkedDOMWebsocketStatus) => void);
+    constructor(url: string, websocketFactory: NetworkedDOMWebsocketFactory, parentElement: HTMLElement, timeCallback?: ((time: number) => void) | undefined, statusUpdateCallback?: ((status: NetworkedDOMWebsocketStatus) => void) | undefined, options?: NetworkedDOMWebsocketOptions);
     private setStatus;
-    private isHTMLElement;
-    private isText;
     private createWebsocketWithTimeout;
     private waitBackoffTime;
     private startWebSocketConnectionAttempt;
-    private handleIncomingWebsocketMessage;
     stop(): void;
     handleEvent(element: HTMLElement, event: CustomEvent<{
         element: HTMLElement;
     }>): void;
-    private send;
-    private handleTextChanged;
-    private handleChildrenChanged;
-    private removeChildElementIds;
-    private handleSnapshot;
-    private handleAttributeChange;
-    private handleNewElement;
-    private clearContents;
 }
+export declare function isHTMLElement(node: unknown, rootNode: HTMLElement): node is HTMLElement;
+export declare function isText(node: unknown, rootNode: HTMLElement): node is Text;

package/build/NetworkedDOMWebsocketV01Adapter.d.ts

@@ -0,0 +1,24 @@
+import { NetworkedDOMWebsocketAdapter, NetworkedDOMWebsocketOptions } from "./NetworkedDOMWebsocket";
+export declare class NetworkedDOMWebsocketV01Adapter implements NetworkedDOMWebsocketAdapter {
+    private websocket;
+    private parentElement;
+    private connectedCallback;
+    private timeCallback?;
+    private options;
+    private idToElement;
+    private elementToId;
+    private currentRoot;
+    constructor(websocket: WebSocket, parentElement: HTMLElement, connectedCallback: () => void, timeCallback?: ((time: number) => void) | undefined, options?: NetworkedDOMWebsocketOptions);
+    handleEvent(element: HTMLElement, event: CustomEvent<{
+        element: HTMLElement;
+    }>): void;
+    private send;
+    clearContents(): boolean;
+    receiveMessage(event: MessageEvent): void;
+    private handleTextChanged;
+    private handleChildrenChanged;
+    private removeChildElementIds;
+    private handleSnapshot;
+    private handleAttributeChange;
+    private handleNewElement;
+}

package/build/NetworkedDOMWebsocketV02Adapter.d.ts

@@ -0,0 +1,32 @@
+import { NetworkedDOMWebsocketAdapter, NetworkedDOMWebsocketOptions } from "./NetworkedDOMWebsocket";
+export declare class NetworkedDOMWebsocketV02Adapter implements NetworkedDOMWebsocketAdapter {
+    private websocket;
+    private parentElement;
+    private connectedCallback;
+    private timeCallback?;
+    private options;
+    private idToElement;
+    private elementToId;
+    private hiddenPlaceholderElements;
+    private currentRoot;
+    private batchMode;
+    private batchMessages;
+    constructor(websocket: WebSocket, parentElement: HTMLElement, connectedCallback: () => void, timeCallback?: ((time: number) => void) | undefined, options?: NetworkedDOMWebsocketOptions);
+    handleEvent(element: HTMLElement, event: CustomEvent<{
+        element: HTMLElement;
+    }>): void;
+    private send;
+    clearContents(): boolean;
+    receiveMessage(event: MessageEvent): void;
+    private applyMessage;
+    private handleTextChanged;
+    private handleChangeHiddenFrom;
+    private handleChildrenAdded;
+    private handleChildrenRemoved;
+    private removeChildElementIds;
+    private handleSnapshot;
+    private handleDocumentTime;
+    private handleAttributeChange;
+    private handleNewElement;
+    private handlePing;
+}