@interncom/diplomatic 0.0.0 → 0.0.2

package/README.md

@@ -5,7 +5,7 @@ Secure sync layer for web apps.
 ## Usage
 
 ```tsx
-import { useClient, StateManager, useStateWatcher } from '@interncom/diplomatic'
+import { StateManager, useStateWatcher, localStorageStore, DiplomaticClient } from '@interncom/diplomatic'
 
 const appState = { count: 0 };
 const stateMgr = new StateManager(async (op) => {
@@ -14,21 +14,27 @@ const stateMgr = new StateManager(async (op) => {
   }
 })
 
+const client = new DiplomaticClient({
+  seed: "0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF",
+  hostURL: "https://diplomatic-cloudflare-host.root-a00.workers.dev",
+  stateManager: stateMgr,
+  store: localStorageStore,
+});
+
 export default function App() {
-  const [client] = useClient({
-    seed: "0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF0123456789ABCDEF",
-    hostURL: "https://diplomatic-cloudflare-host.root-a00.workers.dev",
-    stateManager: stateMgr,
-  })
   const count = useStateWatcher(stateMgr, "count", () => appState.count)
   const inc = () => client.upsert("count", count + 1)
 
   return (
-    <>
+    <div style={{ width: "100vw", textAlign: "center" }}>
       <h1>COUNT</h1>
       <h2>{count}</h2>
-      <button type="button" onClick={inc}>+1</button>
-    </>
+      <button onClick={inc}>+1</button>
+    </div>
   )
 }
 ```
+
+## Development
+
+To deploy npm package: `npm publish --public`.

package/dist/client.d.ts

@@ -18,6 +18,8 @@ export default class DiplomaticClient {
     hostKeyPair?: KeyPair;
     lastFetchedAt?: string;
     constructor(params: IDiplomaticClientParams);
+    websocket?: WebSocket;
+    connect: (hostURL: URL) => Promise<void>;
     init(params: IDiplomaticClientParams): Promise<void>;
     loadSeed(): Promise<void>;
     setSeed(seed: Uint8Array): Promise<void>;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 import useClient from "./useClient";
 import { StateManager, useStateWatcher } from './state';
-export { useClient, StateManager, useStateWatcher, };
+import { localStorageStore } from "./localStorageStore";
+import DiplomaticClient from "./client";
+export { useClient, StateManager, useStateWatcher, localStorageStore, DiplomaticClient, };

package/dist/index.js

@@ -11,7 +11,7 @@ var __export = (target, all) => {
 };
 
 // src/useClient.ts
-import { useState, useEffect as useEffect2, useCallback } from "react";
+import { useState, useEffect as useEffect2, useCallback, useMemo } from "react";
 
 // node_modules/@msgpack/msgpack/dist.es5+esm/utils/utf8.mjs
 function utf8Count(str) {
@@ -8288,7 +8288,7 @@ var msgpack = {
 var webClientAPI = new DiplomaticClientAPI(msgpack, crypto_default);
 var api_default = webClientAPI;
 
-// src/ops.ts
+// ../shared/ops.ts
 function genUpsertOp(type, body, version = 0) {
   return {
     ts: (/* @__PURE__ */ new Date()).toISOString(),
@@ -8314,6 +8314,31 @@ var DiplomaticClient = class {
     this.applier = params.stateManager.apply;
     this.init(params);
   }
+  websocket;
+  connect = async (hostURL) => {
+    if (!this.hostKeyPair) {
+      return;
+    }
+    const url = new URL(hostURL);
+    url.protocol = "ws";
+    const keyHex = btoh(this.hostKeyPair?.publicKey);
+    url.searchParams.set("key", keyHex);
+    this.websocket = new WebSocket(url);
+    this.websocket.onopen = (e) => {
+      console.log("CONNECTED");
+    };
+    this.websocket.onclose = (e) => {
+      console.log("DISCONNECTED");
+      this.connect(hostURL);
+    };
+    this.websocket.onmessage = (e) => {
+      console.log(`RECEIVED: ${e.data}`);
+      this.processDeltas();
+    };
+    this.websocket.onerror = (e) => {
+      console.log(`ERROR: ${e}`);
+    };
+  };
   async init(params) {
     await this.store.init?.();
     if (params.seed) {
@@ -8329,6 +8354,10 @@ var DiplomaticClient = class {
     } else {
       await this.loadHost();
     }
+    if (this.hostURL) {
+      await this.connect(this.hostURL);
+    }
+    await this.processDeltas();
     this.listener?.(this.state);
   }
   async loadSeed() {
@@ -8524,14 +8553,19 @@ var localStorageStore = new LocalStorageStore();
 var initialState = "loading";
 function useClient(params) {
   const [state, setState] = useState(initialState);
-  const [client, setClient] = useState(new DiplomaticClient({ store: localStorageStore, ...params }));
+  console.log("rendering useClient");
+  const fullParams = useMemo(
+    () => ({ store: localStorageStore, ...params }),
+    [params]
+  );
+  const [client, setClient] = useState(new DiplomaticClient(fullParams));
   useEffect2(() => {
     client.listener = setState;
   }, [client]);
   const reset = useCallback(() => {
-    setClient(new DiplomaticClient({ store: localStorageStore, ...params }));
+    setClient(new DiplomaticClient(fullParams));
     setState(initialState);
-  }, [params]);
+  }, [fullParams]);
   usePollingSync(client, params.refreshInterval ?? 1e3);
   return [client, state, reset];
 }
@@ -8594,7 +8628,9 @@ function useStateWatcher(mgr, opType, callback) {
   return val;
 }
 export {
+  DiplomaticClient,
   StateManager,
+  localStorageStore,
   useClient,
   useStateWatcher
 };

package/dist/shared/ops.d.ts

@@ -0,0 +1,3 @@
+import { type IOp } from './types.ts';
+export declare function genUpsertOp<T>(type: string, body: T, version?: number): IOp;
+export declare function isOp(op: any): op is IOp;

package/dist/shared/server.d.ts

@@ -1,11 +1,12 @@
-import type { IHostCrypto, IMsgpackCodec, IStorage } from "./types.ts";
+import type { IHostCrypto, IMsgpackCodec, IStorage, IWebsocketNotifier } from "./types.ts";
 export declare class DiplomaticServer {
     hostID: string;
     regToken: string;
     storage: IStorage;
     codec: IMsgpackCodec;
     crypto: IHostCrypto;
-    constructor(hostID: string, regToken: string, storage: IStorage, codec: IMsgpackCodec, crypto: IHostCrypto);
+    notifier: IWebsocketNotifier;
+    constructor(hostID: string, regToken: string, storage: IStorage, codec: IMsgpackCodec, crypto: IHostCrypto, notifier: IWebsocketNotifier);
     corsHandler: (request: Request) => Promise<Response>;
     handler: (request: Request) => Promise<Response>;
 }

package/dist/shared/types.d.ts

@@ -55,4 +55,8 @@ export interface IMsgpackCodec {
     decode: (packed: ArrayBuffer | Uint8Array) => unknown;
     decodeAsync: (stream: ReadableStream<Uint8Array>) => Promise<unknown>;
 }
+export interface IWebsocketNotifier {
+    handler: (request: Request, hasUser: (pubKeyHex: string) => Promise<boolean>) => Promise<Response>;
+    notify: (pubKeyHex: string) => Promise<void>;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interncom/diplomatic",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "type": "module",
   "description": "Secure sync layer",
   "main": "dist/index.js",