[do not merge] Naive JS Comms

.eslintignore

@@ -16,6 +16,7 @@ coverage
 *.bundle.js
 docs/_build
 app/lab/extensions/
+packages/kernel/src/_*.ts
 
 # jetbrains IDE stuff
 .idea/

dodo.py

@@ -616,6 +616,12 @@ def mod_md_name(mod):
                 out_text,
                 flags=re.M | re.S,
             )
+            out_text = re.sub(
+                r"^#### Parameters",
+                r"### Parameters",
+                out_text,
+                flags=re.M | re.S,
+            )
             out_text = re.sub(
                 r"^((Implementation of|Overrides|Inherited from):)",
                 "_\\1_",
@@ -740,7 +746,7 @@ def extend_docs():
 
 # environment overloads
 os.environ.update(
-    NODE_OPTS="--max-old-space-size=4096",
+    NODE_OPTIONS="--max-old-space-size=8192",
     PYTHONIOENCODING=C.ENC["encoding"],
     PIP_DISABLE_PIP_VERSION_CHECK="1",
 )

examples/js - widget theming.ipynb

@@ -0,0 +1 @@
+{"metadata":{"language_info":{"codemirror_mode":{"name":"javascript"},"file_extension":".js","mimetype":"text/javascript","name":"javascript","nbconvert_exporter":"javascript","pygments_lexer":"javascript","version":"es2017"},"kernelspec":{"name":"javascript","display_name":"JavaScript","language":"javascript"}},"nbformat_minor":4,"nbformat":4,"cells":[{"cell_type":"markdown","source":"# Theming JupyterLite with Widgets","metadata":{}},{"cell_type":"code","source":"let {FloatSlider, HTML, dlink, Checkbox} = kernel.widgets\nself.make_a_theme_control = (v, t, k=FloatSlider) => {\n    s = k({description: v, ...(t || {})})\n    h = HTML()\n    dlink([s, 'value'], [h, 'value'], (s) => `<style>:root{ ${v}: ${s}em; }</style>`)\n    h.display()\n    s.display()\n}\nself.make_a_color_picker = (v, rgba=\"rgba\") => {\n    const S = rgba.split(\"\").map((d) => FloatSlider({description: d, min: 0, max: d == 'a' ? 1 : 255, step: 0.01}))\n    S.map((s) => s.display())\n    S.map((s) => s.observe(()=> {\n        const style = `${v}: ${rgba}(${S.map(({value})=> value).join(',')});`;\n        h.value = `<style>:root{ ${style} }</style><pre>${style}</pre>`\n    }))\n    h = HTML()\n    h.display()\n}","metadata":{"trusted":true},"execution_count":60,"outputs":[{"execution_count":60,"output_type":"execute_result","data":{},"metadata":{}}]},{"cell_type":"code","source":"make_a_theme_control('--jp-cell-collapser-width');","metadata":{"tags":[],"trusted":true},"execution_count":61,"outputs":[{"output_type":"display_data","data":{"text/plain":"{\n  \"_dom_classes\": [],\n  \"_model_module\": \"@jupyter-widgets/controls\",\n  \"_model_module_version\": \"1.5.0\",\n  \"_view_count\": null,\n  \"_view_module\": \"@jupyter-widgets/controls\",\n  \"_view_module_version\": \"1.5.0\",\n  \"_model_name\": \"HTMLModel\",\n  \"_view_name\": \"HTMLView\",\n  \"description\": \"\",\n  \"description_tooltip\": null,\n  \"placeholder\": \"​\",\n  \"value\": \"<style>:root{ --jp-cell-collapser-width: 0em; }</style>\",\n  \"_states_to_send\": []\n}","application/vnd.jupyter.widget-view+json":{"version":"2.0","version_major":2,"version_minor":0,"model_id":"e0dcb055-1722-4db4-9b06-0d66e568a99a"}},"metadata":{}},{"output_type":"display_data","data":{"text/plain":"{\n  \"_dom_classes\": [],\n  \"_model_module\": \"@jupyter-widgets/controls\",\n  \"_model_module_version\": \"1.5.0\",\n  \"_view_count\": null,\n  \"_view_module\": \"@jupyter-widgets/controls\",\n  \"_view_module_version\": \"1.5.0\",\n  \"_model_name\": \"FloatSliderModel\",\n  \"_view_name\": \"FloatSliderView\",\n  \"continuous_update\": true,\n  \"description\": \"--jp-cell-collapser-width\",\n  \"description_tooltip\": null,\n  \"disabled\": false,\n  \"max\": 100,\n  \"min\": 0,\n  \"orientation\": \"horizontal\",\n  \"readout\": true,\n  \"step\": 0.1,\n  \"value\": 0,\n  \"_states_to_send\": []\n}","application/vnd.jupyter.widget-view+json":{"version":"2.0","version_major":2,"version_minor":0,"model_id":"5019e398-50fa-48b4-bb9f-7c278e0e77d2"}},"metadata":{}},{"execution_count":61,"output_type":"execute_result","data":{},"metadata":{}}]},{"cell_type":"code","source":"make_a_theme_control('--jp-notebook-padding');","metadata":{"tags":[],"trusted":true},"execution_count":62,"outputs":[{"output_type":"display_data","data":{"text/plain":"{\n  \"_dom_classes\": [],\n  \"_model_module\": \"@jupyter-widgets/controls\",\n  \"_model_module_version\": \"1.5.0\",\n  \"_view_count\": null,\n  \"_view_module\": \"@jupyter-widgets/controls\",\n  \"_view_module_version\": \"1.5.0\",\n  \"_model_name\": \"HTMLModel\",\n  \"_view_name\": \"HTMLView\",\n  \"description\": \"\",\n  \"description_tooltip\": null,\n  \"placeholder\": \"​\",\n  \"value\": \"<style>:root{ --jp-notebook-padding: 0em; }</style>\",\n  \"_states_to_send\": []\n}","application/vnd.jupyter.widget-view+json":{"version":"2.0","version_major":2,"version_minor":0,"model_id":"97385ed3-7212-44e5-98a6-3ccf27f1c85f"}},"metadata":{}},{"output_type":"display_data","data":{"text/plain":"{\n  \"_dom_classes\": [],\n  \"_model_module\": \"@jupyter-widgets/controls\",\n  \"_model_module_version\": \"1.5.0\",\n  \"_view_count\": null,\n  \"_view_module\": \"@jupyter-widgets/controls\",\n  \"_view_module_version\": \"1.5.0\",\n  \"_model_name\": \"FloatSliderModel\",\n  \"_view_name\": \"FloatSliderView\",\n  \"continuous_update\": true,\n  \"description\": \"--jp-notebook-padding\",\n  \"description_tooltip\": null,\n  \"disabled\": false,\n  \"max\": 100,\n  \"min\": 0,\n  \"orientation\": \"horizontal\",\n  \"readout\": true,\n  \"step\": 0.1,\n  \"value\": 0,\n  \"_states_to_send\": []\n}","application/vnd.jupyter.widget-view+json":{"version":"2.0","version_major":2,"version_minor":0,"model_id":"7bc8112d-1a10-445f-b4df-3d6ed90e804b"}},"metadata":{}},{"execution_count":62,"output_type":"execute_result","data":{},"metadata":{}}]},{"cell_type":"code","source":"self.make_a_color_picker('--jp-cell-editor-background')","metadata":{"tags":[],"trusted":true},"execution_count":63,"outputs":[{"output_type":"display_data","data":{"text/plain":"{\n  \"_dom_classes\": [],\n  \"_model_module\": \"@jupyter-widgets/controls\",\n  \"_model_module_version\": \"1.5.0\",\n  \"_view_count\": null,\n  \"_view_module\": \"@jupyter-widgets/controls\",\n  \"_view_module_version\": \"1.5.0\",\n  \"_model_name\": \"FloatSliderModel\",\n  \"_view_name\": \"FloatSliderView\",\n  \"continuous_update\": true,\n  \"description\": \"r\",\n  \"description_tooltip\": null,\n  \"disabled\": false,\n  \"max\": 255,\n  \"min\": 0,\n  \"orientation\": \"horizontal\",\n  \"readout\": true,\n  \"step\": 0.01,\n  \"value\": 0,\n  \"_states_to_send\": []\n}","application/vnd.jupyter.widget-view+json":{"version":"2.0","version_major":2,"version_minor":0,"model_id":"baa2fd3f-d073-41ba-a3f5-f4a1a2c9b89b"}},"metadata":{}},{"output_type":"display_data","data":{"text/plain":"{\n  \"_dom_classes\": [],\n  \"_model_module\": \"@jupyter-widgets/controls\",\n  \"_model_module_version\": \"1.5.0\",\n  \"_view_count\": null,\n  \"_view_module\": \"@jupyter-widgets/controls\",\n  \"_view_module_version\": \"1.5.0\",\n  \"_model_name\": \"FloatSliderModel\",\n  \"_view_name\": \"FloatSliderView\",\n  \"continuous_update\": true,\n  \"description\": \"g\",\n  \"description_tooltip\": null,\n  \"disabled\": false,\n  \"max\": 255,\n  \"min\": 0,\n  \"orientation\": \"horizontal\",\n  \"readout\": true,\n  \"step\": 0.01,\n  \"value\": 0,\n  \"_states_to_send\": []\n}","application/vnd.jupyter.widget-view+json":{"version":"2.0","version_major":2,"version_minor":0,"model_id":"67a8a364-4d46-4a49-b10d-99df407bf384"}},"metadata":{}},{"output_type":"display_data","data":{"text/plain":"{\n  \"_dom_classes\": [],\n  \"_model_module\": \"@jupyter-widgets/controls\",\n  \"_model_module_version\": \"1.5.0\",\n  \"_view_count\": null,\n  \"_view_module\": \"@jupyter-widgets/controls\",\n  \"_view_module_version\": \"1.5.0\",\n  \"_model_name\": \"FloatSliderModel\",\n  \"_view_name\": \"FloatSliderView\",\n  \"continuous_update\": true,\n  \"description\": \"b\",\n  \"description_tooltip\": null,\n  \"disabled\": false,\n  \"max\": 255,\n  \"min\": 0,\n  \"orientation\": \"horizontal\",\n  \"readout\": true,\n  \"step\": 0.01,\n  \"value\": 0,\n  \"_states_to_send\": []\n}","application/vnd.jupyter.widget-view+json":{"version":"2.0","version_major":2,"version_minor":0,"model_id":"9415c063-f030-45d1-807a-ba0331fa61f1"}},"metadata":{}},{"output_type":"display_data","data":{"text/plain":"{\n  \"_dom_classes\": [],\n  \"_model_module\": \"@jupyter-widgets/controls\",\n  \"_model_module_version\": \"1.5.0\",\n  \"_view_count\": null,\n  \"_view_module\": \"@jupyter-widgets/controls\",\n  \"_view_module_version\": \"1.5.0\",\n  \"_model_name\": \"FloatSliderModel\",\n  \"_view_name\": \"FloatSliderView\",\n  \"continuous_update\": true,\n  \"description\": \"a\",\n  \"description_tooltip\": null,\n  \"disabled\": false,\n  \"max\": 1,\n  \"min\": 0,\n  \"orientation\": \"horizontal\",\n  \"readout\": true,\n  \"step\": 0.01,\n  \"value\": 0,\n  \"_states_to_send\": []\n}","application/vnd.jupyter.widget-view+json":{"version":"2.0","version_major":2,"version_minor":0,"model_id":"8980584e-de0c-4ca7-9c5d-9451de0e29d8"}},"metadata":{}},{"output_type":"display_data","data":{"text/plain":"{\n  \"_dom_classes\": [],\n  \"_model_module\": \"@jupyter-widgets/controls\",\n  \"_model_module_version\": \"1.5.0\",\n  \"_view_count\": null,\n  \"_view_module\": \"@jupyter-widgets/controls\",\n  \"_view_module_version\": \"1.5.0\",\n  \"_model_name\": \"HTMLModel\",\n  \"_view_name\": \"HTMLView\",\n  \"description\": \"\",\n  \"description_tooltip\": null,\n  \"placeholder\": \"​\",\n  \"value\": \"\",\n  \"_states_to_send\": []\n}","application/vnd.jupyter.widget-view+json":{"version":"2.0","version_major":2,"version_minor":0,"model_id":"1c770c52-ff33-46ed-aa23-b906a091faed"}},"metadata":{}},{"execution_count":63,"output_type":"execute_result","data":{},"metadata":{}}]},{"cell_type":"code","source":"","metadata":{"tags":[]},"execution_count":null,"outputs":[]},{"cell_type":"code","source":"","metadata":{},"execution_count":null,"outputs":[]}]}

examples/js - widgets.ipynb

@@ -0,0 +1,145 @@
+{
+  "metadata": {
+    "language_info": {
+      "codemirror_mode": {
+        "name": "javascript"
+      },
+      "file_extension": ".js",
+      "mimetype": "text/javascript",
+      "name": "javascript",
+      "nbconvert_exporter": "javascript",
+      "pygments_lexer": "javascript",
+      "version": "es2017"
+    },
+    "kernelspec": {
+      "name": "javascript",
+      "display_name": "JavaScript",
+      "language": "javascript"
+    }
+  },
+  "nbformat_minor": 4,
+  "nbformat": 4,
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "source": "> **Please do not expect this to be a stable API**\n\nThis is an exploration of supporting comms in JupyterLite [@jtpio/jupyterlite#14](https://github.com/jtpio/jupyterlite/issues/18) built for [@jtpio/jupyterlite#141](https://github.com/jtpio/jupyterlite/pull/141).\n\n> You should be able to view this by visiting the [PR docs site](https://jupyterlite--141.org.readthedocs.build/en/141/_static/lab/index.html) \n(kindly hosted by [ReadTheDocs](https://readthedocs.org)).\n>\n> ```\n> https://jupyterlite--141.org.readthedocs.build/en/141/_static/lab/index.html\n> ```\n\n<details>\n    <summary>Notes</summary>\n    <pre>\n    # why do this?\n    \n    \n    </pre>\n</details>",
+      "metadata": {}
+    },
+    {
+      "cell_type": "markdown",
+      "source": "## `FloatSliders` with `observe`",
+      "metadata": {}
+    },
+    {
+      "cell_type": "code",
+      "source": "let {FloatSlider} = kernel.widgets\nself.x = FloatSlider({ description: \"$x$\", min: -Math.PI, max: Math.PI }); x.display();\nObject.entries({sin: Math.sin, cos: Math.cos}).map(([k, fn])=> {\n    self[k] = FloatSlider({ description: '$\\\\' + k + '{x}$', min: -1, max: 1});\n    x.observe(async (change) => self[k].value = fn(change.new))\n    self[k].display()\n})",
+      "metadata": {
+        "trusted": true
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "markdown",
+      "source": "The values _should_ change when set manually.",
+      "metadata": {}
+    },
+    {
+      "cell_type": "code",
+      "source": "x.value = -3",
+      "metadata": {
+        "trusted": true
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "markdown",
+      "source": "A second copy _should_ work...",
+      "metadata": {}
+    },
+    {
+      "cell_type": "code",
+      "source": "x.display()",
+      "metadata": {
+        "trusted": true
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "markdown",
+      "source": "## `Select`",
+      "metadata": {}
+    },
+    {
+      "cell_type": "code",
+      "source": "let { Select } = kernel.widgets\noptions = [\"apple\", \"banana\"]\nself.it = it = Select({rows: 1, description: \"it\", options, _options_labels: options})\nit.display()",
+      "metadata": {
+        "trusted": true
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "markdown",
+      "source": "## `link`",
+      "metadata": {}
+    },
+    {
+      "cell_type": "code",
+      "source": "let { link } = kernel.widgets\nlet { Select } = kernel.widgets\noptions = [\"apple\", \"banana\"]\nlet [it1, it2] = [\"one\", \"another\"].map((d) => Select({rows: 1, description: d, options, _options_labels: options}))\nself.it1 = it1\nself.it2 = it2\nlink([it1, \"index\"], [it2, \"index\"])\nit1.display()\nit2.display()",
+      "metadata": {
+        "trusted": true
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "markdown",
+      "source": "## `dlink`",
+      "metadata": {}
+    },
+    {
+      "cell_type": "code",
+      "source": "let { dlink, FloatSlider } = kernel.widgets;\nself.src = FloatSlider()\nself.tgt = FloatSlider()\nself.c = dlink([src, 'value'], [tgt, 'value'])\nsrc.display()\ntgt.display()",
+      "metadata": {
+        "trusted": true
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "code",
+      "source": "src.value = 5 // updates target objects",
+      "metadata": {
+        "trusted": true
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "code",
+      "source": "tgt.value = 6 // does not update source object",
+      "metadata": {
+        "trusted": true
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "markdown",
+      "source": "## `dlink` (with a transform)",
+      "metadata": {}
+    },
+    {
+      "cell_type": "code",
+      "source": "let { dlink } = kernel.widgets;\nc.unlink()\nc = dlink([src, 'value'], [tgt, 'value'], (x) => 2 * x)\nsrc.display()\ntgt.display()",
+      "metadata": {
+        "trusted": true
+      },
+      "execution_count": null,
+      "outputs": []
+    }
+  ]
+}

package.json

@@ -65,6 +65,7 @@
     "jest-junit": "^11.1.0",
     "jest-raw-loader": "^1.0.1",
     "jest-summary-reporter": "^0.0.2",
+    "json-schema-to-typescript": "^10.1.4",
     "lerna": "^3.22.1",
     "lint-staged": "^10.4.0",
     "npm-run-all": "^4.1.5",

packages/javascript-kernel/src/kernel.ts

@@ -236,6 +236,7 @@ export class JavaScriptKernel extends BaseKernel implements IKernel {
         }
       `
     );
+    (this._iframe.contentWindow as any)['kernel'] = this;
   }
 
   private _iframe: HTMLIFrameElement;