Reagent

2021-05-23 16:31:05 +02:00 · 2021-05-23 16:31:05 +02:00 · d8fef42c64
parent 2548e78966
commit d8fef42c64
8 changed files with 238 additions and 39 deletions
--- a/deps.edn
+++ b/deps.edn
@ -3,13 +3,13 @@
 :deps
 {org.clojure/clojure {:mvn/version "1.10.3"}
  borkdude/sci        {:git/url "https://github.com/borkdude/sci"
-                       :sha "4de7c78024bfdb5c52e273be372144d46228939a"}}
+                       :sha "4de7c78024bfdb5c52e273be372144d46228939a"}
+  reagent/reagent {:mvn/version "1.0.0"}
+  cljsjs/react {:mvn/version "17.0.2-0"}
+  cljsjs/react-dom {:mvn/version "17.0.2-0"}
+  cljsjs/react-dom-server {:mvn/version "17.0.2-0"}}

 :aliases
 {:dev
  {:extra-paths ["dev"]
-   :extra-deps  {thheller/shadow-cljs {:mvn/version "2.12.5"}}}
-
-  :test
-  {:extra-paths ["test"]
-   :extra-deps  {lambdaisland/kaocha {:mvn/version "1.0.829"}}}}}
+   :extra-deps  {thheller/shadow-cljs {:mvn/version "2.12.5"}}}}}
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,119 @@
+{
+  "name": "sci-script-tag",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "react": "17.0.1",
+        "react-dom": "17.0.1"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
+      "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
+      "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.1"
+      },
+      "peerDependencies": {
+        "react": "17.0.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    }
+  },
+  "dependencies": {
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "react": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
+      "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-dom": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
+      "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.1"
+      }
+    },
+    "scheduler": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  }
+}
--- a/resources/public/index.html
+++ b/resources/public/index.html
@ -1,13 +1,28 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <script src="js/main.js" type="application/javascript"></script>
+    <script src="js/sci-script-tag.js" type="application/javascript"></script>
+    <script src="js/sci-script-tag-plugin-reagent.js" type="application/javascript"></script>

    <script type="application/x-sci">
      (defn my-alert []
       (js/alert "alert!"))
