(p/defn App []
  (p/client
    (dom/h1 "CRUD-MySQL")
    (let [!age-filter (atom nil) age-filter (p/watch !age-filter)]
      (ui/input {::dom/type        :search
                 ::dom/placeholder "Age above~"
                 ::ui/input-event  (p/fn [e]
                                     (do (reset! !age-filter (.. e -target -value))
                                         (prn @!age-filter)))})
      (dom/table
        (p/server
          (let [users (fetch-all-users database)]
            (p/for [user users]
              (p/client
                (dom/th
                  (dom/td "Name")
                  (dom/td "Country")
                  (dom/td "Age")
                  (dom/td "language"))
                (dom/tr
                  (dom/td (p/server (:users/name user)))
                  (dom/td (p/server (:users/country user)))
                  (dom/td (p/server (:users/age user)))
                  (dom/td (p/server (:users/language user))))))))))))

hyperfiddle.photon-jetty-adapter: Websocket handler failure #error {
 :cause Unable to resolve symbol: let
 :data {}
 :via
 [{:type clojure.lang.ExceptionInfo
   :message Unable to resolve symbol: let
   :data {}
   :at [hyperfiddle.photon_impl.runtime$eval$fn__10675 invoke runtime.cljc 1164]}]

The error goes away once I delete p/server, but can't understand why it is the solution.

it works on my machine what commit are you on

well, i disabled

#_(fetch-all-users database)

I'm using today version of photon-starter-app

ok let me try it, that is very old

cc18854cfffa5993199cd9707659ad4914b0261f

you pulled today?

I'm confused

yea I did.

you overrode the photon dep in photon-starter app?

com.hyperfiddle/photon         {:mvn/version "20220827-153507"}

that is not cc18854

oh I didn't override it then. Will update first

can you push your whole project to a branch so i can see exactly what you have

oh as a branch of photon-starter-app right?

however you want to do it

It works on my machine in photon-starter-app at master

I'd prefer that if you think it's okay. much better than making another private repo

except for this difference

#_(fetch-all-users database)

I can't upload it with a branch, no permission. I made a private branch and shared with you just now.

> It works on my machine in photon-starter-app at master but the photon version has to be up-to-date, right?

i used the version on master

photon-starter-app as is

Ok I see your repo that you invited me to but i dont think you pushed your code

just did!

CDN replication lag maybe

🙂

strangely, it is working now.

:face_palm:

as configured or with the overridden dep (the repo has a pinned stale photon dep afaict)

Works for me too as cloned - but I really want your photon dep to track photon/master

we have tons of fixes and improvements that you need

https://github.com/tlonist-sang/photon-starter-app/blob/8579ed6f07ad64cf8386de522b86c0d4454601e6/src/app/mysql_crud.cljc#L34

since I got your attention, I have one question. suppose the users were declared in the upper most let bindings together with filter atom. Why can't the data be passed into dom/tables?

this line is wrong, it's calling a CLJ function from the client

I need to wrap the line with p/server to make it work.

yes

yea I caught that.

I am not surprised by bad error messages – we did an error handling pass recently, i dont know if it is in the coord you were using

the errors are a lot more helpful now, not perfect but enough to reasonably pinpoint problems

(p/defn App []
  (p/client
    (dom/h1 "CRUD-MySQL")
    (let [!age-filter (atom nil) age-filter (p/watch !age-filter)
          users (fetch-all-users database)]
      (ui/input {::dom/type        :search
                 ::dom/placeholder "Age above~"
                 ::ui/input-event  (p/fn [e] (reset! !age-filter (.. e -target -value)))})
      (dom/table
        (p/server
          (p/for [user users]
            (p/client
              (dom/th
                (dom/td "Name")
                (dom/td "Country")
                (dom/td "Age")
                (dom/td "language"))
              (dom/tr
                (dom/td (p/server (:users/name user)))
                (dom/td (p/server (:users/country user)))
                (dom/td (p/server (:users/age user)))
                (dom/td (p/server (:users/language user)))))))))))

fetch-all-users is still not wrapped in p/server

yes, but I thought the data fetched from the fetch-all-users must be bound to 'users'.

