Phx_component_helpers
Extensible Phoenix liveview components, without boilerplate
Overview
PhxComponentHelpers is a library that provides helper functions designed to improve the configurability and extensibility of Phoenix LiveView components from templates. It aims to simplify the development of stateless components by reducing the amount of boilerplate code required. The library offers features such as setting HTML, data, or phx attributes from component assigns, validating mandatory attributes, and extending CSS classes from component assigns. PhxComponentHelpers is intended to work well with the PETAL stack, which consists of Phoenix, Elixir, TailwindCSS, Alpine.js, and LiveView.
Features
- Set HTML, data, or phx attributes: This feature allows you to easily set attributes from component assigns, providing greater flexibility in configuring your components from templates.
- Set multiple attributes at once: You can set a bunch of attributes at once using a custom prefix, such as @click or x-bind for Alpine.js users. This simplifies the process of configuring attributes in your components.
- Validate mandatory attributes: PhxComponentHelpers provides functionality to validate mandatory attributes, ensuring that the necessary attributes are provided to your components.
- Extend CSS classes: You can set and extend CSS classes from component assigns, allowing you to easily customize the styling of your components from templates.
- Forward assigns to child components: PhxComponentHelpers allows you to forward a subset of assigns to child components, enabling more extensive customization and configuration options.
Summary
PhxComponentHelpers is a library that provides helper functions for Phoenix LiveView, making it easier to create configurable and extensible components from templates. It offers features such as setting attributes, validating mandatory attributes, and extending CSS classes from component assigns. The library is designed to work well with the PETAL stack (Phoenix, Elixir, TailwindCSS, Alpine.js, LiveView) and aims to improve developer productivity and consistency in UI and code. Compared to other libraries like Surface, PhxComponentHelpers focuses more on providing syntactic sugar and helper functions rather than being a comprehensive UI framework.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Alpine.js
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.