refactor

deps.edn

@@ -9,7 +9,11 @@
   ring-logger/ring-logger {:mvn/version "1.1.1"}
   ring/ring-core          {:mvn/version "1.14.2"}
   ring/ring-json          {:mvn/version "0.5.1"}
-  ring/ring-jetty-adapter {:mvn/version "1.14.2"}}
+  ring/ring-jetty-adapter {:mvn/version "1.14.2"}
+  dev.data-star.clojure/sdk {:mvn/version "1.0.0-RC3"}
+  dev.data-star.clojure/ring {:mvn/version "1.0.0-RC3"}
+  datastar/expressions {:git/url "https://github.com/outskirtslabs/datastar-expressions/"
+                        :git/sha "53efc7093be1ba33b331b4a27884be8925d8bdce"}}
  :paths [:clj-paths :resource-paths]
  :aliases
  {:repl {:extra-paths ["src/dev"]

src/ajet/todo/core.clj

@@ -1,139 +1,43 @@
 (ns ajet.todo.core
   (:require
    [ajet.todo.db :as db]
-   [clojure.data.json :as json]
-   [clojure.pprint :as pprint]
+   [ajet.todo.handler :as handler]
+   [ajet.todo.util :refer [fn-sse]]
+   [ajet.todo.view :as view]
    [compojure.core :refer [context defroutes DELETE GET let-routes PATCH POST]]
    [compojure.route :as route]
    [hiccup2.core :as h]
-   [ring.middleware.content-type :refer [wrap-content-type]]
-   [ring.middleware.json :as rmjson]
-   [ring.middleware.not-modified :refer [wrap-not-modified]]
-   [ring.middleware.params :refer [wrap-params]]
-   [ring.middleware.resource :refer [wrap-resource]]
-   [ring.util.response :refer [response]]))
+   [ring.middleware.json :refer [wrap-json-body]]))
 
-(comment
-  (do
-    (defonce printer (bound-fn* pprint/pprint))
-    (add-tap printer))
-
-  (remove-tap printer))
-
-(defn get-todos [_]
-  (let [res (db/get-all-todos)]
-    (response res)))
-
-(defn get-todo [id _]
-  (let [res (db/get-todo id)]
-    (response res)))
-
-(defn add-todo [req]
-  (db/add-todo! (-> req :body :title))
-  {:status 201})
-
-(defn update-todo [id {{:keys [done]} :body}]
-  (db/set-todo-done! id done))
-
-(defn delete-todo [id]
-  (db/delete-todo! id)
-  {:status 204})
-
-(defn page-template [view]
-  (-> [:html
-       [:head
-        [:script {:src "https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"}]]
-       [:body view]]
-      h/html
-      str))
-
-(def hx-app {:hx-swap "outerHTML"
-             :hx-target "#app"})
-
-(defn render-app [{:keys [show-complete]
-                   :or {show-complete true}
-                   :as opts}]
-  (-> (let [todos (db/get-all-todos)
-            complete-toggle (if show-complete "hide" "show")]
-        [:div {:id "app"}
-         [:ul
-          (for [{id    :id
-                 done  :todo/done?
-                 title :todo/title} todos
-                :when (or show-complete (not done))]
-            [:li
-             [:span {:style (str "text-decoration: " (if done "line-through" "none"))}
-              title]
-             [:input (merge hx-app
-                            {:type "checkbox"
-                             :checked done
-                             :hx-patch (format "/htmx/todo/%s/%s?opts=%s"
-                                               id
-                                               (if done "unset" "set")
-                                               (json/write-str opts))})]])]
-         [:div
-          [:p "settings"]
-          [:button (merge hx-app
-                          {:hx-get (format "/htmx/todo/?opts=%s"
-                                           (-> opts
-                                               (update :show-complete not)
-                                               json/write-str))})
-           complete-toggle " done"]]])
-      h/html))
-
-;; im gonna regert this
-(defn DRY [req]
-  (-> req
-      :params
-      (get "opts" "{}")
-      json/read-json
-      render-app
-      str))
-
-(defroutes api-routes
+(defroutes approutes
   (GET "/" []
-    (wrap-params
-     #(-> % :params
-          (get "opts" "{}")
-          json/read-json
-          render-app
-          page-template)))
-  (-> (context "/api/v1" []
-        (context "/todo" []
-          (GET "/" [] get-todos)
-          (POST "/" [] add-todo)
+    (fn [_ respond _]
+      (-> (view/app-fragment)
+          view/render-page
+          respond)))
+
+  (-> (context "/sse/todo" []
+        (GET "/" []
+          (fn-sse [_req sse]
+                  (handler/refresh-todos! sse)))
+        (POST "/create-todo" [] handler/create-todo-handler)
+
         (context ["/:id", :id #"[0-9]+"] [id]
           (let-routes [id (read-string id)]
-              (GET "/" [] (partial get-todo id))
-              (PATCH "/" [] (partial update-todo id))
-              (DELETE "/" [] (delete-todo id)))))
-
-        (GET "/example/math/:x/:y" [x y]
-          (->> (+ (parse-long x)
-                  (parse-long y))
-               (hash-map :result)
-               response)))
-      (rmjson/wrap-json-body {:keywords? true})
-      (rmjson/wrap-json-response))
-
-  (wrap-params
-   (context "/htmx/todo" []
-     (GET "/" [] DRY)
-     (POST "/" [] add-todo)
-     (context ["/:id", :id #"[0-9]+"] [id]
-       (let-routes [id (read-string id)]
-         (PATCH "/set" [] (do (db/set-todo-done! id true)
-                              DRY))
-         (PATCH "/unset" [] (do (db/set-todo-done! id false)
-                                DRY))
-         (DELETE "/" [] (do (delete-todo id)
-                            DRY))))))
-
+            (PATCH "/set" []
+              (fn-sse [_req sse]
+                      (db/set-todo-done! id true)
+                      (handler/refresh-todos! sse)))
+            (PATCH "/unset" []
+              (fn-sse [_req sse]
+                      (db/set-todo-done! id false)
+                      (handler/refresh-todos! sse)))
+            (DELETE "/" []
+              (fn-sse [_req sse]
+                      (db/delete-todo! id)
+                      (handler/refresh-todos! sse))))))
+      (wrap-json-body {:keywords? true}))
   (route/not-found (str (h/html [:h2 "Not Found"]))))
 
