get test_app runserver to work

Author: rmorshea

MANIFEST.in

@@ -0,0 +1,3 @@
+include src/django_idom/static/js/idom.js
+include src/django_idom/templates/head_content.html
+include src/django_idom/templates/view.html

noxfile.py

@@ -52,7 +52,6 @@ def test_suite(session: Session) -> None:
     session.chdir(HERE / "tests")
     session.env["IDOM_DEBUG_MODE"] = "1"
     session.env["SELENIUM_HEADLESS"] = str(int("--headless" in session.posargs))
-    session.run("python", "manage.py", "build_js")
     session.run("python", "manage.py", "test")
 
 

src/django_idom/__init__.py

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

src/django_idom/app_components.py

@@ -0,0 +1,50 @@
+import logging
+from importlib import import_module
+from typing import Dict
+
+from django.conf import settings
+from idom.core.proto import ComponentConstructor
+
+
+logger = logging.getLogger(__name__)
+_LOADED_COMPONENTS: Dict[str, ComponentConstructor] = {}
+
+
+def get_component(name: str) -> ComponentConstructor:
+    return _LOADED_COMPONENTS[name]
+
+
+def has_component(name: str) -> bool:
+    return name in _LOADED_COMPONENTS
+
+
+for app_mod_name in settings.INSTALLED_APPS:
+    idom_mod_name = f"{app_mod_name}.idom"
+
+    try:
+        idom_mod = import_module(idom_mod_name)
+    except ImportError:
+        logger.debug(f"Skipping {idom_mod_name!r} - does not exist")
+        continue
+
+    if not hasattr(idom_mod, "__all__"):
+        logger.warning(
+            f"'django_idom' expected module {idom_mod_name!r} to have an "
+            "'__all__' attribute that lists its publically available components."
+        )
+        continue
+
+    for component_name in idom_mod.__all__:
+        try:
+            component_constructor = getattr(idom_mod, component_name)
+        except AttributeError:
+            logger.warning(
+                f"Module {idom_mod_name!r} has no attribute {component_name!r}"
+            )
+            continue
+
+        if not callable(component_constructor):
+            logger.warning(f"'{idom_mod_name}.{component_name}' is not a component")
+            continue
+
+        _LOADED_COMPONENTS[f"{app_mod_name}.{component_name}"] = component_constructor

src/django_idom/app_settings.py

@@ -1,3 +1,6 @@
 from django.conf import settings
 
+
 IDOM_WEBSOCKET_URL = getattr(settings, "IDOM_WEBSOCKET_URL", "_idom/")
+if not IDOM_WEBSOCKET_URL.endswith("/"):
+    IDOM_WEBSOCKET_URL += "/"

src/django_idom/templates/idom/root.html

@@ -1,5 +1,12 @@
-<div id="{{ idom_view_id }}"></div>
+{% load static %}
+<div id="{{ idom_mount_uuid }}"></div>
 <script type="module" crossorigin="anonymous">
-  import { mountToElement } from "{% static 'js/idom.js' %}";
-  mountViewToElement("{{ idom_websocket_url }}", "{{ idom_view_id }}");
+  import { mountViewToElement } from "{% static 'js/idom.js' %}";
+  const mountPoint = document.getElementById("{{ idom_mount_uuid }}");
+  mountViewToElement(
+    mountPoint,
+    "{{ idom_websocket_url }}",
+    "{{ idom_view_id }}",
+    "{{ idom_view_params }}"
+  );
 </script>

src/django_idom/templates/idom/view.html

@@ -1,3 +1,5 @@
+from uuid import uuid4
+
 from django import template
 
 from django_idom.app_settings import IDOM_WEBSOCKET_URL
@@ -8,10 +10,15 @@
 
 # Template tag that renders the IDOM scripts
 @register.inclusion_tag("idom/head_content.html")
-def idom_scripts():
+def idom_head():
     pass
 
 
 @register.inclusion_tag("idom/view.html")
-def idom_view(view_id):
-    return {"idom_websocket_url": IDOM_WEBSOCKET_URL, "view_id": view_id}
+def idom_view(view_id, view_params=""):
+    return {
+        "idom_websocket_url": IDOM_WEBSOCKET_URL,
+        "idom_mount_uuid": uuid4().hex,
+        "idom_view_id": view_id,
+        "idom_view_params": view_params,
+    }

src/django_idom/templatetags/idom.py

@@ -2,17 +2,35 @@
 import asyncio
 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 .view_loader import ALL_VIEWS
