Phx_component_helpers - Extensible live_components, without boilerplate

@crova until I can package some documented examples in phx_component_helpers repo, here is a gist with our Table component and all its sub_components (rows, cells, buttons …)

Table Gist

Table live_component with phx_component_helpers · GitHub

It’s quite a complex component because it has a lot of optional features (actions buttons, header sorting, row by row checkbox / radio selection, select all)

3 Likes

Lovely!
I’ll make sure to take a look later on.

Merci beaucoup !

1 Like

:wave: just released 0.11.0

Nothing fancy, it’s almost about polishing stuff, but I merged my first PR from another contributor :partying_face:

2 Likes

It’s been a while since the last update, but 0.12.0 was just released a few minutes ago.

It’s now better suited for HEEX and is successfully used in a set of 50 components or so (mixing live components and stateless function components)

Looks very promising.
Do you have examples on how to use this? Is the readme updated for the new version?

1 Like

Thank you!

Yes the readme has been updated with HEEX some HEEX examples.
I will release very soon an example repository with some sample components.

1 Like

Looking forward to that. I have started to play around with it now…

1 Like

This might be due to my inexperience of Elixir/Phoenix but but I do not get any @heex values in my assigns
Following your example my assigns are Available assigns: [:changed, :class, :id, :label, :phx_click, :raw_attributes, :raw_class, :raw_id, :raw_label, :raw_phx_attributes, :raw_phx_click, :raw_type]
What am I missing?

Check in your mix.lock that you have the 0.12.0 version of the library

Yepp.
Merci!

1 Like

Just discovered this. Thank you! The number of users will definitely increase :slight_smile:

1 Like

Thank you for letting me know, it cheers me up!

1 Like

Have gone through. Very interesting @cblavier. Some abstractions look nice and useful. Thanks for all the work.

1 Like

Looks very good… This will save my “derrière” :grinning: in my current project.

2 Likes

Hey there :wave:

I just deployed some code samples for the library:
https://phx-component-helpers-demo.onrender.com

I hope you’ll find it useful! :slight_smile:

2 Likes

Very nice.
The last example don’t work on your page. Have not tried to implement myself yet.
Missing something? (again :grimacing:)

No bug at all, but I should change the buttons label (“Click me”) because they actually don’t do anything :wink:

Just release 0.13.0 of the library thanks to @thenrio contribution.

We now use LiveView.assign/2 instead of Map.put / Map.merge which allows LiveView to do a better job at diff tracking

1 Like

:fire: Since we’re using the library in production for months and that it can be now considered as complete, feature-wise, I just released version 1.0.0 :tada:

2 Likes

Just released 1.1.0 with a new, more explicit, behavior of extend_class/3 which fixes the issue mentioned in this topic.

Changelog:

extend_class/3 behavior has been updated and will soon no longer replace default css classes based on their prefix (this behavior is still working but deprecated). To switch to the new behavior and suppress warning messages, pass the prefix_replace: falseoption and use the new ! based syntax to explicitly remove default CSS classes. (ex: !border-* border-red-500)

2 Likes