generalize client layout interface

rmorshea · rmorshea · commit f338572d6a80 · 2020-09-11T18:36:16.000-07:00
this will allow the upcoming idom-widget package to more easily
work with it
diff --git a/idom/client/static/core_modules/layout.js b/idom/client/static/core_modules/layout.js
@@ -1,4 +1,3 @@
-
 import * as react from "react";
 import * as reactDOM from "react-dom";
 import htm from "htm";
@@ -9,13 +8,7 @@ import serializeEvent from "./event-to-object";
 const html = htm.bind(react.createElement);
 const alreadyImported = {};
 
-export function renderLayout(mountElement, endpoint) {
-  const cmpt = html`<${Layout} endpoint=${endpoint} />`;
-  return reactDOM.render(cmpt, mountElement);
-}
-
-export default function Layout({ endpoint }) {
-  // handle relative endpoint URI
+export function mountLayoutWithWebSocket(mountElement, endpoint) {
   if (endpoint.startsWith(".") || endpoint.startsWith("/")) {
     let loc = window.location;
     let protocol;
@@ -31,36 +24,53 @@ export default function Layout({ endpoint }) {
     endpoint = new_uri + endpoint;
   }
 
-  const socket = react.useMemo(() => new WebSocket(endpoint), [endpoint]);
-  const [state, setState] = react.useState({ model: {} });
-
-  socket.onmessage = (event) => {
-    const [pathPrefix, patch] = JSON.parse(event.data);
-    setState({
-      model: jsonpatch.applyPatch(
-        state.model,
-        patch.map((op) => {
-          op.path = pathPrefix + op.path;
-          return op;
-        }),
-        undefined,
-        false
-      ).newDocument,
-    });
-  };
+  const ws = new WebSocket(endpoint);
 
-  const sendMsg = (msg) => {
-    socket.send(JSON.stringify(msg));
-  };
-  const sendEvent = (event) => {
-    sendMsg({
-      header: {},
-      body: { event: event },
+  function registerUpdateCallback(update) {
+    ws.onmessage = (event) => {
+      const [pathPrefix, patch] = JSON.parse(event.data);
+      update(pathPrefix, patch);
+    };
+  }
+
+  function sendCallback(event) {
+    ws.send(
+      JSON.stringify({
+        header: {},
+        body: { event: event },
+      })
+    );
+  }
+
+  const cmpt = html`<${Layout}
+    registerUpdateCallback=${registerUpdateCallback}
+    sendCallback=${sendCallback}
+  />`;
+
+  return reactDOM.render(cmpt, mountElement);
+}
+
+export default function Layout({ registerUpdateCallback, sendCallback }) {
+  const [model, setModel] = react.useState({});
+
+  react.useEffect(() => {
+    registerUpdateCallback((pathPrefix, patch) => {
+      setModel(
+        jsonpatch.applyPatch(
+          model,
+          patch.map((op) => {
+            op.path = pathPrefix + op.path;
+            return op;
+          }),
+          undefined,
+          false
+        ).newDocument
+      );
     });
-  };
+  }, [model]);
 
-  if (state.model.tagName) {
-    return html`<${Element} sendEvent=${sendEvent} model=${state.model} />`;
+  if (model.tagName) {
+    return html`<${Element} sendEvent=${sendCallback} model=${model} />`;
   } else {
     return html`<div />`;
   }
diff --git a/idom/client/static/index.html b/idom/client/static/index.html
@@ -8,7 +8,7 @@
   <body>
     <div id="app"></div>
     <script type="module">
-      import { renderLayout } from "./core_modules/layout.js";
+      import { mountLayoutWithWebSocket } from "./core_modules/layout.js";
 
       const uri = document.location.hostname + ":" + document.location.port;
       const url = (uri + document.location.pathname).split("/").slice(0, -1);
@@ -24,7 +24,7 @@
 
       let endpoint = protocol + "//" + url.join("/") + window.location.search;
 
-      renderLayout(document.getElementById("app"), endpoint);
+      mountLayoutWithWebSocket(document.getElementById("app"), endpoint);
     </script>
   </body>
 </html>
diff --git a/idom/client/static/package-lock.json b/idom/client/static/package-lock.json
diff --git a/idom/widgets/jupyter.py b/idom/widgets/jupyter.py
@@ -80,7 +80,7 @@ def _script(self, mount_id: str) -> str:
             fetch(http_proto + idom_url, {{mode: "no-cors"}}).then(rsp => {{
                 import(http_proto + idom_url + "/client/core_modules/layout.js").then(
                     (module) => {{
-                        module.renderLayout(
+                        module.mountLayoutWithWebSocket(
                             document.getElementById("{mount_id}"),
                             ws_proto + idom_url + "/stream?{self.query}"
                         );
