100 lines
3.3 KiB
HTML
100 lines
3.3 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 my-alert []
|
|
(js/alert "alert!"))
|
|
|
|
(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>
|
|
|
|
</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>
|
|
|
|
<pre>
|
|
<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 my-alert []
|
|
(js/alert "alert!"))
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<button onclick="user.myAlert()">
|
|
Click me!
|
|
</button>
|
|
</body>
|
|
</pre>
|
|
|
|
<button onclick="user.myAlert()">
|
|
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>
|
|
<script src="cljs/script.cljs" type="application/x-sci"></script>
|
|
</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>
|
|
<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>
|
|
</pre>
|
|
|
|
<div id="app"></div>
|
|
</body>
|
|
</html>
|