panda-play

2.0.1 • Public • Published

Play

Play is a lightweight library for building Web Components.

To create a component, you just call gadget:

import {Gadgetbebopshadowtemplateevents} from "panda-play"
 
mixin class extends Gadget[
 
  tag "x-greeting"
 
  # bebop preset gives us VDOM + automatic rendering 
  # shadow give us Shadow DOM support 
  bebopshadow
 
  template ({value}) -> "<h1>#{value}, World!</h1>"
 
  events
    h1:
      click: ({target}) -> @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

Readme

Keywords

none

Package Sidebar

Install

npm i panda-play

Weekly Downloads

3

Version

2.0.1

License

MIT

Unpacked Size

49.5 kB

Total Files

14

Last publish

Collaborators

  • dyoder
  • freeformflow