Angular RunKit Component.
TypeScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit c6342e6 Jun 6, 2017
Permalink
Failed to load latest commit information.
dist fix build system Jun 6, 2017
src fix build system Jun 6, 2017
.gitignore initial commit Jun 5, 2017
README.md update README Jun 6, 2017
package.json v0.6.0 Jun 6, 2017
tsconfig.json fix build system Jun 6, 2017
yarn.lock fix build system Jun 6, 2017

README.md

angular-runkit

Angular RunKit Component.

Install

Install the package.

$ npm i -S angular-runkit

Add the RunKit embed library to your index page:

src/index.html

<head>
    ...
    <script src="https://embed.runkit.com"></script>
    ...
</head>

Whitelist angular-runkit in your System.js config:

src/systemjs.config.js

map: {
    ...
    'angular-runkit': 'npm:angular-runkit/dist/index.js',
    ...
}

Declare the component in your module:

src/app/app.module.ts

import { RunKitEmbedComponent } from 'angular-runkit'

...

@NgModule({
	...
	declarations: [
		...
		RunKitEmbedComponent,
		...
	],
	...
})

Usage

<runkit-embed source='console.log("Hello, world!")'></runkit-embed>

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

Inputs

source : string

Specify the source code that the notebook will use.

<runkit-embed source='console.log("Hello, world!")'></runkit-embed>

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>
</runkit-embed>

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'>
</runkit-embed>

nodeVersion : string

Request a version or semver range for the node engine.

<runkit-embed
    source='console.log("Hello, world!")'
    nodeVersion='7'>
</runkit-embed>

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]='["FIRST_NAME=Haskell", "LAST_NAME=Curry"]'
    nodeVersion='7'>
</runkit-embed>

title : string

Provide a title for the notebook when opened on RunKit.

<runkit-embed
    source='console.log("Hello, world!")'
    title='Hello'>
</runkit-embed>

minHeight : string

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

<runkit-embed
    source='console.log("Hello, world!")'
    minHeight='200px'>
</runkit-embed>

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-core")'
    packageTimestamp=1468195200000>
</runkit-embed>

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")'>
</runkit-embed>

Outputs

onLoad : function

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

<runkit-embed
    source='console.log("Hello, world!")'
    (onLoad)='loaded()'>
</runkit-embed>

onURLChanged : function

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

<runkit-embed
    source='console.log("Hello, world!")'
    (onURLChanged)='urlChanged()'>
</runkit-embed>

onEvaluate : function

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

<runkit-embed
    source='console.log("Hello, world!")'
    (onEvaluate)='evaluated()'>
</runkit-embed>

Methods

evaluate(callback : function) : void

Evaluate the notebook.

<runkit-embed
    #embed
    source='console.log("Hello, world!")'>
</runkit-embed>
<button (click)='embed.evaluate()'>Run</button>