SCI script tag

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 sci-script-tag.js here. If you want a pinned version of sci-script-tag.js, your best bet is to download your own copy and host it yourself.

Usage

Include sci-script-tag.js and write a script tag where type is set to application/x-sci. Use :export to make the function available in the JavaScript environment. The name is processed using munge.

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

  <script type="application/x-sci">
    (defn ^:export my-alert []
      (js/alert "You clicked!"))
  </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-sci"></script>

Reagent plugin

To enable reagent, in addition to sci-script-tag.js, you need to include sci-script-tag-plugin-reagent.js.


<script src="https://borkdude.github.io/sci-script-tag/js/sci-script-tag-plugin-reagent.js" type="application/javascript"></script>
<script type="application/x-sci">
  (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>