# ember-component-playground

> Dynamic playground for rendering examples of components

Latest version **1.8.0** (published 2017-11-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-component-playground
pnpm add ember-component-playground
yarn add ember-component-playground
bun add ember-component-playground
```

## 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.8.0 |
| Published | 2017-11-28 |
| First published | 2016-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.5.0 |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chadtmiller, dhedgecock, evrowe |
| Keywords | ember-addon, component-playground |

## Links

- npm: https://www.npmjs.com/package/ember-component-playground
- Repository: https://github.com/healthsparq/ember-component-playground
- Homepage: https://github.com/healthsparq/ember-component-playground#readme
- Issues: https://github.com/healthsparq/ember-component-playground/issues
- npm.io page: https://npm.io/package/ember-component-playground

## Dependencies (4)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^6.10.0
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^2.0.3
- [ember-cli-codemirror-shim](https://npm.io/package/ember-cli-codemirror-shim.md) ^1.0.2
- [ember-cli-htmlbars-inline-precompile](https://npm.io/package/ember-cli-htmlbars-inline-precompile.md) ^1.0.2

## Recent versions

- 1.8.0 (latest) — 2017-11-28
- 1.7.0 — 2017-05-04
- 1.6.0 — 2016-12-14
- 1.5.0 — 2016-11-25
- 1.4.2 — 2016-11-24
- 1.4.1 — 2016-11-24
- 1.4.0 — 2016-11-24
- 1.3.0 — 2016-11-17
- 1.2.0 — 2016-10-10
- 1.1.3 — 2016-10-07
- 1.1.2 — 2016-10-06
- 1.1.1 — 2016-10-06
- 1.1.0 — 2016-10-05

## README

# Ember Component Playground [![Build Status](https://travis-ci.org/healthsparq/ember-component-playground.svg?branch=master)](https://travis-ci.org/healthsparq/ember-component-playground)

An Ember component for realtime rendering of your app's components using an instance of the in browser codemirror code editor. This component was created for use within a documentation context, for providing examples of components and tweaking their attributes to see how they are affected in realtime. However, you may find other uses for it beyond this.

***

## Installation && Requirements

**Requirements**

This addon requires Node >= v4.3

**Installation**

```
# From the command line:
ember install ember-component-playground
```

***

## Usage

Create a component playground using the addon's primary export:

```handlebars
{{component-playground}}
```

This will create an empty code editor with a render preview. You can supply starting code to the component with the `code` attribute:

```handlebars
{{component-playground code="<h4>This is a totally radical component in my project:</h4> {{radical-component}}"}}
```

This will create a code editor with your code pre-populated and a rendered template in the render preview.

**Configuring the Editor**
The editor is a Ember DDAU version of the [CodeMirror](https://codemirror.net/) editor. The editor is configured to use handlebars syntax with the very beautiful [Panda Theme](https://github.com/PandaTheme) created by [Siamek Mokhtari](https://github.com/siamak) by default. Changing these defaults requires two steps, importing assets during the build and passing configurations to an editor instance.

Import the assets during the build by specifying which modes and themes you'd like to import in you `ember-cli-build` file:

```javascript
var app = new EmberApp(defaults, {
  // Configure assets to import for codemirror
  codemirror: {
    modes: ['javascript'],
    themes: ['monokai']
  },
});
```

Then pass props `mode` and `theme` to an instance of the playground:

```handlebars
{{component-playground mode="javascript" theme="monokai"}}
```

***

## How it Works

This addon provides a `{{component-playground}}` component. An instance of the [CodeMirror](https://codemirror.net/) editor component drives the text editor inside the playground. The component will attempt to compile any text entered and if successful it will render the output using a `{{partial}}`.

***

## Development && Contributing

Contributions are welcome! Project development is documented below:

#### Running

* `ember serve`
* Visit your app at [http://localhost:4200](http://localhost:4200).

#### Running Tests

* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`

***

### TODO:

- [x] Make `panda-syntax` the default theme
- [x] Make `htmlhandlebars` the default mode
- [x] Make codemirror theme configurable
- [x] Document Node >= 4.3 requirements
- [] Ability to set default themes. Maybe by exporting your own component-playground instance pulled from the addon namespace
- [] Better how it works documentation for a high level overview
- [] Include picture in README of actual usage
- [x] Include `htmlhandlebars`
- [] Create block form instance with yielded partial name for extra context magics
- [x] Import css in treeForVendor b/c it's just structural
- [x] This addon MUST run before the cli-shim for configs to work

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