ClojureScript

ClojureScript is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool.

ClojureScript is a compiler for Clojure that targets JavaScript.
In LiveCodes, it runs in the browser using Cherry.

Language Info

Name

clojurescript

Extensions

cljs, cljc, clj, edn, clojure

Editor

script

Compiler

Cherry

If JSX is used (using #jsx reader tag - example), it is also compiled (JSX). See example usage.

Version

cherry-cljs: v0.0.3

Code Formatting

using Parinfer.js

Example Usage

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "cljs": "(ns demo\n  ;; you can use npm modules\n  (:require [\"canvas-confetti$default\" :as confetti]))\n\n(let [el (js/document.getElementById \"test\")]\n  (.addEventListener el \"click\"\n    (fn []\n      (confetti)\n      (println \"test\"))))\n",
    "html": "<button id=\"test\">test</button>",
    "console": "open"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "params": {
    "cljs": "(ns demo\n  ;; you can use npm modules\n  (:require [\"canvas-confetti$default\" :as confetti]))\n\n(let [el (js/document.getElementById \"test\")]\n  (.addEventListener el \"click\"\n    (fn []\n      (confetti)\n      (println \"test\"))))\n",
    "html": "<button id=\"test\">test</button>",
    "console": "open"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "cljs": "(ns demo\n  ;; you can use npm modules\n  (:require [\"canvas-confetti$default\" :as confetti]))\n\n(let [el (js/document.getElementById \"test\")]\n  (.addEventListener el \"click\"\n    (fn []\n      (confetti)\n      (println \"test\"))))\n",
    "html": "<button id=\"test\">test</button>",
    "console": "open"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "params": {
    "cljs": "(ns demo\n  ;; you can use npm modules\n  (:require [\"canvas-confetti$default\" :as confetti]))\n\n(let [el (js/document.getElementById \"test\")]\n  (.addEventListener el \"click\"\n    (fn []\n      (confetti)\n      (println \"test\"))))\n",
    "html": "<button id=\"test\">test</button>",
    "console": "open"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "cljs": "(ns demo\n  ;; you can use npm modules\n  (:require [\"canvas-confetti$default\" :as confetti]))\n\n(let [el (js/document.getElementById \"test\")]\n  (.addEventListener el \"click\"\n    (fn []\n      (confetti)\n      (println \"test\"))))\n",
    "html": "<button id=\"test\">test</button>",
    "console": "open"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Using React (with JSX):

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "clojurescript"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "clojurescript"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "clojurescript"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "clojurescript"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "template": "clojurescript"
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Starter Template

https://livecodes.io/?template=clojurescript

Links

• ClojureScript official website
• Clojure official website
• Cherry repo