Ember RunKit Component.
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app
config
tests
vendor
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
testem.js

README.md

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}}