Fork me on GitHub
#fulcro
<
2019-11-27
>
tianshu05:11:41

Hi, what is the proper way to do hot-reload in fulcro? I use app/mount! in the after-load function, however although the data not change after reload(I can confirm this in fulcro inspector), but the ui looks like lost the data. PS, I fill the data with merge/merge-component! .

currentoor05:11:48

@U0NBGRGD6 Have you looked at the sample template repo?

currentoor05:11:02

That’s the canonical way to do it with shadow-cljs

tianshu09:11:25

@U09FEH8GN hi, thanks. but I think my shadow-cljs configuration is correct, just like, init and after load is set correctly. when I save the code, hot-reload actually happens, the problem is UI component will lose their data. (for example, a list view will become empty). But the data is still their, I can see them in the fulcro inspector.

roklenarcic09:11:18

put a println statement in the render for that component to see what is being called and with which props

tianshu09:11:59

@U66G3SGP5 the Root receive an empty {}.

roklenarcic09:11:31

are you doing something strange with your queries

roklenarcic09:11:33

you can get query of Root and run that query on state

tianshu09:11:01

(defsc Order [this {:order/keys [id qty price] :as props}]
  {:query [:order/id :order/qty :order/price]
   :ident :order/id}
  nil)

(def ui-order (comp/factory Order {:keyfn :order/id}))

(defsc Root [this {:keys [orders] :as props}]
  {:query [{:orders (comp/get-query Order)}]
   :ident (fn [_] [:component/id :order-page])}
  (.log js/console props)
  nil)

(defonce app (app/fulcro-app))

(defn init []
  (app/set-root! app Root {:initialize-state? true})
  (app/mount! app Root "app"))

(defn after-load []
  (app/mount! app Root "app"))
this is my code, I'm thinking am I wrong with the :ident of Root?

roklenarcic09:11:28

yeah I don’t think root has an ident

roklenarcic09:11:26

also if you can imagine what you wrote would mean that [:component/id :order-page] has :orders property

roklenarcic09:11:31

which is probably doesn’t

tianshu09:11:15

should the state kept when hot-reload in fulcro?

roklenarcic09:11:26

yes, of course

roklenarcic09:11:48

you are hardly supposed to notice reloads

tianshu09:11:09

looks that if Root doesn't have a ident, I can't use something like:

(merge/merge-component! app Root
                          {:orders [{:order/id 1
                                     :order/qty 10
                                     :order/price 100}]})

tianshu09:11:23

if I set the data by reset! the atom, the behavior will be correct. but since that is non-normalized data, obvious not the way I should use.

tianshu09:11:50

Okay, I think I can narrow the problem to when I run app/mount! , the Root will re-render with empty data.

roklenarcic12:11:15

on youtube look up Tony Kay’s channel

roklenarcic12:11:23

there you have a video tutorial how to set up things

tianshu13:11:06

I think I now why, the problem is I shouldn't give ident to Root, that will cause it looks for the deeper sturcture.

tony.kay14:11:44

Yes, giving Root an ident will break things…I need to add an error for that.

tony.kay15:11:39

Added in 3.0.11 🙂

tianshu16:11:33

@U0CKQ19AQ which case should I considering use a [:component/id :xxx] as an ident?

tony.kay16:11:31

Any time it is a singleton ui component

Philipp Siegmantel06:11:21

Hello. First of all, sorry if this is an obvious question, I'm just getting started with fulcro. I have an svg piano keyboard component, that needs to color keys based on the state of the application. My intuition is to make every key a component as well and set the fill attribute depending on the state. It would mean having to refactor parts of my application, so I better ask if I am on the right track.

adambros06:11:42

I'm not sure I see why it would need to be a component, wouldn't it just be rendering data passed to it by a parent (piano) renderer? How do keys get modified? Is it just color?

tony.kay14:11:10

So, I would not refactor unless it turned out to be a React performance problem. Having a component for each key would allow you to ask for a render of just a key, but in this case (a shallow tree of components) should be plenty fast.

Philipp Siegmantel07:11:43

