Skip to main content

Control the web with Python

Project description

Django IDOM · Tests PyPI Version License

django-idom allows Django to integrate with IDOM, a reactive Python web framework for building interactive websites without needing a single line of Javascript.

You can try IDOM now in a Jupyter Notebook: Binder

Quick Example

example_app/components.py

This is where you'll define your IDOM components. Ultimately though, you should feel free to organize your component modules as you wish. Any components created will ultimately be referenced by Python dotted path in your-template.html.

from idom import component, html
from django_idom import IdomWebsocket

# Components are CamelCase by ReactJS convention
@component
def Hello(websocket: IdomWebsocket, greeting_recipient: str):
    return html.header(f"Hello {greeting_recipient}!")

example_app/templates/your-template.html

In your templates, you may add IDOM components into your HTML by using the idom_component template tag. This tag requires the dotted path to the component function.

Additonally, you can pass in keyworded arguments into your component function.

In context this will look a bit like the following...

{% load idom %}

<!DOCTYPE html>
<html>
  <head>
    <title>Example Project</title>
  </head>

  <body>
    {% idom_component "my_django_project.example_app.components.Hello" greeting_recipient="World" %}
  </body>
</html>

Installation

Install django-idom via pip.

pip install django-idom

You'll also need to modify a few files in your Django project.

settings.py

In your settings you'll need to add channels and django_idom to INSTALLED_APPS.

INSTALLED_APPS = [
  ...,
  "channels",
  "django_idom",
]

# Ensure ASGI_APPLICATION is set properly based on your project name!
ASGI_APPLICATION = "my_django_project.asgi.application"

Optional: You can also configure IDOM settings.

# If "idom" cache is not configured, then we'll use "default" instead
CACHES = {
  "idom": {"BACKEND": ...},
}

# Maximum seconds between two reconnection attempts that would cause the client give up.
# 0 will disable reconnection.
IDOM_WS_MAX_RECONNECT_TIMEOUT: int = 604800

# The URL for IDOM to serve websockets
IDOM_WEBSOCKET_URL: str = "idom/"

urls.py

Add IDOM HTTP paths to your urlpatterns.

from django.urls import include, path

urlpatterns = [
    path("idom/", include("django_idom.http.urls")),
    ...
]

asgi.py

Register IDOM's websocket using IDOM_WEBSOCKET_PATH.

Note: If you do not have an asgi.py, follow the channels installation guide.

import os
from django.core.asgi import get_asgi_application

# Ensure DJANGO_SETTINGS_MODULE is set properly based on your project name!
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "my_django_project.settings")
django_asgi_app = get_asgi_application()

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.sessions import SessionMiddlewareStack
from django_idom import IDOM_WEBSOCKET_PATH

application = ProtocolTypeRouter(
    {
        "http": django_asgi_app,
        "websocket": SessionMiddlewareStack(
            AuthMiddlewareStack(URLRouter([IDOM_WEBSOCKET_PATH]))
        ),
    }
)

Developer Guide

If you plan to make code changes to this repository, you'll need to install the following dependencies first:

Once done, you should clone this repository:

git clone https://github.com/idom-team/django-idom.git
cd django-idom

Then, by running the command below you can:

  • Install an editable version of the Python code

  • Download, build, and install Javascript dependencies

pip install -e . -r requirements.txt

Finally, to verify that everything is working properly, you'll want to run the test suite.

Running The Tests

This repo uses Nox to run scripts which can be found in noxfile.py. For a full test of available scripts run nox -l. To run the full test suite simple execute:

nox -s test

To run the tests using a headless browser:

nox -s test -- --headless

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django_idom-0.0.2.tar.gz (260.6 kB view details)

Uploaded Source

Built Distribution

django_idom-0.0.2-py2.py3-none-any.whl (265.5 kB view details)

Uploaded Python 2 Python 3

File details

Details for the file django_idom-0.0.2.tar.gz.

File metadata

  • Download URL: django_idom-0.0.2.tar.gz
  • Upload date:
  • Size: 260.6 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.7.1 importlib_metadata/4.10.1 pkginfo/1.8.2 requests/2.27.1 requests-toolbelt/0.9.1 tqdm/4.62.3 CPython/3.10.2

File hashes

Hashes for django_idom-0.0.2.tar.gz
Algorithm Hash digest
SHA256 5a13a35a68c47761d676da439df05fa04d82dbe49a776c4070b492dc485f7688
MD5 7418ee80d2c554657d754bf82519a1df
BLAKE2b-256 fefc62cca2b18d99e8eb5728612959aae81b882b86002be4dbe3f6d518eb3daa

See more details on using hashes here.

File details

Details for the file django_idom-0.0.2-py2.py3-none-any.whl.

File metadata

  • Download URL: django_idom-0.0.2-py2.py3-none-any.whl
  • Upload date:
  • Size: 265.5 kB
  • Tags: Python 2, Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.7.1 importlib_metadata/4.10.1 pkginfo/1.8.2 requests/2.27.1 requests-toolbelt/0.9.1 tqdm/4.62.3 CPython/3.10.2

File hashes

Hashes for django_idom-0.0.2-py2.py3-none-any.whl
Algorithm Hash digest
SHA256 c60f807cf318f237bc01629d5dfeafdcda31d0a11c5159f7218a4eed871f690b
MD5 93b493c43bfbf33c9693124a8fd8f73a
BLAKE2b-256 a4da48356d80a01ae76062cdd71e6f1d987737c08a796d6bbee299c85143b00c

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page