simon/scittle
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Load html examples from resources

Browse source
This commit is contained in:
Michiel Borkent 2021-05-29 20:48:16 +02:00
parent fb828d9958
commit 3991b4868d
4 changed files with 66 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/public/html/export.html Normal file
View file

@ -0,0 +1,16 @@
<html>
<head>
<script src="https://borkdude.github.io/scittle/js/scittle.js" type="application/javascript"></script>
<script type="application/x-scittle">
(defn my-alert []
(js/alert "You clicked!"))
;; export function to use from JavaScript:
(set! (.-my_alert js/window) my-alert)
</script>
</head>
<body>
<button onclick="my_alert()">
Click me!
</button>
</body>
</html>

25
resources/public/html/reagent.html Normal file
View file

@ -0,0 +1,25 @@
<html>
<head>
<script src="https://borkdude.github.io/scittle/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="https://borkdude.github.io/scittle/js/scittle.reagent.js" type="application/javascript"></script>
<script type="application/x-scittle">
(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>
</head>
<body>
<div id="app"></div>
</body>
</html>

63
resources/public/index.html
View file

@ -24,6 +24,20 @@
"Click me!"]]]) "Click me!"]]])
(rdom/render [my-component] (.getElementById js/document "app")) (rdom/render [my-component] (.getElementById js/document "app"))
(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>
<script src="cljs/script.cljs" type="application/x-scittle"></script> <script src="cljs/script.cljs" type="application/x-scittle"></script>
@ -57,26 +71,7 @@
where <tt>type</tt> is set where <tt>type</tt> is set
to <tt>application/x-scittle</tt>. to <tt>application/x-scittle</tt>.
<pre> <pre><code data-type="scittle" data-src="html/export.html" class="html"></code></pre>
<code class="html">&lt;head&gt;
&lt;script src=&quot;https://borkdude.github.io/scittle/js/scittle.js&quot; type=&quot;application/javascript&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;application/x-scittle&quot;&gt;
(defn my-alert []
(js/alert &quot;You clicked!&quot;))
;; export function to use from JavaScript:
(set! (.-my_alert js/window) my-alert)
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button onclick=&quot;my_alert()&quot;&gt;
Click me!
&lt;/button&gt;
&lt;/body&gt;</code></pre>
<button onclick="my_alert()"> <button onclick="my_alert()">
Click me! Click me!
</button> </button>
@ -86,10 +81,12 @@
When you have a file on your server, say <tt>cljs/script.cljs</tt>, you can load it using the <tt>src</tt> attribute: 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"> <pre><code id="scittle-tag-example" class="html">
&lt;script src=&quot;cljs/script.cljs&quot; type=&quot;application/x-scittle&quot;&gt;&lt;/script&gt; &lt;script src=&quot;cljs/script.cljs&quot; type=&quot;application/x-scittle&quot;&gt;&lt;/script&gt;
</code></pre> </code></pre>
<script type="text/javascript">hljs.highlightElement(document.getElementById("scittle-tag-example"));</script>
<a name="reagent"></a> <a name="reagent"></a>
<h2><a href="#reagent">Reagent plugin</a></h2> <h2><a href="#reagent">Reagent plugin</a></h2>
@ -97,27 +94,7 @@
in addition to <tt>scittle.js</tt>, you need to include React in addition to <tt>scittle.js</tt>, you need to include React
and <tt>scittle.reagent.js</tt>: and <tt>scittle.reagent.js</tt>:
<pre><code class="html"> <pre><code data-type="scittle" data-src="html/reagent.html" class="html"></code></pre>
&lt;script src=&quot;https://borkdude.github.io/scittle/js/scittle.js&quot; type=&quot;application/javascript&quot;&gt;&lt;/script&gt;
&lt;script crossorigin src=&quot;https://unpkg.com/react@17/umd/react.production.min.js&quot;&gt;&lt;/script&gt;
&lt;script crossorigin src=&quot;https://unpkg.com/react-dom@17/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://borkdude.github.io/scittle/js/scittle.reagent.js&quot; type=&quot;application/javascript&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;application/x-scittle&quot;&gt;
(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"))
&lt;/script&gt;
</code></pre>
<div id="app"></div> <div id="app"></div>
@ -128,7 +105,5 @@
<li><a href="bookmarklet.html">Bookmarklet</a></li> <li><a href="bookmarklet.html">Bookmarklet</a></li>
</ul> </ul>
<script type="text/javascript">hljs.highlightAll();</script>
</body> </body>
</html> </html>

10
src/scittle/core.cljs
View file

@ -20,10 +20,12 @@
(def namespaces (def namespaces
{'clojure.core {'clojure.core
{'println (sci/copy-var println cljns) {'println println
'prn (sci/copy-var prn cljns) 'prn prn
'system-time (sci/copy-var system-time cljns) 'system-time system-time
'time (sci/copy-var time cljns)}}) 'time (sci/copy-var time cljns)}
'goog.object {'set gobject/set
'get gobject/get}})
(def ctx (atom (sci/init {:namespaces namespaces (def ctx (atom (sci/init {:namespaces namespaces
:classes {'js js/window :classes {'js js/window