Fork me on GitHub
#fulcro
<
2018-05-22
>
levitanong04:05:15

@wilkerlucio oops, i thought we were in #fulcro

wilkerlucio04:05:15

@levitanong you can use by installing the chrome extension, and bumping inspect to 2.2.0-SNAPSHOT

wilkerlucio04:05:20

hehhe, no problem šŸ™‚

levitanong04:05:07

haha, somehow i thought i was supposed to remove fulcro-inspect as a dep since itā€™s now a chrome extension

wilkerlucio04:05:32

no, still need that, now it works mostly as a message broadcaster

levitanong04:05:52

ahhh, iā€™m getting Uncaught SyntaxError: Unexpected token <

levitanong04:05:17

and i havenā€™t added any stray < according to my git diff

wilkerlucio04:05:26

did you tried cleaning the cache and recompiling? that's a weird erorr

levitanong04:05:31

afaik shadow-cljs cleans cache automatically. will do lein clean

wilkerlucio04:05:01

ok, I'm gonna try it in a differnet app, I had tried one with figwheel, and the fulcro-inspect itself is in shadow

levitanong04:05:02

oh, itā€™s probably an issue on my end

levitanong04:05:10

my webserver is trying to serve html as js lol

levitanong04:05:48

Iā€™m getting a cors issue now

levitanong04:05:07

shared.js:30 Uncaught DOMException: Blocked a frame with origin "" from accessing a cross-origin frame.
    at Ab ()
    at Function.rc.b ()
    at 

wilkerlucio04:05:15

which version of shadow are you using?

levitanong04:05:08

Not the latest

levitanong04:05:20

Will try it out with latest shadow when I get to my office.

wilkerlucio04:05:36

I gotta go sleep now, please let me know if figure that, I was able to run here on a shadow env too and it seems fine on version 2.3.21

levitanong04:05:59

Okay, will do! Good night!

wilkerlucio04:05:04

if you can't get it to work, can you please open an issue with a reproduction example?

šŸ‘ 4
levitanong05:05:06

@wilkerlucio Oh i was on 2.3.21, so itā€™s not shadow. Will see if i can reproduce it elsewhere

souenzzo11:05:20

why this component isnt send it's query?

(defsc Root [this {:keys [n app/users]}]
  {:query         [:n {:app/users [:user/id :user/name]}]
   :initial-state {:n         0
                   :app/users []}}
  (dom/div
    (dom/div (str "Number: " n))
    (dom/button #js{:onClick #(prim/transact! this `[(app/bump {})])}
                "+")
    (dom/hr)
    (dom/hr)
    (map ui-user-card users)))
I already stop/clean/start figwheel and I add one more hr to check if it's cache problems. - I followed this tutorial https://github.com/fulcrologic/fulcro#full-stack - I'm checking on network from browser

wilkerlucio12:05:02

@souenzzo what you mean by not sending its query? sending where?

souenzzo12:05:54

