Take a break from javascript. Write server-rendered reactive HTML liveviews for Django in pure python ๐ซ
MPL-2.0 License
.. raw:: html
<p align="center">
<a href="https://github.com/runekaagaard/django-hypergen">
<img src="https://raw.githubusercontent.com/runekaagaard/django-hypergen/main/examples/website/static/website/hypergen-logo.png" alt="Welcome to Django Hypergen" width="75px" height="100px" />
</a>
</p>
<h1 align="center"><a href="https://hypergen.it">Hypergen</a></h1>
<p align="center">
<b>Take a break from javascript</b>
</p>
<p align="center">
Write server-rendered reactive HTML liveviews for Django in pure python ๐ซ
</p>
<p align="center">
<img src="https://github.com/runekaagaard/django-hypergen/actions/workflows/pytest.yml/badge.svg" />
<a href="https://pypi.org/project/django-hypergen/">
<img src="https://badge.fury.io/py/django-hypergen.svg" />
</a>
</p>
<p align="center" dir="auto">
<a href="https://hypergen.it" rel="nofollow">Homepage</a> โข
<a href="https://hypergen.it/documentation/" rel="nofollow">Documentation</a> โข
<a href="https://github.com/runekaagaard/django-hypergen/issues/" rel="nofollow">Support</a>
</p>
Hypergen: A Hypertext Generator:
Craft templates using pure Python. Instead of declaring <p>hi</p>
in an HTML file, simply invoke p("hi")
within your view. Composing Python functions keeps templates DRY and streamlined. If you've ever written JSX, Hypergen's syntax will feel familiar.
Reactive Liveviews:
Effortlessly bridge frontend and backend. Connect browser events like onclick
straight to backend actions. With these actions, Django views can instantly refresh the frontend with new HTML, send notifications, and more, all while natively working with Python data types.
Websockets: Hypergen brings realtime to the forefront with Django Channels. Set up is a breeze - quickly establish consumers and instantly react to live events. It's realtime made simple and friendly, just the way we like it.
Production Ready: We've deployed Hypergen in projects spanning tens of thousands of lines, serving over 100,000 unique users more than 10 million requests.
Quickstart:
Kickstart your Hypergen journey in minutes. Execute pip install django-hypergen
, append 'hypergen'
to INSTALLED_APPS
, include 'hypergen.context.context_middleware'
in MIDDLEWARE
, and you're all set to dive in.
Using Hypergens most high-level constructs, a simple counter looks like this:
.. code-block:: python
@liveview(perm=NO_PERM_REQUIRED)
def counter(request):
with html(), body(), div(id="content"):
template(0)
@action(perm=NO_PERM_REQUIRED, target_id="content")
def increment(request, n):
template(n + 1)
def template(n):
label("Current value: ")
input_el = input_(id="n", type_="number", value=n)
button("Increment", id="increment", onclick=callback(increment, input_el))
You can see it in action <https://hypergen.it/hellohypergen/counter/>
_.
The callback(func, arg1, arg2, ..., **settings)
function connects the onclick event to the increment(request, n)
action. The n
argument is the value of the input field.
DOM elements are nested with the with
statement.
It's python all the way down. ๐ฅ๐ฅ๐ฅ
.. code-block:: bash
git clone [email protected]:runekaagaard/django-hypergen.git
cd django-hypergen/
virtualenv -p python3.9 venv
source venv/bin/activate
pip install -r requirements-dev.txt
cd examples
python manage.py runserver
Then browse to http://127.0.0.1:8000.
Bug reports and feature requests are very welcome <https://github.com/runekaagaard/django-hypergen/issues/new>
_. So are pull requests or diffs.
Hypergen is written by Jeppe Tuxen <https://github.com/jeppetuxen>
_ and Rune Kaagaard <https://github.com/runekaagaard>
_, both located around Copenhagen, Denmark.
We are using Hypergen extensively at work so it's a big focus of ours.
Hypergen is located in src/hypergen
. Format all python code with yapf, a .yapf config file is present in the repository.
Compile the javascript files:
.. code-block:: bash
cd hypergen/static/hypergen
npm install # use node 18 lts
# watch hypergen.js to dist/hypergen.js
npm start
# build hypergen.js to dist/hypergen.js
npm run build
How fast are we?:
.. code-block:: bash
rm -f /tmp/hypergen.profile && python -m cProfile -o /tmp/hypergen.profile manage.py runserver 127.0.0.1:8002
echo -e 'sort tottime\nstats' | python3 -m pstats /tmp/hypergen.profile | less
# or
pyprof2calltree -i /tmp/hypergen.profile -k
# or
rm -f /tmp/hypergen.profile && python -m cProfile -o /tmp/hypergen.profile manage.py inputs_profile && \
echo -e 'sort tottime\nstats' | python3 -m pstats /tmp/hypergen.profile | less
We have a Github Action <https://github.com/runekaagaard/django-hypergen/blob/main/.github/workflows/pytest.yml>
_ that automatically tests a matrix of Django and Python versions. You can run the pytest tests locally like so:
.. code-block:: bash
pip install -r requirements-dev.txt
make pytest-run
And the testcafe end-to-end_ tests:
.. code-block:: bash
npm i -g testcafe
make testcafe-run
# or
make testcafe-run-headless
Requires that the examples are running on 127.0.0.1:8002
.
Django <https://www.djangoproject.com/>
_ - for making work funMorphdom <https://github.com/patrick-steele-idem/morphdom>
_ - for fast updating of the DOM treePyrsistent <https://pyrsistent.readthedocs.io/en/latest/intro.html>
_ - for providing an immutable dictsockette <https://github.com/lukeed/sockette>
_ - The cutest little WebSocket wrapper! ๐งฆSimple.css <https://simplecss.org/>
_ - for the no-class styling on the homepageDALL-E mini <https://huggingface.co/spaces/dalle-mini/dalle-mini>
_ - for the logo generated with the query "a vibrant logo of the letter H"