Ember-component-playground NPM

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:

{{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:

{{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 editor. The editor is configured to use handlebars syntax with the very beautiful Panda Theme created by Siamek Mokhtari 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:

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:

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

How it Works

This addon provides a {{component-playground}} component. An instance of the CodeMirror 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.

Running Tests

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

TODO:

Make panda-syntax the default theme
Make htmlhandlebars the default mode
Make codemirror theme configurable
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
Include htmlhandlebars
[] Create block form instance with yielded partial name for extra context magics
Import css in treeForVendor b/c it's just structural
This addon MUST run before the cli-shim for configs to work