🔬 Testing RunKit

Experimenting using RunKit↗ as a custom repl for nodejs. Warning, it starts off messy, but in the end we have a reusable nodejs custom REPL.

Exploration§
REPL Implementation§
Next steps and improvements§

Exploration

Embed

Lets start with just the simple demo embed,↗ adding the embed script and a container below.

scriptinline

htmlinline

A container to hold the embed.

Run the #init cell below 👇 to populate it With some demo source.

jscollapseinit

return RunKit.createNotebook({
    // the parent element for the new notebook
    element: document.getElementById("my-element"),
    onEvaluate: (...args) => alert(JSON.stringify([...args])),
    // specify the source of the notebook
    source: "// GeoJSON!\nvar getJSON = require(\"async-get-json\");\n\nawait getJSON(\"https://storage.googleapis.com/maps-devrel/google.json\");"
})

Endpoint

react bindings for simple embed: https://github.com/runkitdev/react-runkit↗ and trying out https://runkit.com/docs/endpoint↗

jsxjsbelowreactendpoint

return (async fn => {

  const React = lit.utils.React
  const Embed = (await import('https://cdn.skypack.dev/runkit-embed-react')).default

  const createdAt = new Date()

  const helloSource = `exports.endpoint = function(request, response) {
    response.end("Hello world! From .lit and Nodejs thanks to RunKit. Created at " + createdAt);
}`

  const onLoad = (...args) => console.log(JSON.stringify([...args]))

  return <Embed
            mode='endpoint'
            readOnly={true}
            evaluateOnLoad={true}
            // hidesActionButton={true}
            source={ helloSource } 
            // ref='embed'
            onLoad={ onLoad } 
          />

})()

uribelow

https://2mkz0r1anfrl.runkit.sh/

Viewer plug-in

jsxrk.jsxcollapseplugintype=viewerof=runkit

import Embed from 'https://cdn.skypack.dev/runkit-embed-react'

export const viewer = ({node,React}) => {
  const {useState} = React
  const [url, setUrl] = useState(false)
  const meta = node?.properties?.meta || {}
  const endpoint = meta.attrs && meta.attrs.mode === 'endpoint'

  const onLoad = async (rk) => {
     if (endpoint)
       setUrl(await rk.getEndpointURL())
  }

  return url || <Embed
            mode={endpoint ? 'endpoint' : 'default'}
            readOnly={endpoint}
            evaluateOnLoad={endpoint}
            hidesActionButton={endpoint}
            source={ node.data.value } 
            // ref='embed'
            onLoad={ onLoad } 
          />

}

runkitinline

console.log("Hello world! From .lit and Nodejs thanks to RunKit.")

runkitbelowmode=endpoint

exports.endpoint = function(req, res) {
    res.end("Hello world! From .lit and Nodejs thanks to RunKit.");
}

runkitbelowmode=endpoint

exports.endpoint = function(req,res) {
  res.writeHead(200, {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
  });
  res.end('{"ping": "pong!"}')
}

return fetch("https://jzc0q8a4nyog.runkit.sh").then(res => res.text())

txtUpdated 141w ago

{"ping": "pong!"}

REPL Implementation

Split out the endpoint source to its own .lit cell for legibility instead of an inline string.

jsrunkit-repl-endpoint.jscollapsesource

const util = require('util')

function requireFromString(src, filename) {
  var Module = module.constructor;
  var m = new Module();
  m._compile(src, filename);
  return m.exports;
}

exports.endpoint = function(req,res) {
  res.writeHead(200, {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
  });

  let data = '';
  req.on('data', chunk => {
    data += chunk;
  })

  req.on('end', async () => {
    const payload = JSON.parse(data)
    const exported = requireFromString(payload.src, payload.meta.filename || "untitled.js")
    let result;
    if (typeof exported === 'function') {
      try {
        result = await exported(payload.meta)
        res.end(util.inspect({
          result
        }))
      } catch(error) {
        res.end(util.inspect({error}))
      }
    } else {
      res.end(util.inspect({
        exports: exported
      }))
    }
  })
}

On load the following repl !plugin creates a RunKit endpoint if it doesn't exist using the above source.

js../plugins/repls/node.jsplugincollapsetype=replof=node

if (typeof lit !== "undefined" && !window.__runkitNodeEnpoint) {
  (async (fn) => {
    const el = document.createElement("div");
    document.body.appendChild(el);
    el.setAttribute("style", "height:0;");
    RunKit.createNotebook({
      element: el,
      mode: "endpoint",
      onLoad: async (rk) => {
        window.__runkitNodeEnpoint = await rk.getEndpointURL();
        document.body.removeChild(el);
      },
      evaluateOnLoad: true,
      source: await lit.fs.readFile("/testing/runkit-repl-endpoint.js", {
        encoding: "utf8",
      }),
    });
  })();
}

export const repl = async (src, meta, node) => {
  if (!window.__runkitNodeEnpoint) {
    return "Still setting up repl endpoint";
  } else {
    try {
      return await (
        await fetch(window.__runkitNodeEnpoint, {
          method: "POST",
          body: JSON.stringify({ src, meta }),
        })
      ).text();
    } catch (err) {
      return err.message;
    }
  }
};

Usage:

jsnodetest.jsid=exampleusage

module.exports = async (meta) => {
  return `Hello world! From .lit (${meta.id} ${meta.filename}) and Nodejs ${process.env.NODE_VERSION} (${process.platform} ${process.arch}) thanks to RunKit. At ${new Date()}`
}

txtUpdated 139w ago

{ result:
   'Hello world! From .lit (example test.js) and Nodejs 10.24.1 (linux x64) thanks to RunKit. At Sat May 29 2021 00:28:41 GMT+0000 (Coordinated Universal Time)' }

Next steps and improvements

Don't start the endpoint on every page load, and instead lazily setup just before first execution.
Don't use require module from string hack, and instead use a proper vm and context.
Create a testing/CORS Proxy