parametrized components + serve web modules

Author: rmorshea

src/django_idom/__init__.py

@@ -1,8 +1,5 @@
-from .websocket_consumer import (
-    IdomAsyncWebSocketConsumer,
-    django_idom_websocket_consumer_url,
-)
+from .app_paths import django_idom_web_modules_path, django_idom_websocket_consumer_path
 
 
 __version__ = "0.0.1"
-__all__ = ["IdomAsyncWebSocketConsumer", "django_idom_websocket_consumer_url"]
+__all__ = ["django_idom_websocket_consumer_path", "django_idom_web_modules_path"]

src/django_idom/app_paths.py

@@ -0,0 +1,29 @@
+from django.urls import path
+
+from . import views
+from .app_settings import IDOM_WEB_MODULES_URL, IDOM_WEBSOCKET_URL
+from .websocket_consumer import IdomAsyncWebSocketConsumer
+
+
+def django_idom_websocket_consumer_path(*args, **kwargs):
+    """Return a URL resolver for :class:`IdomAsyncWebSocketConsumer`
+
+    While this is relatively uncommon in most Django apps, because the URL of the
+    websocket must be defined by the setting ``IDOM_WEBSOCKET_URL``. There's no need
+    to allow users to configure the URL themselves
+    """
+    return path(
+        IDOM_WEBSOCKET_URL + "<view_id>/",
+        IdomAsyncWebSocketConsumer.as_asgi(),
+        *args,
+        **kwargs,
+    )
+
+
+def django_idom_web_modules_path(*args, **kwargs):
+    return path(
+        IDOM_WEB_MODULES_URL + "<path:file>",
+        views.web_modules_file,
+        *args,
+        **kwargs,
+    )

src/django_idom/app_settings.py

@@ -10,6 +10,6 @@
     for file in (APP_DIR / "templates" / "idom").iterdir()
 }
 
-IDOM_WEBSOCKET_URL = getattr(settings, "IDOM_WEBSOCKET_URL", "_idom/")
-if not IDOM_WEBSOCKET_URL.endswith("/"):
-    IDOM_WEBSOCKET_URL += "/"
+IDOM_BASE_URL = getattr(settings, "IDOM_BASE_URL", "_idom/")
+IDOM_WEBSOCKET_URL = IDOM_BASE_URL + "websocket/"
+IDOM_WEB_MODULES_URL = IDOM_BASE_URL + "web_module/"

src/django_idom/templates/idom/view.html

@@ -6,6 +6,7 @@
   mountViewToElement(
     mountPoint,
     "{{ idom_websocket_url }}",
+    "{{ idom_web_modules_url }}",
     "{{ idom_view_id }}",
     "{{ idom_view_params }}"
   );

src/django_idom/templatetags/idom.py

@@ -1,8 +1,15 @@
+import json
+from urllib.parse import urlencode
 from uuid import uuid4
 
 from django import template
 
-from django_idom.app_settings import IDOM_WEBSOCKET_URL, TEMPLATE_FILE_PATHS
+from django_idom.app_settings import (
+    IDOM_WEB_MODULES_URL,
+    IDOM_WEBSOCKET_URL,
+    TEMPLATE_FILE_PATHS,
+)
+from ..app_components import has_component
 
 
 register = template.Library()
@@ -15,10 +22,16 @@ def idom_head():
 
 
 @register.inclusion_tag(TEMPLATE_FILE_PATHS["view"])
-def idom_view(view_id, view_params=""):
+def idom_view(_component_id_, **kwargs):
+    if not has_component(_component_id_):
+        raise ValueError(f"No component {_component_id_!r} exists")
+
+    json_kwargs = json.dumps(kwargs, separators=(",", ":"))
+
     return {
         "idom_websocket_url": IDOM_WEBSOCKET_URL,
+        "idom_web_modules_url": IDOM_WEB_MODULES_URL,
         "idom_mount_uuid": uuid4().hex,
-        "idom_view_id": view_id,
-        "idom_view_params": view_params,
+        "idom_view_id": _component_id_,
+        "idom_view_params": urlencode({"kwargs": json_kwargs}),
     }

