From 3991b4868d6520a6bcb4efdbd91df8703616d413 Mon Sep 17 00:00:00 2001 From: Michiel Borkent Date: Sat, 29 May 2021 20:48:16 +0200 Subject: [PATCH] Load html examples from resources --- resources/public/html/export.html | 16 ++++++++ resources/public/html/reagent.html | 25 ++++++++++++ resources/public/index.html | 63 +++++++++--------------------- src/scittle/core.cljs | 10 +++-- 4 files changed, 66 insertions(+), 48 deletions(-) create mode 100644 resources/public/html/export.html create mode 100644 resources/public/html/reagent.html diff --git a/resources/public/html/export.html b/resources/public/html/export.html new file mode 100644 index 0000000..9a98514 --- /dev/null +++ b/resources/public/html/export.html @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/resources/public/html/reagent.html b/resources/public/html/reagent.html new file mode 100644 index 0000000..93e9aa8 --- /dev/null +++ b/resources/public/html/reagent.html @@ -0,0 +1,25 @@ + + + + + + + + + +
+ + diff --git a/resources/public/index.html b/resources/public/index.html index c7651eb..8cf95df 100644 --- a/resources/public/index.html +++ b/resources/public/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
    • 
     
 
-    
-
   
 
diff --git a/src/scittle/core.cljs b/src/scittle/core.cljs
index 66d2dec..bc51c59 100644
--- a/src/scittle/core.cljs
+++ b/src/scittle/core.cljs
@@ -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