Play
Play is a lightweight library for building Web Components.
To create a component, you just call gadget
:
import Gadgetbebopshadowtemplateevents from "panda-play" mixin tag "x-greeting" # bebop preset gives us VDOM + automatic rendering # shadow give us Shadow DOM support bebopshadow template "<h1>, World!</h1>" events h1: : @value = "Goodbye"
Features
- Fully encapsulated native Web Components
- Virtual DOM, with diff-based updates
- Selector-based event handlers instead of inline
- Arbitrary template functions—use template literals, JSX, Pug, …
- Or use VHTML and generate VDOM directly
- Observable properties generate change events and re-render
- Component-targetable CSS from client document
- Pipe operator to wire components together
- Delegation pattern—Gadgets are handles to DOM elements
- Mixin-based composition avoid fragile base class problem
Install
Bundle using your favorite bundler:
npm i -S panda-play