reorganize client code + add install func to dynamically install es6 modules

Author: rmorshea

MANIFEST.in

@@ -1,3 +1,5 @@
-graft src/py/idom/static
-include src/py/idom/py.typed
-include src/py/LICENSE
+graft src/idom/client/
+prune src/idom/client/node_modules
+
+include src/idom/py.typed
+include LICENSE

examples/chart.js

@@ -0,0 +1,36 @@
+import React from '../react.js';
+import { VictoryBar, VictoryChart, VictoryAxis } from '../victory.js';
+import htm from "../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}

scripts/build.sh

@@ -1,5 +1,7 @@
 #!/bin/bash
 cd src/idom/client
+rm -rf node_modules
+rm -rf web_modules
 npm install
 npm run snowpack
 cd ../../../

src/idom/client/__init__.py

@@ -1,4 +1,100 @@
+import json
+import shutil
+import subprocess
+from loguru import logger
 from pathlib import Path
+from tempfile import TemporaryDirectory
+from typing import Optional, List, Union
 
 
 CLIENT_DIR = Path(__file__).parent
+
+
+def import_path(name: str) -> Optional[str]:
+    path = CLIENT_DIR / "web_modules"
+    for name_part in name.split("/"):
+        if not path.is_dir():
+            return None
+        path /= name_part
+    full_path = path.with_suffix(".js")
+    if not full_path.is_file():
+        return None
+    return _web_module(name)
+
+
+def define_module(name: str, source: str) -> str:
+    path = CLIENT_DIR / "web_modules"
+    for n in 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)
+
+
+def install(*dependencies: str) -> None:
+    pkg = _package_json()
+
+    npm_install = []
+    for dep in dependencies:
+        install_spec, *import_paths = dep.split(" ")
+        if not import_paths:
+            raise ValueError(
+                "Expected a space seperated string where an installation "
+                f"spec is followed by at least on import path, not '{dep}'"
+            )
+        pkg["snowpack"]["webDependencies"].extend(import_paths)
+        npm_install.append(install_spec)
+
+    with TemporaryDirectory() as tempdir:
+        with (Path(tempdir) / "package.json").open("w+") as f:
+            json.dump(pkg, f)
+
+        _run_subprocess(["npm", "install"], tempdir)
+        if npm_install:
+            _run_subprocess(["npm", "install"] + npm_install, tempdir)
+        _run_subprocess(["npm", "run", "snowpack"], tempdir)
+
+
+def restore() -> None:
+    for path in ["web_modules", "node_modules"]:
+        full_path = CLIENT_DIR.joinpath(*path.split("/"))
+        if full_path.is_file():
+            full_path.unlink()
+        elif full_path.is_dir():
+            shutil.rmtree(full_path)
+    install()
+
+
+def _package_json():
+    with (CLIENT_DIR / "package.json").open("r") as f:
+        dependencies = json.load(f)["dependencies"]
+
+    return {
+        "dependencies": dependencies,
+        "scripts": {"snowpack": "./node_modules/.bin/snowpack"},
+        "devDependencies": {"snowpack": "^1.6.0"},
+        "snowpack": {
+            "installOptions": {
+                "dest": str(CLIENT_DIR / "web_modules"),
+                "include": str(CLIENT_DIR / "modules" / "**" / "*.js"),
+            },
+            "webDependencies": [],
+        },
+    }
+
+
+def _run_subprocess(args: List[str], cwd: Union[str, Path]):
+    try:
+        subprocess.run(
+            args, cwd=cwd, check=True, stdout=subprocess.PIPE, stderr=subprocess.PIPE
+        )
+    except subprocess.CalledProcessError as error:
+        logger.error(error.stderr.decode())
+        raise
+
+
+def _web_module(name: str) -> str:
+    return f"../web_modules/{name}.js"

src/idom/client/src/event-to-object.js renamed to src/idom/client/core_modules/event-to-object.js

@@ -52,7 +52,7 @@ function Layout({ endpoint }) {
     });
   };
 
-  if (modelState.root) {
+  if (modelState.root && modelState.root) {
     return html`<${Element}
       modelState=${modelState}
       model=${modelState.models[modelState.root]}
@@ -64,6 +64,7 @@ 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) {
@@ -145,7 +146,7 @@ function elementAttributes(model, sendEvent) {
 }
 
 function renderLayout(mountElement, endpoint) {
-  const cmpt = html`<$Layout endpoint=${endpoint} />`;
+  const cmpt = html`<${Layout} endpoint=${endpoint} />`;
   return ReactDOM.render(cmpt, mountElement);
 }
 

src/idom/client/src/index.js renamed to src/idom/client/core_modules/layout.js

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="favicon.ico" />
+  <title>IDOM</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module">
+    import { renderLayout } from "./core_modules/layout.js";
+
+    const uri = document.location.hostname + ":" + document.location.port;
+    const url = (uri + document.location.pathname).split("/").slice(0, -1);
+    url[url.length - 1] = "stream";
+    const secure = document.location.protocol === "https:";
+
+    let protocol;
+    if (secure) {
+      protocol = "wss:";
+    } else {
+      protocol = "ws:";
+    }
+    let endpoint = protocol + "//" + url.join("/");
+
+    renderLayout(document.getElementById("app"), endpoint);
+  </script>
+</body>
+
+</html>