Lightweight JavaScript ESM module loader for Django.

Navigation

Verified details

These details have been verified by PyPI
Project links
GitHub Statistics
Maintainers
Avatar for codingjoe from gravatar.com codingjoe
Meta

Unverified details

These details have not been verified by PyPI
Meta
  • License: BSD License
  • Tags ESM , JavaScript , importmap , Django , module
  • Requires: Python >=3.10
  • Provides-Extra: whitenoise
Classifiers
Report project as malware

Project description

Django ESM

Django ESM: NextGen JavaScript ESM module support for Django

NextGen JavaScript ESM module support for Django.

PyPi Version Test Coverage GitHub License

Highlights

  • 😌 easy transition
  • ⚡️ smart cache busting
  • 📦 no more bundling
  • ☕️ native ESM support
  • 📍 local vendoring with npm

Setup

Install the package and add it to your INSTALLED_APPS setting:

pip install django-esm[whitenoise]

First, add django_esm to your INSTALLED_APPS settings:

# settings.py
INSTALLED_APPS = [
    # …
    "django_esm",  # add django_esm before staticfiles
    "django.contrib.staticfiles",
]

Optionally: If you are using whitenoise you will need to modify your WSGI application.

import os
import pathlib

from django.core.wsgi import get_wsgi_application

from django_esm.wsgi import ESM

BASE_DIR = pathlib.Path(__file__).parent.parent

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "myproject.settings")

application = ESM(get_wsgi_application())

Finally, add the import map to your base template:

<!-- base.html -->
<!DOCTYPE html>
{% load esm %}
<html lang="en">
<head>
  <script type="importmap">{% importmap %}</script>
  <title>Django ESM is awesome!</title>
</head>
</html>

That's it! Remember to run npm install and python manage.py esm --watch.

Usage

You can now import JavaScript modules in your Django templates:

<!-- index.html -->
{% block content %}
  <script type="module">
    import "lit"
  </script>
{% endblock %}

Form.media

To use your importmap in Django forms, you can use the Form.media attribute:

# forms.py
from django import forms
from django_esm.forms import ImportESModule


class MyForm(forms.Form):
    name = forms.CharField()

    class Media:
        js = [ImportESModule("@sentry/browser")]

Now {{ form.media.js }} will render to like this:

<script type="module">import '@sentry/browser'</script>

Private modules

You can also import private modules from your Django app:

<!-- index.html -->
{% block content %}
  <script type="module">
    import "#myapp/js/my-module.js"
  </script>
{% endblock %}

To import a private module, prefix the module name with #. You need to define your private modules in your package.json file:

{
  "imports": {
    "#myapp/script": "./myapp/static/js/script.js",
    // You may use trailing stars to import all files in a directory.
    "#myapp/*": "./myapp/static/js/*"
  }
}

How it works

Django ESM works via native JavaScript module support in modern browsers. It uses the import map to map module names to their location on the server.

Here is an example import map:

{
  "imports": {
    "htmx.org": "/static/htmx.org/dist/htmx.min.js"
  }
}

Project details

Verified details

These details have been verified by PyPI
Project links
GitHub Statistics
Maintainers
Avatar for codingjoe from gravatar.com codingjoe
Meta

Unverified details

These details have not been verified by PyPI
Meta
  • License: BSD License
  • Tags ESM , JavaScript , importmap , Django , module
  • Requires: Python >=3.10
  • Provides-Extra: whitenoise
Classifiers

Release history Release notifications | RSS feed

This version

0.8.2

0.8.1

0.8.0

0.7.3

0.7.2

0.7.1

0.7.0

0.6.0

0.5.0

0.4.2

0.4.1

0.4.0

0.3.1

0.3.0

0.2.3

0.2.2

0.2.1

0.2.0

0.1.2

0.1.1

0.1.0

Download files

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

Source Distribution

django_esm-0.8.2.tar.gz (8.8 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

django_esm-0.8.2-py3-none-any.whl (9.9 kB view details)

Uploaded Python 3

File details

Details for the file django_esm-0.8.2.tar.gz.

File metadata

  • Download URL: django_esm-0.8.2.tar.gz
  • Upload date:
  • Size: 8.8 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.13.7

File hashes

Hashes for django_esm-0.8.2.tar.gz
Algorithm Hash digest
SHA256 451ec46079f1523c4c5ad39521bd446f1961a20d9d2ed57242ef180b8df56e1e
MD5 c0bbe3707bc3d20c13c83c1f27e7fe95
BLAKE2b-256 147929702ec5d4405b73a8ec3bcd607041afab9386f72fc28716de64385e752b

See more details on using hashes here.

Provenance

The following attestation bundles were made for django_esm-0.8.2.tar.gz:

Publisher: release.yml on codingjoe/django-esm

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

File details

Details for the file django_esm-0.8.2-py3-none-any.whl.

File metadata

  • Download URL: django_esm-0.8.2-py3-none-any.whl
  • Upload date:
  • Size: 9.9 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.13.7

File hashes

Hashes for django_esm-0.8.2-py3-none-any.whl
Algorithm Hash digest
SHA256 71067cc1db4c5db25a64e61595f577e7d97bd4e183aa5bc7086afc6804369ec3
MD5 baa9e0ad537fd23f0682e6f56d9e3d05
BLAKE2b-256 c2c5b6f000e0322014380a448a38af6f14eeca48c9d8a923b3837856a297071c

See more details on using hashes here.

Provenance

The following attestation bundles were made for django_esm-0.8.2-py3-none-any.whl:

Publisher: release.yml on codingjoe/django-esm

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Supported by

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