ember-runkit

Ember component for RunKit embeds.

Install

$ ember install ember-runkit

Add the RunKit embed library to your app/index.html:

{{content-for "head"}}
...
<script src="https://embed.runkit.com"></script>
...
{{content-for "head-footer"}}

If you want to include the embed library on-demand, see On-Demand Sourcing.

Usage

{{runkit-embed source='console.log("Hello, world!")'}}

Don't forget to check out the RunKit embed docs.

Data

source : string

Specify the source code that the notebook will use.

{{runkit-embed
  source='console.log("Hello, world!")'}}

readOnly : boolean

If true, the user will not be able to edit or run the embed.

{{runkit-embed
  source='console.log("Hello, world!")'
  readOnly=true}}

mode : string

If 'endpoint', the notebook will be run as an endpoint and a link to the served page will be shown.

{{runkit-embed
  source='exports.endpoint = (req, res) => res.end("Hello, world!")'
  mode='endpoint'}}

nodeVersion : string

Request a version or semver range for the node engine.

{{runkit-embed
  source='console.log("Hello, world!")'
  nodeVersion='7'}}

env : [string]

Provide a list of environment variables accessible in the notebook through process.env.

{{runkit-embed
  source='console.log(`Hello, ${ process.env.FIRST_NAME } ${ process.env.LAST_NAME }!`)'
  env=(list 'FIRST_NAME=Haskell' 'LAST_NAME=Curry')
  nodeVersion='7'}}

title : string

Provide a title for the notebook when opened on RunKit.

{{runkit-embed
  source='console.log("Hello, world!")'
  title='Hello'}}

minHeight : string

Provide a minimum height for the embed ('130px' by default).

{{runkit-embed
  source='console.log("Hello, world!")'
  minHeight='200px'}}

packageTimestamp : number

Specify the Unix time in milliseconds at which packages should resolved. Packages published after the date will be ignored.

{{runkit-embed
  source='require("babel")'
  packageTimestamp=1468195200000}}

preamble : string

Specify source code that is run before the main source. This code will not be shown in the embed.

{{runkit-embed
  source='console.log(_.map(_.add(1), [1, 2, 3]))'
  preamble='const _ = require("lodash/fp")'}}

Actions

onLoad : function

Provide a callback that is run when the embed is loaded.

{{runkit-embed
    source='console.log("Hello, world!")'
    onLoad=(action 'onLoad')}}

onURLChanged : function

Provide a callback that is run whenever the embed's URL changes.

{{runkit-embed
    source='console.log("Hello, world!")'
    onURLChanged=(action 'onURLChanged')}}

onEvaluate : function

Provide a callback that is run whenever the embed is evaluated.

{{runkit-embed
    source='console.log("Hello, world!")'
    onEvaluate=(action 'onEvaluate')}}

On-Demand Sourcing

If you don't want the client to download the embed library until embeds are needed, you can use ember-script-loader to dynamically source the library on-demand.

Install by running:

$ ember install ember-script-loader

Then wrap the embed inside the script loader:

{{#script-loader script='https://embed.runkit.com'}}
  {{runkit-embed source='console.log("Hello, world!")'}}
{{/script-loader}}