Skip to content

Instantly share code, notes, and snippets.

@avocade

avocade/photon-todomvc-composed.md

Forked from dustingetz/photon-todomvc-composed.md
Created February 25, 2023 22:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save avocade/ae57bb93d46aba42ffe2d486ee3f67f7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save avocade/ae57bb93d46aba42ffe2d486ee3f67f7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @dustingetz dustingetz revised this gist Feb 16, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion photon-todomvc-composed.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # 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*](https://gist.github.com/dustingetz/2c1916766be8a61baa39f9f88feafc44#file-user-cljc-L128-L135) inside a for loop.
    * TodoMVC Composed merely calls the [previous TodoMVC **function**](https://gist.github.com/dustingetz/2c1916766be8a61baa39f9f88feafc44#file-user-cljc-L128-L135) inside a for loop.

    https://user-images.githubusercontent.com/124158/186675049-c2e55723-455b-4892-a8ab-9d904698c198.mp4
  2. @dustingetz dustingetz revised this gist Feb 16, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion photon-todomvc-composed.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # 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](https://gist.github.com/dustingetz/2c1916766be8a61baa39f9f88feafc44#file-user-cljc-L128-L135) *function* inside a for loop.
    * TodoMVC Composed merely calls the [previous TodoMVC *function*](https://gist.github.com/dustingetz/2c1916766be8a61baa39f9f88feafc44#file-user-cljc-L128-L135) inside a for loop.

    https://user-images.githubusercontent.com/124158/186675049-c2e55723-455b-4892-a8ab-9d904698c198.mp4
  3. @dustingetz dustingetz revised this gist Feb 16, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion photon-todomvc-composed.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # 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](https://gist.github.com/dustingetz/2c1916766be8a61baa39f9f88feafc44) *function* inside a for loop.
    * TodoMVC Composed merely calls the [previous TodoMVC](https://gist.github.com/dustingetz/2c1916766be8a61baa39f9f88feafc44#file-user-cljc-L128-L135) *function* inside a for loop.

    https://user-images.githubusercontent.com/124158/186675049-c2e55723-455b-4892-a8ab-9d904698c198.mp4
  4. @dustingetz dustingetz revised this gist Feb 16, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion photon-todomvc-composed.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # 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.
    * TodoMVC Composed merely calls the [previous TodoMVC](https://gist.github.com/dustingetz/2c1916766be8a61baa39f9f88feafc44) *function* inside a for loop.

    https://user-images.githubusercontent.com/124158/186675049-c2e55723-455b-4892-a8ab-9d904698c198.mp4
  5. @dustingetz dustingetz revised this gist Feb 16, 2023. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions photon-todomvc-composed.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # Photon demo – TodoMVC Composed
    # TodoMVC Composed (it's just a for loop!!!) — Electric Clojure

    * An early demonstration "Compiler Managed Network" and the extreme dynamic composition it makes possible
    * It's just a for loop!!!
    * TodoMVC Composed merely calls the previous TodoMVC *function* inside a for loop.

    https://user-images.githubusercontent.com/124158/186675049-c2e55723-455b-4892-a8ab-9d904698c198.mp4
  6. @dustingetz dustingetz revised this gist Feb 16, 2023. 1 changed file with 31 additions and 30 deletions.
    61 changes: 31 additions & 30 deletions user.cljc
    View file
    Original file line number Diff line number Diff line change
    @@ -1,34 +1,35 @@
    (ns user.demo-todomvc-composed
    (:require #?(:clj [datascript.core :as d])
    [hyperfiddle.photon :as p]
    [hyperfiddle.photon-ui :as ui]
    [hyperfiddle.photon-dom :as dom]
    [user.demo-5-todomvc :as todomvc])
    #?(:cljs (:require-macros user.demo-todomvc-composed)))
    #?(:cljs (:require-macros user.demo-todomvc-composed))
    (:require
    #?(: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)))

    (p/defn App []
    (let [state (p/watch todomvc/!state)
    n (p/server (p/watch !n))]
    (p/server
    (binding [todomvc/db (p/watch todomvc/!conn)
    todomvc/tx-delay (::todomvc/delay state)
    todomvc/transact! (partial d/transact! todomvc/!conn)]
    (p/client
    (dom/link {:rel :stylesheet, :href "todomvc.css"})
    (ui/input {::dom/type "range" ::dom/min 1 ::dom/max 25 ::dom/step 1 ::ui/value n
    ::ui/input-event (p/fn [e] (p/server (reset! !n (p/client (.. e -target -value)))))})
    (dom/div {:class "todomvc" :style {:position "relative"}}
    (dom/h1 "TodoMVC")
    (p/for [i (range n)] ; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    (let [!focused (atom false)
    focused (p/watch !focused)]
    (ui/element dom/div {::dom/style {:position "absolute"
    :width "50vw"
    :left (str (* i 40) "px")
    :top (str (-> i (* 40) (+ 60)) "px")
    :z-index (+ i (if focused 1000 0))}
    ::ui/mouseenter-event (p/fn [e] (reset! !focused true))
    ::ui/mouseleave-event (p/fn [e] (reset! !focused false))}
    (todomvc/TodoApp. state))))))))))
    (e/defn App []
    (e/client
    (let [state (e/watch todomvc/!state)
    n (e/server (e/watch !n))]
    (e/server
    (binding [todomvc/db (e/watch todomvc/!conn)
    todomvc/transact! (partial d/transact! todomvc/!conn)]
    (e/client
    (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))))))))))) ; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  7. @dustingetz dustingetz revised this gist Feb 13, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion user.cljc
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@
    ::ui/input-event (p/fn [e] (p/server (reset! !n (p/client (.. e -target -value)))))})
    (dom/div {:class "todomvc" :style {:position "relative"}}
    (dom/h1 "TodoMVC")
    (p/for [i (range n)]
    (p/for [i (range n)] ; <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    (let [!focused (atom false)
    focused (p/watch !focused)]
    (ui/element dom/div {::dom/style {:position "absolute"
  8. @dustingetz dustingetz renamed this gist Sep 22, 2022. 1 changed file with 0 additions and 0 deletions.
    0 a.md → photon-todomvc-composed.md
    View file
    File renamed without changes.
  9. @dustingetz dustingetz revised this gist Sep 22, 2022. 3 changed files with 6 additions and 5 deletions.
    6 changes: 6 additions & 0 deletions a.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    # Photon demo – TodoMVC Composed

    * An early demonstration "Compiler Managed Network" and the extreme dynamic composition it makes possible
    * It's just a for loop!!!

    https://user-images.githubusercontent.com/124158/186675049-c2e55723-455b-4892-a8ab-9d904698c198.mp4
    5 changes: 0 additions & 5 deletions gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +0,0 @@
    # demo of the extreme dynamic composition that composable network makes possible

    It's just a for loop!!!

    https://user-images.githubusercontent.com/124158/186675049-c2e55723-455b-4892-a8ab-9d904698c198.mp4
    0 user.demo-todomvc-composed.cljc → user.cljc
    View file
    File renamed without changes.
  10. @dustingetz dustingetz renamed this gist Aug 26, 2022. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.md
    View file
    File renamed without changes.
  11. @dustingetz dustingetz created this gist Aug 26, 2022.
    5 changes: 5 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    # demo of the extreme dynamic composition that composable network makes possible

    It's just a for loop!!!

    https://user-images.githubusercontent.com/124158/186675049-c2e55723-455b-4892-a8ab-9d904698c198.mp4
    34 changes: 34 additions & 0 deletions user.demo-todomvc-composed.cljc
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    (ns user.demo-todomvc-composed
    (:require #?(:clj [datascript.core :as d])
    [hyperfiddle.photon :as p]
    [hyperfiddle.photon-ui :as ui]
    [hyperfiddle.photon-dom :as dom]
    [user.demo-5-todomvc :as todomvc])
    #?(:cljs (:require-macros user.demo-todomvc-composed)))

    (def !n #?(:clj (atom 1)))

    (p/defn App []
    (let [state (p/watch todomvc/!state)
    n (p/server (p/watch !n))]
    (p/server
    (binding [todomvc/db (p/watch todomvc/!conn)
    todomvc/tx-delay (::todomvc/delay state)
    todomvc/transact! (partial d/transact! todomvc/!conn)]
    (p/client
    (dom/link {:rel :stylesheet, :href "todomvc.css"})
    (ui/input {::dom/type "range" ::dom/min 1 ::dom/max 25 ::dom/step 1 ::ui/value n
    ::ui/input-event (p/fn [e] (p/server (reset! !n (p/client (.. e -target -value)))))})
    (dom/div {:class "todomvc" :style {:position "relative"}}
    (dom/h1 "TodoMVC")
    (p/for [i (range n)]
    (let [!focused (atom false)
    focused (p/watch !focused)]
    (ui/element dom/div {::dom/style {:position "absolute"
    :width "50vw"
    :left (str (* i 40) "px")
    :top (str (-> i (* 40) (+ 60)) "px")
    :z-index (+ i (if focused 1000 0))}
    ::ui/mouseenter-event (p/fn [e] (reset! !focused true))
    ::ui/mouseleave-event (p/fn [e] (reset! !focused false))}
    (todomvc/TodoApp. state))))))))))