Create a widget libary using unicorn?

[nerdoc]

Hi Adam,
one of the drawbacks in unicorn, sockpuppet, htmx and other similar frameworks always have been, compared to Vue etc, that there exist widget libraries for the bigger Js frontend frameworks.
I recently created a simple "widget" that is basically a bootstrap5 button style radio group, a switch, but with three instead of two states: True, False and None, with its graphical representation as template.
This works great, but I then had to write some custom code to plug it into Django's model system. For simple input types (like input type="text") this is easy by adding the unicorn:model="foo" attribute. But for more complex widgets this is not so simple, as it e.g. needs to be bound to a field of a model, e.g. Person.has_access_to_foo.
What if ther would exist a generic bas component system that accepted those models, and they could be used like:

{% unicorn 'button_checkbox' model='Person' field='has_access_to_foo' %}

That would be really cool.

I just think about creating DRY code - and reusable components. Maybe it is a lunatic idea - Just tell me your thoughts.n

Do you think that a "library" of Unicorn components would make sense, like Material for Bootstrap, Vuetify, Vue Material, Svelte Material?

[adamghill]

I think it's a neat idea, but I'm weary of tying too close to any frontend styles since that isn't really something I have a ton of experience in. Maybe there are additions to unicorn to enable the generic widgets, though? Or even patterns that I could document?

[nerdoc]

I think it's not a good idea to tie Unicorn to any frontend, that was not my intention here. Just asking for your opinion whether this is a BadIdea™ altogether ;-)

Just because if I start to create some Bootstrap widgets, I would pack them in a different package than my main one, and release them separatedly, something like unicorn-bootstrap-widgets.
My experience there is limited too, but maybe I am a bit megalomaniac 😆

Yes, and I think some additions are needed. Or more understanding of Unicorn internals from my side:

1. If I e.g. make a child component (like a nullable checkbox), and tie a model and a field to it, is this bad programming? Like suggested before:

{% unicorn 'button_checkbox' model='Person' field='has_access_to_foo' %}

2. If i change something in the backend of the component, and I want to inform the parent of it, there is no "signalling" way of doing that, right? I can call self.parent.some_method(value) in a kind of API manner, or self.parent.update(...), but this doesn't trigger the parent - or other components, to send something to the frontend, as there is no bidirectional communication, like in the websocket world.
   The frontend always must trigger an update. Right?

[dancaron]

@nerdoc Did you ever end up creating any components? I am wondering similar things.

[nerdoc]

I'm sorry, I ended up with HTMX, and gave up Unicorn for my project (even if it is a great library).