+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."""
 
@@ -34,23 +52,21 @@ async def receive_json(self, content: Any, **kwargs: Any) -> None:
         await self._idom_recv_queue.put(LayoutEvent(**content))
 
     async def _run_dispatch_loop(self):
-        # get the URL parameters and grab the view ID
-        view_id = ...
-        # get component ags from the URL params too
-        component_args = ...
+        view_id = self.scope["url_route"]["kwargs"]["view_id"]
 
-        if view_id not in ALL_VIEWS:
-            logger.warning(f"Uknown IDOM view ID {view_id}")
+        if not has_component(view_id):
+            logger.warning(f"Uknown IDOM view ID {view_id!r}")
             return
 
-        component_constructor = ALL_VIEWS[view_id]
+        component_constructor = get_component(view_id)
+        component_kwargs = dict(parse_qsl(self.scope["query_string"]))
 
         try:
-            component_instance = component_constructor(*component_args)
+            component_instance = component_constructor(**component_kwargs)
         except Exception:
             logger.exception(
                 f"Failed to construct component {component_constructor} "
-                f"with parameters {component_args}"
+                f"with parameters {component_kwargs}"
             )
             return
 

src/django_idom/view_loader.py

@@ -12,7 +12,7 @@ if (LOCATION.protocol == "https:") {
 let WS_ENDPOINT_URL = WS_PROTOCOL + LOCATION.host + "/";
 
 
-export function mountViewToElement(idomWebsocketUrl, viewId) {
-  const fullWebsocketUrl = WS_ENDPOINT_URL + idomWebsocketUrl
-  mountLayoutWithWebSocket(document.getElementById(viewId), fullWebsocketUrl);
+export function mountViewToElement(mountPoint, idomWebsocketUrl, viewId, queryParams) {
+  const fullWebsocketUrl = WS_ENDPOINT_URL + idomWebsocketUrl + viewId + "/";
+  mountLayoutWithWebSocket(mountPoint, fullWebsocketUrl);
 }

src/django_idom/websocket_consumer.py

@@ -1 +1 @@
-test_app/static/build.js
+*.sqlite3

src/js/package-lock.json

@@ -9,14 +9,9 @@
 
 import os
 
-from django.conf import settings
-from django.conf.urls import url
 from django.core.asgi import get_asgi_application
 
-from django_idom import IdomAsyncWebSocketConsumer
-from django_idom.app_settings import IDOM_WEBSOCKET_URL  # noqa: E402
-
-from .views import Root
+from django_idom import django_idom_websocket_consumer_url
 
 
 os.environ.setdefault("DJANGO_SETTINGS_MODULE", "test_app.settings")
@@ -27,14 +22,9 @@
 from channels.routing import ProtocolTypeRouter, URLRouter  # noqa: E402
 
 
-IDOM_WEBSOCKET_URL = settings.IDOM_WEBSOCKET_URL
-
-
 application = ProtocolTypeRouter(
     {
         "http": http_asgi_app,
-        "websocket": URLRouter(
-            [url(IDOM_WEBSOCKET_URL, IdomAsyncWebSocketConsumer.as_asgi())]
-        ),
+        "websocket": URLRouter([django_idom_websocket_consumer_url()]),
     }
 )

src/js/src/index.js

@@ -0,0 +1,24 @@
+import idom
+
+
+__all__ = "HelloWorld", "Button"
+
+
+@idom.component
+def HelloWorld():
+    return idom.html.h1({"id": "hello-world"}, "Hello World!")
+
+
+@idom.component
+def Button():
+    count, set_count = idom.hooks.use_state(0)
+    return idom.html.div(
+        idom.html.button(
+            {"id": "counter-inc", "onClick": lambda event: set_count(count + 1)},
+            "Click me!",
+        ),
+        idom.html.p(
+            {"id": "counter-num", "data-count": count},
+            f"Current count is: {count}",
+        ),
+    )

tests/.gitignore

@@ -1,4 +1,4 @@
-{% load static %}
+{% load static %} {% load idom %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -15,7 +15,7 @@
 
   <body>
     <h1>IDOM Test Page</h1>
-    <div id="mount"></div>
-    <script src="{% static 'build.js' %}" crossorigin="anonymous"></script>
+    <div>{% idom_view "test_app.HelloWorld" %}</div>
+    <div>{% idom_view "test_app.Button" %}</div>
   </body>
 </html>

tests/test_app/asgi.py

@@ -1,4 +1,3 @@
-import idom
 from django.http import HttpResponse
 from django.template import loader
 
@@ -7,28 +6,3 @@ def base_template(request):
     template = loader.get_template("base.html")
     context = {}
     return HttpResponse(template.render(context, request))
-
-
-@idom.component
-def Root():
-    return idom.html.div(HelloWorld(), Counter())
-
-
-@idom.component
-def HelloWorld():
-    return idom.html.h1({"id": "hello-world"}, "Hello World!")
-
-
-@idom.component
-def Counter():
-    count, set_count = idom.hooks.use_state(0)
-    return idom.html.div(
-        idom.html.button(
-            {"id": "counter-inc", "onClick": lambda event: set_count(count + 1)},
-            "Click me!",
-        ),
-        idom.html.p(
-            {"id": "counter-num", "data-count": count},
-            f"Current count is: {count}",
-        ),
-    )