fixes

Author: jtpio

README.md

@@ -107,9 +107,11 @@ Limits of automatic cleanup:
 
 ## Jupyter Widgets
 
-The kernel provides built-in support for [Jupyter Widgets](https://ipywidgets.readthedocs.io/) (`ipywidgets`-compatible). Widget classes are available as globals in the kernel runtime — just instantiate and call `.display()`:
+The kernel provides built-in support for [Jupyter Widgets](https://ipywidgets.readthedocs.io/) (`ipywidgets`-compatible). Widget classes are available under `Jupyter.widgets`; destructure the ones you need before using them:
 
 ```javascript
+const { IntSlider } = Jupyter.widgets;
+
 const slider = new IntSlider({
   value: 50,
   min: 0,

examples/widgets.ipynb

@@ -3,7 +3,14 @@
   {
    "cell_type": "markdown",
    "metadata": {},
-   "source": "# Jupyter Widgets\n\nThe JavaScript kernel provides built-in widget classes that mirror the\n[ipywidgets](https://ipywidgets.readthedocs.io/) API. Widget classes are\navailable as globals — just instantiate and configure.\n\nWidgets **auto-display** when they are the last expression in a cell.\nYou can also call the global `display()` function explicitly, e.g. when assigning to a variable.\n\n> **Requirements:** `jupyterlab-widgets` and `@jupyter-widgets/controls` must\n> be available in the JupyterLite deployment."
+   "source": "# Jupyter Widgets\n\nThe JavaScript kernel provides built-in widget classes that mirror the\n[ipywidgets](https://ipywidgets.readthedocs.io/) API. Widget classes are\navailable under `Jupyter.widgets`.\n\nRun the setup cell below first to destructure the widget classes used in this\nnotebook.\n\nWidgets **auto-display** when they are the last expression in a cell.\nYou can also call the global `display()` function explicitly, e.g. when assigning to a variable.\n\n> **Requirements:** `jupyterlab-widgets` and `@jupyter-widgets/controls` must\n> be available in the JupyterLite deployment."
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": "const {\n    IntSlider,\n    FloatSlider,\n    SelectionSlider,\n    IntProgress,\n    IntText,\n    FloatText,\n    Text,\n    Textarea,\n    Password,\n    Checkbox,\n    ToggleButton,\n    Valid,\n    Dropdown,\n    RadioButtons,\n    Select,\n    ToggleButtons,\n    Button,\n    HTML,\n    Label,\n    ColorPicker,\n    VBox,\n    HBox,\n    Tab,\n    Accordion,\n    Stack\n} = Jupyter.widgets;"
   },
   {
    "cell_type": "markdown",
@@ -359,4 +366,4 @@
  },
  "nbformat": 4,
  "nbformat_minor": 5
-}
+}

packages/javascript-kernel/src/comm.ts

@@ -76,6 +76,27 @@ export class CommManager {
     this._targets.set(targetName, handler);
   }
 
+  /**
+   * Register a widget instance by comm ID.
+   */
+  registerWidget<T>(commId: string, widget: T): void {
+    this._widgets.set(commId, widget);
+  }
+
+  /**
+   * Look up a widget instance by comm ID.
+   */
+  getWidget<T>(commId: string): T | undefined {
+    return this._widgets.get(commId) as T | undefined;
+  }
+
+  /**
+   * Remove a widget registration.
+   */
+  unregisterWidget(commId: string): void {
+    this._widgets.delete(commId);
+  }
+
   /**
    * Handle a comm_open message from the frontend.
    */
@@ -120,6 +141,7 @@ export class CommManager {
     const comm = this._comms.get(commId);
     if (comm) {
       comm.onClose?.(data, buffers);
+      this._widgets.delete(commId);
       this._comms.delete(commId);
     }
   }
@@ -149,6 +171,7 @@ export class CommManager {
    * Dispose all comms and clear state.
    */
   dispose(): void {
+    this._widgets.clear();
     this._comms.clear();
     this._targets.clear();
   }
@@ -187,6 +210,8 @@ export class CommManager {
             data
           }
         });
+        comm.onClose?.(data);
+        this._widgets.delete(commId);
         this._comms.delete(commId);
       },
       display: (): void => {
@@ -201,4 +226,5 @@ export class CommManager {
   private _onOutput: RuntimeOutputHandler;
   private _comms = new Map<string, IComm>();
   private _targets = new Map<string, CommTargetHandler>();
+  private _widgets = new Map<string, unknown>();
 }

packages/javascript-kernel/src/runtime_evaluator.ts

@@ -7,7 +7,7 @@ import { JavaScriptExecutor } from './executor';
 import { normalizeError } from './errors';
 import { CommManager } from './comm';
 import type { RuntimeOutputHandler } from './runtime_protocol';
-import { Widget, widgetClasses } from './widgets';
+import { Widget, createWidgetClasses } from './widgets';
 
 /**
  * Shared execution logic for iframe and worker runtime backends.
@@ -23,8 +23,8 @@ export class JavaScriptRuntimeEvaluator {
       options.executor ?? new JavaScriptExecutor(options.globalScope);
 
     this._commManager = new CommManager(options.onOutput);
-    this._setupJupyterGlobal();
     this._setupWidgets();
+    this._setupJupyterGlobal();
     this._setupDisplay();
     this._setupConsoleOverrides();
   }
@@ -367,44 +367,33 @@ export class JavaScriptRuntimeEvaluator {
   }
 
   /**
-   * Install widget classes in the runtime global scope.
+   * Create runtime-local widget classes.
    */
   private _setupWidgets(): void {
-    Widget.setDefaultManager(this._commManager);
-
-    this._previousWidgetGlobals = {};
-    for (const [name, cls] of Object.entries(widgetClasses)) {
-      this._previousWidgetGlobals[name] = this._globalScope[name];
-      this._globalScope[name] = cls;
-    }
+    this._widgetClasses = createWidgetClasses(this._commManager);
   }
 
   /**
-   * Remove widget classes from the global scope and reset the manager.
+   * Clear runtime-local widget classes.
    */
   private _restoreWidgets(): void {
-    Widget.setDefaultManager(null);
-
-    if (this._previousWidgetGlobals) {
-      for (const [name, prev] of Object.entries(this._previousWidgetGlobals)) {
-        if (prev === undefined) {
-          delete this._globalScope[name];
-        } else {
-          this._globalScope[name] = prev;
-        }
-      }
-      this._previousWidgetGlobals = null;
-    }
+    this._widgetClasses = null;
   }
 
   /**
    * Install Jupyter.comm in runtime scope.
    */
   private _setupJupyterGlobal(): void {
     this._previousJupyter = this._globalScope.Jupyter;
+    const previousJupyter =
+      typeof this._previousJupyter === 'object' &&
+      this._previousJupyter !== null
+        ? this._previousJupyter
+        : {};
     this._globalScope.Jupyter = {
+      ...previousJupyter,
       comm: this._commManager,
-      widgets: widgetClasses
+      widgets: this._widgetClasses ?? {}
     };
   }
 
@@ -423,7 +412,7 @@ export class JavaScriptRuntimeEvaluator {
   private _onOutput: RuntimeOutputHandler;
   private _executor: JavaScriptExecutor;
   private _commManager: CommManager;
-  private _previousWidgetGlobals: Record<string, any> | null = null;
+  private _widgetClasses: Record<string, typeof Widget> | null = null;
   private _previousJupyter: any;
   private _previousDisplay: any;
   private _originalOnError: any;

packages/javascript-kernel/src/widgets.ts

@@ -19,24 +19,25 @@ export class Widget {
   static modelName = '';
   static viewName = '';
 
-  private static _defaultManager: CommManager | null = null;
+  protected static _defaultManager: CommManager | null = null;
 
   /**
    * Set the default CommManager used by all Widget instances.
    */
   static setDefaultManager(manager: CommManager | null): void {
-    Widget._defaultManager = manager;
+    this._defaultManager = manager;
   }
 
   constructor(state?: Record<string, unknown>) {
-    const manager = Widget._defaultManager;
+    const ctor = this.constructor as typeof Widget;
+    const manager = ctor._defaultManager;
     if (!manager) {
       throw new Error(
         'Widget manager not initialized. Widgets can only be created inside the kernel runtime.'
       );
     }
 
-    const ctor = this.constructor as typeof Widget;
+    this._manager = manager;
     this._state = {
       ...this._defaults(),
       ...state,
@@ -59,8 +60,10 @@ export class Widget {
       this._handleMsg(data, buffers);
     };
     this._comm.onClose = data => {
+      this._manager.unregisterWidget(this.commId);
       this._trigger('close', data);
     };
+    this._manager.registerWidget(this.commId, this);
   }
 
   /**
@@ -199,6 +202,7 @@ export class Widget {
   }
 
   protected _comm: IComm;
+  protected _manager: CommManager;
   protected _state: Record<string, unknown>;
   private _listeners: Map<string, Set<WidgetEventCallback>>;
 }
@@ -880,6 +884,20 @@ export class Box extends Widget {
   set box_style(v: string) {
     this.set('box_style', v);
   }
+
+  protected override _handleMsg(
+    data: Record<string, unknown>,
+    buffers?: ArrayBuffer[]
+  ): void {
+    super._handleMsg(data, buffers);
+
+    if (data.method === 'update' && data.state) {
+      const state = data.state as Record<string, unknown>;
+      if (Object.prototype.hasOwnProperty.call(state, 'children')) {
+        this._children = _deserializeChildren(this._manager, state.children);
+      }
+    }
+  }
 }
 
 export class HBox extends Box {
@@ -1032,3 +1050,44 @@ export const widgetClasses: Record<string, typeof Widget> = {
   Tab,
   Stack
 };
+
+/**
+ * Create runtime-local widget classes bound to a specific comm manager.
+ */
+export function createWidgetClasses(
+  manager: CommManager
+): Record<string, typeof Widget> {
+  const classes: Record<string, typeof Widget> = {};
+
+  for (const [name, cls] of Object.entries(widgetClasses)) {
+    const BoundWidgetClass = class extends cls {};
+    Object.defineProperty(BoundWidgetClass, 'name', { value: name });
+    BoundWidgetClass.setDefaultManager(manager);
+    classes[name] = BoundWidgetClass;
+  }
+
+  return classes;
+}
+
+/**
+ * Resolve serialized `IPY_MODEL_<id>` references back to known widget instances.
+ */
+function _deserializeChildren(
+  manager: CommManager,
+  children: unknown
+): Widget[] {
+  if (!Array.isArray(children)) {
+    return [];
+  }
+
+  return children
+    .map(child => {
+      if (typeof child !== 'string' || !child.startsWith('IPY_MODEL_')) {
+        return null;
+      }
+      return (
+        manager.getWidget<Widget>(child.slice('IPY_MODEL_'.length)) ?? null
+      );
+    })
+    .filter((child): child is Widget => child instanceof Widget);
+}