Ei, sou Juro, sou um dos mantenedores dos componentes do Django. Nas versões v0.90-0.94 adicionamos recursos que tornam o uso de componentes em templates muito mais flexível, semelhante ao JSX/Vue.

(Esta informação já está um pouco desatualizada (lançada há um mês; a mais recente é v0.101), pois estou ocupado adicionando suporte para variáveis ​​JS/CSS, TypeScript & Sass e fragmento HTML. Coisas interessantes! Mas eu percebi que ainda não compartilhei esta atualização!)

De qualquer forma, o seguinte é um componente blog_post, que aceita um título, id e kwargs adicionais aplicados a partir de blog_post_props:

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

O acima é uma combinação de vários recursos:

1. Tags de fechamento automático:

Em vez de

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

Agora você pode simplesmente escrever

    {% component "my_component" / %}

2. Tags multilinhas:

django_components agora configura automaticamente o Django para permitir tags multilinhas. Então, em vez de amontoar tudo em uma única linha:

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

Você pode espalhar em várias linhas:

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

3. Operador de propagação:

Da mesma forma que o operador ...props em JSX ou v-bind em Vue, isso insere props/kwargs em uma determinada posição.

Então, em vez de

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

Você pode ter os kwargs em um dicionário e depois aplicá-los:

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

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

4. Tags de modelo dentro de literais de string em entradas de componentes:

Agora você pode usar tags de modelo e filtros dentro de entradas de componentes:

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

Dessa forma, você não precisa definir variáveis ​​extras toda vez que precisar formatar um valor.

Observe que quando há apenas uma tag e nenhum texto extra ao redor dela, o resultado é passado como um valor. Portanto, "{% random_int 10 20 %}" passa um número e "{{ editable|not }}" passa um booleano.

Você pode até dar um passo além e ter uma experiência semelhante ao Vue ou React, onde você pode avaliar expressões de código arbitrárias, também conhecidas como semelhantes a esta:

Isso pode ser possível com django-expr, que adiciona uma tag expr e um filtro que você pode usar para avaliar expressões Python de dentro do modelo:

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

5. Suporte para {% comp_name %} {% endcomp_name %} e TagFormatter

Por padrão, os componentes são escritos usando a tag do componente, seguida do nome do componente:

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

Agora você pode alterar isso (e até mesmo criar o seu próprio!).

Por exemplo, definir COMPONENTS.tag_formatter como "django_components.shorthand_component_formatter" permite que você escreva componentes assim:

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

Muito mais está por vir, então não deixe de experimentar o django-components!