DEV Community

Juro Oravec
Juro Oravec

Posted on

django-components v0.94 - Templating is now on par with Vue or React

#django #webdev #python #frontend

Hey, I'm Juro, I'm one of the maintainers of django-components. In releases v0.90-0.94 we've added features that make using components in templates much more flexible, similar to JSX / Vue.

(This info is already a bit dated (released a month ago; latest is v0.101), as I'm busy adding support for JS / CSS variables, TypeScript & Sass, and HTML fragment. Exciting stuff! But I realized haven't shared this update yet!)

Anyway, The following is a component blog_post, that accepts a title, id, and additional kwargs applied from blog_post_props:

    {% blog_post
      title="{{ person.first_name }} {{ person.last_name }}"
      id="{% random_int 10 20 %}"
      ...blog_post_props
    / %}
Enter fullscreen mode Exit fullscreen mode

The above is a combination of multiple features:

1. Self-closing tags:

Instead of

    {% component "my_component" %}
    {% endcomponent %}
Enter fullscreen mode Exit fullscreen mode

You can now simply write

    {% component "my_component" / %}
Enter fullscreen mode Exit fullscreen mode

2. Multi-line tags:

django_components now automatically configures Django to allow multi-line tags. So instead of cramming everything on a single line:

    {% component "blog_post" title="abcdef..." author="John Wick" date_published="2024-08-28" %}
    {% endcomponent %}
Enter fullscreen mode Exit fullscreen mode

You can spread it across multiple lines:

    {% component "blog_post"
      title="abcdef..."
      author="John Wick"
      date_published="2024-08-28"
    / %}
Enter fullscreen mode Exit fullscreen mode

3. Spread operator:

Similarly to ...props operator in JSX or v-bind in Vue, this inserts props / kwargs into a given position.

So instead of

    {% component "blog_post"
      title="abcdef..."
      author="John Wick"
      date_published="2024-08-28"
    / %}
Enter fullscreen mode Exit fullscreen mode

You can have the kwargs in a dictionary, and then apply that:

    # Python
    props = {
        "title": "abcdef...",
        "author": "John Wick",
        "date_published": "2024-08-28"
    }
Enter fullscreen mode Exit fullscreen mode 
    {# Django #}
    {% component "blog_post" ...props %}
Enter fullscreen mode Exit fullscreen mode

4. Template tags inside string literals in component inputs:

You can now use template tags and flters inside component inputs:

    {% component 'blog_post'
      "As positional arg {# yay #}"
      title="{{ person.first_name }} {{ person.last_name }}"
      id="{% random_int 10 20 %}"
      readonly="{{ editable|not }}"
    / %}
Enter fullscreen mode Exit fullscreen mode

This way you don't have to define extra variables every time you need to format a value.

Note that when there is only a single tag and no extra text around it, then the result is passed as a value. So "{% random_int 10 20 %}" passes in a number, and "{{ editable|not }}" passes a boolean.

You can even go a step further and have a similar experience to Vue or React, where you can evaluate arbitrary code expressions, AKA similar to this:

    <MyForm
      value={ isEnabled ? inputValue : null }
    />
Enter fullscreen mode Exit fullscreen mode

This can be possible with django-expr, which adds an expr tag and filter that you can use to evaluate Python expressions from within the template:

    {% component "my_form"
      value="{% expr 'input_value if is_enabled else None' %}"
    / %}
Enter fullscreen mode Exit fullscreen mode

5. Support for {% comp_name %} {% endcomp_name %} and TagFormatter

By default, the components are written using the component tag, followed by the name of the component:

    {% component "button" href="..." disabled %}
        Click me!
    {% endcomponent %}
Enter fullscreen mode Exit fullscreen mode

You can now change this (and even make your own!).

For example, setting COMPONENTS.tag_formatter to "django_components.shorthand_component_formatter" allows you to write components like so:

    {% button href="..." disabled %}
        Click me!
    {% endbutton %}
Enter fullscreen mode Exit fullscreen mode

Lots more is to come, so be sure to give django-components a try!

Top comments (0)