Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2021-04-24

Channels

#fulcro
<
2021-04-24
>
tony.kay00:04:04

if you require the ns, you get the component. If you get the component, you get the warning. I need to fix that component, evidently 😄

hadils02:04:27

I am not requiring the ns.

tony.kay05:04:30

Transitively you certainly are

Jakub Holý (HolyJak)07:04:52

🙏 input needed 🙏 What exercises would you give a beginner? I am trying to make a hands-on, exercises-based follow-up to the Minimalist Fulcro Tutorial and would appreciate you ideas, both from beginners and experienced folks, about what exercises / tasks would be conductive to learning Fulcro. This is what I have so far: https://github.com/fulcro-community/fulcro-exercises/blob/master/src/holyjak/fulcro_exercises.cljs#L21

jmayaalv10:04:29

@holyjak one of the things missing on most examples is the separation between "model data" and "ui data".

Jakub Holý (HolyJak)10:04:17

Could you please clarify?

jmayaalv13:04:34

Sure. Most of the examples talk about person, addresses, etc These is normally data that is loaded from the backend. However complex spas require management of info that is exclusive to the frontend. Example: active menu, show/hide sidebar.

👍 3
jmayaalv13:04:54

It would be nice to see an example showing both types of data.

Jakub Holý (HolyJak)13:04:10

Ok, thanks! Good idea!

Timofey Sitnikov11:04:57

Good morning!!! I am looking at the https://github.com/fulcrologic/fulcro-template, and it seems like everything is in place for the routing, except the dr/change-route! SPA, which I added to https://github.com/fulcrologic/fulcro-template/blob/db259312050524ba677f0ed9a3de434d7913bc23/src/main/app/client.cljs#L24 like so: 

(defn ^:export init []
  (log/info "Application starting.")
  (cssi/upsert-css "componentcss" {:component root/Root})
  (app/set-root! SPA root/Root {:initialize-state? true})
  (dr/change-route! SPA ["main"])             ;; <<<< Added route here
  (log/info "Starting session machine.")
  (uism/begin! SPA session/session-machine ::session/session
    {:actor/login-form      root/Login
     :actor/current-session root/Session})
  (app/mount! SPA root/Root "app" {:initialize-state? false}))
but when I enter any route, I get the NOPE as the http response. So it looks like the dynamic router is not activated, how can I get it to activate?

Björn Ebbinghaus12:04:28

The "NOPE" response comes from the backend router. wrap-html-routes in middleware.clj doesn't match /signup

Björn Ebbinghaus12:04:45

So it falls through to the not-found-handler

Björn Ebbinghaus12:04:05

This is completely unrelated. The dynamics routing stuff is client-side routing. The code in middleware.clj ist server-side and has nothing to do with what the client does.

Timofey Sitnikov12:04:13

@U4VT24ZM3 OK, how do I get the client-side routing to work on Fulcro Template? It looks like the client sider router is not starting.

Timofey Sitnikov12:04:13

But it does look like all the code is there for it to work. So you should be able to got to localhost:3000/signup and the client side should be able to bring up the signup dialog.

Björn Ebbinghaus13:04:35

You don't even load the client. The "NOPE" Route just gives you a webpage containing only the string "NOPE", no HTML, no CSS, no JS -> no client

Timofey Sitnikov13:04:25

@U4VT24ZM3, I do load the client, when I go to localhost:3000, I get below, but when I enter the localhost:3000/singup, I expect the client to intercept the route and change to signup dialog. Actually, I think I may have found it possibly in the https://github.com/fulcrologic/fulcro-template/blob/master/src/main/app/server_components/middleware.clj, the routes need to be passed back to index.

Björn Ebbinghaus13:04:42

You load the index functions HTML on / or /index.html like stated here: https://github.com/fulcrologic/fulcro-template/blob/master/src/main/app/server_components/middleware.clj#L74 When you enter a URL in your browser, and you hit enter, it has nothing to do with the client.

Timofey Sitnikov13:04:40

@U4VT24ZM3 OK so looking at https://www.youtube.com/watch?v=oQpmKWBm9HE starting at 1:15, Tony demos the client sider routing, thats what I am trying to achieve. If I am understanding it correctly, later when Tony types in a route, it does not do http request to server, it just resolves it in the client. Is that true or am I totally missing the point?

Björn Ebbinghaus13:04:08

Ok.. 1. Tony has the all-routes-to-index function, which means, that no matter which route (as long as it doesn't end with .js, .css, ...) it gets treated as if it would be / . This resolves the problem, that you get the NOPE route from the template. 2. When changing the URL by hand and pressing enter in your browser, you change your site, nothing you can do about that. On the other hand. When clicking a link or using the nav buttons, you can prevent-default(which would be a reload of the page) 3. You still have to change-routewhen the client starts. dynamic routing is not automatic HTML5 routing.

❤️ 2
2
Timofey Sitnikov13:04:20

Yes, that is what I am trying to achieve. the server side routing.

Björn Ebbinghaus13:04:07

I modified my answer. I sent it prematurely by mistake.

Björn Ebbinghaus13:04:33

So in your backend. (middleware.clj in this case) you would add a catch-all rule (or whatever you want/need), so that you get the page + client. Then in the next step, when your client starts, you can change-route! based on your location.

❤️ 2
2
Timofey Sitnikov23:04:07

@U4VT24ZM3, took me a while, but still struggling 😞, but a different issue, will post for help again.

Björn Ebbinghaus22:04:49

I have a problem, that I get Cannot find app on component! or Cannot create proper fulcro component, as *app* isn't bound. just in my release JS and I don't do things like function as a child. I started a discussion on GitHub and I would be grateful, if anyone could point me in the right direction as to what is causing this. https://github.com/fulcrologic/fulcro/discussions/477

tony.kay01:04:45

Laziness is the likely culprit. React forces things in dev but not prod.

Björn Ebbinghaus13:04:27

Hm. Yes. Surrounding for with vec works... How annoying... Thank you very much.

Björn Ebbinghaus10:04:34

That's why I posted it as a GitHub discussion. https://github.com/fulcrologic/fulcro/discussions/477 I mean... What is the problem here? Fulcro? CLJS? React? Shadow-cljs? 🙂

tony.kay13:04:35

A combo of the first three 😄 Fulcro uses a dyn var that is bound on render, cljs allows for laziness, and React switches modes between error checking (and not) that causes forces eval of the laziness in dev.