skeleton of django installable app

.gitignore

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

setup.py

@@ -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
 # -----------------------------------------------------------------------------

src/django_idom/app_settings.py

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

src/django_idom/templates/idom/head_content.html

@@ -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/templates/idom/root.html

@@ -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/view.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/templatetags/idom.py

@@ -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/view_loader.py

@@ -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/websocket_consumer.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,
  )

tests/js/package.json → src/js/package.json

@@ -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": [

tests/js/rollup.config.js → src/js/rollup.config.js

@@ -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: [

src/js/src/index.js

@@ -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/test_app/asgi.py

@@ -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/test_app/idom/button.py

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

tests/test_app/settings.py

@@ -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 = [