172 lines
6.5 KiB
HTML
172 lines
6.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@18/umd/react.production.min.js"></script>
|
|
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
<script src="js/scittle.reagent.js" type="application/javascript"></script>
|
|
<!-- <script src="js/scittle.re-frame.js" type="application/javascript"></script> -->
|
|
<script src="js/scittle.cljs-ajax.js" type="application/javascript"></script>
|
|
<script src="js/scittle.pprint.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}))
|
|
|
|
#_(require '[re-frame.core :as rf]
|
|
'[reagent.dom :as rdom])
|
|
#_(rf/reg-event-fx ::click (fn [{:keys [db]} [_]] {:db (update db :clicks (fnil inc 0))}))
|
|
#_(rf/reg-sub ::clicks (fn [db _] (:clicks db)))
|
|
|
|
(defn my-component []
|
|
[:div
|
|
[:p "Clicks: " (:clicks @state)]
|
|
[:p [:button {:on-click #(do (swap! state update :clicks inc)
|
|
#_(rf/dispatch [::click]))}
|
|
"Click me!"]]])
|
|
|
|
#_(defn re-frame-component []
|
|
(let [clicks (rf/subscribe [::clicks])]
|
|
[:div "Clicks:" @clicks]))
|
|
|
|
(rdom/render [my-component] (.getElementById js/document "app"))
|
|
|
|
#_(rdom/render [re-frame-component] (.getElementById js/document "re-frame"))
|
|
|
|
(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/babashka/scittle"><img src="https://img.shields.io/github/stars/babashka/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/babashka/sci">Small Clojure Interpreter</a> in the
|
|
browser in such a way that you can use it with the <tt>script</tt> tag.</p>
|
|
|
|
<a name="usage"></a>
|
|
<h2><a href="#usage">Usage</a></h2>
|
|
|
|
To embed scittle in your website, it is recommended to use the links
|
|
published to
|
|
the <a href="https://github.com/babashka/scittle/releases/tag/v0.6.17">releases
|
|
page</a>.
|
|
|
|
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="re-frame"></a>
|
|
<h2><a href="#re-frame">Re-frame plugin</a></h2>
|
|
|
|
To enable <a href="https://github.com/day8/re-frame">re-frame</a>,
|
|
in addition to the files needed for reagent, you need to include <tt>scittle.re-frame.js</tt>.
|
|
Also see the <a href="codemirror.html">codemirror</a> playground.
|
|
|
|
<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="pprint"></a>
|
|
<h2><a href="#pprint">cljs.pprint plugin</a></h2> To
|
|
enable <a href="https://cljs.github.io/api/cljs.pprint/">cljs.pprint</a>, in
|
|
addition to <tt>scittle.js</tt>, you need to
|
|
include <tt>scittle.pprint.js</tt>.
|
|
|
|
<a name="repl"></a>
|
|
<h2><a href="#nrepl">REPL</a></h2>
|
|
|
|
To connect to a REPL with Scittle,
|
|
see <a href="https://github.com/babashka/scittle/blob/main/README.md#repl">README.md</a>
|
|
|
|
<a name="examples"></a>
|
|
<h2><a href="#examples">Examples</a></h2>
|
|
<ul>
|
|
<li>Scittle on <a href="https://codepen.io/Prestance/pen/PoOdZQw">CodePen</a></li>
|
|
<li><a href="tictactoe.html">Tic-tac-toe</a></li>
|
|
<li><a href="bookmarklet.html">Bookmarklet</a></li>
|
|
<li><a href="wordle.html">Wordle</a></li>
|
|
<li>
|
|
<a href="https://github.com/kloimhardt/babashka-scittle-guestbook">
|
|
Babashka + scittle implementation of the Luminus guestbook.
|
|
</a></li>
|
|
<li><a href="codemirror.html">Codemirror</a></li>
|
|
</ul>
|
|
|
|
</body>
|
|
</html>
|