Fix example content

Author: martinRenou

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

@@ -7,19 +7,27 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "from ypywidgets import Widget, reactive"
+    "from ypywidgets.comm import CommWidget\n",
+    "from pycrdt import Text"
    ]
   },
   {
    "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 MyWidget(CommWidget):\n",
+    "    def __init__(self):\n",
+    "        super().__init__(\n",
+    "            comm_metadata={\n",
+    "                \"ymodel_name\": \"MyWidget\",\n",
+    "                \"create_ydoc\": True,\n",
+    "            }\n",
+    "        )\n",
+    "\n",
+    "        self.ydoc[\"foo\"] = self._foo = Text()"
    ]
   },
   {
@@ -36,21 +44,11 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "72a7799e-ce21-43ed-865c-77fa1fc69eb2",
+   "id": "9269a3f1-a061-478f-8728-7393a4aec2d0",
    "metadata": {},
    "outputs": [],
    "source": [
-    "w.foo = 3"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "d7289dc9-29c1-4422-8962-1b013bfda40a",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "w.bar = 4"
+    "w.ydoc[\"foo\"].insert(0, 'coucou ici')"
    ]
   }
  ],
@@ -70,7 +68,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

@@ -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,41 @@
-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) {
+  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();
-  }
 
-  _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}`;
+    this.foo = this.yModel.sharedModel.ydoc.getText('foo');
+
+    this.foo.observe(this._attrsChanged.bind(this));
   }
 
   _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}`;
+    this.node.innerHTML = `foo=${this.foo.toJSON()}`;
   }
 
-  yModel: YjsWidgets.IJupyterYModel;
+  foo: Y.Text;
+  yModel: IJupyterYModel;
   node: HTMLElement;
 }
 
 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('MyWidget', JupyterYModel, MyWidget);
   }
 };