# panda-play

> a lightweight library for building Web Components

Latest version **2.0.1** (published 2019-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install panda-play
pnpm add panda-play
yarn add panda-play
bun add panda-play
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2019-09-23 |
| First published | 2017-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 48.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Dan Yoder |
| Maintainers | dyoder, freeformflow |

## Links

- npm: https://www.npmjs.com/package/panda-play
- Repository: https://github.com/pandastrike/panda-play
- Homepage: https://play.pandastrike.com/
- Issues: https://github.com/pandastrike/panda-play/issues
- npm.io page: https://npm.io/package/panda-play

## Dependencies (5)

- [diffhtml](https://npm.io/package/diffhtml.md) ^1.0.0-beta.10
- [panda-garden](https://npm.io/package/panda-garden.md) ^4.0.0
- [panda-generics](https://npm.io/package/panda-generics.md) ^6.0.0
- [panda-parchment](https://npm.io/package/panda-parchment.md) ^5.0.0
- [panda-river-esm](https://npm.io/package/panda-river-esm.md) ^5.0.0

## Recent versions

- 2.0.1 (latest) — 2019-09-23
- 2.0.0 — 2019-08-17
- 1.8.6 — 2019-05-15
- 1.8.5 — 2018-12-07
- 1.8.4 — 2018-11-29
- 1.8.3 — 2018-11-28
- 1.8.2 — 2018-11-28
- 1.8.1 — 2018-11-11
- 1.8.0 — 2018-11-08
- 1.7.0 — 2018-08-13
- 1.6.0 — 2018-08-10
- 1.5.3 — 2018-02-19
- 1.5.2 — 2017-12-23
- 1.5.1 — 2017-12-23
- 1.5.0 — 2017-12-23
- … 12 more at https://npm.io/package/panda-play/versions

## README

# Play

Play is a lightweight library for building Web Components.

To create a component, you just call `gadget`:

```coffee
import {Gadget, bebop, shadow, template, events} from "panda-play"

mixin class extends Gadget, [

  tag "x-greeting"

  # bebop preset gives us VDOM + automatic rendering
  # shadow give us Shadow DOM support
  bebop, shadow

  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][elliott]

[elliott]:https://medium.com/@_ericelliott/why-composition-is-immune-to-fragile-base-class-problem-8dfc6a5272aa

## Install

Bundle using your favorite bundler:

```
npm i -S panda-play
```

---
_Source: https://npm.io/package/panda-play · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._