ClojureScript (Cherry)

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.

Deprecation

The language aliases: clojurescript, cljs, cljc, clj, edn, clojure will use the self-hosted ClojureScript compiler in the future. If you want to use the Cherry-based ClojureScript compiler, use the alias: clojurescript-cherry or cljs-cherry instead.

Language Info

Name

clojurescript-cherry

Aliases

cljs-cherry

Deprecated aliases: clojurescript, 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.6.38

Code Formatting

Using Parinfer.

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} />);
}

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 LiveCodes from 'livecodes/svelte';

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>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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} />);
}

Preact

import LiveCodes from 'livecodes/preact';

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} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.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>

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} />);
}

Vue

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

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

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "clojurescript"
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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

Preact

import LiveCodes from 'livecodes/preact';

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

Web Components

<live-codes
  template="clojurescript"></live-codes>

<script type="module">
  import "livecodes/web-components";
</script>

Starter Template

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

Links

• ClojureScript official website
• Clojure official website
• Cherry repo
• ClojureScript (self-hosted) in LiveCodes