+
+      (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>
    <h1>SCI script tag</h1>
@ -20,16 +35,16 @@
      bound to happen. Feedback is welcome on <a href="https://github.com/borkdude/sci-script-tag">Github</a>.</p>
    <p>
      You can get a copy
-    of <tt>sci_script_tag.js</tt> <a href="https://borkdude.github.io/sci-script-tag/js/sci_script_tag.js">here</a>. If
-    you want a pinned version of <tt>sci_script_tag.js</tt>, your best bet is to
+    of <tt>sci-script-tag.js</tt> <a href="https://borkdude.github.io/sci-script-tag/js/sci-script-tag.js">here</a>. If
+    you want a pinned version of <tt>sci-script-tag.js</tt>, your best bet is to
    download your own copy and host it yourself.
    </p>

-    <h2>Example usage</h2>
+    <h2><a href="#usage">Usage</a></h2>

    <pre>
      &lt;head&gt;
-        &lt;script src=&quot;https://borkdude.github.io/sci-script-tag/js/sci_script_tag.js&quot; type=&quot;application/javascript&quot;&gt;&lt;/script&gt;
+        &lt;script src=&quot;https://borkdude.github.io/sci-script-tag/js/sci-script-tag.js&quot; type=&quot;application/javascript&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;application/x-sci&quot;&gt;
          (defn my-alert []
           (js/alert &quot;alert!&quot;))
@ -46,5 +61,30 @@
    <button onclick="user.myAlert()">
      Click me
    </button>
+
+    <h2><a href="#reagent">Reagent plugin<a/></h2>
+
+    To enable <a href="https://github.com/reagent-project/reagent">reagent</a>,
+    in addition to <tt>sci-script-tag.js</tt>, you need to include <tt>sci-script-tag-plugin-reagent.js</tt>.
+
+    <pre>
+        &lt;script src=&quot;https://borkdude.github.io/sci-script-tag/js/sci-script-tag-plugin-reagent.js&quot; type=&quot;application/javascript&quot;&gt;&lt;/script&gt;
+        &lt;script type=&quot;application/x-sci&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;
+    </pre>
+
+    <div id="app"></div>
  </body>
 </html>
--- a/script/release.clj
+++ b/script/release.clj
@ -1,18 +1,23 @@
 #!/usr/bin/env bb

 (require '[babashka.fs :as fs]
-         '[babashka.tasks :refer [shell]]
-         '[clojure.string :as str])
+         '[babashka.tasks :refer [shell]])

 (fs/copy "resources/public/index.html" "gh-pages"
         {:replace-existing true})
 (shell "clojure -M:dev -m shadow.cljs.devtools.cli release main")
 (def index-file (fs/file "gh-pages" "index.html"))
-(spit index-file (str/replace (slurp index-file) "main.js" "sci_script_tag.js"))
-(fs/create-dirs (fs/file "gh-pages" "js"))
-(fs/copy (fs/file "resources" "public" "js" "main.js")
-         (fs/file "gh-pages" "js" "sci_script_tag.js")
-         {:replace-existing true})
+
+(def js-source-dir (fs/file "resources" "public" "js"))
+(def js-target-dir (fs/file "gh-pages" "js"))
+(fs/create-dirs js-target-dir)
+
+(run! (fn [f]
+        (println "Copying" (str f))
+        (fs/copy f
+                 js-target-dir
+                 {:replace-existing true}))
+      (fs/glob js-source-dir "sci-script-tag*.js"))

 (def with-gh-pages (partial shell {:dir "gh-pages"}))
 (with-gh-pages "git add .")
--- a/shadow-cljs.edn
+++ b/shadow-cljs.edn
@ -7,6 +7,9 @@
 :builds
 {:main
  {:target     :browser
-   :modules    {:main {:entries [sci.script-tag]}}
+   :modules
+   {:sci-script-tag {:entries [sci.script-tag]}
+    :sci-script-tag-plugin-reagent {:entries [sci.script-tag.plugin-reagent]
+                                    :depends-on #{:sci-script-tag}}}
   :output-dir "resources/public/js"
   :devtools   {:repl-pprint true}}}}
--- a/src/sci/script_tag.cljs
+++ b/src/sci/script_tag.cljs
@ -9,35 +9,41 @@
               (fn [s]
                 (str/upper-case (.charAt s 1)))))

-(defn defn-macro [_ _ fn-name & args]
+(defn- defn-macro [_ _ fn-name & args]
  `(let [ns# (ns-name *ns*)]
     (clojure.core/defn ~fn-name ~@args)
     (sci.script-tag/-export ~fn-name (str ns# "." '~fn-name))))

-(def ctx (sci/init {:namespaces {'sci.script-tag
-                                 {'defn (with-meta defn-macro
-                                          {:sci/macro true})
-                                  '-export (fn [f k]
-                                             (let [parts (str/split k #"\.")]
-                                               (loop [parts parts
-                                                      prev js/window]
-                                                 (let [fpart (first parts)
-                                                       fpart (kebab->camel fpart)]
-                                                   (if (= 1 (count parts))
-                                                     (gobject/set prev fpart f)
-                                                     (do (gobject/set prev fpart #js {})
-                                                         (recur (rest parts)
-                                                                (gobject/get prev fpart))))))
-                                               (gobject/set js/window k f)))}
-                                 'clojure.core {'println println}}
-                    :classes {'js js/window
-                              :allow :all}}))
+(def ctx (atom (sci/init {:namespaces {'sci.script-tag
+                                       {'defn (with-meta defn-macro
+                                                {:sci/macro true})
+                                        '-export (fn [f k]
+                                                   (let [parts (str/split k #"\.")]
+                                                     (loop [parts parts
+                                                            prev js/window]
+                                                       (let [fpart (first parts)
+                                                             fpart (kebab->camel fpart)]
+                                                         (if (= 1 (count parts))
+                                                           (gobject/set prev fpart f)
+                                                           (if-let [obj (gobject/get prev fpart)]
+                                                             (recur (rest parts) obj)
+                                                             (let [obj #js {}]
+                                                               (gobject/set prev fpart obj)
+                                                               (recur (rest parts)
+                                                                      obj))))))
+                                                     (gobject/set js/window k f)))}
+                                       'clojure.core {'println println}}
+                          :classes {'js js/window
+                                    :allow :all}})))

 (defn eval-string [s]
-  (sci/eval-string* ctx
+  (sci/eval-string* @ctx
                    (str "(require '[sci.script-tag :refer :all])"
                         s)))

+(defn merge-ctx [opts]
+  (swap! ctx sci/merge-opts opts))
+
 (js/document.addEventListener
 "DOMContentLoaded"
 (fn []
--- a/src/sci/script_tag/plugin_reagent.cljs
+++ b/src/sci/script_tag/plugin_reagent.cljs
@ -0,0 +1,20 @@
+(ns sci.script-tag.plugin-reagent
+  (:require [reagent.core :as r]
+            [reagent.dom :as rdom]
+            [sci.core :as sci]
+            [sci.script-tag :as st]))
+
+(def rns (sci/create-ns 'reagent.core nil))
+
+(def reagent-namespace
+  {'atom (sci/copy-var r/atom rns)})
+
+(def rdns (sci/create-ns 'reagent.dom nil))
+
+(def reagent-dom-namespace
+  {'render (sci/copy-var rdom/render rdns)})
+
+(println :merging)
+(st/merge-ctx {:namespaces {'reagent.core reagent-namespace
+                            'reagent.dom reagent-dom-namespace}})
+(println :done-merging)