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.

Note

Lisp language family supported in LiveCodes includes Common Lisp, Scheme, ClojureScript and Fennel.

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.2.18

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