Load html examples from resources
This commit is contained in:
Michiel Borkent
parent
fb828d9958
commit
3991b4868d
16
resources/public/html/export.html
Normal file
16
resources/public/html/export.html
Normal 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
25
resources/public/html/reagent.html
Normal 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>
|
||||
|
|
@ -24,6 +24,20 @@
|
|||
"Click me!"]]])
|
||||
|
||||
(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 src="cljs/script.cljs" type="application/x-scittle"></script>
|
||||
|
|
@ -57,26 +71,7 @@
|
|||
where <tt>type</tt> is set
|
||||
to <tt>application/x-scittle</tt>.
|
||||
|
||||
<pre>
|
||||
<code class="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></code></pre>
|
||||
|
||||
<pre><code data-type="scittle" data-src="html/export.html" class="html"></code></pre>
|
||||
<button onclick="my_alert()">
|
||||
Click me!
|
||||
</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:
|
||||
|
||||
<pre><code class="html">
|
||||
<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>
|
||||
|
||||
|
|
@ -97,27 +94,7 @@
|
|||
in addition to <tt>scittle.js</tt>, you need to include React
|
||||
and <tt>scittle.reagent.js</tt>:
|
||||
|
||||
<pre><code class="html">
|
||||
<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>
|
||||
</code></pre>
|
||||
<pre><code data-type="scittle" data-src="html/reagent.html" class="html"></code></pre>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
|
|
@ -128,7 +105,5 @@
|
|||
<li><a href="bookmarklet.html">Bookmarklet</a></li>
|
||||
</ul>
|
||||
|
||||
<script type="text/javascript">hljs.highlightAll();</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -20,10 +20,12 @@
|
|||
|
||||
(def namespaces
|
||||
{'clojure.core
|
||||
{'println (sci/copy-var println cljns)
|
||||
'prn (sci/copy-var prn cljns)
|
||||
'system-time (sci/copy-var system-time cljns)
|
||||
'time (sci/copy-var time cljns)}})
|
||||
{'println println
|
||||
'prn prn
|
||||
'system-time system-time
|
||||
'time (sci/copy-var time cljns)}
|
||||
'goog.object {'set gobject/set
|
||||
'get gobject/get}})
|
||||
|
||||
(def ctx (atom (sci/init {:namespaces namespaces
|
||||
:classes {'js js/window
|
||||
|
|
|
|||
Loading…
Reference in a new issue