Interactive Javascript Code snippets

The basics

For basic usage, you just have to embed your code in a markdown tag eval-js like this:

```eval-js
[1, 2, 3].map(function(x) { return x + 1; })
```

And the result:

[1, 2, 3].map(function(x) { return x + 1; })

In this chapter, we are going to show how to configure your klipse snippets using html5 data attributes on the DOM element that contains the klipse snippet.

We have to embed the klipse snippet in a <pre><code class="lang-eval-js> with the data attributes corresponding to the snippet properties attributes we want to set.

Hiding a code snippet

If you want to evaluate a piece of code, but you don't want it to appear in the layout of the page, you can set the hidden class to the pre element - like this

<pre class="hidden"><code class="lang-eval-js">
a = 42;
</code></pre>

a = 42;

And we can use a in subsequent klipse snippets:

a

Using external libraries

To load a set of javascript libraries into klipse, you set data-external-libs with a comma separated list of javascript files you want to load.

Rambda and Underscore

For instance, this is how we load rambda.js and underscore.js in a hidden klipse snippet (the snippet must not be empty - otherwise it will be ignored):

<pre class="hidden"><code class="lang-eval-js" data-external-libs="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js, https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
R
</code></pre>

R

And now, we can use rambda:

R.partition(R.contains('s'), ['sss', 'ttt', 'foo', 'bars']);

And underscore:

_.partition([0, 1, 2, 3, 4, 5], function(x) {return x >= 3;})

React

Let's see how to use React.js inside Klipse.

There is a full example here.

Let's have a hidden snippet that include the javascript files required for react.js (the snippet must not be empty - otherwise it will be ignored):

<pre class="hidden"><code class="lang-eval-js" data-external-libs="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-with-addons.js, https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js">
React
</code></pre>

React

Now, we can use react.

We can have JSX klipse snippets with elements of type eval-jsx:

(We have inserted a <div id="container"></div> just after the klipse snippets.)

```eval-jsx
ReactDOM.render(
<h1>Hello, World !!</h1>,
document.getElementById('container'));
```

ReactDOM.render(
<h1>Hello, World !!</h1>,
document.getElementById('container'));

If you want to see the result of the JSX transpilation, you need to use transpile-jsx, like this:

```transpile-jsx
ReactDOM.render(
<h1>Hello, World !!</h1>,
document.getElementById('container'));
```

ReactDOM.render(
<h1>Hello, World !!</h1>,
document.getElementById('container'));

Preamble

Sometimes you want to add a preamble to a klipse snippet - a piece of code that should be evaluated before the snippet is evaluated but shouldn't appear in the layout of the snippet. For that purpose, there is data-preamble.

For instance:

<pre><code class="lang-eval-js" data-preamble="b = Math.random();">
b
</code></pre>

Modify a bit the follwing snippet, and see how a random number is generated again and again:

    b

Running code in a loop

If you want to have a klipse snippet that is evaluated again and again in intervals, you need to use data-loop-msec and specify the time in msec between the evaluations.

For example, this is how we display the date each second:

<pre><code class="lang-eval-js" data-loop-msec="1000">
new Date()
</code></pre>

This snippet is evaluated each second - without any user interaction:

    new Date()

Running code from a gist

Sometimes, you don't want to keep your code in the source of your gitbook but rather have it in a github gist. It will allow you to modify the code of the snippet without having to republish your gitbook.

For that, you use data-gist-id with the id of your gist - including your username.

For example, I have this gist that defines a function permutations for calculating the permutations of an array:

This is how I include it in my page:

<pre><code class="lang-eval-js" data-gist-id="viebel/5cc67a97903f04036b569c0eb0436e5f">

</code></pre>

And now, I can use permutations inside subsequent klipse snippets:

permutations([1,2,3])