Skip to content

Instantly share code, notes, and snippets.

@MarcoPolo
Created February 18, 2020 21:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MarcoPolo/5c71924624fb3ae34f1b3f59847d4e00 to your computer and use it in GitHub Desktop.
Save MarcoPolo/5c71924624fb3ae34f1b3f59847d4e00 to your computer and use it in GitHub Desktop.
Example of RunKit declaration file. These types may be out of date, so you probably want to copy the latest types from the docs directly.
// VS Code will show you the types here
window.RunKit.createNotebook({
element: document.getElementById("runkit-embed"),
source: "1 + 1"
})
// Put this file alongside your JS code and VS Code will automatically pick it up!
interface Window {
RunKit: GlobalRunKit
}
type GlobalRunKit = {
createNotebook: (options: EmbedOptions) => NotebookEmbed
}
type EmbedOptions = {
element: HTMLElement // Parent element for the new notebook
// Environment variables for the execution environment. Available under
// `process.env`. Defaults to []
environment?: Array<{ name: string, value: string }>
evaluateOnLoad?: boolean
gutterStyle?: "inside" | "none" | "outside" // Defaults to "outside"
hidesActionButton?: boolean
hidesEndpointLogs?: boolean
hostURL?: string
// Minimum height of the embed in pixels. E.g. "100px". Defaults to "73px"
minHeight?: string
// If "endpoint" the the notebook will be run as a server endpoint and a link to
// it will be exposed in the embed. See runkit.com/docs/endpoint. Defaults to
// "default"
mode?: "endpoint" | "default"
// A semver range that the node engine should satisfy, e.g. "4.0.x" or ">
// 6.9.2". Defaults to "10.x.x"
nodeVersion?: string
source?: string // The source code of the notebook
// The timestamp in UTC milliseconds to recreate the state of package
// availability. No packages published to npm after this time are available in this
// embed. Useful for reproducing bugs, or guaranteeing dependency versions. `null`
// sets the time to when the embed is created
packageTimestamp?: number | null
// Code in the preamble field will not be displayed in the embed, but will be
// executed before running the code in the embed. For example, libraries that use
// RunKit for documentation often require their package in the preamble to avoid
// clutter in the embed code
preamble?: string
readOnly?: boolean
tabSize?: number // Minimum of 0. Defaults to 4
theme?: string // Defaults to "runkit-light"
title?: string // The title of the notebook when it is saved on RunKit.
}
type NotebookEmbed = {
/// Methods
destroy: () => void
evaluate: () => void
/// Events
onEvaluate: () => void // Called when a cell is evaluated
// Called when the embed has fully loaded. The function will be passed a
// reference to the notebook.
onLoad: (arg: NotebookEmbed) => void
// Called when the embed cell is resized
onResize: (arg: { height: number }) => void
onSave: () => void // Called when the embed is saved
// Called when the shareable URL or endpoint URL changes
onURLChanged: (arg: { shareableURL: string, endpointURL: string }) => void
/// Getters
getEndpointURL: () => Promise<string>
getEnvironment: () => Promise<Array<{ name: string, value: string }>>
getEvaluateOnLoad: () => Promise<boolean>
getGutterStyle: () => Promise<"inside" | "none" | "outside">
getHidesActionButton: () => Promise<boolean>
getHidesEndpointLogs: () => Promise<boolean>
getMinHeight: () => Promise<string>
getMode: () => Promise<"endpoint" | "default">
getNodeVersion: () => Promise<string>
getSource: () => Promise<string>
getPackageTimestamp: () => Promise<number | null>
getPreamble: () => Promise<string>
getReadOnly: () => Promise<boolean>
// A URL that references this exact notebook
getShareableURL: () => Promise<string>
// A path that you can use to require this code from other notebooks
getRequirePath: () => Promise<string>
getTabSize: () => Promise<number>
getTheme: () => Promise<string>
getTitle: () => Promise<string>
// Setters
setEnvironment: (environment: Array<{ name: string, value: string }>) => Promise<undefined>
setGutterStyle: (gutterStyle: "inside" | "none" | "outside") => Promise<undefined>
setHidesActionButton: (hidesActionButton: boolean) => Promise<undefined>
setHidesEndpointLogs: (hidesEndpointLogs: boolean) => Promise<undefined>
setMinHeight: (minHeight: string) => Promise<undefined>
setMode: (mode: "endpoint" | "default") => Promise<undefined>
setNodeVersion: (nodeVersion: string) => Promise<undefined>
setSource: (source: string) => Promise<undefined>
setPackageTimestamp: (packageTimestamp: number | null) => Promise<undefined>
setPreamble: (preamble: string) => Promise<undefined>
setReadOnly: (readOnly: boolean) => Promise<undefined>
setTabSize: (tabSize: number) => Promise<undefined>
setTheme: (theme: string) => Promise<undefined>
setTitle: (title: string) => Promise<undefined>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment