Working example

Author: martinRenou

examples/simple-yjs-widget/notebooks/simple.ipynb

@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": null,
    "id": "2a245ed3-5838-4be6-ad5e-9fa75b9c7ab0",
    "metadata": {},
    "outputs": [],
@@ -13,7 +13,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": null,
    "id": "6d9538c9-4858-4c9d-b347-18965660115d",
    "metadata": {},
    "outputs": [],
@@ -64,55 +64,28 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": null,
    "id": "8cfb218c-e6fe-48da-a6ee-599bfe524e15",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "application/vnd.jupyter.ywidget-view+json": {
-       "model_id": "4a2524e43c7244d9b93aeb95383cdc85",
-       "version_major": 2,
-       "version_minor": 0
-      },
-      "text/plain": [
-       "<__main__.MySlider object at 0x7fe44436af90>"
-      ]
-     },
-     "execution_count": 3,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "w = MySlider()\n",
     "w"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": null,
    "id": "9269a3f1-a061-478f-8728-7393a4aec2d0",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "50.0"
-      ]
-     },
-     "execution_count": 4,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "w.value"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
+   "execution_count": null,
    "id": "8ac7ea5c-8315-44eb-aa62-f223f86d267d",
    "metadata": {},
    "outputs": [],
@@ -122,7 +95,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": null,
    "id": "bd2c92fb-9653-4de5-8a20-d463205f3a9e",
    "metadata": {},
    "outputs": [],
@@ -132,32 +105,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": null,
    "id": "3a5680c6-77ae-4f71-a982-b3447dcb4fd0",
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "36.0"
-      ]
-     },
-     "execution_count": 7,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "w.value"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "839e129b-4040-4293-9287-abe4bfd5491d",
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {

examples/simple-yjs-widget/src/index.ts

@@ -28,25 +28,24 @@ class MySlider {
     this.state.set('value', 50);
     this.state.set('step', 1);
 
-    this._stateChanged();
+    this.slider.min = this.state.get('min');
+    this.slider.max = this.state.get('max');
+    this.slider.value = this.state.get('value');
+    this.slider.step = this.state.get('step');
 
     this.slider.onchange = this._sliderChanged.bind(this);
 
     node.appendChild(this.slider);
   }
 
-  _stateChanged(): void {
-    this.slider.min = this.state.get('min');
-    this.slider.max = this.state.get('max');
-    this.slider.value = this.state.get('value');
-    this.slider.step = this.state.get('step');
+  _stateChanged(change: Y.YMapEvent<any>): void {
+    for (const key of change.keysChanged) {
+      this.slider[key] = change.target.toJSON()[key];
+    }
   }
 
   _sliderChanged(): void {
-    this.state.set('min', parseInt(this.slider.min ?? '0'));
-    this.state.set('max', parseInt(this.slider.max ?? '100'));
     this.state.set('value', parseInt(this.slider.value ?? '50'));
-    this.state.set('step', parseInt(this.slider.step ?? '1'));
   }
 
   state: Y.Map<any>;