upgrade to latest version of IDOM

Author: rmorshea

idom_jupyter/__init__.py

@@ -1,6 +1,7 @@
 from ._version import version_info  # noqa
 from ._version import __version__  # noqa
 
+from . import jupyter_server_extension
 from .widget import LayoutWidget, widgetize, run, set_jupyter_server_base_url
 from .ipython_extension import load_ipython_extension, unload_ipython_extension
 
@@ -12,6 +13,7 @@
     "load_ipython_extension",
     "unload_ipython_extension",
     "set_jupyter_server_base_url",
+    "jupyter_server_extension"
 ]
 
 

idom_jupyter/ipython_extension.py

@@ -1,8 +1,8 @@
 from functools import partial
 
-from idom.config import IDOM_CLIENT_IMPORT_SOURCE_URL
-from idom.core.component import AbstractComponent
+from idom.core.component import Component
 from IPython import get_ipython
+from IPython.core.interactiveshell import InteractiveShell
 from IPython.display import display
 
 from .widget import LayoutWidget
@@ -12,16 +12,13 @@
 _POST_RUN_CELL_HOOK = None
 
 
-def load_ipython_extension(ipython):
+def load_ipython_extension(ipython: InteractiveShell) -> None:
     global _POST_RUN_CELL_HOOK, _EXTENSION_LOADED
     if not _EXTENSION_LOADED:
-        # allow client to determine build location
-        IDOM_CLIENT_IMPORT_SOURCE_URL.set("./")
-
         _POST_RUN_CELL_HOOK = partial(_post_run_cell, ipython)
         ipython.events.register("post_run_cell", _POST_RUN_CELL_HOOK)
         ipython.display_formatter.ipython_display_formatter.for_type(
-            AbstractComponent, lambda element: ({}, {})
+            Component, lambda component: ({}, {})
         )
         _EXTENSION_LOADED = True
 
@@ -33,8 +30,8 @@ def unload_ipython_extension(ipython):
     _EXTENSION_LOADED = False
 
 
-def _post_run_cell(ipython, result):
-    if isinstance(result.result, AbstractComponent):
+def _post_run_cell(ipython: InteractiveShell, result):
+    if isinstance(result.result, Component):
         display(LayoutWidget(result.result))
 
 

idom_jupyter/jupyter_server_extension.py

@@ -1,25 +1,26 @@
 from urllib.parse import urljoin
 
+from appdirs import user_data_dir
 from notebook.notebookapp import NotebookApp
-from idom.config import IDOM_CLIENT_BUILD_DIR, IDOM_CLIENT_IMPORT_SOURCE_URL
+from idom.config import IDOM_WED_MODULES_DIR
 from tornado.web import StaticFileHandler
 from tornado.web import Application
 
 
-import_source_url_prefix = "_idom_web_modules"
+IDOM_WED_MODULES_DIR.current = user_data_dir("idom-jupyter", "idom-team")
 
 
 def _load_jupyter_server_extension(notebook_app: NotebookApp):
     web_app: Application = notebook_app.web_app
     base_url = web_app.settings["base_url"]
-    route_pattern = urljoin(base_url, rf"{import_source_url_prefix}/(.*)")
+    route_pattern = urljoin(base_url, rf"_idom_web_modules/(.*)")
     web_app.add_handlers(
         host_pattern=".*$",
         host_handlers=[
             (
                 route_pattern,
                 StaticFileHandler,
-                {"path": str(IDOM_CLIENT_BUILD_DIR.get().absolute())},
+                {"path": str(IDOM_WED_MODULES_DIR.current.absolute())},
             ),
         ],
     )

idom_jupyter/widget.py

@@ -1,20 +1,19 @@
+from __future__ import annotations
+
 import asyncio
 from functools import wraps
 from threading import Thread
 from queue import Queue as SyncQueue
+from idom.core.proto import ComponentType
 
 import ipywidgets as widgets
 from IPython.display import display as ipython_display
 from traitlets import Unicode
-from idom import Module
-from idom.config import IDOM_CLIENT_IMPORT_SOURCE_URL
 from idom.core.layout import Layout, LayoutEvent, LayoutUpdate
-
-from .jupyter_server_extension import import_source_url_prefix
+from idom.core.dispatcher import VdomJsonPatch, render_json_patch
 
 
 _JUPYTER_SERVER_BASE_URL = ""
-IDOM_CLIENT_IMPORT_SOURCE_URL.set(f"./{import_source_url_prefix}")
 
 
 def set_jupyter_server_base_url(base_url):
@@ -62,29 +61,26 @@ class LayoutWidget(widgets.DOMWidget):
     _model_module_version = Unicode("^0.4.0").tag(sync=True)
 
     _jupyter_server_base_url = Unicode().tag(sync=True)
-    _client_module_url = Unicode(default_value=Module("idom-client-react").url).tag(
-        sync=True
-    )
 
-    def __init__(self, element):
+    def __init__(self, component: ComponentType):
         super().__init__(_jupyter_server_base_url=_JUPYTER_SERVER_BASE_URL)
         self._idom_model = {}
         self._idom_views = set()
