grucloud / bau

Reactive library and components for building web user interface
https://grucloud.github.io/bau/bau-ui/
MIT License
113 stars 6 forks source link

bau css to support SSR? #102

Open illiaChaban opened 4 months ago

illiaChaban commented 4 months ago

bau css looks simple and neat. Very similar to how goober does things with reduced complexity. Any plans to support SSR? The way goober does it they use "context" object when "window" or "document" is not availalble and then "renderToString" method that basically reads from that context for SSR Example

FredericHeem commented 4 months ago

bau-css already supports SSR, examples can be found in bausaurus, a Static Site Generator.

illiaChaban commented 4 months ago

@FredericHeem can you clarify how it works? I see this context creation logic (1, 2) that creates css through BauCss, but it's using "window" and "document" which should only be available in the browser and not on the server. Are you using some kind of mock for those global objects? I can't figure out how css is supposed to be hydrated on the server in this case

FredericHeem commented 4 months ago

"window" and "document" are mocked by jsdom https://github.com/grucloud/bau/blob/7149d9ccf98bbdda3ac817ac1088dcc18558b282/bausaurus/src/server/renderPage.js#L158

Then feeded into createContext:

const context = createContext({
      window: dom.window,
      config: { base: viteConfig.base },
    });
illiaChaban commented 4 months ago

@FredericHeem thanks. Makes sense. I wonder if adding this SSR example to bau-css readme could be helpful.

Another question, I see that it adds "style" element for each classname with a matching class id and then uses that to check if the styles were already added in the future. I wonder if it would be better for bundle size during SSR to use one style tag for all styles (i.e