Phx_component_helpers - Extensible live_components, without boilerplate

cblavier · April 1, 2021, 5:12pm

Hey there

A few days ago I extracted a lot of functions I’m using in 2 different projects (one large phoenix LiveView project and a small PETAL app)

It basically answers to the following needs:

quickly package UI code into live_components
make components extensible from the templates (in the spirit of Tailwind & Alpine)
less boilerplate possible.

I first tried Surface, and even if I was impressed, it felt too heavy for me (btw it has more line of codes than LiveView itself) and I’d really prefer to stay closer to the underlying library (LiveView)

Let me know what you think of this lib

cblavier · April 2, 2021, 8:56am

0.7.0 just landed with improved support for form errors

cblavier · April 5, 2021, 1:54pm

0.8.0

I’m still (I guess) the sole user of this library, but for whatever reason I’m polishing it as if it were to be used by thousands

github.com

cblavier/phx_component_helpers/blob/main/CHANGELOG.md

# 0.8.0
- `:into` option of `PhxComponentHelpers.extend_class/2` is renamed in `:attribute`
- `PhxComponentHelpers.extend_class/2` will overwrite input assign class with extended class
- `PhxComponentHelpers.set_form_attributes/3` will now set default form attributes when keys
exist but are nil
- `PhxComponentHelpers.set_component_attributes/3` and PhxComponentHelpers.set_data_attributes/3
can now take default values

# 0.7.0
- `PhxComponentHelpers.set_form_attributes/3` will now init form data with nil values
when no form/field is provided
- `PhxComponentHelpers.set_form_attributes/3` retrieves and assigns form errors
- `PhxComponentHelpers.extend_class/2` now supports new `:error_class` option to
extend CSS classes when a form field is faulty

# 0.6.0
- added `PhxViewHelpers` than can be used within templates
- added `PhxComponentHelpers.set_form_attributes/3` to fetch `Phoenix.HTML.Form` data

# 0.5.0

This file has been truncated. show original

cblavier · April 11, 2021, 12:42pm

Just released 0.9.0 with new forward_assign/2 that will help writing nested components (you often need to propagate part of assigns to a child component)

Feature-wise there is now everything I wanted in this library.
It just needs a bit more example & documentation before a proper 1.0 release

crova · April 11, 2021, 1:47pm

Pas mal tout ça.

I have a form I need to refactor and I might give it a shot while testing your library.
Thanks for continuing working on it and giving us heads-up, I missed the other announcements.

cblavier · April 11, 2021, 5:32pm

Thank you @crova !
I will actually provide a form code sample very soon. I will post here as soon as it is published!

cblavier · April 13, 2021, 4:07pm

A glimpse of some of the components we’re writing with phx_component_helpers
A table with infinite scroll, sticky headers, sorting, filtering, placeholder, result counter … coming for really cheap to our front-end developpers

Code source is really neat with proper component encapsulation

cenotaph · April 14, 2021, 2:21am

Really good work! Is it the alpine js keeping the left hand side of the page static where the right hand side updates only?

cblavier · April 14, 2021, 6:41am

No alpine there: only using plain JS (there is actually a single 50 loc JS file for the infinite scroll hook).

The static sidebar on the left is part of the layout, no special trick here, LiveView doesn’t know anything about the layout.

We also use Turbolinks to manage page to page navigation.