-        self._idom_layout = Layout(element)
+        self._idom_layout = Layout(component)
         self._idom_loop = _spawn_threaded_event_loop(self._idom_layout_render_loop())
-        self.on_msg(self._idom_on_msg)
+        self.on_msg(lambda _, *args, **kwargs: self._idom_on_msg(*args, **kwargs))
 
-    @staticmethod
     def _idom_on_msg(self, message, buffers):
         m_type = message.get("type")
         if m_type == "client-ready":
             v_id = message["viewID"]
             self._idom_views.add(v_id)
-            update = LayoutUpdate.create_from({}, self._idom_model)
-            self.send({"viewID": v_id, "data": update})
+            update = LayoutUpdate("", None, self._idom_model)
+            diff = VdomJsonPatch.create_from(update)
+            self.send({"viewID": v_id, "data": diff})
         elif m_type == "dom-event":
             asyncio.run_coroutine_threadsafe(
-                self._idom_layout.dispatch(LayoutEvent(**message["data"])),
+                self._idom_layout.deliver(LayoutEvent(**message["data"])),
                 loop=self._idom_loop,
             )
         elif m_type == "client-removed":
@@ -93,13 +89,15 @@ def _idom_on_msg(self, message, buffers):
                 self._idom_views.remove(message["viewID"])
 
     async def _idom_layout_render_loop(self):
-        async with self._idom_layout:
+        with self._idom_layout:
             while True:
-                update = await self._idom_layout.render()
-
-                self._idom_model = update.apply_to(self._idom_model)
+                diff = await render_json_patch(self._idom_layout)
+                self._idom_model = diff.apply_to(self._idom_model)
                 for v_id in self._idom_views:
-                    self.send({"viewID": v_id, "data": update})
+                    self.send({"viewID": v_id, "data": diff})
+
+    def __repr__(self) -> str:
+        return f"LayoutWidget({self._idom_layout})"
 
 
 def _spawn_threaded_event_loop(coro):

js/lib/widget.js

@@ -1,4 +1,5 @@
 var widgets = require("@jupyter-widgets/base");
+var idomClientReact = require("idom-client-react");
 var _ = require("lodash");
 
 var IdomModel = widgets.DOMWidgetModel.extend({
@@ -9,7 +10,6 @@ var IdomModel = widgets.DOMWidgetModel.extend({
     _view_module: "idom-client-jupyter",
     _model_module_version: "0.4.0",
     _view_module_version: "0.4.0",
-    _jupyter_server_base_url: null,
   }),
 });
 
@@ -28,49 +28,47 @@ class IdomView extends widgets.DOMWidgetView {
     super(options);
     this.render = this.render.bind(this);
     this.remove = this.remove.bind(this);
-    this.clientModulePromise = eval(
-      `import('${
-        jupyterServerBaseUrl + this.model.attributes._client_module_url
-      }')`
-    );
   }
 
   render() {
     this.viewID = _nextViewID.id;
     _nextViewID.id++;
 
-    this.clientModulePromise.then((idomClientReact) => {
-      var saveUpdateHook = (updateHook) => {
-        this.model.on("msg:custom", (msg, buffers) => {
-          if (msg.viewID == this.viewID) {
-            updateHook(...msg.data);
-          }
-        });
-        this.model.send({
-          type: "client-ready",
-          viewID: this.viewID,
-          data: null,
-        });
-      };
+    var saveUpdateHook = (updateHook) => {
+      this.model.on("msg:custom", (msg, buffers) => {
+        if (msg.viewID == this.viewID) {
+          updateHook(...msg.data);
+        }
+      });
+      this.send({
+        type: "client-ready",
+        viewID: this.viewID,
+        data: null,
+      });
+    };
 
-      var sendEvent = (event) => {
-        this.model.send({
-          type: "dom-event",
-          viewID: this.viewID,
-          data: event,
-        });
-      };
+    var sendEvent = (event) => {
+      this.send({
+        type: "dom-event",
+        viewID: this.viewID,
+        data: event,
+      });
+    };
 
-      idomClientReact.mountLayout(
-        this.el,
-        saveUpdateHook,
-        sendEvent,
-        concatAndResolveUrl(
-          this.model.attributes._jupyter_server_base_url ||
-            jupyterServerBaseUrl,
-          "_idom_web_modules"
-        )
+    const importSourceBaseUrl = concatAndResolveUrl(
+      this.model.attributes._jupyter_server_base_url || jupyterServerBaseUrl,
+      "_idom_web_modules"
+    );
+    var loadImportSource = (source, sourceType) => {
+      return import( /* webpackIgnore: true */
+        sourceType == "NAME" ? `${importSourceBaseUrl}/${source}` : source
       );
+    };
+
+    idomClientReact.mountLayout(this.el, {
+      saveUpdateHook,
+      sendEvent,
+      loadImportSource,
     });
   }
 

js/package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@jupyter-widgets/base": "^1.1 || ^2 || ^3 || ^4",
+    "idom-client-react": "^0.8.5",
     "lodash": "^4.17.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"