Scittle

What is this?

This project exposes the Small Clojure Interpreter in the browser in such a way that you can use it with the script tag.

Project status

This project is currently experimental and breaking changes are bound to happen. Feedback is welcome on Github.

You can get a copy of scittle.js here. If you want a pinned version of scittle.js, your best bet is to download your own copy and host it yourself.

Usage

Include scittle.js and write a script tag where type is set to application/x-scittle.

      <head>
  <script src="https://borkdude.github.io/scittle/js/scittle.js" type="application/javascript"></script>

  <script type="application/x-scittle">
    (defn my-alert []
      (js/alert "You clicked!"))

    ;; export function to use from JavaScript:
    (set! (.-my_alert js/window) my-alert)
  </script>

</head>

<body>
  <button onclick="my_alert()">
    Click me!
  </button>
</body>

Source from file

When you have a file on your server, say cljs/script.cljs, you can load it using the src attribute:


<script src="cljs/script.cljs" type="application/x-scittle"></script>

Reagent plugin

To enable reagent, in addition to scittle.js, you need to include React and scittle.reagent.js:


<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://borkdude.github.io/scittle/js/scittle.reagent.js" type="application/javascript"></script>

<script type="application/x-scittle">
  (require '[reagent.core :as r]
           '[reagent.dom :as rdom])

  (def state (r/atom {:clicks 0}))

  (defn my-component []
    [:div
      [:p "Clicks: " (:clicks @state)]
      [:p [:button {:on-click #(swap! state update :clicks inc)}
       "Click me!"]]])

  (rdom/render [my-component] (.getElementById js/document "app"))
</script>

Also see a tic-tac-toe demo.