arrow-playground

NPM version

Arrow Playground

Component that creates Kotlin-aware, including the Arrow library, editors capable of running code from HTML block elements. This is a fork of the original Kotlin Playground work done by JetBrains team.

Examples

Preview

Arrow Playground preview

Installation

Load it from a CDN

Generate the library through the proper npm script, then host it and insert a <script> element into your page, specifying what elements should be converted in its data-selector attribute.

<script src="https://unpkg.com/arrow-playground@1" data-selector="code"></script>

Or, if you need to separate process of loading/conversion, omit the data-selector attribute and use a second <script> element like this:

<script src="https://unpkg.com/arrow-playground@1"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  ArrowPlayground('.code-blocks-selector');
});
</script>

You can also overwrite the server where the code will be sent to be compiled and analyzed (for example if you host a server instance that includes your own Kotlin libraries). For that you can set the data-server attribute.

And you can also set a default Arrow or Kotlin version for code snippets to run on. Bear in mind that the versions set per editor will take precedence though:

<script src="https://unpkg.com/arrow-playground@1"
        data-selector="code"
        data-server="https://my-arrow-playground-server"
        data-arrow-version="0.10.0"
        data-version="1.3.41">
</script>

Fork & clone server repository.

Host your own instance

Install arrow-playground as dependency via NPM.

npm install arrow-playground -S

And then just use it in your code.

// ES5
var playground = require('arrow-playground');

document.addEventListener('DOMContentLoaded', function() {
  playground('code'); // attach to all <code> elements
});


// ES6
import playground from 'arrow-playground';

document.addEventListener('DOMContentLoaded', () => {
  playground('code'); // attach to all <code> elements
});

Use from plugins

1) Kotlin Playground WordPress plugin — WordPress plugin which allows to embed interactive Kotlin playground to any post. 2) Kotlin Playground Coursera plugin — Allows embedding interactive Kotlin playground for coursera lessons. 3) Kotlin Playground Orchid plugin — Allows embedding interactive Kotlin playground in Orchid documentation sites.

Options

Kotlin Playground supports several events, and also Kotlin version or server URL overwriting passing an additional options parameter on initialisation.

For example:

function onChange(code) {
  console.log("Editor code was changed:\n" + code);
}

function onTestPassed() {
   console.log("Tests passed!");
}

const options = {
  server: 'https://my-arrow-playground-server',
  version: '1.3.41',
  onChange: onChange,
  onTestPassed: onTestPassed,
  callback: callback(targetNode, mountNode)
};

playground('.selector', options)

Events description:

Customizing editors

Use the following attributes on elements that are converted to editors to adjust their behavior.

// All imports

fun main(args: Array<String>) {println({
  /*
  All previous snippets code
  */
  /*
  Your code here
  */
}())}


  <code data-executable="incremental">
    /*
    Your code here
    */
  </code>

You can play with this setting in this specific page where all code snippets are set in this mode:

Incremental mode examples

Also, you can make only a part of code read-only by placing it between //sampleStart and //sampleEnd markers. If you don’t need this just use attribute none-markers. For adding hidden files: put files between <textarea> tag with class hidden-dependency.

  <code>
  import cat.Cat

  fun main(args: Array<String>) {
  //sampleStart
      val cat = Cat("Kitty")
      println(cat.name)  
  //sampleEnd                 
  }
    <textarea class="hidden-dependency">
      package cat
      class Cat(val name: String)
    </textarea>
  </code>

Also if you want to hide code snippet just set the attribute folded-button to false value.

Supported keyboard shortcuts

Develop and contribute

  1. Install required dependencies yarn install.
  2. yarn start to start local development server at http://localhost:9000.
  3. yarn run build to create production bundles.
This site is open source. Improve this page.