Designing Flexible Open source Components in Halogen
summary
Library claim: extract interaction and state but let consumers own the HTML. Implementation uses purescript-halogen-select with three helper props (e.g. setItemProps, setInputProps) so parent render functions keep full control. Runtime uses the Store comonad to pass state-to-HTML safely and an emit/raise round‑trip to evaluate embedded parent queries. Examples include dropdowns, typeaheads and a calendar used in production; behavior and accessibility are handled by the library, rendering and extra queries stay with the integrator.
AI-written summary · about
chapters (27)
- 0:00Intro
- 2:18Reusability
- 3:49Code Between Components
- 6:43Common Strategies
- 8:21CSS
- 10:20Renderless Components
- 12:22PureScript Halogen Select
- 15:51Halogen
- 16:51Component
- 17:55Behaviors
- 19:25Inputs
- 21:00Query
- 21:54Type Add
- 26:07RenderList
- 28:24SetProps
- 31:29Handling output messages
- 32:58Embedding behaviors
- 33:24Conclusion
- 34:10Under the hood
- 35:53Store
- 36:21Query Type
- 38:16State Store
- 39:32Extract
- 41:29Evaluation
- 44:04GetState
- 45:04Resources
- 46:36Wrapup
related talks
51mBuilding Better Components — A Journey to a More Resilient Frontend
38mUnleash the power of the higher-order components
49mBuilding Better Components - A Journey to a More Resilient Frontend
24mSid Kshetrapal-Walking the line between Flexibility and Consistency in Component libraries
25mSimply React
43mDIY Components: Why and how?
31mBuilding React-Select
24mDesigning Component API