Add Jinja support by ShaheedHaque · Pull Request #199 · reactive-python/reactpy-django

ShaheedHaque · 2023-10-09T20:24:08Z

Description

WORK IN PROGRESS: DO NOT MERGE.

~~This is incomplete support for Jinja2-based templates. I could use some pointers to finish the missing part (see comments at the end of src/reactpy_django/templatetags/jinja.py).~~

(also missing, docs, packaging and tests)

To reproduce the results to date requires the following example changes on the Django side...

Configure template files ending in ".jinja" to be processed via Jinja:

    TEMPLATES = [
    {
        "BACKEND": "django_jinja.backend.Jinja2",  # Jinja backend
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        "APP_DIRS": True,
        "OPTIONS": {
            'context_processors': [
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                ...
            ],
            "match_extension": (".jinja"),  # suffix for Jinja templates
            "app_dirname": "templates",

            # Can be set to "jinja2.Undefined" or any other subclass.
            "undefined": None,

            "newstyle_gettext": True,
            "tests": {
                # "mytest": "path.to.my.test",
            },
            "filters": {
                # "myfilter": "path.to.my.filter",
            },
            "globals": {
                # "myglobal": "path.to.my.globalfunc",
            },
            "constants": {
                # "foo": "bar",
            },
            "extensions": [
                "jinja2.ext.do",
                "jinja2.ext.loopcontrols",
                "jinja2.ext.i18n",
                "django_jinja.builtins.extensions.CsrfExtension",
                "django_jinja.builtins.extensions.CacheExtension",
                "django_jinja.builtins.extensions.TimezoneExtension",
                "django_jinja.builtins.extensions.UrlsExtension",
                "django_jinja.builtins.extensions.StaticFilesExtension",
                "django_jinja.builtins.extensions.DjangoFiltersExtension",
                "reactpy_django.templatetags.jinja.ReactPyExtension",    # new extension
            ],
            "bytecode_cache": {
                "name": "default",
                "backend": "django_jinja.cache.BytecodeCache",
                "enabled": False,
            },
            "autoescape": True,
            "auto_reload": DEBUG,
            "translation_engine": "django.utils.translation",
        },
    },
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates', # Django templates.

Add the new app:

INSTALLED_APPS = [
     ...
    "reactpy_django",
 ]

File of components in components.py:

from reactpy import component, html

@component
def hello_world(recipient: str):
    return html.h1(f"Hello {recipient}!")

Test view in views/react.py:

from django.shortcuts import render

def jinja_view(request):
    return render(request, "my-template.html.jinja")

Template for the view templates/my-template.html.jinja:

<!DOCTYPE html>
<html>
<body>
{{ component("paiyroll.components.hello_world", recipient="World") }}
</body>
</html>

project/asgi.py

from reactpy_django import REACTPY_WEBSOCKET_ROUTE

application = ProtocolTypeRouter({
  'http': get_asgi_application(),
  'websocket': AuthMiddlewareStack(
      URLRouter(
        ... + [REACTPY_WEBSOCKET_ROUTE]
     )

And finally project/urls.py:

from ...views import react

urlpatterns = [
     ...
     path("reactpy/", include("reactpy_django.http.urls")),
     path("react/", react.jinja_view),
 ]

Once Django is restarted, navigating to the view, you should see
Hello World!

Checklist:

Please update this checklist as you complete each item:

Tests have been developed for bug fixes or new functionality.
The changelog has been updated, if necessary.
Documentation has been updated, if necessary.
GitHub Issues closed by this PR have been linked.

_{By submitting this pull request you agree that all contributions comply with this project's open source license(s).}

ShaheedHaque · 2023-10-10T00:57:33Z

OK, this now render the "Hello World!" correctly.

Feedback requested before thinking about tests/docs etc.

Archmonger

A few comments since I took a early peak at the draft.

ShaheedHaque · 2023-11-26T20:45:38Z

Resolved last outstanding comment. And ran black.

If we are to proceed, I'd propose to squash the current commits before thinking about tests/packaging/docs etc. (FWIW, in that regard, I assume the appropriate packaging would be as something like "reactpy_django[jinja]"...but I'm not currently sure how to go about implementing that).

Archmonger · 2023-11-27T09:08:45Z

Optional dependencies can be defined within the package in setup.py. For example:

{
  "extras_require": {
    "encryption": ["cryptography", "pycryptodome"],
  },
  ...
}

ShaheedHaque · 2023-11-27T14:04:52Z

Optional dependencies can be defined within the package in setup.py. For example:
{
  "extras_require": {
    "encryption": ["cryptography", "pycryptodome"],
  },
  ...
}

Thanks, I'm more or less familiar with this bit. I was more thinking about the new file I have added (and any supporting test file), and whether that could/should be omitted unless "[jinja] was specified?

Archmonger · 2023-12-31T20:48:37Z

I have some changes in one of my PRs that will simplify test configuration
#190

TLDR: Our test suite can now run multiple different Django settings.py files.

And yes, from the user's perspective we should have all the jinja dependencies be optional via reactpy_django[jinja]

Archmonger · 2024-01-08T06:37:12Z

My PR has been merged. All settings_*.py files within the test app will now automatically run tests against them.

There shouldn't be anything blocking this PR anymore, so you'll need to do the following:

Add the needed dependencies to the test-env.txt
Add the needed dependencies to the optional extras using the [jinja] keyword.
Copy settings_single_db.py to create settings_jinja.py.
Write some conditional tests within the test folder.
- We don't want to run jinja tests in other testing environments, so we'll need a flag within settings.py to conditionally run these tests.
- This might extend to preventing all other tests to run within the Jinja environment. In a perfect world, we would have some way of magically re-using all our old tests within a Jinja test environment, not sure if that's feasible though. I'll let you figure that best solution to that.
Write a new page of documentation based on the current installation page.
- Probably will require changing the mkdocs.yml nav menu to look something like
- Get Started > Add ReactPy to your ... > Django Project
- Get Started > Add ReactPy to your ... > Django-Jinja Project

ShaheedHaque · 2024-01-11T02:17:59Z

Noted. I've a full plate right now but have this on my radar.

- Created `ReactPyExtension` Jinja2 extension with `component`, `pyscript_component`, and `pyscript_setup` globals that delegate to the existing Django template tag implementations. - Refactored `reactpy.py` to export template name constants (COMPONENT_TEMPLATE, PYSCRIPT_COMPONENT_TEMPLATE, PYSCRIPT_SETUP_TEMPLATE) so they can be reused by the Jinja2 extension. - Added JINJA_COMPONENT_REGEX to utils.py's RootComponentFinder so that {{ component(...) }} syntax in Jinja2 templates is auto-detected. - Added test infrastructure: settings_jinja.py, jinja_env.py, jinja_views.py, jinja_urls.py, Jinja2 template files, and test_jinja.py. - Made test_app/__init__.py gracefully handle missing `bun` binary by skipping the JS rebuild when artifacts already exist. - Added jinja2 to pyproject.toml hatch-test extra-dependencies. - Updated CHANGELOG.md. (cherry picked from commit 3923cee)

- Remove invalid 'jinja2' entry from INSTALLED_APPS in settings_jinja.py (jinja2 is a Python library, not a Django app) - Consolidate imports from reactpy_django.templatetags.reactpy into a single import block in jinja.py - Add [project.optional-dependencies] jinja section to pyproject.toml so 'pip install reactpy_django[jinja]' works for end users - Strengthen test_jinja.py assertions and remove empty view test stubs that provided no coverage

- Run ruff format fix on test_jinja.py (single-line .from_string call) - Run ruff check --fix on jinja.py (sorted imports per project convention)

The Jinja wrapper used prerender="" as default, but str_to_bool("") raises ValueError. Fix by matching the Django tag behavior — default to str(REACTPY_PRERENDER) when no explicit prerender value is provided.

The component template does not use data-reactpy attribute. Check for mountComponent and the component dotted path instead.

- Remove [project.optional-dependencies] jinja = ["jinja2"] from pyproject.toml - Add try/except ModuleNotFoundError guard at the top of jinja.py with a helpful error message telling users to install jinja2 - Create docs/src/learn/add-reactpy-to-a-django-project-with-jinja.md with Jinja2-specific setup instructions - Update mkdocs.yml nav to include the new Jinja page under Get Started

ShaheedHaque requested a review from a team as a code owner October 9, 2023 20:24

Archmonger marked this pull request as draft October 9, 2023 21:40

Archmonger linked an issue Oct 9, 2023 that may be closed by this pull request

Support Jinja2 templates #198

Open

ShaheedHaque force-pushed the srh_jinja_support branch from 54906cf to 1384632 Compare October 10, 2023 00:54

ShaheedHaque force-pushed the srh_jinja_support branch from 1384632 to 2d282e4 Compare October 10, 2023 01:12

WIP Jinja support.

7e97489

ShaheedHaque force-pushed the srh_jinja_support branch from 2d282e4 to 7e97489 Compare October 10, 2023 01:13

Archmonger reviewed Oct 11, 2023

View reviewed changes

Comment thread src/reactpy_django/templatetags/jinja.py Outdated

Comment thread src/reactpy_django/templatetags/jinja.py Outdated

Comment thread src/reactpy_django/templatetags/jinja.py Outdated

Archmonger reviewed Oct 11, 2023

View reviewed changes

Archmonger reviewed Oct 20, 2023

View reviewed changes

Comment thread src/reactpy_django/templatetags/jinja.py Outdated

Address second pass review comments.

d432639

ShaheedHaque force-pushed the srh_jinja_support branch from 1a8b8a7 to d432639 Compare November 10, 2023 20:47

Address lastoutstadnngcomment, and run black.

d888b4d

Archmonger reviewed Nov 27, 2023

View reviewed changes

Comment thread src/reactpy_django/templatetags/jinja.py Outdated

Archmonger reviewed Nov 27, 2023

View reviewed changes

Comment thread src/reactpy_django/templatetags/jinja.py Outdated

Address copyright, and use of constant to locate template.

3f56d4e

Archmonger changed the title ~~WIP Jinja support.~~ Add Jinja support Jan 29, 2024

User and others added 3 commits July 20, 2026 02:01

Merge remote-tracking branch 'origin/main' into srh_jinja_support

a01ffa9

fix type and lint warnings

1994980

Archmonger marked this pull request as ready for review July 20, 2026 09:33

User added 2 commits July 22, 2026 16:35

Fix formatting and lint issues for Jinja2 support

92f3d38

- Run ruff format fix on test_jinja.py (single-line .from_string call) - Run ruff check --fix on jinja.py (sorted imports per project convention)

User added 4 commits July 22, 2026 16:53

Fix Jinja2 _component prerender default value

b3ae980

The Jinja wrapper used prerender="" as default, but str_to_bool("") raises ValueError. Fix by matching the Django tag behavior — default to str(REACTPY_PRERENDER) when no explicit prerender value is provided.

Fix test assertion in test_jinja_component_renders_without_error

014fa4b

The component template does not use data-reactpy attribute. Check for mountComponent and the component dotted path instead.

Add env, jinja, jinja2, myproject, and vs to spellcheck dictionary

2cc8073

Uh oh!

Uh oh!

Conversation

ShaheedHaque commented Oct 9, 2023 • edited by Archmonger Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist:

Uh oh!

ShaheedHaque commented Oct 10, 2023

Uh oh!

Archmonger left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ShaheedHaque commented Nov 26, 2023

Uh oh!

Archmonger commented Nov 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ShaheedHaque commented Nov 27, 2023

Uh oh!

Archmonger commented Dec 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Archmonger commented Jan 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ShaheedHaque commented Jan 11, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ShaheedHaque commented Oct 9, 2023 •

edited by Archmonger

Loading

Archmonger left a comment •

edited

Loading

Archmonger commented Nov 27, 2023 •

edited

Loading

Archmonger commented Dec 31, 2023 •

edited

Loading

Archmonger commented Jan 8, 2024 •

edited

Loading