Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to silent the console warning upon reload #39

Open
abhi18av opened this issue Jun 28, 2019 · 5 comments
Open

How to silent the console warning upon reload #39

abhi18av opened this issue Jun 28, 2019 · 5 comments
Labels
question

Comments

@abhi18av
Copy link

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
Copy link
Owner

Jarzka commented Jun 28, 2019

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
Copy link
Author

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
Copy link
Owner

Jarzka commented Jun 29, 2019 •
edited

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.

@Jarzka Jarzka added the question label Aug 8, 2019
@didibus
Copy link

didibus commented May 14, 2020

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

@Jarzka
Copy link
Owner

Jarzka commented May 14, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@didibus @Jarzka @abhi18av