# xpanda-play

> Play is a lightweight library for building Web Components.

Latest version **1.0.1** (published 2017-12-11) · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-12-11 |
| First published | 2017-12-11 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | dyoder |

## Links

- npm: https://www.npmjs.com/package/xpanda-play
- npm.io page: https://npm.io/package/xpanda-play

## Dependencies (5)

- [diffhtml](https://npm.io/package/diffhtml.md) ^1.0.0-beta.9
- [panda-play](https://npm.io/package/panda-play.md) ^1.0.0
- [markdown-it](https://npm.io/package/markdown-it.md) ^8.4.0
- [fairmont-helpers](https://npm.io/package/fairmont-helpers.md) ^3.0.0
- [fairmont-multimethods](https://npm.io/package/fairmont-multimethods.md) ^2.0.1

## Recent versions

- 1.0.1 (latest) — 2017-12-11

## README

# Play

Play is a lightweight library for building Web Components.

To create a component, just extend `Gadget`:

```coffee
import {Gadget} from "play"

class Greeting extends Gadget

  @register "x-editor"

  @observe value: "Hello"

  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

## Demo

[Try it out!](https://play.pandastrike.com/v/1.0.0-alpha-00/demos/markdown-editor)

## Install

Bundle using your favorite bundler:

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

Standalone and JavaScript module distributions coming soon.

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