Skip to content

Instantly share code, notes, and snippets.

Forked from dustingetz/
Created February 25, 2023 22:21
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?

TodoMVC Composed (it's just a for loop!!!) — Electric Clojure

  • An early demonstration "Compiler Managed Network" and the extreme dynamic composition it makes possible
  • TodoMVC Composed merely calls the previous TodoMVC function inside a for loop.
(ns user.demo-todomvc-composed
#?(:cljs (:require-macros user.demo-todomvc-composed))
#?(:clj [datascript.core :as d])
[hyperfiddle.electric :as e]
[hyperfiddle.electric-dom2 :as dom]
[hyperfiddle.electric-ui4 :as ui]
[user.demo-5-todomvc :as todomvc]))
(def !n #?(:clj (atom 1)))
(e/defn App []
(let [state (e/watch todomvc/!state)
n (e/server (e/watch !n))]
(binding [todomvc/db (e/watch todomvc/!conn)
todomvc/transact! (partial d/transact! todomvc/!conn)]
(dom/link (dom/props {:rel :stylesheet, :href "/todomvc.css"}))
(ui/range n (e/fn [v] (e/server (reset! !n v)))
(dom/props {:min 1 :max 25 :step 1}))
(dom/div (dom/props {:class "todomvc" :style {:position "relative"}})
(dom/h1 (dom/text "TodoMVC"))
(e/for [i (range n)] ; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
(let [!focused (atom false)
focused (e/watch !focused)]
(dom/div (dom/props {:style {:position "absolute"
:width "50vw"
:left (str (* i 40) "px")
:top (str (-> i (* 40) (+ 60)) "px")
:z-index (+ i (if focused 1000 0))}})
(dom/on "mouseenter" (e/fn [_] (reset! !focused true)))
(dom/on "mouseleave" (e/fn [_] (reset! !focused false)))
(todomvc/TodoApp. state))))))))))) ; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment