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