cycle-runkit

Cycle.js RunKit Component.

Install

$ npm i -S cycle-runkit

Add the RunKit embed library to your page:

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

Usage

const Embed = require('cycle-runkit')

module.exports = function App(sources) {
    const embed = Embed({
        DOM: sources.DOM,
        props: $.of({
            source: `console.log('Hello, world!')`
        })
    })

    return {
        DOM: embed.DOM
    }
}

Sources

props

The following parameters are properties on the props property of the sources object.

source : string

Specify the source code that the notebook will use.

Embed({
    DOM: sources.DOM,
    props: $.of({
        source: `console.log('Hello, world!')`
    })
})

readOnly : boolean

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

Embed({
    DOM: sources.DOM,
    props: $.of({
        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.

Embed({
    DOM: sources.DOM,
    props: $.of({
        source: `exports.endpoint = (req, res) => res.end('Hello, world!')`,
        mode: 'endpoint'
    })
})

nodeVersion : string

Request a version or semver range for the node engine.

Embed({
    DOM: sources.DOM,
    props: $.of({
        source: `console.log('Hello, world!')`,
        nodeVersion: 7
    })
})

env : [string]

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

Embed({
    DOM: sources.DOM,
    props: $.of({
        source: 'console.log(`Hello, ${ process.env.FIRSTNAME } ${ process.env.LASTNAME }!`',
        env: ['FIRSTNAME=Haskell', 'LASTNAME=Curry']
    })
})

title : string

Provide a title for the notebook when opened on RunKit.

Embed({
    DOM: sources.DOM,
    props: $.of({
        source: `console.log('Hello, world!')`,
        title: 'Hello World'
    })
})

minHeight : string

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

Embed({
    DOM: sources.DOM,
    props: $.of({
        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.

Embed({
    DOM: sources.DOM,
    props: $.of({
        source: `require('babel-core')`,
        packageTimestamp: 1468195200000
    })
})

preamble : string

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

Embed({
    DOM: sources.DOM,
    props: $.of({
        source: `console.log(_.map(_.add(1), [1, 2, 3]))`,
        preamble: `const _ = require('lodash/fp')`
    })
})

evaluate : stream ()

Evaluate the notebook.

Embed({
    DOM: sources.DOM,
    props: $.of({
        source: `console.log('Hello, world!')`
    }),
    evaluate: sources.DOM
        .select('.Run')
        .events('click')
})

Sinks

onLoad : stream ()

Emits when the embed is loaded.

const embed = Embed({ ... })

embed.onLoad.addListener({
    next() {
        console.log('loaded!')
    }
})

onURLChanged : stream ()

Emits whenever the embed's URL changes.

const embed = Embed({ ... })

embed.onURLChanged.addListener({
    next() {
        console.log('url changed!')
    }
})

onEvaluate : stream ()

Emits whenever the embed is evaluated.

const embed = Embed({ ... })

embed.onEvaluate.addListener({
    next() {
        console.log('evaluated!')
    }
})

strit12 / cycle-runkit Goto Github PK

cycle-runkit's Introduction