skeleton of django installable app

Author: rmorshea

.gitignore

@@ -1,3 +1,6 @@
+# Django IDOM Build Artifacts
+src/django_idom/static/js
+
 # Django #
 logs
 *.log

MANIFEST.in

@@ -1,8 +1,25 @@
-import os
+from __future__ import print_function
+
+import pipes
+import shutil
+import subprocess
 import sys
+import traceback
+from distutils import log
+from distutils.command.build import build  # type: ignore
+from distutils.command.sdist import sdist  # type: ignore
 from pathlib import Path
 
 from setuptools import find_packages, setup
+from setuptools.command.develop import develop
+
+
+if sys.platform == "win32":
+    from subprocess import list2cmdline
+else:
+
+    def list2cmdline(cmd_list):
+        return " ".join(map(pipes.quote, cmd_list))
 
 
 # the name of the project
@@ -31,6 +48,7 @@
     "license": "MIT",
     "platforms": "Linux, Mac OS X, Windows",
     "keywords": ["interactive", "widgets", "DOM", "React"],
+    "include_package_data": True,
     "zip_safe": False,
     "classifiers": [
         "Framework :: Django",
@@ -52,14 +70,14 @@
 # Library Version
 # -----------------------------------------------------------------------------
 
-with open(os.path.join(package_dir, "__init__.py")) as f:
-    for line in f.read().split("\n"):
-        if line.startswith("__version__ = "):
-            package["version"] = eval(line.split("=", 1)[1])
-            break
-    else:
-        print("No version found in %s/__init__.py" % package_dir)
-        sys.exit(1)
+
+for line in (package_dir / "__init__.py").read_text().split("\n"):
+    if line.startswith("__version__ = "):
+        package["version"] = eval(line.split("=", 1)[1])
+        break
+else:
+    print("No version found in %s/__init__.py" % package_dir)
+    sys.exit(1)
 
 
 # -----------------------------------------------------------------------------
@@ -87,6 +105,42 @@
 package["long_description_content_type"] = "text/markdown"
 
 
+# ----------------------------------------------------------------------------
+# Build Javascript
+# ----------------------------------------------------------------------------
+
+
+def build_javascript_first(cls):
+    class Command(cls):
+        def run(self):
+            log.info("Installing Javascript...")
+            try:
+                js_dir = str(src_dir / "js")
+                npm = shutil.which("npm")  # this is required on windows
+                if npm is None:
+                    raise RuntimeError("NPM is not installed.")
+                for args in (f"{npm} install", f"{npm} run build"):
+                    args_list = args.split()
+                    log.info(f"> {list2cmdline(args_list)}")
+                    subprocess.run(args_list, cwd=js_dir, check=True)
+            except Exception:
+                log.error("Failed to install Javascript")
+                log.error(traceback.format_exc())
+                raise
+            else:
+                log.info("Successfully installed Javascript")
+            super().run()
+
+    return Command
+
+
+package["cmdclass"] = {
+    "sdist": build_javascript_first(sdist),
+    "build": build_javascript_first(build),
+    "develop": build_javascript_first(develop),
+}
+
+
 # -----------------------------------------------------------------------------
 # Install It
 # -----------------------------------------------------------------------------

setup.py

@@ -0,0 +1,3 @@
+from django.conf import settings
+
+IDOM_WEBSOCKET_URL = getattr(settings, "IDOM_WEBSOCKET_URL", "_idom/")

src/django_idom/app_settings.py

@@ -1,2 +1,2 @@
 <!-- The importable IDOM JS -->
-<script src="{% static 'js/idom.js' %}" crossorigin="anonymous"></script>
+<script src="{% static 'js/idom.js' %}" crossorigin="anonymous"></script>

src/django_idom/static/js/idom.js

@@ -1,4 +1,8 @@
 <!-- Allows for making the IDOM root object the Django way
     Developers will often opt not to use this,
     but having this makes getting started a little bit easier to explain -->
-<div id="{{ html_id }}"></div>
+<div id="{{ idom_view_id }}"></div>
+<script type="module" crossorigin="anonymous">
+  import { mountToElement } from "{% static 'js/idom.js' %}";
+  mountViewToElement("{{ idom_websocket_url }}", "{{ idom_view_id }}");
+</script>

src/django_idom/templates/idom/head_content.html

@@ -0,0 +1,5 @@
+<div id="{{ idom_view_id }}"></div>
+<script type="module" crossorigin="anonymous">
+  import { mountToElement } from "{% static 'js/idom.js' %}";
+  mountViewToElement("{{ idom_websocket_url }}", "{{ idom_view_id }}");
+</script>

src/django_idom/templates/idom/root.html

@@ -1,5 +1,7 @@
 from django import template
 
+from django_idom.app_settings import IDOM_WEBSOCKET_URL
+
 
 register = template.Library()
 
@@ -10,7 +12,6 @@ def idom_scripts():
     pass
 
 
-# Template tag that renders an empty idom root object
-@register.inclusion_tag("idom/root.html")
-def idom_view(html_id):
-    return {"html_id": html_id}
+@register.inclusion_tag("idom/view.html")
+def idom_view(view_id):
+    return {"idom_websocket_url": IDOM_WEBSOCKET_URL, "view_id": view_id}

src/django_idom/templates/idom/view.html

@@ -0,0 +1,29 @@
+import logging
+from importlib import import_module
+from pathlib import Path
+from typing import Dict
+
+from django.conf import settings
+from idom.core.proto import ComponentConstructor
+
+
+ALL_VIEWS: Dict[str, ComponentConstructor] = {}
+logger = logging.getLogger(__name__)
+
+for app_name in settings.INSTALLED_APPS:
+    app_mod = import_module(app_name)
+    if not hasattr(app_mod, "idom"):
+        continue
+
+    for idom_view_path in Path(app_mod.__file__).iterdir():
+        if idom_view_path.suffix == ".py" and idom_view_path.is_file():
+            idom_view_mod_name = ".".join([app_name, "idom", idom_view_path.stem])
+            idom_view_mod = import_module(idom_view_mod_name)
+
+            if hasattr(idom_view_mod, "Root") and callable(idom_view_mod.Root):
+                ALL_VIEWS[idom_view_mod_name] = idom_view_mod.Root
+            else:
+                logger.warning(
+                    f"Expected module {idom_view_mod_name} to expose a 'Root' "
+                    " attribute that is an IDOM component."
+                )

src/django_idom/templatetags/idom.py

@@ -1,20 +1,22 @@
 """Anything used to construct a websocket endpoint"""
 import asyncio
+import logging
 from typing import Any
 
 from channels.generic.websocket import AsyncJsonWebsocketConsumer
 from idom.core.dispatcher import dispatch_single_view
 from idom.core.layout import Layout, LayoutEvent
-from idom.core.proto import ComponentConstructor
+
+from .view_loader import ALL_VIEWS
+
+
+logger = logging.getLogger(__name__)
 
 
 class IdomAsyncWebSocketConsumer(AsyncJsonWebsocketConsumer):
     """Communicates with the browser to perform actions on-demand."""
 
-    def __init__(
-        self, component: ComponentConstructor, *args: Any, **kwargs: Any
-    ) -> None:
-        self._idom_component_constructor = component
+    def __init__(self, *args: Any, **kwargs: Any) -> None:
         super().__init__(*args, **kwargs)
 
     async def connect(self) -> None:
@@ -32,10 +34,30 @@ 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 = ...
+
+        if view_id not in ALL_VIEWS:
+            logger.warning(f"Uknown IDOM view ID {view_id}")
+            return
+
+        component_constructor = ALL_VIEWS[view_id]
+
+        try:
+            component_instance = component_constructor(*component_args)
+        except Exception:
+            logger.exception(
+                f"Failed to construct component {component_constructor} "
+                f"with parameters {component_args}"
+            )
+            return
+
         self._idom_recv_queue = recv_queue = asyncio.Queue()
         try:
             await dispatch_single_view(
-                Layout(self._idom_component_constructor()),
+                Layout(component_instance),
                 self.send_json,
                 recv_queue.get,
             )

src/django_idom/view_loader.py

@@ -1,6 +1,6 @@
 {
-  "name": "tests",
-  "version": "1.0.0",
+  "name": "django-idom-client",
+  "version": "0.0.1",
   "description": "test app for idom_django websocket server",
   "main": "src/index.js",
   "files": [

src/django_idom/websocket_consumer.py

@@ -7,7 +7,7 @@ const { PRODUCTION } = process.env;
 export default {
   input: "src/index.js",
   output: {
-    file: "../test_app/static/build.js",
+    file: "../django_idom/static/js/idom.js",
     format: "esm",
   },
   plugins: [

tests/js/.gitignore renamed to src/js/.gitignore

@@ -0,0 +1,18 @@
+import { mountLayoutWithWebSocket } from "idom-client-react";
+
+
+// Set up a websocket at the base endpoint
+let LOCATION = window.location;
+let WS_PROTOCOL = "";
+if (LOCATION.protocol == "https:") {
+  WS_PROTOCOL = "wss://";
+} else {
+  WS_PROTOCOL = "ws://";
+}
+let WS_ENDPOINT_URL = WS_PROTOCOL + LOCATION.host + "/";
+
+
+export function mountViewToElement(idomWebsocketUrl, viewId) {
+  const fullWebsocketUrl = WS_ENDPOINT_URL + idomWebsocketUrl
+  mountLayoutWithWebSocket(document.getElementById(viewId), fullWebsocketUrl);
+}

tests/js/package-lock.json renamed to src/js/package-lock.json

@@ -9,10 +9,12 @@
 
 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  # noqa: E402
+from django_idom import IdomAsyncWebSocketConsumer
+from django_idom.app_settings import IDOM_WEBSOCKET_URL  # noqa: E402
 
 from .views import Root
 
@@ -25,11 +27,14 @@
 from channels.routing import ProtocolTypeRouter, URLRouter  # noqa: E402
 
 
+IDOM_WEBSOCKET_URL = settings.IDOM_WEBSOCKET_URL
+
+
 application = ProtocolTypeRouter(
     {
         "http": http_asgi_app,
         "websocket": URLRouter(
-            [url("", IdomAsyncWebSocketConsumer.as_asgi(component=Root))]
+            [url(IDOM_WEBSOCKET_URL, IdomAsyncWebSocketConsumer.as_asgi())]
         ),
     }
 )

tests/js/package.json renamed to src/js/package.json

@@ -0,0 +1,6 @@
+import idom
+
+
+@idom.component
+def Root():
+    ...

tests/js/rollup.config.js renamed to src/js/rollup.config.js

@@ -37,6 +37,7 @@
     "django.contrib.messages",
     "django.contrib.staticfiles",
     "channels",  # Websocket library
+    "django_idom",  # Django compatible IDOM client
     "test_app",  # This test application
 ]
 MIDDLEWARE = [