Sorry. On the server only [:n] arrives ( :app/users part just don't )

wilkerlucio12:05:39

@souenzzo I don't see anything triggering a load on your code example, when are you requesting the load?

wilkerlucio12:05:50

one problem that I'm seeing is that you are using the root directly, that's usually a bad thing, it's better to have a very clean Root component (that just links to your actual root), this way you can trigger the load on that field

wilkerlucio12:05:01

otherwise you will have problems to load more than one thing at root query

cjmurphy12:05:40

Your query needs to have (get-query User) in it.

souenzzo12:05:08

initially I used Moved to copy'n'paste the query trying to simplify/debug

cjmurphy12:05:42

@souenzzo That's why only the [:n] part is arriving I would think.

wilkerlucio12:05:49

@cjmurphy I think the query would work directly as he did, but normalisation would not, which is a not good already

souenzzo12:05:57

Ok, it's a reaload issue that not affect render. (render updates with no problems)

wilkerlucio12:05:34

@souenzzo can you share the code you are using to trigger the load? I think the problem might be there

souenzzo12:05:20

:started-callback (fn [app]
                          (df/load app :n nil {:marker false}))
this server-property-or-ident can be my problem?

wilkerlucio12:05:44

see, you are loading the key :n, that's why this is the only thing you see on the server

šŸ‘ 4
wilkerlucio12:05:02

and you must send a component with the query, otherwise the normalization will not work

wilkerlucio12:05:33

@souenzzo this is how I recommend you trying to setup your root:

wilkerlucio12:05:35

(prim/defsc Root [this {:keys [n app/users]}]
  {:query         [:n {:app/users [:user/id :user/name]}]
   ; note it has an ident now
   :ident (fn [_] [::root :singleton])
   :initial-state {:n         0
                   :app/users []}}
  (dom/div
    (dom/div (str "Number: " n))
    (dom/button #js{:onClick #(prim/transact! this `[(app/bump {})])}
      "+")
    (dom/hr)
    (dom/hr)
    (map ui-user-card users)))

(def root-factory (prim/factory Root))

(prim/defsc RootContainer [this {:keys [ui/root]}]
  {:query [{:ui/root (prim/get-query Root)}]}
  (root-factory root))

; to do the load now
{:started-callback
 (fn [app] (df/load app :ui/root Root))}

šŸ‘ 8
souenzzo12:05:34

I did something like that just not. Just cleaning/reseting everything before try again šŸ™‚

wilkerlucio12:05:35

and like @cjmurphy said, remember to pull the query of your users in the Root

souenzzo12:05:19

Working! Tks!

donmullen14:05:58

Iā€™ve gotten client-side html5 routing working. Still on *[fulcrologic/fulcro ā€œ2.2.0ā€]* and will likely update soon. Iā€™d like to now add the ability to serve up a full URL (e.g. *<http://server.com/property/1*|server.com/property/1*>). Can a tap into the easy server do do this ā€” or do I need to move toward adding my own server implementation?

tony.kay16:05:50

@donmullen you donā€™t have to use SSR at allā€¦you can just serve index.html from every legal URI, and then use that URI (in started callback) once your app is started to change routes.

donmullen17:05:16

@tony.kay Thanks. Does ā€˜serve index.html from every legal URIā€™ mean adding :extra-routes to make-fulcro-server? If so, what would the :handler entries be? Once the client-side app starts in :started-callback, how do I grab the actual incoming URI? My started-callback function is currently just

(fn [{:keys [reconciler] :as app}]
                  (routing/start-routing (prim/app-root reconciler)))

tony.kay18:05:40

@donmullen So, 1. I would not use extra routes. Add a component that injects handler, and add to the post-hook. 2. The URI is in js window.locationā€¦itā€™s a browser šŸ˜œ

tony.kay18:05:22

yeah, itā€™s funny what we forget when in new environs šŸ˜‰

tony.kay18:05:36

you could add to pre-hook or post-hookā€¦just look at the request and see if the URI matches legal routes that are serviced by your app

tony.kay18:05:12

Something like thisā€¦you could use ring/resource to do the file-response bit:

(defrecord HTML5Routes [handler]
  c/Lifecycle
  (start [this]
    (let [old-pre-hook (fulcro.easy-server/get-pre-hook handler)
          new-hook     (fn [ring-handler] (fn [req] (if (is-html5-route? req) (file-response) ((old-pre-hook ring-handler) req)))]
      (fulcro.easy-server/set-pre-hook! handler new-hook))
    this)
  (stop [this] this))

tony.kay18:05:36

and is-html5-route? is probably just a regex against the req uri

donmullen18:05:50

or have is-html5-route? use bidi/match-route?

donmullen19:05:02

Thanks @tony.kay ā€” getting there. My ring foo not strong šŸ˜ž. For file-response ā€” something like (ring.middleware.resource/resource-request req "index.html") ?

tony.kay19:05:55

modify the URI in the req. The second parameter would be something like ā€œpublicā€ā€¦the folder where your index.html is (relative to classpath)

tony.kay19:05:22

something like (resource-request (assoc req :uri "/index.html") "public")

tony.kay19:05:31

I donā€™t remember if it is :uri or :url

donmullen19:05:21

Fantastic - thanks! Itā€™s :uri

tony.kay19:05:37

thereā€™s almost nothing to Ringā€¦the req, which is a map, is just being chained through functions. They can modify the req map and pass it down, or choose to generate a response, which is again just a map. Thatā€™s about it

tony.kay19:05:05

the main thing that bends your brain a bit is knowing which function is which

tony.kay19:05:22

e.g. which function is the one that is the ā€œrest of the request processing chainā€

tony.kay19:05:08

in the plug-in, thereā€™s an additional bit: the function that was originally the pre/post hook

tony.kay19:05:02

so, there are three things to manage: the ā€œrest of the chainā€, which is ring-handler in the example, the prior value of the hook, which is old-pre-hook in the example, and your function (fn [req] ...)

tony.kay19:05:19

so, you just make decisions, and call whatever composition of those makes sense

tony.kay19:05:07

old-pre-hook was a function that took the ring handler and returned a function req -> resp that becomes the ā€œrest of the stackā€ā€¦thus the extra nesting

tony.kay19:05:02

I should put all of that in the book šŸ˜œ

tony.kay19:05:39

@donmullen updated dev guide. If you could proofread http://book.fulcrologic.com/#_adding_to_the_ring_stack Iā€™d appreciate it.

tony.kay19:05:53

since youā€™re coding one up šŸ™‚

donmullen19:05:09

@tony.kay - so (resource-request (assoc req :uri "/index.html") "public") resulted in a download of the index.html fileā€¦ so I tried ((old-pre-hook ring-handler) (assoc req :uri "/index.html")) if it was a valid html5 route ā€” and that also seems to be downloading (even about a complete restart). Hmmā€¦

tony.kay19:05:26

all you have to do is set content type

tony.kay19:05:53

didnā€™t realize it didnā€™t do that

tony.kay19:05:16

try adding in (-> (resource-request... as before) (ring.util.response/content-type "text/html"))

tony.kay19:05:49

I think pre-hook must be in front of the normal resource service and middleware that does the content type and modified headers.

tony.kay19:05:04

might not need that if you do post-hook instead

tony.kay19:05:57

hmā€¦noā€¦thatā€™s strangeā€¦pre-hook is after thoseā€¦I would have expected that to work

tony.kay19:05:21

Ohā€¦what was your request, come to think of itā€¦the middleware canā€™t add content type if there isnā€™t an exension in the request to guess from

tony.kay19:05:45

I was assuming you were hitting routes like ā€œotherpage.html?paramsā€ā€¦not the restful kinds of URIs like ā€œlocation/1"..with the latter youā€™ll have to set the content type

donmullen20:05:08

@tony.kay - not seeing post-hook ā€” fallback-hook? Note that I am on 2.2.0 ā€” should probably upgrade. Yes, Iā€™m using URIs like ā€œlocation/1ā€. ā€” Using above, adding content-type - results in display of blank html page - so something still not quite right.

tony.kay20:05:47

yes, fallback is what I meant, but you donā€™t need to change that. pre-hook is fine for this

tony.kay20:05:11

what do devtools tell you about what was served?

tony.kay20:05:14

stuff has to match your classpath and suchā€¦Iā€™m assuming youā€™re using resources/public/index.html for you index page, and that resources is on your classpath.

donmullen20:05:38

@tony.kay - so I had ā€œindex.htmlā€ instead of ā€œ/index.htmlā€. The req coming in is

{:remote-addr "0:0:0:0:0:0:0:1", :headers {"host" "localhost:3000", "user-agent" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3433.0 Safari/537.36", "connection" "keep-alive", "upgrade-insecure-requests" "1", "pragma" "no-cache", "accept" "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8", "accept-language" "en-US,en;q=0.9", "accept-encoding" "gzip, deflate, br", "cache-control" "no-cache"}, :async-channel #object[org.httpkit.server.AsyncChannel 0x648b4dad "/0:0:0:0:0:0:0:1:3000<->/0:0:0:0:0:0:0:1:50899"], :server-port 3000, :content-length 0, :websocket? false, :content-type nil, :character-encoding "utf8", :uri "/property/3336460", :server-name "localhost", :query-string nil, :body nil, :scheme :http, :request-method :get}

donmullen20:05:14

And devtools shows GET 404 (Not Found)

tony.kay20:05:33

thatā€™s because your index.html uses relative paths on your js

tony.kay20:05:09

browser thinks you loaded /property/3336460, so relative things would be relative to thatā€¦the rules of the web still donā€™t change šŸ™‚

donmullen20:05:17

@tony.kay - thanks. Makes sense. Knowing this is likely an easy fix - I admit I donā€™t know what it is! Brain fried. Was so delighted to get html5 client-side routing working 12 hours ago šŸ™‚.

tony.kay20:05:21

@donmullen in your index.htmlā€¦change your script tag from src="js/main/app.js" to src="/js/main/app.js"

donmullen20:05:39

lol! miracle ā€” works - and I didnā€™t have to do anything on the client side.

donmullen20:05:30

Thanks again @tony.kay. I reviewed http://book.fulcrologic.com/#_adding_to_the_ring_stack ā€” looks good. Iā€™d switch the post-hook reference to fallback-hook and change the code as you indicated to add the content-type. Mention of relative paths in index.html also good for novices like me šŸ™‚. Using (bidi/match-route url-route-mappings uri) was helpful for html5 routing check - as that code was already implemented ā€” no extra regex code needed.

tony.kay21:05:31

done. thanks