114 lines
4.1 KiB
HTML
114 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="js/sci-script-tag.js" type="application/javascript"></script>
|
|
<script src="js/sci-script-tag-plugin-reagent.js" type="application/javascript"></script>
|
|
|
|
<script type="application/x-sci">
|
|
(defn ^:export my-alert []
|
|
(js/alert "You clicked!"))
|
|
|
|
(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>
|
|
|
|
<script src="cljs/script.cljs" type="application/x-sci"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js" type="text/javascript"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/languages/clojure.min.js" type="text/javascript"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/zenburn.min.css" integrity="sha512-JPxjD2t82edI35nXydY/erE9jVPpqxEJ++6nYEoZEpX2TRsmp2FpZuQqZa+wBCen5U16QZOkMadGXHCfp+tUdg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
</head>
|
|
<body>
|
|
<h1>SCI script tag</h1>
|
|
<h2>What is this</h2>
|
|
<p>This project exposes the <a href="https://github.com/borkdude/sci">Small Clojure Interpreter</a> in the
|
|
browser in such a way that you can use it with the <tt>script</tt> tag.</p>
|
|
<h2>Project status</h2>
|
|
<p>
|
|
This project is currently experimental and breaking changes are
|
|
bound to happen. Feedback is welcome on <a href="https://github.com/borkdude/sci-script-tag">Github</a>.</p>
|
|
<p>
|
|
You can get a copy
|
|
of <tt>sci-script-tag.js</tt> <a href="https://borkdude.github.io/sci-script-tag/js/sci-script-tag.js">here</a>. If
|
|
you want a pinned version of <tt>sci-script-tag.js</tt>, your best bet is to
|
|
download your own copy and host it yourself.
|
|
</p>
|
|
|
|
<h2><a href="#usage">Usage</a></h2>
|
|
|
|
Include <tt>sci-script-tag.js</tt> and write a <tt>script</tt> tag
|
|
where <tt>type</tt> is set
|
|
to <tt>application/x-sci</tt>. Use <tt>:export</tt> to make the function
|
|
available in the JavaScript environment. The name is processed
|
|
using <tt>munge</tt>.
|
|
|
|
<pre>
|
|
<code class="html"><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></code></pre>
|
|
|
|
<script type="text/javascript">hljs.highlightAll();</script>
|
|
|
|
<button onclick="my_alert()">
|
|
Click me!
|
|
</button>
|
|
|
|
<h2><a href="#src">Source from file</a></h2>
|
|
|
|
When you have a file on your server, say <tt>cljs/script.cljs</tt>, you can load it using the <tt>src</tt> attribute:
|
|
|
|
<pre><code class="html">
|
|
<script src="cljs/script.cljs" type="application/x-sci"></script>
|
|
</code></pre>
|
|
|
|
<h2><a href="#reagent">Reagent plugin<a/></h2>
|
|
|
|
To enable <a href="https://github.com/reagent-project/reagent">reagent</a>,
|
|
in addition to <tt>sci-script-tag.js</tt>, you need to include <tt>sci-script-tag-plugin-reagent.js</tt>.
|
|
|
|
<pre><code class="html">
|
|
<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>
|
|
</code></pre>
|
|
|
|
<div id="app"></div>
|
|
</body>
|
|
</html>
|