OK, I think I have an idea of how to do it. Thanks for helping.

roklenarcic09:11:52

You can have whole keyboard as 1 component, I don’t see why not

roklenarcic09:11:22

especially if it’s a single SVG

tony.kay15:11:04

3.0.11 is on clojars. This version has some significant rendering optimizations. It was in RC to make sure it didn’t have regressions on rendering, and seems to be working well. It also includes the long-needed fatal error that prevents the beginner mistake of putting an ident on Root.

parrot 4
tony.kay15:11:37

Basically the older versions were over-rendering (2x per update)…this new version eliminates that and should double performance…but could cause regressions. But I’m using it in big apps and have seen no problems related to that fix.

📈 6
tony.kay16:11:05

I’ve also added (but not released) keyframe-render2. It is like keyframe-render, but allows you to specify :only-refresh on transactions to eliminate all internal checks and directly refresh a specific list of idents. This can give you component local state speed for things like input fields, while using keyframe for all other renders so you don’t have to worry about dependent data rendering issues. I’ve found use cases where this really is the best of both worlds: keyframe is usually “fast enough” (and is super simple to understand), but allows you to target optimizations to known hot spots easily.

tony.kay16:11:15

It will be in 3.0.12

tony.kay16:11:29

or you can use the latest git commit on develop in deps if you want it now

lgessler18:11:25

hi all, could anyone point me to an example project that demonstrates how to use fulcro with a sql db (like postgres)?

davewo19:11:52

https://github.com/fulcro-legacy/fulcro-sql is the best I could find after a brief look... most likely it has not been brought forward with fulcro3, but this library and the current fulcro template project (https://github.com/fulcrologic/fulcro-template/tree/master/src/main/app/server_components) might be a good starting point

tony.kay20:11:06

Remember that Fulcro has no opinion on database. The developer’s guides for Fulcro and Pathom both show how to satisfy queries and mutations, which is where you’d put code to read/write any database.

tony.kay20:11:57

The walkable library will is an example of how one could interface with SQL via Pathom if you want a library to do it for you. https://github.com/walkable-server/walkable

jmayaalv14:11:59

on our last project we r using https://github.com/exoscale/seql for db interop and it’s been pretty nice.

jmayaalv14:11:00

tried walkable but the fact that joins are in memory and not at the db level kept us away from it. not sure if that has changed since last time we checked it

myguidingstar16:11:01

@U0J6U23FW walkable's joins are not sql joins. I'm still thinking about instroducing new concepts to walkable to express sql joins. You know, sql joins bring their own complexity like name conflicts and shape of data (with EQL we expect tree-like structures, not two dimensional tables)

jmayaalv16:11:28

problem is that some problems dont allow to have joins do on memory and that was a deal breaker on our team. but i get your point, At the end we went with seql for that reason.

magra20:11:33

Hi, I build an app from the fulcro 3 template. I am new to semantic ui. How do I go about sizing a textarea differently on browser and mobile?

magra20:11:09

Is there a way to get my hands on a value that gives me eg. access to the current viewport size that I can use programatically inside a fulcro app?

currentoor20:11:29

that’s more of a JS question in general than a fulcro question

currentoor20:11:45

i’ve done it in the past, should be easy to find on google

currentoor20:11:19

but FYI it’s kind of tricky to get right with react’s render model

currentoor20:11:58

probably worth looking up how to do viewport size stuff with react components in general (use local-state and overwrite shouldComponentUpdate)

magra20:11:04

with fulcro.ui.bootstrap3 I could use (b/col {:xs 12 :sm 6 :md 4}) around the form helper. Is there something similar in sematic ui?

currentoor20:11:23

yes semantic ui has a grid layout you can use

currentoor20:11:40

you can use it directly with html/css or the react components

currentoor20:11:44

both do the same thing

currentoor20:11:37

i think you should spend some time reading through the semantic UI docs

currentoor20:11:01

they are written pretty well and tell you all the things the framework supports

magra20:11:17

Thanks for the hint. I propably missed something.