import idom-client-react from IDOM build

rmorshea · rmorshea · commit 4389d46f6427 · 2021-04-05T22:29:25.000-07:00
diff --git a/idom_jupyter/jupyter_server_extension.py b/idom_jupyter/jupyter_server_extension.py
@@ -1,15 +1,18 @@
 from urllib.parse import urljoin
 
 from notebook.notebookapp import NotebookApp
-from idom.config import IDOM_CLIENT_BUILD_DIR
+from idom.config import IDOM_CLIENT_BUILD_DIR, IDOM_CLIENT_IMPORT_SOURCE_URL
 from tornado.web import StaticFileHandler
 from tornado.web import Application
 
 
+import_source_url_prefix = "_idom_web_modules"
+
+
 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, r"_idom_web_modules/(.*)")
+    route_pattern = urljoin(base_url, rf"{import_source_url_prefix}/(.*)")
     web_app.add_handlers(
         host_pattern=".*$",
         host_handlers=[
diff --git a/idom_jupyter/widget.py b/idom_jupyter/widget.py
@@ -6,10 +6,15 @@
 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
+
 
 _JUPYTER_SERVER_BASE_URL = ""
+IDOM_CLIENT_IMPORT_SOURCE_URL.set(f"./{import_source_url_prefix}")
 
 
 def set_jupyter_server_base_url(base_url):
@@ -57,6 +62,9 @@ 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):
         super().__init__(_jupyter_server_base_url=_JUPYTER_SERVER_BASE_URL)
diff --git a/js/lib/embed.js b/js/lib/embed.js
@@ -5,5 +5,5 @@
 // already be loaded by the notebook otherwise.
 
 // Export widget models and views, and the npm package version number.
-module.exports = require('./widget.js');
-module.exports['version'] = require('../package.json').version;
+module.exports = require("./widget.js");
+module.exports["version"] = require("../package.json").version;
diff --git a/js/lib/extension.js b/js/lib/extension.js
@@ -5,21 +5,22 @@
 // Some static assets may be required by the custom widget javascript. The base
 // url for the notebook is not known at build time and is therefore computed
 // dynamically.
-__webpack_public_path__ = document.querySelector('body').getAttribute('data-base-url') + 'nbextensions/idom-client-jupyter';
-
+__webpack_public_path__ =
+  document.querySelector("body").getAttribute("data-base-url") +
+  "nbextensions/idom-client-jupyter";
 
 // Configure requirejs
 if (window.require) {
-    window.require.config({
-        map: {
-            "*" : {
-                "idom-client-jupyter": "nbextensions/idom-client-jupyter/index",
-            }
-        }
-    });
+  window.require.config({
+    map: {
+      "*": {
+        "idom-client-jupyter": "nbextensions/idom-client-jupyter/index",
+      },
+    },
+  });
 }
 
 // Export the required load_ipython_extension
 module.exports = {
-    load_ipython_extension: function() {}
+  load_ipython_extension: function () {},
 };
diff --git a/js/lib/index.js b/js/lib/index.js
@@ -1,3 +1,3 @@
 // Export widget models and views, and the npm package version number.
-module.exports = require('./widget.js');
-module.exports['version'] = require('../package.json').version;
+module.exports = require("./widget.js");
+module.exports["version"] = require("../package.json").version;
diff --git a/js/lib/labplugin.js b/js/lib/labplugin.js
@@ -1,16 +1,15 @@
-var plugin = require('./index');
-var base = require('@jupyter-widgets/base');
+var plugin = require("./index");
+var base = require("@jupyter-widgets/base");
 
 module.exports = {
-  id: 'idom-client-jupyter',
+  id: "idom-client-jupyter",
   requires: [base.IJupyterWidgetRegistry],
-  activate: function(app, widgets) {
-      widgets.registerWidget({
-          name: 'idom-client-jupyter',
-          version: plugin.version,
-          exports: plugin
-      });
+  activate: function (app, widgets) {
+    widgets.registerWidget({
+      name: "idom-client-jupyter",
+      version: plugin.version,
+      exports: plugin,
+    });
   },
-  autoStart: true
+  autoStart: true,
 };
-
diff --git a/js/lib/widget.js b/js/lib/widget.js
@@ -1,6 +1,5 @@
 var widgets = require("@jupyter-widgets/base");
 var _ = require("lodash");
-var idomClientReact = require("idom-client-react");
 
 var IdomModel = widgets.DOMWidgetModel.extend({
   defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
@@ -16,43 +15,63 @@ var IdomModel = widgets.DOMWidgetModel.extend({
 
 var _nextViewID = { id: 0 };
 
+const jupyterServerBaseUrl = (() => {
+  const jupyterConfig = document.getElementById("jupyter-config-data");
+  if (jupyterConfig) {
+    return JSON.parse(jupyterConfig.text)["baseUrl"];
+  }
+  return document.getElementsByTagName("body")[0].getAttribute("data-base-url");
+})();
+
 class IdomView extends widgets.DOMWidgetView {
   constructor(options) {
     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++;
 
-    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,
-      });
-    };
+    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 sendEvent = (event) => {
-      this.model.send({ type: "dom-event", viewID: this.viewID, data: event });
-    };
+      var sendEvent = (event) => {
+        this.model.send({
+          type: "dom-event",
+          viewID: this.viewID,
+          data: event,
+        });
+      };
 
-    idomClientReact.mountLayout(
-      this.el,
-      saveUpdateHook,
-      sendEvent,
-      concatAndResolveUrl(
-        this.model.attributes._jupyter_server_base_url || getJupyterServerBaseUrl(),
-        "_idom_web_modules"
-      ),
-    );
+      idomClientReact.mountLayout(
+        this.el,
+        saveUpdateHook,
+        sendEvent,
+        concatAndResolveUrl(
+          this.model.attributes._jupyter_server_base_url ||
+            jupyterServerBaseUrl,
+          "_idom_web_modules"
+        )
+      );
+    });
   }
 
   remove() {
@@ -61,65 +80,32 @@ class IdomView extends widgets.DOMWidgetView {
   }
 }
 
-var _HackyClientHandshakeModel = widgets.DOMWidgetModel.extend({
-  defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
-    _model_name: "_HackyClientHandshakeModel",
-    _view_name: "_HackyClientHandshakeView",
-    _model_module: "idom-client-jupyter",
-    _view_module: "idom-client-jupyter",
-    _model_module_version: "0.4.0",
-    _view_module_version: "0.4.0",
-  }),
-});
-
-class _HackyClientHandshakeView extends widgets.DOMWidgetView {
-  constructor(options) {
-    super(options);
-    this.render = this.render.bind(this);
-  }
-
-  render() {
-    this.model.send({ window_url: window.location.href })
-    this.remove();
-  }
-}
-
-function getJupyterServerBaseUrl() {
-  const jupyterConfig = document.getElementById("jupyter-config-data");
-  if (jupyterConfig) {
-    return JSON.parse(jupyterConfig.text)['baseUrl'];
-  }
-  return document.getElementsByTagName('body')[0].getAttribute('data-base-url')
-}
-
 function concatAndResolveUrl(url, concat) {
-  var url1 = (url.endsWith("/") ? url.slice(0, -1) : url).split('/');
-  var url2 = concat.split('/');
-  var url3 = [ ];
-  for (var i = 0, l = url1.length; i < l; i ++) {
-    if (url1[i] == '..') {
+  var url1 = (url.endsWith("/") ? url.slice(0, -1) : url).split("/");
+  var url2 = concat.split("/");
+  var url3 = [];
+  for (var i = 0, l = url1.length; i < l; i++) {
+    if (url1[i] == "..") {
       url3.pop();
-    } else if (url1[i] == '.') {
+    } else if (url1[i] == ".") {
       continue;
     } else {
       url3.push(url1[i]);
     }
   }
-  for (var i = 0, l = url2.length; i < l; i ++) {
-    if (url2[i] == '..') {
+  for (var i = 0, l = url2.length; i < l; i++) {
+    if (url2[i] == "..") {
       url3.pop();
-    } else if (url2[i] == '.') {
+    } else if (url2[i] == ".") {
       continue;
     } else {
       url3.push(url2[i]);
     }
   }
-  return url3.join('/');
+  return url3.join("/");
 }
 
 module.exports = {
   IdomModel: IdomModel,
   IdomView: IdomView,
-  _HackyClientHandshakeModel: _HackyClientHandshakeModel,
-  _HackyClientHandshakeView: _HackyClientHandshakeView,
 };
diff --git a/js/package-lock.json b/js/package-lock.json
diff --git a/js/package.json b/js/package.json
@@ -27,16 +27,17 @@
     "build:labextension": "jupyter labextension build .",
     "build:labextension:dev": "jupyter labextension build --development True .",
     "watch": "webpack --watch --mode=development",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "format": "prettier -w lib"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^3.0.0",
-    "webpack": "^5",
-    "rimraf": "^2.6.1"
+    "prettier": "^2.2.1",
+    "rimraf": "^2.6.1",
+    "webpack": "^5"
   },
   "dependencies": {
     "@jupyter-widgets/base": "^1.1 || ^2 || ^3 || ^4",
-    "idom-client-react": "^0.7.0",
     "lodash": "^4.17.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
diff --git a/js/yarn.lock b/js/yarn.lock
diff --git a/notebooks/introduction.ipynb b/notebooks/introduction.ipynb
