135 lines
5 KiB
HTML
135 lines
5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="js/scittle.js" type="application/javascript"></script>
|
|
<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="js/scittle.reagent.js" type="application/javascript"></script>
|
|
<script src="js/scittle.cljs-ajax.js" type="application/javascript"></script>
|
|
<script type="application/x-scittle">
|
|
(defn my-alert []
|
|
(js/alert "You clicked!"))
|
|
|
|
(set! (.-my_alert js/window) my-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"))
|
|
|
|
(require '[ajax.core :refer [GET]])
|
|
|
|
(defn handler [response]
|
|
(js/alert (str response)))
|
|
|
|
(defn make-request []
|
|
(GET "html/cljs-ajax.html" {:handler handler}))
|
|
|
|
;; export function to use from JavaScript:
|
|
(set! (.-make_request js/window) make-request)
|
|
|
|
(def code-tags (.querySelectorAll js/document "code[data-type='scittle']"))
|
|
|
|
(require '[goog.object :as gobject])
|
|
(doseq [code code-tags]
|
|
(let [src (.getAttribute code "data-src")
|
|
req (js/XMLHttpRequest.)]
|
|
(.open req "GET" src true)
|
|
(set! (.-onload req)
|
|
(fn []
|
|
(let [response (gobject/get req "response")]
|
|
(set! (.-innerText code) response)
|
|
(.highlightElement js/hljs code))))
|
|
(.send req)))
|
|
|
|
</script>
|
|
|
|
<script src="cljs/script.cljs" type="application/x-scittle"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.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>
|
|
<div style="float: right;">
|
|
<a href="https://GitHub.com/borkdude/scittle"><img src="https://img.shields.io/github/stars/borkdude/scittle.svg?style=social&label=Star"></a></div>
|
|
|
|
<h1>Scittle</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/scittle">Github</a>.</p>
|
|
<p>
|
|
You can get a copy
|
|
of <tt>scittle.js</tt> <a href="https://borkdude.github.io/scittle/js/scittle.js">here</a>. If
|
|
you want a pinned version of <tt>scittle.js</tt>, your best bet is to
|
|
download your own copy and host it yourself.
|
|
</p>
|
|
|
|
<a name="usage"></a>
|
|
<h2><a href="#usage">Usage</a></h2>
|
|
|
|
Include <tt>scittle.js</tt> and write a <tt>script</tt> tag
|
|
where <tt>type</tt> is set
|
|
to <tt>application/x-scittle</tt>.
|
|
|
|
<pre><code data-type="scittle" data-src="html/export.html" class="html"></code></pre>
|
|
<button onclick="my_alert()">
|
|
Click me!
|
|
</button>
|
|
|
|
<a name="src"></a>
|
|
<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 id="scittle-tag-example" class="html">
|
|
<script src="cljs/script.cljs" type="application/x-scittle"></script>
|
|
</code></pre>
|
|
|
|
<script type="text/javascript">hljs.highlightElement(document.getElementById("scittle-tag-example"));</script>
|
|
|
|
<a name="reagent"></a>
|
|
<h2><a href="#reagent">Reagent plugin</a></h2>
|
|
|
|
To enable <a href="https://github.com/reagent-project/reagent">reagent</a>,
|
|
in addition to <tt>scittle.js</tt>, you need to include React
|
|
and <tt>scittle.reagent.js</tt>:
|
|
|
|
<pre><code data-type="scittle" data-src="html/reagent.html" class="html"></code></pre>
|
|
|
|
<div id="app"></div>
|
|
|
|
<a name="cljs-ajax"></a>
|
|
<h2><a href="#cljs-ajax">Cljs-ajax plugin</a></h2>
|
|
|
|
To enable <a href="https://github.com/JulianBirch/cljs-ajax">cljs-ajax</a>,
|
|
in addition to <tt>scittle.js</tt>, you need to include <tt>scittle.cljs-ajax.js</tt>:
|
|
|
|
<pre><code data-type="scittle" data-src="html/cljs-ajax.html" class="html"></code></pre>
|
|
|
|
<button onclick="make_request()">
|
|
Click me!
|
|
</button>
|
|
|
|
<a name="examples"></a>
|
|
<h2><a href="#examples">Examples</a></h2>
|
|
<ul>
|
|
<li><a href="tictactoe.html">Tic-tac-toe</a></li>
|
|
<li><a href="bookmarklet.html">Bookmarklet</a></li>
|
|
</ul>
|
|
|
|
</body>
|
|
</html>
|