diff --git a/html/export.html b/html/export.html new file mode 100644 index 0000000..9a98514 --- /dev/null +++ b/html/export.html @@ -0,0 +1,16 @@ + +
+ + + + + + + diff --git a/html/reagent.html b/html/reagent.html new file mode 100644 index 0000000..93e9aa8 --- /dev/null +++ b/html/reagent.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + diff --git a/index.html b/index.html index c7651eb..8cf95df 100644 --- a/index.html +++ b/index.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))) @@ -57,26 +71,7 @@ where type is set to application/x-scittle. -
- <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>
-
+
@@ -86,10 +81,12 @@
When you have a file on your server, say cljs/script.cljs, you can load it using the src attribute:
-
+
<script src="cljs/script.cljs" type="application/x-scittle"></script>
+
+
Reagent plugin
@@ -97,27 +94,7 @@
in addition to scittle.js, you need to include React
and scittle.reagent.js:
-
-<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>
-
+
@@ -128,7 +105,5 @@
Bookmarklet
-
-