Rendering components from views

[Mitchel Cabuloy]

It may be useful to render components from views. I came across this while trying to use slippers components with HTMX.

[Luan Fonseca]

Hey @mixxorz, I was testing the same thing this morning as the stack I'm working on is django with htmx.
So what I found out is that it does work, even if you wrap the htmx "call" in a fragment you could use it as a parameter to another slipper component:

# inventory/views.py

class IOHistoryList(generic.ListView):
    model = IOHistory
    slug_field = 'code'
    template_name = 'ui/inventory/IOHistory.html' # <-- this is a slipper component

    def get_queryset(self):
        queryset = super().get_queryset()
        return queryset.filter(
            product__code=self.kwargs.get('code')
        )

# ui/templates/IOHistory.html

<h3 class="text-md font-bold pb-4">IO History</h3>

<table class="table-auto">
  <tbody>
    {% for history in object_list %}
      <tr>
        <td>{{ history.date|date:'Y/m/d' }}</td>
        <td class="pl-5 text-green-60">
          {% if history.quantity_in %}
            <strong>↓{{ history.quantity_in }}</strong>
          {% else %}
            <strong>---</strong>
          {% endif %}
        </td>
        <td class="pl-3 text-red-60">
          {% if history.quantity_out %}
            <strong>↑{{ history.quantity_out }}</strong>
          {% else %}
            <strong>---</strong>
          {% endif %}
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

# templates/inventory/product_detail.html
....
{% fragment as ioHistory %}
  <div hx-get="{% url 'inventory:io-history' product.code %}" hx-trigger="load"></div>
{% endfragment %}

{% Card header=cardHeader content=ioHistory %}

The page is loaded just fine

And also the "htmx" response from my slipper component

And I think that works just fine because the slipper component it's nothing different than a Django template, the only scenario where this may not work is if you're not rendering the template in your views, but would appreciate if you could include the error you faced bc I'm deciding to use slipper on a mid-size project here and would be great to know any possible issues in advance o/