Fix example build and make it a slider

.gitignore

@@ -120,7 +120,11 @@ ui-tests/test-results/
 ui-tests/playwright-report/
 
 examples/*.ipynb
-# Hatchling 
+# Hatchling
 yjs_widgets/_version.py
 
-.yarn/
+.yarn/
+
+# Generated code and extension
+examples/simple-yjs-widget/simple_yjs_widget/_version.py
+examples/simple-yjs-widget/simple_yjs_widget/labextension/

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

@@ -7,19 +7,64 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "from ypywidgets import Widget, reactive"
+    "from ypywidgets.comm import CommWidget\n",
+    "from pycrdt import Map"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "18d1ca71-1943-4902-b642-06e3d812e23f",
+   "id": "6d9538c9-4858-4c9d-b347-18965660115d",
    "metadata": {},
    "outputs": [],
    "source": [
-    "class MyWidget(Widget):\n",
-    "    foo = reactive(\"\")\n",
-    "    bar = reactive(\"\")"
+    "class MySlider(CommWidget):\n",
+    "    def __init__(self, value=50, min=0, max=100, step=1):\n",
+    "        super().__init__(\n",
+    "            comm_metadata={\n",
+    "                \"ymodel_name\": \"MySlider\",\n",
+    "                \"create_ydoc\": True,\n",
+    "            }\n",
+    "        )\n",
+    "\n",
+    "        self.ydoc[\"state\"] = self._state = Map()\n",
+    "\n",
+    "        self.min = min\n",
+    "        self.max = max\n",
+    "        self.step = step\n",
+    "        self.value = value\n",
+    "\n",
+    "    @property\n",
+    "    def value(self):\n",
+    "        return self._state['value']\n",
+    "\n",
+    "    @value.setter\n",
+    "    def value(self, v):\n",
+    "        self._state['value'] = v\n",
+    "\n",
+    "    @property\n",
+    "    def min(self):\n",
+    "        return self._state['min']\n",
+    "\n",
+    "    @min.setter\n",
+    "    def min(self, v):\n",
+    "        self._state['min'] = v\n",
+    "\n",
+    "    @property\n",
+    "    def max(self):\n",
+    "        return self._state['max']\n",
+    "\n",
+    "    @max.setter\n",
+    "    def max(self, v):\n",
+    "        self._state['max'] = v\n",
+    "\n",
+    "    @property\n",
+    "    def step(self):\n",
+    "        return self._state['step']\n",
+    "\n",
+    "    @step.setter\n",
+    "    def step(self, v):\n",
+    "        self._state['step'] = v"
    ]
   },
   {
@@ -29,28 +74,79 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "w = MyWidget()\n",
+    "w = MySlider()\n",
     "w"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "72a7799e-ce21-43ed-865c-77fa1fc69eb2",
+   "id": "9269a3f1-a061-478f-8728-7393a4aec2d0",
    "metadata": {},
    "outputs": [],
    "source": [
-    "w.foo = 3"
+    "w.value"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "d7289dc9-29c1-4422-8962-1b013bfda40a",
+   "id": "8ac7ea5c-8315-44eb-aa62-f223f86d267d",
    "metadata": {},
    "outputs": [],
    "source": [
-    "w.bar = 4"
+    "w.value = 98"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "bd2c92fb-9653-4de5-8a20-d463205f3a9e",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "w.value = 36"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "3a5680c6-77ae-4f71-a982-b3447dcb4fd0",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "w.value"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "55896ccc-a128-4abf-a34d-4a50272946dd",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "w2 = MySlider(max=200, step=2, value=152)\n",
+    "w2"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c54528b0-6eae-4601-b6f6-ab2f31630815",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "w2.value"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "23380f74-83ea-4409-a990-a0b8958dde2b",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "w2.value"
    ]
   }
  ],
@@ -70,7 +166,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.3"
+   "version": "3.13.12"
   }
  },
  "nbformat": 4,

examples/simple-yjs-widget/package.json

@@ -54,7 +54,7 @@
     "yjs-widgets": "^0.3.3"
   },
   "devDependencies": {
-    "@jupyterlab/builder": "~4.0.0",
+    "@jupyterlab/builder": "^4",
     "@types/node": "^16.11.10",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
@@ -81,6 +81,12 @@
   "jupyterlab": {
     "extension": true,
     "outputDir": "simple_yjs_widget/labextension",
-    "webpackConfig": "./extension.webpack.config.js"
+    "webpackConfig": "./extension.webpack.config.js",
+    "sharedPackages": {
+      "yjs-widgets": {
+        "singleton": true,
+        "bundled": false
+      }
+    }
   }
 }

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

@@ -1,54 +1,60 @@
-import * as YjsWidgets from 'yjs-widgets';
+import {
+  IJupyterYModel,
+  JupyterYModel,
+  IJupyterYWidgetManager
+} from 'yjs-widgets';
+
+import * as Y from 'yjs';
 
 import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-class MyWidget {
-  constructor(yModel: YjsWidgets.IJupyterYModel, node: HTMLElement) {
+class MySlider {
+  constructor(yModel: IJupyterYModel, node: HTMLElement) {
     this.yModel = yModel;
     this.node = node;
-    this.yModel.sharedModel.setAttr('foo', '');
-    this.yModel.sharedModel.setAttr('bar', '');
-    yModel.sharedModel.attrsChanged.connect(() => {
-      this._attrsChanged();
-    });
-    setInterval(() => {
-      this._changeAttrs();
-    }, 1000);
-    this._changeAttrs();
+
+    this.state = this.yModel.sharedModel.ydoc.getMap('state');
+
+    this.state.observe(this._stateChanged.bind(this));
+
+    this.slider = document.createElement('input');
+    this.slider.setAttribute('type', 'range');
+
+    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);
   }
 
-  _changeAttrs(): void {
-    let foo: string = this.yModel.sharedModel.getAttr('foo') as string;
-    let bar: string = this.yModel.sharedModel.getAttr('bar') as string;
-    foo = `#${foo}`;
-    bar = `#${bar}`;
-    this.yModel.sharedModel.setAttr('foo', foo);
-    this.yModel.sharedModel.setAttr('bar', bar);
-    this.node.innerHTML = `foo=${foo}<br>bar=${bar}`;
+  _stateChanged(change: Y.YMapEvent<any>): void {
+    for (const key of change.keysChanged) {
+      this.slider[key] = change.target.toJSON()[key];
+    }
   }
 
-  _attrsChanged(): void {
-    const foo: string = this.yModel.sharedModel.getAttr('foo') as string;
-    const bar: string = this.yModel.sharedModel.getAttr('bar') as string;
-    this.node.innerHTML = `foo=${foo}<br>bar=${bar}`;
+  _sliderChanged(): void {
+    this.state.set('value', parseInt(this.slider.value ?? '50'));
   }
 
-  yModel: YjsWidgets.IJupyterYModel;
+  state: Y.Map<any>;
+  yModel: IJupyterYModel;
   node: HTMLElement;
+  slider: HTMLInputElement;
 }
 
 const simple: JupyterFrontEndPlugin<void> = {
   id: 'example:simple',
   autoStart: true,
-  requires: [YjsWidgets.IJupyterYWidgetManager],
-  activate: (
-    app: JupyterFrontEnd,
-    wm: YjsWidgets.IJupyterYWidgetManager
-  ): void => {
-    wm.registerWidget('MyWidget', YjsWidgets.JupyterYModel, MyWidget);
+  requires: [IJupyterYWidgetManager],
+  activate: (_: JupyterFrontEnd, wm: IJupyterYWidgetManager): void => {
+    wm.registerWidget('MySlider', JupyterYModel, MySlider);
   }
 };