Add ssr={true|false} to control when charts are rendered about layercake HOT 8 CLOSED

Cool! Possibly related: if I console.log($width) in the chart components, I get 2 results, with the first number being a lot smaller than my container.

from layercake.

This is now in 3.0.0 https://github.com/mhkeller/layercake/releases/tag/v3.0.0

from layercake.

Ya I think having it either 1) only load things once the pages load or 2) load everything with per-determined dimensions is the way to go. It's related to this comment here about server-side rendering and the flash of unsized content not being ideal: #5 (comment)

I'll look into the best way to do this. It could be that it just looks for the window object. The trick will just be to make sure that it fails gracefully on first load and doesn't error.

from layercake.

I did some work on this and I think the best solution is to add a prop like ssr that defaults to false that turns off all server-side rendering by adding this conditional which is now in the ssr branch:

it won't attempt to render any of the elements, which is nice because you won't have to put a bunch of conditional statements in each renderer to check to make sure variables have been calculated.

I've started building out server-side rendered examples on the ssr branch of the website repo and I did an export of the current site with the ssr branch so you can see how it works.

This would also close #5

from layercake.

@jurb Can you put an example together in the REPL of the charts you say aren't sizing properly?

from layercake.

@mhkeller Yes, I'll try to do so.

from layercake.

I'll merge this into master when I'm done building out the ssr examples to make sure that it works with all use cases built so far.

from layercake.

@jurb Can you put an example together in the REPL of the charts you say aren't sizing properly?

I'm sorry but I worked on a tight deadline for that project and can't manage to reconstruct the issue in the upcoming time. Once I have time I'll let you know.

Thanks for the great work!

from layercake.