-(def app
-  (->  #'api-routes
-       (wrap-resource "public")
-       wrap-content-type
-       wrap-not-modified)) ;; files from resources/public are served
+(def app #'approutes)
 

src/ajet/todo/db.clj

@@ -58,16 +58,8 @@
          (sort-by first)
          (map normalize-todo))))
 
-(defn get-todo [id]
-  (let [db (d/db conn)]
-    (some->> (d/q '[:find ?e ?title ?done
-                    :in $ ?e
-                    :where [?e :todo/title ?title]
-                    [?e :todo/done? ?done]]
-                  db
-                  id)
-             first
-             normalize-todo)))
+(defn get-todo [db id]
+  (d/pull db '[*] id))
 
 (defn get-todo-by-title [title]
   (let [db (d/db conn)]

src/ajet/todo/handler.clj

@@ -0,0 +1,20 @@
+(ns ajet.todo.handler
+  (:require
+   [ajet.todo.db :as db]
+   [ajet.todo.util :refer [defn-sse]]
+   [ajet.todo.view :as view]
+   [starfederation.datastar.clojure.api :as d*]))
+
+(defn refresh-todos! [sse]
+  (d*/patch-elements! sse
+                      (str (view/todos-fragment))
+                      #:d*.elements{:selector "#todos"
+                                    :patch-mode "replace"}))
+
+(defn-sse create-todo-handler [req sse]
+  (let [title (-> req :body :title)]
+    (when title
+      (db/add-todo! title))
+    (d*/with-open-sse sse
+      (refresh-todos! sse)
+      (d*/patch-signals! sse #json{:title ""}))))

src/ajet/todo/server.clj

@@ -3,10 +3,13 @@
    [ajet.todo.core :as core]
    [ring.adapter.jetty :refer [run-jetty]]))
 
-(def port 1738)
+(def port 80)
 
 (defn make-server [opts]
-  (run-jetty #'core/app (merge {:join? false, :port port} opts)))
+  (run-jetty #'core/app (merge {:join? false,
+                                :port port,
+                                :async? true}
+                               opts)))
 
 (defn -main [& _args]
   (make-server {}))

src/ajet/todo/util.clj

@@ -0,0 +1,27 @@
+(ns ajet.todo.util
+  (:require
+   [starfederation.datastar.clojure.adapter.common :refer [on-open]]
+   [starfederation.datastar.clojure.adapter.ring :refer [->sse-response]]
+   [starfederation.datastar.clojure.api :as d*]))
+
+;; utils
+(defmacro fn-sse [[req sse :as _bindings]
+                  & body]
+  `(fn [~req respond# _#]
+     (respond#
+      (->sse-response
+       ~req
+       {on-open (fn [~sse]
+                  (d*/with-open-sse ~sse
+                    ~@body))}))))
+
+(defmacro defn-sse [var-name
+                    [req sse :as _bindings]
+                    & body]
+  `(defn ~var-name [~req respond# _#]
+     (respond#
+      (->sse-response
+       ~req
+       {on-open (fn [~sse]
+                  (d*/with-open-sse ~sse
+                    ~@body))}))))

src/ajet/todo/view.clj

@@ -0,0 +1,76 @@
+(ns ajet.todo.view
+  (:require
+   [ajet.todo.db :as db]
+   [clojure.data.json]
+   [hiccup2.core :as h]
+   [hiccup.util :as hu]
+   [starfederation.datastar.clojure.expressions :refer [->expr]]))
+
+(defn render-page [content]
+  (str
+   (h/html
+    (h/raw "<!DOCTYPE html>")
+    [:html
+     [:head
+      [:script {:src "https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.5/bundles/datastar.js"
+                :type "module"
+                :defer true}]
+      [:script {:src "https://cdn.jsdelivr.net/npm/eruda"
+                :id "erudaLoaderScript"
+                :type "module"
+                :defer true}]
+      (hu/raw-string "<script>document.getElementById('erudaLoaderScript').addEventListener('load', function () { eruda.init () });</script/>")
+      [:link {:rel "icon"
+              :type "imaage/x-icon"
+              :href "https://data-star.dev/cdn-cgi/image/format=auto,width=24/static/images/rocket-48x48-4c739bfaffe86a6ffcc3a6d77e3c5547730f03d74c11aa460209596d1811f7a3.png"}]]
+     [:body content]])))
+
+(defn todos-fragment []
+  (let [todos (db/get-all-todos)] ;; todo: make functional. sloppy sloppy
+    (h/html
+     [:div {:id "todos"}
+      [:div {:data-computed-show-toggle-display "($showComplete ? 'hide' : 'show') + ' done'"}]
+      [:ul
+       (for [{id    :id
+              done  :todo/done?
+              title :todo/title} todos]
+         [:li {:data-show (->expr (or (not ~done)
+                                      $showComplete))}
+          [:span {:style (str "text-decoration: " (if done "line-through" "none"))}
+           title]
+          [:input {:type "checkbox"
+                   :checked done
+                   :data-on-click (str "@patch('/sse/todo/" id "/" (when done "un") "set')")
+                   :style "margin-right: 0.25rem;"}]
+          (when done
+            [:button {:data-on-click (->expr (@delete ~(str "/sse/todo/" id)))}
+             "X"])])]
+      [:div
+       [:p "settings"]
+       [:button {:data-on-click "$showComplete = !$showComplete"
+                 :data-text "$showToggleDisplay"
+                 :style "margin-right: 0.25rem;"}]
+       [:button {:data-on-click "$debugMode = !$debugMode"}
+        "toggle debug"]]])))
+
+(defn create-todo-fragment []
+  (h/html
+   [:div {:id "create-box"
+          :style "margin-top: 2rem;"}
+    [:label "Make a todo: "]
+    [:input {:name "title"
+             :data-bind "title"
+             :style "margin-right: 0.25rem;"}]
+    [:button {:data-on-click (->expr (@post "/sse/todo/create-todo"))}
+     "submit"]]))
+
+(defn app-fragment []
+  (h/html
+   [:div {:data-signals #json{:showComplete true
+                              :debugMode false
+                              :title ""}}]
+   [:pre {:data-json-signals "true"
+          :data-show "$debugMode"}]
+   [:div {:id "app"}
+    (todos-fragment)
+    (create-todo-fragment)]))

src/data_readers.clj

@@ -0,0 +1 @@
+{json clojure.data.json/write-str}

src/dev/user.clj

@@ -1,11 +1,21 @@
 (ns user
-  (:require [ajet.todo.server :as server]))
+  (:require
+   [ajet.todo.server :as server]
+   [clojure.pprint :as pprint]))
 
 (defonce server (server/make-server {}))
 
 (comment
+  ;; server controls
   server
   (. server stop)
-  (. server start))
+  (. server start)
+
+  ;; tap debugging
+  (do
+    (defonce printer (bound-fn* pprint/pprint))
+    (add-tap printer))
+
+  (remove-tap printer))