cljs-ajax example

babashka · Jun 11, 2021 · f108702 · f108702
1 parent f5b0148
commit f108702
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/resources/public/html/cljs-ajax.html b/resources/public/html/cljs-ajax.html
@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <script src="https://borkdude.github.io/scittle/js/scittle.js" type="application/javascript"></script>
+    <script src="https://borkdude.github.io/scittle/js/scittle.cljs-ajax.js" type="application/javascript"></script>
+    <script type="application/x-scittle">
+      (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)
+    </script>
+  </head>
+  <body>
+    <button onclick="make_request()">
+      Click me!
+    </button>
+  </body>
+</html>
diff --git a/resources/public/index.html b/resources/public/index.html
@@ -6,6 +6,7 @@
     <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!"))
@@ -25,6 +26,17 @@
 
       (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])
@@ -38,6 +50,7 @@
                 (set! (.-innerText code) response)
                 (.highlightElement js/hljs code))))
           (.send req)))
+
     </script>
 
     <script src="cljs/script.cljs" type="application/x-scittle"></script>
@@ -98,6 +111,18 @@ <h2><a href="#reagent">Reagent plugin</a></h2>
 
     <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>

diff --git a/script/release.clj b/script/release.clj
@@ -21,8 +21,9 @@
 (def html-source-dir (fs/file "resources" "public" "html"))
 (def html-target-dir (fs/file "gh-pages" "html"))
 (fs/create-dirs html-target-dir)
-(doseq [html ["export.html" "reagent.html"]]
-  (fs/copy (fs/file html-source-dir html) html-target-dir))
+(doseq [html ["export.html" "reagent.html" "cljs-ajax.html"]]
+  (fs/copy (fs/file html-source-dir html) html-target-dir
+           {:replace-existing true}))
 
 (def style-source-dir (fs/file "resources" "public" "css"))
 (def style-target-dir (fs/file "gh-pages" "css"))