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.h1(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.5.tar.gz (261.3 kB view details)

Uploaded Source

Built Distribution

django_idom-0.0.5-py2.py3-none-any.whl (266.0 kB view details)

Uploaded Python 2 Python 3

File details

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

File metadata

  • Download URL: django_idom-0.0.5.tar.gz
  • Upload date:
  • Size: 261.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/4.0.0 CPython/3.10.4

File hashes

Hashes for django_idom-0.0.5.tar.gz
Algorithm Hash digest
SHA256 24090751ea780bace787d75b271b2499f9d375de4ba029b94b6a6c3a580e97b8
MD5 6280901f3c8758bf35aa019ed2229b47
BLAKE2b-256 69a768720e19435ec7a82261be0dfcb35c77a441f490a8540c27cd681257b0db

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for django_idom-0.0.5-py2.py3-none-any.whl
Algorithm Hash digest
SHA256 275be1b225153a2ee9415a218bf00476f18a165baf6e986782e6e2d2136d57b9
MD5 c205ce2b7fa4a6b7e6dcba6824d9d3d0
BLAKE2b-256 51a6e95836aa4b2a755c538521741697cd33cf8bc35352aa04cbf42226a01dc5

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