Merge pull request #12 from jsonjoy-com/demo

Demo and fixes

Author: streamich

.gitignore

@@ -128,3 +128,5 @@ out.bin
 
 /gh-pages/
 /db/
+
+*storybook.log

package.json

@@ -55,6 +55,7 @@
     "demo:e2e:sample-api:uws": "ts-node src/__demos__/sample-api/main-uws.ts",
     "demo:e2e:json-crdt-server:http1": "ts-node src/__demos__/json-crdt-server/main-http1.ts",
     "demo:e2e:json-crdt-server:uws": "ts-node src/__demos__/json-crdt-server/main-uws.ts",
+    "demo:block-sync-ui": "webpack serve --config ./src/__demos__/block-sync-ui/webpack.config.js",
     "start:json-crdt-server:http1": "NODE_ENV=production PORT=80 JSON_CRDT_STORE=level pm2 start lib/__demos__/json-crdt-server/main-http1.js",
     "start": "NODE_ENV=production PORT=80 JSON_CRDT_STORE=level pm2 start lib/__demos__/json-crdt-server/main-http1.js --exp-backoff-restart-delay=100",
     "coverage": "yarn test --collectCoverage",
@@ -64,45 +65,62 @@
     "publish-coverage-and-typedocs": "yarn typedoc && yarn coverage && yarn build:pages && yarn deploy:pages"
   },
   "peerDependencies": {
+    "browser-level": "*",
     "rxjs": "7",
     "tslib": "2"
   },
   "peerDependenciesMeta": {
     "rxjs": {
       "optional": true
+    },
+    "browser-level": {
+      "optional": true
     }
   },
   "dependencies": {
     "@jsonjoy.com/jit-router": "^1.0.1",
     "@jsonjoy.com/json-pack": "^1.1.0",
     "@jsonjoy.com/util": "^1.3.0",
     "abstract-level": "^2.0.0",
-    "browser-level": "^1.0.1",
     "fs-zoo": "^1.1.0",
-    "json-joy": "^16.24.0",
+    "json-joy": "^16.25.0",
     "memfs": "^4.11.0",
     "memory-level": "^1.0.0",
+    "rx-use": "^1.8.1",
     "sonic-forest": "^1.0.3",
     "thingies": "^2.1.0"
   },
   "devDependencies": {
     "@types/benchmark": "^2.1.5",
     "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
     "@types/ws": "^8.5.10",
     "benchmark": "^2.1.4",
+    "browser-level": "^1.0.1",
     "classic-level": "^1.4.1",
+    "clickable-json": "^1.14.0",
+    "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
+    "nano-theme": "^1.4.2",
+    "nice-ui": "^1.9.2",
     "prettier": "^3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rimraf": "^5.0.5",
     "rxjs": "^7.8.1",
     "ts-jest": "^29.1.2",
+    "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
     "tslint": "^6.1.3",
     "tslint-config-common": "^1.6.2",
     "typedoc": "^0.25.13",
     "typescript": "^5.4.5",
     "uWebSockets.js": "uNetworking/uWebSockets.js#v20.44.0",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0",
     "websocket": "^1.0.34",
     "ws": "^8.16.0"
   },

src/__demos__/block-sync-ui/main.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {JsonCrdtRepo} from '../../json-crdt-repo/JsonCrdtRepo';
+import {ClickableJsonCrdt} from 'clickable-json';
+import {Model, Patch} from 'json-joy/lib/json-crdt';
+
+/* tslint:disable no-console */
+
+const repo = new JsonCrdtRepo({
+  wsUrl: 'wss://demo-iasd8921ondk0.jsonjoy.com/rpc',
+});
+const id = 'block-sync-ui-demo-id';
+const session = repo.make(id);
+
+const model = session.model;
+
+model.api.onPatch.listen((op) => {
+  console.log('onPatch', op + '');
+});
+
+model.api.onLocalChange.listen((op) => {
+  console.log('onLocalChange', op);
+});
+
+model.api.onFlush.listen((op) => {
+  console.log('onFlush', op + '');
+});
+
+model.api.onTransaction.listen((op) => {
+  console.log('onTransaction', op);
+});
+
+const Demo: React.FC = () => {
+  const [remote, setRemote] = React.useState<Model | null>(null);
+
+  return (
+    <div style={{padding: 32}}>
+      <ClickableJsonCrdt model={model} showRoot />
+      <hr />
+      <button
+        onClick={async () => {
+          const {block} = await repo.remote.read(id);
+          const model = Model.fromBinary(block.snapshot.blob);
+          for (const batch of block.tip)
+            for (const patch of batch.patches) model.applyPatch(Patch.fromBinary(patch.blob));
+          setRemote(model);
+        }}
+      >
+        Load remote state
+      </button>
+      <br />
+      {!!remote && (
+        <code style={{fontSize: 8}}>
+          <pre>{remote.toString()}</pre>
+        </code>
+      )}
+    </div>
+  );
+};
+
+const div = document.createElement('div');
+document.body.appendChild(div);
+const root = ReactDOM.createRoot(div);
+root.render(<Demo />);

