search

Jarzka / stylefy

Clojure(Script) library for styling user interface components with ease.
MIT License
316 stars 10 forks source link

How to silent the console warning upon reload #39

Open abhi18av opened 5 years ago

abhi18av commented 5 years ago

Hi @Jarzka , first off thank you for this wonderful library! I was trying to make sense of using rum with garden but it seems complicated and then I found stylefy 🌠

I just have a question regarding how could I make the console warning silent upon figwheel reload as I'm using figwheel and every time it is refreshed, there's a fresh warning.

Here's the file in question

https://github.com/abhi18av/rum-tavern/blob/master/src/rum_tavern/core.cljs

Jarzka commented 5 years ago

Glad to hear you like my library!

What kind of warning messages are you getting? Can you paste those messages here?

Figwheel tends to log a lots of stuff into the console upon reload but I believe there should not be any warning messages if everything is setup correctly. If those warnings come directly from stylefy, then they should be taken into account when using the library. It should be possible to get rid of them by fixing the problem which is causing them to appear.

Personally, I would not want to silence any console warnings since usually there is a good reason for a warning message to appear there.

By the way, I'm currently on vocation and I might be a little bit inactive here on GitHub for the next two weeks.

abhi18av commented 5 years ago

Hi @Jarzka , thanks for the quick revert.

Here's the screenshot for the error

Screen Shot 2019-06-29 at 02 10 40

I understand your advice regarding the warnings, however, I'm just getting started with the ClojureScript ecosystem so I just wanted to understand how can I configure things better.

Jarzka commented 5 years ago

The first warning message seems to be related to antd. I'm not familiar with that so I cannot really say anything about it.

The second warnings comes from stylefy. As it says, you call stylefy/init more than once during your application lifecycle, it should be called only once. Calling it multiple times should not cause any errors, but it's a sign that the library has not been initialised correctly.

I took a look at the source code of your project and did see only one call to init, so this should be ok. However, it seems that you initialise stylefy at the root level of your ClojureScript file. This should be ok too, but I'm not sure if Figwheel executes the root contents of the file again when the file is being reloaded. If this warning does not appear in production build (without Figwheel), then it's probably related to Figwheel file reloading.

What I recommend to do is to attach the root component of your application and initialise stylefy at the same time using the onload DOM event. On my personal website, I do this the following way:

HTML: <body onload="pikseli.main.start();">

ClojureScript:

(defn ^:export start []
  (stylefy/init)
  (r/render main-content (.getElementById js/document "app")))

This makes sure the root component and stylefy are always initialised only once. However, if many people prefer to use "root level initialisation", then I'm not sure if we should remove the warning of duplicate initialisation, and simply not execute the initialisation code more than once.

Final note: It seems that you are using rum instead of Reagent. stylefy does not officially support rum and I haven't tested what happens with these two libraries being used together. stylefy depends on Reagent because stylefy stores all its styles in Reagent atoms. This makes sure that every time this atom is changed, components are re-rendered, because they depend on this Reagent atom. If this re-rendering functionality is broken, then all styles are returned to components as inline styles. This works for most styles, but for example media queries cannot be used in inline styles. This is one unfortunate limitation in CSS. To bypass it, stylefy converts styles to CSS classes and media queries asynchronously, and then uses Reagent atoms to re-render components using the converted CSS code.

Adding official support for rum could be a feature to do in the future. However, since majority of ClojureScript developers seem to prefer Reagent, I haven't introduced official support for rum (yet). I'm not sure if it's possible to support both Reagent and rum in the same library, or if we have to build a separate version of stylefy for that purpose, "stylefy for rum" or something. I want to avoid the need to maintain two versions of the library as much as possible, but remains to be seen.

didibus commented 4 years ago

Oh, I too was planning on using it with rum.

Jarzka commented 4 years ago

Yea, unfortunately stylefy does not support rum at this point.