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

let options = $state({
  "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 = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

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

Solid

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

export default function App() {
  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"
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Ripple

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

export default component App() {
  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"
    }
  };
  const onMount = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  <div {ref onMount}></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';

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

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

Solid

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

export default function App() {
  const options: EmbedOptions = {
  "template": "clojurescript"
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Ripple

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

export default component App() {
  const options: EmbedOptions = {
    "template": "clojurescript"
  };
  const onMount = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  <div {ref onMount}></div>
}

Starter Template

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

Links

• ClojureScript official website
• Clojure official website
• Cherry repo