src/__demos__/block-sync-ui/webpack.config.js

@@ -0,0 +1,35 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  entry: {
+    bundle: __dirname + '/main',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Development',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        loader: 'ts-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, '../../dist'),
+  },
+  devServer: {
+    port: 9949,
+    hot: false,
+  },
+};

src/browser/createBinaryWsRpcClient.ts

@@ -1,26 +1,34 @@
 import {CborJsonValueCodec} from '@jsonjoy.com/json-pack/lib/codecs/cbor';
 import {Writer} from '@jsonjoy.com/util/lib/buffers/Writer';
-import {RpcPersistentClient, WebSocketChannel} from '../common';
+import {RpcPersistentClient} from '../common/rpc/RpcPersistentClient';
+import {WebSocketChannel} from '../common/channel/channel';
 import {RpcCodec} from '../common/codec/RpcCodec';
 import {BinaryRpcMessageCodec} from '../common/codec/binary';
 
 /**
  * Constructs a JSON Reactive RPC client.
+ *
+ * ```typescript
+ * const client = createJsonWsRpcClient('wss://api.host.com', 'token');
+ * ```
+ *
  * @param url RPC endpoint.
  * @param token Authentication token.
  * @returns An RPC client.
  */
-export const createBinaryWsRpcClient = (url: string, token: string) => {
+export const createBinaryWsRpcClient = (url: string, token?: string) => {
   const writer = new Writer(1024 * 4);
   const msg = new BinaryRpcMessageCodec();
   const req = new CborJsonValueCodec(writer);
   const codec = new RpcCodec(msg, req, req);
+  const protocols: string[] = [codec.specifier()];
+  if (token) protocols.push(token);
   const client = new RpcPersistentClient({
     codec,
     channel: {
       newChannel: () =>
         new WebSocketChannel({
-          newSocket: () => new WebSocket(url, [codec.specifier(), token]),
+          newSocket: () => new WebSocket(url, protocols),
         }),
     },
   });

src/common/channel/channel.ts

@@ -195,6 +195,7 @@ export interface PersistentChannelParams<T extends string | Uint8Array = string
 
 /**
  * Channel which automatically reconnects if disconnected.
+ * @todo Check if this is still used.
  */
 export class PersistentChannel<T extends string | Uint8Array = string | Uint8Array> {
   /**

src/common/messages/messages.ts

@@ -1,6 +1,6 @@
-import {MsgPackEncoder} from '@jsonjoy.com/json-pack/lib/msgpack';
-import {CborEncoder} from '@jsonjoy.com/json-pack/lib/cbor/CborEncoder';
-import {JsonEncoder} from '@jsonjoy.com/json-pack/lib/json/JsonEncoder';
+import {MsgPackEncoder} from '@jsonjoy.com/json-pack/lib/msgpack'; // TODO: Should not statically import codecs
+import {CborEncoder} from '@jsonjoy.com/json-pack/lib/cbor/CborEncoder'; // TODO: Should not statically import codecs
+import {JsonEncoder} from '@jsonjoy.com/json-pack/lib/json/JsonEncoder'; // TODO: Should not statically import codecs
 import {BinaryMessageType} from '../codec/binary/constants';
 import {CompactMessageType} from '../codec/compact/constants';
 import {validateId, validateMethod} from '../rpc/validation';

src/json-crdt-repo/JsonCrdtRepo.ts

@@ -0,0 +1,73 @@
+import {BrowserLevel} from 'browser-level';
+import {createBinaryWsRpcClient} from '../browser/createBinaryWsRpcClient';
+import {DemoServerClient, DemoServerRemoteHistory} from './remote/DemoServerRemoteHistory';
+import {EditSessionFactory} from './session/EditSessionFactory';
+import {BinStrLevel, LevelLocalRepoPubSubMessage} from './local/level/types';
+import {PubSubBC} from './pubsub';
+import {Locks} from 'thingies/lib/Locks';
+import {LevelLocalRepo, LevelLocalRepoOpts} from './local/level/LevelLocalRepo';
+import {Model} from 'json-joy/lib/json-crdt';
+import {onLine$} from 'rx-use/lib/onLine$';
+import type {EditSession} from './session/EditSession';
+
+export interface JsonCrdtRepoOpts {
+  name: string;
+  wsUrl: string;
+}
+
+export class JsonCrdtRepo {
+  public readonly sessions: EditSessionFactory;
+  public readonly opts: JsonCrdtRepoOpts;
+  public readonly remote: DemoServerRemoteHistory;
+
+  constructor(opts: Partial<JsonCrdtRepoOpts>) {
+    this.opts = {
+      name: opts.name ?? 'json-crdt-repo',
+      wsUrl: opts.wsUrl ?? 'ws://localhost:9999/rpc',
+      ...opts,
+    };
+    const client = createBinaryWsRpcClient(this.opts.wsUrl) as DemoServerClient;
+    this.remote = new DemoServerRemoteHistory(client);
+    const kv: BinStrLevel = new BrowserLevel(this.opts.name, {
+      keyEncoding: 'utf8',
+      valueEncoding: 'view',
+    }) as any;
+    const pubsub = new PubSubBC<LevelLocalRepoPubSubMessage>(this.opts.name);
+    const locks = new Locks();
+    const sid: number = this.readSid();
+    const connected$ = onLine$ as LevelLocalRepoOpts['connected$'];
+    const repo = new LevelLocalRepo({
+      kv,
+      locks,
+      sid,
+      rpc: this.remote,
+      pubsub,
+      connected$,
+    });
+    this.sessions = new EditSessionFactory({
+      repo,
+      sid,
+    });
+  }
+
+  public readSid(): number {
+    const ls = window.localStorage;
+    const key = this.opts.name + '-sid';
+    const value = ls.getItem(key);
+    if (value) return +value;
+    const sid: number = Model.sid();
+    ls.setItem(key, sid + '');
+    return sid;
+  }
+
+  public genId(): string {
+    return 'id-' + Date.now().toString(36) + Math.random().toString(36).slice(2);
+  }
+
+  public make(id: string = this.genId()): EditSession {
+    const {session} = this.sessions.make({
+      id: [id],
+    });
+    return session;
+  }
+}

src/json-crdt-repo/__tests__/testbed.ts

@@ -6,6 +6,7 @@ import {MemoryLevel} from 'memory-level';
 import {pubsub as createPubsub} from '../pubsub';
 import {BinStrLevel, LevelLocalRepoPubSub} from '../local/level/types';
 import {EditSessionFactory} from '../session/EditSessionFactory';
+import {Model, Patch} from 'json-joy/lib/json-crdt';
 
 /* tslint:disable:no-console */
 
@@ -26,6 +27,15 @@ export class Testbed {
   public createBrowser(): BrowserTestbed {
     return new BrowserTestbed(this);
   }
+
+  public readonly getModelFromRemote = async (id: string | string[]): Promise<Model> => {
+    if (Array.isArray(id)) id = id.join('/');
+    const res = await this.remote.client.call('block.get', {id});
+    const model = Model.fromBinary(res.block.snapshot.blob);
+    for (const batch of res.block.tip)
+      for (const patch of batch.patches) model.applyPatch(Patch.fromBinary(patch.blob));
+    return model;
+  };
 }
 
 export class BrowserTestbed {
@@ -38,6 +48,7 @@ export class BrowserTestbed {
     public readonly sid: number = 12345678,
   ) {
     this.id = this.global.genId();
+    // TODO: Namespace locks to a specific repo.
     this.locks = new Locks();
     this.kv = new MemoryLevel<string, Uint8Array>({
       keyEncoding: 'utf8',
@@ -93,6 +104,10 @@ export class LocalRepoTestbed {
     });
   }
 
+  public readonly getModelFromRemote = async (id: string | string[]): Promise<Model> => {
+    return await this.tab.browser.global.getModelFromRemote(id);
+  };
+
   public readonly stop = async () => {
     await this.repo.stop();
   };