src/django_idom/views.py

@@ -0,0 +1,7 @@
+from django.http import HttpResponse
+from idom.config import IDOM_WED_MODULES_DIR
+
+
+def web_modules_file(request, file: str) -> HttpResponse:
+    file_path = IDOM_WED_MODULES_DIR.current.joinpath(*file.split("/"))
+    return HttpResponse(file_path.read_text(), content_type="text/javascript")

src/django_idom/websocket_consumer.py

@@ -1,36 +1,20 @@
 """Anything used to construct a websocket endpoint"""
 import asyncio
+import json
 import logging
 from typing import Any
 from urllib.parse import parse_qsl
 
 from channels.generic.websocket import AsyncJsonWebsocketConsumer
-from django.urls import path
 from idom.core.dispatcher import dispatch_single_view
 from idom.core.layout import Layout, LayoutEvent
 
 from .app_components import get_component, has_component
-from .app_settings import IDOM_WEBSOCKET_URL
 
 
 logger = logging.getLogger(__name__)
 
 
-def django_idom_websocket_consumer_url(*args, **kwargs):
-    """Return a URL resolver for :class:`IdomAsyncWebSocketConsumer`
-
-    While this is relatively uncommon in most Django apps, because the URL of the
-    websocket must be defined by the setting ``IDOM_WEBSOCKET_URL``. There's no need
-    to allow users to configure the URL themselves
-    """
-    return path(
-        IDOM_WEBSOCKET_URL + "<view_id>/",
-        IdomAsyncWebSocketConsumer.as_asgi(),
-        *args,
-        **kwargs,
-    )
-
-
 class IdomAsyncWebSocketConsumer(AsyncJsonWebsocketConsumer):
     """Communicates with the browser to perform actions on-demand."""
 
@@ -59,7 +43,9 @@ async def _run_dispatch_loop(self):
             return
 
         component_constructor = get_component(view_id)
-        component_kwargs = dict(parse_qsl(self.scope["query_string"]))
+
+        query_dict = dict(parse_qsl(self.scope["query_string"].decode()))
+        component_kwargs = json.loads(query_dict.get("kwargs", "{}"))
 
         try:
             component_instance = component_constructor(**component_kwargs)

src/js/package-lock.json

@@ -10,14 +10,14 @@
     "build": "rollup --config",
     "format": "prettier --ignore-path .gitignore --write ."
   },
-  "dependencies": {
-    "idom-client-react": "^0.8.2"
-  },
   "devDependencies": {
     "prettier": "^2.2.1",
     "rollup": "^2.35.1",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0"
+  },
+  "dependencies": {
+    "idom-client-react": "^0.8.5"
   }
 }

src/js/package.json

@@ -1,6 +1,5 @@
 import { mountLayoutWithWebSocket } from "idom-client-react";
 
-
 // Set up a websocket at the base endpoint
 let LOCATION = window.location;
 let WS_PROTOCOL = "";
@@ -11,8 +10,22 @@ if (LOCATION.protocol == "https:") {
 }
 let WS_ENDPOINT_URL = WS_PROTOCOL + LOCATION.host + "/";
 
