deps.edn

{:paths ["src" "resources"]
 :deps {com.hyperfiddle/electric {:mvn/version "v2-alpha-284-g0bc5f4bc"}
        com.hyperfiddle/rcf {:mvn/version "20220926-202227"}
        info.sunng/ring-jetty9-adapter
        {:mvn/version "0.14.3" ; (Jetty 9) is Java 8 compatible;
         ;:mvn/version "0.17.7" ; (Jetty 10) is NOT Java 8 compatible
         :exclusions [org.slf4j/slf4j-api info.sunng/ring-jetty9-adapter-http3]} ; no need
        org.clojure/clojure {:mvn/version "1.11.1"}
        org.clojure/clojurescript {:mvn/version "1.11.60"}
        org.clojure/tools.logging {:mvn/version "1.2.4"}
        ch.qos.logback/logback-classic {:mvn/version "1.2.11"}
        ring-basic-authentication/ring-basic-authentication {:mvn/version "1.1.1"}}
 :aliases {:dev
           {:extra-deps
            {binaryage/devtools {:mvn/version "1.0.6"}
             thheller/shadow-cljs {:mvn/version "2.20.1"}}
            :jvm-opts
            ["-Xss2m" ; https://github.com/hyperfiddle/photon/issues/11
             "-XX:-OmitStackTraceInFastThrow" ;; RCF
             ]
            :exec-fn user/main
            :exec-args {}}
           :build
           {:extra-paths ["src-build"]
            :ns-default build
            :extra-deps {io.github.clojure/tools.build {:git/tag "v0.8.2" :git/sha "ba1a2bf"}
                         io.github.seancorfield/build-clj {:git/tag "v0.8.0" :git/sha "9bd8b8a"}
                         thheller/shadow-cljs {:mvn/version "2.20.1"}}
            :jvm-opts ["-Xss2m"]}}}

todo_list.clj

(ns app.todo-list
  (:require #?(:clj [datascript.core :as d])
            [hyperfiddle.electric :as e]
            [hyperfiddle.electric-dom2 :as dom]
            [hyperfiddle.electric-ui4 :as ui]))

#?(:clj
   (defonce conn ; state survives reload
     (doto (d/create-conn {:order/email {}})
       (d/transact! ; test data
        [{:order/email "alice@example.com" :order/gender :order/female}
         {:order/email "bob@example.com" :order/gender :order/male}
         {:order/email "charlie@example.com" :order/gender :order/male}]))))

#?(:clj
   (defn teeshirt-orders [db ?email]
     (sort
      (d/q '[:find [?e ...]
             :in $ ?needle :where
             [?e :order/email ?email]
             [(clojure.string/includes? ?email ?needle)]]
           db (or ?email "")))))

(e/defn Teeshirt-orders-view [db]
  (e/client
   (dom/div
    (let [!search (atom ""), search (e/watch !search)]
      (ui/input search (e/fn [v] (reset! !search v))
                (dom/props {:placeholder "Filter..."}))
      (dom/table (dom/props {:class "hyperfiddle"})
                 (e/server
                  (e/for [id (teeshirt-orders db search)]
                    (let [!e (d/entity db id)]
                      (e/client
                       (dom/tr
                        (dom/td (dom/text id))
                        (dom/td (dom/text (e/server (:order/email !e))))
                        (dom/td (dom/text (e/server (:order/gender !e))))))))))))))

(e/defn Webview []
  (let [db (e/watch conn)] ; reactive "database value"
    (Teeshirt-orders-view. db)))

(comment
  #?(:clj (d/transact conn [{:db/id 2 :order/email "bob2@example.com"}]))
  #?(:clj (d/transact conn [{:order/email "dan@example.com"}]))
  #?(:clj (d/transact conn [{:order/email "erin@example.com"}]))
  #?(:clj (d/transact conn [{:order/email "frank@example.com"}])))

user.cljs

(ns ^:dev/always user ; Electric currently needs to rebuild everything when any file changes. Will fix
  (:require
    app.todo-list
    hyperfiddle.electric
    hyperfiddle.electric-dom2))

(def electric-main
  (hyperfiddle.electric/boot ; Electric macroexpansion - Clojure to signals compiler
    (binding [hyperfiddle.electric-dom2/node js/document.body]
      (app.todo-list/Webview.))))

(defonce reactor nil)

(defn ^:dev/after-load ^:export start! []
  (assert (nil? reactor) "reactor already running")
  (set! reactor (electric-main
                  #(js/console.log "Reactor success:" %)
                  #(js/console.error "Reactor failure:" %))))

(defn ^:dev/before-load stop! []
  (when reactor (reactor)) ; teardown
  (set! reactor nil))