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 attibute, like this:

<script src="https://unpkg.com/arrow-playground@1"
        data-selector="code"
        data-server="https://my-arrow-playground-server">
</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
});

Options

Kotlin Playground supports several events, and also 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',
  onChange: onChange(code),
  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 npm install.
  2. npm start to start local development server at http://localhost:9000, or npm start -- --env.webDemoUrl=http://localhost:6666 if you want a different compiler host URL.
  3. npm run build to create production bundles.