+export function mountViewToElement(
+  mountPoint,
+  idomWebsocketUrl,
+  idomWebModulesUrl,
+  viewId,
+  queryParams
+) {
+  const fullWebsocketUrl =
+    WS_ENDPOINT_URL + idomWebsocketUrl + viewId + "/?" + queryParams;
+
+  const fullWebModulesUrl = LOCATION.origin + "/" + idomWebModulesUrl
+  const loadImportSource = (source, sourceType) => {
+    return import(
+      sourceType == "NAME" ? `${fullWebModulesUrl}${source}` : source
+    );
+  };
 
-export function mountViewToElement(mountPoint, idomWebsocketUrl, viewId, queryParams) {
-  const fullWebsocketUrl = WS_ENDPOINT_URL + idomWebsocketUrl + viewId + "/";
-  mountLayoutWithWebSocket(mountPoint, fullWebsocketUrl);
+  mountLayoutWithWebSocket(mountPoint, fullWebsocketUrl, loadImportSource);
 }

src/js/src/index.js

@@ -11,7 +11,7 @@
 
 from django.core.asgi import get_asgi_application
 
-from django_idom import django_idom_websocket_consumer_url
+from django_idom import django_idom_websocket_consumer_path
 
 
 os.environ.setdefault("DJANGO_SETTINGS_MODULE", "test_app.settings")
@@ -25,6 +25,6 @@
 application = ProtocolTypeRouter(
     {
         "http": http_asgi_app,
-        "websocket": URLRouter([django_idom_websocket_consumer_url()]),
+        "websocket": URLRouter([django_idom_websocket_consumer_path()]),
     }
 )

tests/test_app/asgi.py

@@ -19,3 +19,18 @@ def Button():
             f"Current count is: {count}",
         ),
     )
+
+
+@idom.component
+def ParametrizedComponent(x, y):
+    total = x + y
+    return idom.html.h1({"id": "parametrized-component", "data-value": total}, total)
+
+
+victory = idom.web.module_from_template("react", "victory", fallback="...")
+VictoryBar = idom.web.export(victory, "VictoryBar")
+
+
+@idom.component
+def SimpleBarChart():
+    return VictoryBar()

tests/test_app/components.py

@@ -1,7 +1,9 @@
-from .components import Button, HelloWorld
+from .components import Button, HelloWorld, ParametrizedComponent, SimpleBarChart
 
 
 components = [
     HelloWorld,
     Button,
+    ParametrizedComponent,
+    SimpleBarChart,
 ]

tests/test_app/idom.py

@@ -17,5 +17,7 @@
     <h1>IDOM Test Page</h1>
     <div>{% idom_view "test_app.HelloWorld" %}</div>
     <div>{% idom_view "test_app.Button" %}</div>
+    <div>{% idom_view "test_app.ParametrizedComponent" x=123 y=456 %}</div>
+    <div>{% idom_view "test_app.SimpleBarChart" %}</div>
   </body>
 </html>

tests/test_app/templates/base.html

@@ -2,6 +2,8 @@
 
 from channels.testing import ChannelsLiveServerTestCase
 from selenium import webdriver
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support import expected_conditions
 from selenium.webdriver.support.ui import WebDriverWait
 
 
@@ -13,8 +15,11 @@ def setUp(self):
     def tearDown(self) -> None:
         self.driver.quit()
 
+    def wait(self, timeout=5):
+        return WebDriverWait(self.driver, timeout)
+
     def wait_until(self, condition, timeout=5):
-        WebDriverWait(self.driver, timeout).until(lambda driver: condition())
+        return self.wait(timeout).until(lambda driver: condition())
 
     def test_hello_world(self):
         self.driver.find_element_by_id("hello-world")
@@ -27,6 +32,17 @@ def test_counter(self):
             self.wait_until(lambda: count.get_attribute("data-count") == str(i))
             button.click()
 
+    def test_parametrized_component(self):
+        element = self.driver.find_element_by_id("parametrized-component")
+        self.assertEqual(element.get_attribute("data-value"), "579")
+
+    def test_component_from_web_module(self):
+        self.wait(10).until(
+            expected_conditions.visibility_of_element_located(
+                (By.CLASS_NAME, "VictoryContainer")
+            )
+        )
+
 
 def make_driver(page_load_timeout, implicit_wait_timeout):
     options = webdriver.ChromeOptions()

tests/test_app/tests.py

@@ -19,7 +19,12 @@
 """
 from django.urls import path
 
+from django_idom import django_idom_web_modules_path
+
 from .views import base_template
 
 
-urlpatterns = [path("", base_template)]
+urlpatterns = [
+    path("", base_template),
+    django_idom_web_modules_path(),
+]