HTML template within Component class

[marcrleonard]

Apologies if this has been discussed, but I couldn't seem to find it. Let me first say that I am incredibly impressed by this library. As much as I like HTMX, this takes all of the boiler plates endpoints and plumbing out of setting up reactive components. I love how it feels so native to Django.

What I’m curious about is if it would be possible to encapsulate the entirety of the HTML template within the component class. Almost like how in react, you return a template, or in vue, you can write the TS and HTML all in one file. Here is an example:

class TodoView(UnicornView):
    task = ""
    tasks = []
    html_template='''
<div>
  <form unicorn:submit.prevent="add">
    <input type="text"
      unicorn:model.defer="task"
      unicorn:keyup.escape="task=''"
      placeholder="New task" id="task"></input>
  </form>
  <button unicorn:click="add">Add</button>
  <button unicorn:click="$reset">Clear all tasks</button>

  <p>
    {% if tasks %}
      <ul>
        {% for task in tasks %}
          <li>{{ task }}</li>
        {% endfor %}
      </ul>
    {% else %}
      No tasks 🎉
    {% endif %}
  </p>
</div>
'''

If I were to wager guess I’d say that this is not possible because that component code is called from the template so there is a chicken and the egg problem. This would play nicely with the locality of behavior pattern. This would be a great developer experience versus having to flip back-and-forth between files. I’m guessing to make this work, you’d have to implement a custom template loader to bring them into memory. Anyways, just an idea! Love the project!

[adamghill]

I love how it feels so native to Django.

Thanks, that's the hope! 🤩

I don't think anyone else has suggested this before, so you might be the first! I think technically it should be possible because the unicorn template tag instantiates the component view and then passes the context to the template to render it.

That's why you can override the name of the template file.

However, I probably wouldn't personally add this feature because it's not a workflow I particularly like -- "locality of behavior" is fine for certain things, but I like the separation of concerns of having HTML and Python separate. I realize lots of people disagree with me about this. :)

I'd look at a PR if someone wants to add the code for this feature along with tests, documentation, etc, though.

[marcrleonard]

Thanks for the reply! I can totally understand why someone would want separate files, especially for simple linting purposes. If I have some time, I will take a look under the hood and see if I can figure out how it might be possible :-)

[marcrleonard]

I was just digging into it, and it turns out this does not seem too far from working. If you use a Django template object in place of the template path for "template_name", it almost works. However, there is a part in the Django code where it is sorting through a list of the templates needed, and for some reason it is not recognizing that as a ready to use template since it gets stuck into a list under the hood. I think there is some other structure needed to specify that there is just one template being rendered. Anyways, I'll keep tinkering 😊