Oye, soy Juro, soy uno de los mantenedores de django-components. En las versiones v0.90-0.94 hemos agregado características que hacen que el uso de componentes en plantillas sea mucho más flexible, similar a JSX/Vue.

(Esta información ya está un poco anticuada (publicada hace un mes; la última es v0.101), ya que estoy ocupado agregando soporte para variables JS/CSS, TypeScript y Sass, y fragmentos HTML. ¡Cosas interesantes! Pero ¡No he compartido esta actualización todavía!)

De todos modos, el siguiente es un componente blog_post, que acepta un título, una identificación y kwargs adicionales aplicados desde blog_post_props:

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

Lo anterior es una combinación de múltiples características:

1. Etiquetas de cierre automático:

En lugar de

    {% component "my_component" %}
    {% endcomponent %}

Ahora puedes simplemente escribir

    {% component "my_component" / %}

2. Etiquetas de varias líneas:

django_components ahora configura automáticamente Django para permitir etiquetas de varias líneas. Entonces, en lugar de meter todo en una sola línea:

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

Puedes distribuirlo en varias líneas:

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

3. Operador de propagación:

De manera similar al operador ...props en JSX o v-bind en Vue, esto inserta props/kwargs en una posición determinada.

Entonces en lugar de

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

Puedes tener los kwargs en un diccionario y luego aplicarlos:

    # Python
    props = {
        "title": "abcdef...",
        "author": "John Wick",
        "date_published": "2024-08-28"
    }

    {# Django #}
    {% component "blog_post" ...props %}

4. Etiquetas de plantilla dentro de cadenas literales en entradas de componentes:

Ahora puedes usar etiquetas de plantilla y filtros dentro de las entradas de los componentes:

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

De esta manera no tendrás que definir variables adicionales cada vez que necesites formatear un valor.

Tenga en cuenta que cuando solo hay una etiqueta y no hay texto adicional a su alrededor, el resultado se pasa como un valor. Entonces "{% random_int 10 20 %}" pasa un número y "{{ editable|not }}" pasa un booleano.

Incluso puedes ir un paso más allá y tener una experiencia similar a Vue o React, donde puedes evaluar expresiones de código arbitrario, también conocido como similar a este:

Esto puede ser posible con django-expr, que agrega una etiqueta expr y un filtro que puedes usar para evaluar expresiones de Python desde la plantilla:

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

5. Soporte para {% comp_name %} {% endcomp_name %} y TagFormatter

De forma predeterminada, los componentes se escriben utilizando la etiqueta del componente, seguida del nombre del componente:

    {% component "button" href="..." disabled %}
        Click me!
    {% endcomponent %}

Ahora puedes cambiar esto (¡e incluso crear el tuyo propio!).

Por ejemplo, configurar COMPONENTS.tag_formatter en "django_components.shorthand_component_formatter" le permite escribir componentes como este:

    {% button href="..." disabled %}
        Click me!
    {% endbutton %}

¡Hay mucho más por venir, así que asegúrate de probar django-components!