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);
 }