test: 💍 setup text demo

Author: streamich

package.json

@@ -56,6 +56,7 @@
     "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:ui:json": "webpack serve --config ./src/__demos__/ui-json/webpack.config.js",
+    "demo:ui:text": "webpack serve --config ./src/__demos__/ui-text/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",

src/__demos__/ui-json/main.tsx

@@ -9,7 +9,7 @@ import {Model, Patch} from 'json-joy/lib/json-crdt';
 const repo = new JsonCrdtRepo({
   wsUrl: 'wss://demo-iasd8921ondk0.jsonjoy.com/rpc',
 });
-const id = 'block-sync-ui-demo-id';
+const id = 'block-sync-ui-demo-json';
 const session = repo.make(id);
 
 const model = session.model;

src/__demos__/ui-text/main.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {JsonCrdtRepo} from '../../json-crdt-repo/JsonCrdtRepo';
+import {bind} from 'collaborative-input';
+import {Model, Patch} from 'json-joy/lib/json-crdt';
+
+/* tslint:disable no-console */
+
+const main = async () => {
+  const repo = new JsonCrdtRepo({
+    wsUrl: 'wss://demo-iasd8921ondk0.jsonjoy.com/rpc',
+  });
+  const id = 'block-sync-ui-demo-text';
+  const session = await repo.sessions.load({id: [id], remote: {}});
+  const model = session.model;
+  const view = model.view();
+  if (typeof view !== 'string') model.api.root('');
+
+
+  const Demo: React.FC = () => {
+    const [remote, setRemote] = React.useState<Model | null>(null);
+    const ref = React.useRef<HTMLTextAreaElement | null>(null);
+    React.useLayoutEffect(() => {
+      if (!ref.current) return;
+      const unbind = bind(() => model.api.str([]), ref.current);
+      return () => unbind();
+    }, []);
+
+    return (
+      <div style={{padding: 32}}>
+        <textarea ref={ref} style={{width: 600, height: 300}}></textarea>
+        <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 />);
+};
+
+main().catch(() => {});

src/__demos__/ui-text/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,
+  },
+};