fix CORS issues in notebook

Author: rmorshea

examples/chart.js

@@ -1,6 +1,6 @@
-import React from '../react.js';
-import { VictoryBar, VictoryChart, VictoryAxis } from '../victory.js';
-import htm from "../htm.js";
+import React from '../web_modules/react.js';
+import { VictoryBar, VictoryChart, VictoryAxis } from '../web_modules/victory.js';
+import htm from "../web_modules/htm.js";
 
 const html = htm.bind(React.createElement);
 

requirements/extras.txt

@@ -1,5 +1,5 @@
 # extra=sanic
-sanic >=19.12.0, <20.0
+sanic <19.12.0
 sanic-cors >=0.9.9, <1.0
 
 # extra=matplotlib

src/idom/client/__init__.py

@@ -23,15 +23,15 @@ def import_path(name: str) -> Optional[str]:
 
 
 def define_module(name: str, source: str) -> str:
-    path = CLIENT_DIR / "web_modules"
-    for n in name.split("/"):
+    path = CLIENT_DIR
+    for n in ["etc_modules"] + name.split("/"):
         if not path.exists():
             path.mkdir()
         path /= n
     module = path.with_suffix(".js")
     with module.open("w+") as f:
         f.write(source)
-    return _web_module(name)
+    return _etc_module(name)
 
 
 def install(*dependencies: str) -> None:
@@ -98,3 +98,7 @@ def _run_subprocess(args: List[str], cwd: Union[str, Path]):
 
 def _web_module(name: str) -> str:
     return f"../web_modules/{name}.js"
+
+
+def _etc_module(name: str) -> str:
+    return f"../etc_modules/{name}.js"

src/idom/client/core_modules/layout.js

@@ -64,7 +64,6 @@ function Layout({ endpoint }) {
 }
 
 function Element({ modelState, model, sendEvent }) {
-  console.log(model)
   const children = elementChildren(modelState, model, sendEvent);
   const attributes = elementAttributes(model, sendEvent);
   if (model.importSource) {

src/idom/client/etc_modules/chart.js

@@ -0,0 +1,36 @@
+import React from '../web_modules/react.js';
+import { VictoryBar, VictoryChart, VictoryAxis } from '../web_modules/victory.js';
+import htm from "../web_modules/htm.js";
+
+const html = htm.bind(React.createElement);
+
+const data = [
+  {quarter: 1, earnings: 13000},
+  {quarter: 2, earnings: 16500},
+  {quarter: 3, earnings: 14250},
+  {quarter: 4, earnings: 19000}
+];
+
+class Chart extends React.Component {
+  render() {
+    return html`
+      <${VictoryChart} domainPadding=20>
+        <${VictoryAxis}
+          tickValues=${[1, 2, 3, 4]}
+          tickFormat=${["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
+        />
+        <${VictoryAxis}
+          dependentAxis
+          tickFormat=${(x) => (`$${x / 1000}k`)}
+        />
+        <${VictoryBar}
+          data=${data}
+          x="quarter"
+          y="earnings"
+        />
+      </${VictoryChart}>
+    `
+  }
+}
+
+export default {Chart: Chart}

src/idom/widgets/display.py

@@ -1,6 +1,7 @@
 import uuid
-
 from typing import Any
+from urllib.parse import urlsplit, urlunsplit
+from IPython import display as _ipy_display
 
 
 def display(kind: str, *args: Any, **kwargs: Any) -> Any:
@@ -18,31 +19,52 @@ def display(kind: str, *args: Any, **kwargs: Any) -> Any:
 class JupyterWigdet:
     """Output for IDOM within a Jupyter Notebook."""
 
-    _shown = False
-    __slots__ = "_url"
-    _script = """
-    import React from '{url}/web-modules/react.js';
-    import ReactDOM from '{url}/web-modules/react-dom.js';
-    import Layout from '{url}/js/idom-layout';
-
-    function IdomWidgetMount(endpoint, mountId) {
-        const mount = document.getElementById(mountId);
-        const element = React.createElement(Layout, {{endpoint: endpoint}})
-        ReactDOM.render(element, mount);
-    };
-    """
+    _idom_server_exists_displayed = False
+    __slots__ = ("_ws", "_http")
+
+    def __init__(self, url: str, secure=True) -> None:
+        uri = urlunsplit(("",) + urlsplit(url)[1:])
+        if uri.endswith("/"):
+            uri = uri[:-1]
+        if secure:
+            ws_proto = "wss"
+            http_proto = "https"
+        else:
+            ws_proto = "ws"
+            http_proto = "http"
+        self._ws = ws_proto + ":" + uri
+        self._http = http_proto + ":" + uri
+        if not type(self)._idom_server_exists_displayed:
+            _ipy_display.display_html(
+                "<script>document.idomServerExists = true;</script>", raw=True,
+            )
+            _ipy_display.clear_output(wait=True)
+            type(self)._idom_server_exists_displayed = True
 
-    def __init__(self, url: str) -> None:
-        self._url = url
+    def _script(self, mount_id):
+        return f"""
+        <script type="module">
+            // we want to avoid making this request (in case of CORS)
+            // unless we know an IDOM server is expected to respond
+            if (document.idomServerExists) {{
+                import("{self._http}/client/core_modules/layout.js").then(
+                    module => {{
+                        module.renderLayout(
+                            document.getElementById("{mount_id}"), "{self._ws}/stream"
+                        )
+                    }}
+                )
+            }}
+        </script>
+        """
 
     def _repr_html_(self) -> str:
         """Rich HTML display output."""
         mount_id = uuid.uuid4().hex
         return f"""
         <div id="{mount_id}"/>
-        {'' if JupyterWigdet._shown else '<script>' + self._script + '</script>'}
-        <script>window.IdomWidgetMount("{self._url}", "{mount_id}")</script>
+        {self._script(mount_id)}
         """
 
     def __repr__(self) -> str:
-        return "%s(%r)" % (type(self).__name__, self._url)
+        return "%s(%r)" % (type(self).__name__, self._http)