Skip to main content

Lightweight JavaScript ESM module loader for Django.

Project description

Django ESM

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
# settings.py
INSTALLED_APPS = [
    # …
    'django_esm',
]

Next, add the node_modules directory to your staticfiles directories:

# settings.py
STATICFILES_DIRS = [
    BASE_DIR / "node_modules",
]

Finally, add the import map to your base template:

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

That's it! Don't forget to run npm install and python manage.py collectstatic.

Usage

You can now import JavaScript modules in your Django templates:

<!-- index.html -->
{% block content %}
  <script type="module">
    import "htmx.org"
    htmx.logAll()
  </script>
{% endblock %}

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


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.1.2.tar.gz (4.4 kB view details)

Uploaded Source

Built Distribution

django_esm-0.1.2-py3-none-any.whl (5.2 kB view details)

Uploaded Python 3

File details

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

File metadata

  • Download URL: django_esm-0.1.2.tar.gz
  • Upload date:
  • Size: 4.4 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/4.0.2 CPython/3.12.1

File hashes

Hashes for django_esm-0.1.2.tar.gz
Algorithm Hash digest
SHA256 bde4ca66c955ccf9cfb162cb63af01a7ed39c5c75c8f3353c120bc576ecd912d
MD5 b90091aca85067946abff4ce3b567e08
BLAKE2b-256 33615ed686a8b181652e710febbea1871f93d7bd17305e9ad4c817867ffd3c43

See more details on using hashes here.

Provenance

File details

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

File metadata

  • Download URL: django_esm-0.1.2-py3-none-any.whl
  • Upload date:
  • Size: 5.2 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/4.0.2 CPython/3.12.1

File hashes

Hashes for django_esm-0.1.2-py3-none-any.whl
Algorithm Hash digest
SHA256 a1c0f012ef12bb2686a01638137a71238727725a6f7a9806d835fe39248c839e
MD5 a2ef75bfa932e6bf996713432e16e624
BLAKE2b-256 cac375cebd5a99dba250bdee4577bc2872806b347494f47d9cd94d57d1d7c071

See more details on using hashes here.

Provenance

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