Metadata-Version: 2.1
Name: django-esm
Version: 0.1.2
Summary: Lightweight JavaScript ESM module loader for Django.
Keywords: ESM,JavaScript,importmap,Django,module
Author-email: Johannes Maron <johannes@maron.family>
Requires-Python: >=3.9
Description-Content-Type: text/markdown
Classifier: Development Status :: 5 - Production/Stable
Classifier: Programming Language :: Python
Classifier: Environment :: Web Environment
Classifier: Intended Audience :: Developers
Classifier: License :: OSI Approved :: BSD License
Classifier: Operating System :: OS Independent
Classifier: Programming Language :: Python
Classifier: Topic :: Software Development
Classifier: Programming Language :: JavaScript
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3 :: Only
Classifier: Programming Language :: Python :: 3.9
Classifier: Programming Language :: Python :: 3.10
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Classifier: Framework :: Django
Classifier: Framework :: Django :: 3.2
Classifier: Framework :: Django :: 4.2
Classifier: Framework :: Django :: 5.0
Requires-Dist: django>=3.2.0
Requires-Dist: bandit==1.7.6 ; extra == "lint"
Requires-Dist: black==23.12.0 ; extra == "lint"
Requires-Dist: flake8==6.1.0 ; extra == "lint"
Requires-Dist: isort==5.13.2 ; extra == "lint"
Requires-Dist: pydocstyle[toml]==6.3.0 ; extra == "lint"
Requires-Dist: pytest ; extra == "test"
Requires-Dist: pytest-cov ; extra == "test"
Requires-Dist: pytest-django ; extra == "test"
Requires-Dist: pytest-playwright ; extra == "test"
Project-URL: Changelog, https://github.com/codingjoe/django-esm/releases
Project-URL: Documentation, https://github.com/codingjoe/django-esm#django-esm
Project-URL: Issue-Tracker, https://github.com/codingjoe/django-esm/issues
Project-URL: Project-URL, https://github.com/codingjoe/django-esm
Project-URL: Source, https://github.com/codingjoe/django-esm
Provides-Extra: lint
Provides-Extra: test

# Django ESM

NextGen JavaScript ESM module support for Django.

[![PyPi Version](https://img.shields.io/pypi/v/django-esm.svg)](https://pypi.python.org/pypi/django-esm/)
[![Test Coverage](https://codecov.io/gh/codingjoe/django-esm/branch/main/graph/badge.svg)](https://codecov.io/gh/codingjoe/django-esm)
[![GitHub License](https://img.shields.io/github/license/codingjoe/django-esm)](https://raw.githubusercontent.com/codingjoe/django-esm/master/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:

```bash
pip install django-esm
```

```python
# settings.py
INSTALLED_APPS = [
    # …
    'django_esm',
]
```

Next, add the `node_modules` directory to your staticfiles directories:

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

Finally, add the import map to your base template:

```html
<!-- 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:

```html
<!-- 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
to map module names to their location on the server.

Here is an example import map:

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