> suppose the users were declared in the upper most let bindings together with filter atom. Why can't the data be passed into dom/tables? is the users collection on the client or server? you likely want the bulk collection to stay on the server (transferring the minimum needed amount of data that the client actually needs)

so that it can be passed onto anything without specifying where it came from

Try this

(p/defn App []
  (p/client
    (dom/h1 "CRUD-MySQL")
    (p/server
      (let [users (fetch-all-users database)]
        (p/client
          (let [!age-filter (atom nil) age-filter (p/watch !age-filter)]

But first set your photon dep to

com.hyperfiddle/photon         {:git/url "[email protected]:hyperfiddle/photon.git"
                                :git/sha "30daf27a4639df7baca14df9ba93a66d66d36ebc"}

I want the initial first collection to be made on the server side, and the rest is just a client side filter manipulation.

just so we see the same thing

Did I answer the question properly?

hmmm

Encountered error when macroexpanding hyperfiddle.photon/boot.
Unable to resolve symbol: let

yep that one.

trying this

(p/defn App []
  (dom/h1 "CRUD-MySQL")
  (p/server
    (let [users (fetch-all-users database)]
      (p/client
        (let [!age-filter (atom nil) age-filter (p/watch !age-filter)]
          (ui/input {::dom/type        :search
                     ::dom/placeholder "Age above~"
                     ::ui/input-event  (p/fn [e] (reset! !age-filter (.. e -target -value)))})
          (dom/table
            (p/for [user users]
              (p/client
                (dom/th
                  (dom/td "Name")
                  (dom/td "Country")
                  (dom/td "Age")
                  (dom/td "language"))
                (dom/tr
                  (dom/td (p/server (:users/name user)))
                  (dom/td (p/server (:users/country user)))
                  (dom/td (p/server (:users/age user)))
                  (dom/td (p/server (:users/language user))))))))))))

Ah

the :require-macros is wrong

(ns app.mysql-crud
...
  #?(:cljs (:require-macros app.core)))

ah, right. why did it work before?

now I have DEBUG : Unserializable reference transfer: [{:users/id 100, :

That i can help with, let me explain the first issue first

What I think happened is the code that shadow sees (filesystem) was out of sync with what the JVM server has loaded. What :require-macros does is force shadow to reload the JVM as it compiles the file, to guarantee the filesystem and jvm are in sync

Which is why you got a nonsense error – the compiler state got corrupted basically

Does that make sense?

I see, that's why it produced the errors once I restarted repl.

yeah, and at some point you likely loaded the file to the JVM repl

oh, and the unserializable reference transfer is solved by adding p/server just outside of p/for

yeah, the users collection is on the server and likely contains sql database cursor objects of some sort

you will also need to use p/for-by with a keyfn, (p/for-by identity [user users] ...)

so basically p/server, p/client are like tags attached to data to tell them about their origin.

they are compile time markers that mark a region of code as client or server

for p/for-by – instead of identity, choose a database identity (record id or something) – this is like in react.js, it is used to make the for loop stable and efficient across reactive updates

I see many core functions are overriden by photon (starting with p/..), what do they mean in simple terms?

great to see some SPA features loaded in photon!

(ns hyperfiddle.photon
  (:refer-clojure :exclude [eval def defn fn for empty?])

yea those I meant.

p/defn defines a reactive function

it macroexpands to (p/def ... (p/fn ...

p/def defines a reactive global; they behave like clojure's ^:dynamic by default and work with (binding [])

how should I expect them to behave differently? or should I look up for their implementation? I roughly thought it had something to do with the missionary part you explained earlier.

you are already using p/defn in your app!

I know haha, but that was c&p from the demos. I used it without understanding what I'm really doing.

p/defn defines a reactive function and it also handles p/client p/server

p/for is a more efficient reactive loop thing, don't use clojure.core/for in photon

beyond that it's easiest to see how to use them by going through the examples

so it's recommended (if not necessary) to use functions from photon(p/~) within the definition of p/defn?

because the reactive nature can be broken.

yes

that's right - reactive functions can only be called from other reactive functions

got it. thanks, I will find you with other questions later!