renderToPipeableStream examples

[ignatiqq]

Hello, could you help me, where can I find an example with renderToPipeableStream?

Thank you.

[theKashey]

standard TransformStream approach should be able to handle it, but I've got no proofs and I've got no example as well.

[ignatiqq]

@theKashey Ok thanks. But does used-styles support react 18 pipeableStream api as well? I'm having a problem importing all my styles (that aren't used there) into a specific page. Do I understand correctly that used-styles should only pick up styles from the stream or not? Should we control it ourselves?

[theKashey]

I've never tried. You probably should look at interleaved stream rendering configured after pipeableStream, but as I've mentioned - there is no example.

if you can create such an example - that would just great and should give me a good base to start from, and may be resolve the problem for you.

[ignatiqq]

It works as expected but I have another problem related to my css loader which is separating one component style from another separated by React.Lazy and the styles used are loading it, how can we avoid this using (mini-css-extract-plugin) with separated chunks? Can we fix it outside the library?

track.json is a file with ast created from the test css files.

maybe something like this:

[theKashey]

Can you clarify the problem - is it about ignoring some styles or some CSS files? Take a look at https://github.com/theKashey/used-styles/blob/master/src/operations.ts#L29

[ignatiqq]

@theKashey Thanks, but no. I'm talking about something a little different. So in my project I am using the mini-css-extract plugin which splits all my CSS into different chunks. For example, I have 2 different lazy loading chunks (react components) and 1 common component that is not used in the project only in these two fragments. This way the CSS of this (shared) fragment will be split into both of my lazy components using repeating selectors.I can't use the webpack "optimizations.cacheGroups.splitChunks.styles" because my main chunk will be 3 megabytes.

So the problem is that when "used-styles" tries to find files with ".someclass" it loads them both, regardless of whether it was used on the page or not.

[theKashey]

In that case - "thanks, but yes". This is a code from a real project reducing "used styles" to the "factually used" chunks

where importAssets is import { importAssets } from "webpack-imported";

return (chunks: string[]) => {
// get import details for given stats and given chunks
const files = importAssets(statsConfiguration, chunks);
// CSS files expected to be loaded
const stylesToLoad = new Set(files.styles.load);

    // reduce used-styles to actually "used" ones.
    return alterProjectStyles(styleData, {
        filter(name) {
                             // will reduce original set to contain styles only from given data
            return stylesToLoad.has(name);
        }           
    });

[ignatiqq]

Thank you. Perhaps I don't understand something or I lack context (sorry), but is this function compatible with createStylesStream (with processing of each chunk, the styles of which we know only after another pipe from renderToPipeableStream, without collecting the chunks before the actual renderToPipeableStream)

[theKashey]

😅🫠 no it's not. Look like you need a way to control what is in ast in a little bit dynamic way.

So:

• "how" - exactly like in the example provided by me - just "add"/"remove" some "ast nodes". Probably add as you discover new chunks as being used.
• "how" - exactly like in the example provided by you - an option to continuously control what to add

[ignatiqq]

Thanks a lot 🙏. I would really appreciate it if you could explain when you are using this code (during stream) and what the string[] pieces are (from where). I don't understand this concept. And as far as i see i don't have I have no way to use option 2 ("how") without adding this functionality myself (to the library)?

[theKashey]

Tell me how(when?) you track loaded chunks and I'll manage the rest.

[ignatiqq]

Thank you. As far as I understand, I can only track loaded chunks in the callback (if I use stream) in createStyleStream(second parameter) when "getUsedStylesIn" has already been executed for a specific chunk. Before this, I don't know what styles are used on the page.

[theKashey]

Not entirely what I've asked.

• you want to load styles only from "used chunks"
• this is possible if one "enable/disable" ast nodes for given chunks in a real-time. Something not possible right now, but we only need a direction.
• so how you can know which chunks are getting loaded?
  • different solutions use different tracking, but not all of them gives you access to this information during streaming.
  • according to the code you've shared - you have list of files you care about, that should be enough

Sounds like all required is to make configuration a little less static to let you "unblock" new chunks as they are getting used.

[ignatiqq]

I feel stupid now (I'm not very good at parsing and don't quite understand what "enable/disable" ast nodes means)(maybe I can read about this somewhere?). Can you please check my mini-example repo to make sure exactly what problem we are trying to solve?

https://github.com/ignatiqq/used-style-css-modules-example

please check the "/lazy" route there and note that all styles from the project are loaded by dividing the shared styles of one component into different chunks.

[theKashey]

And it short - that would not work. You need to "know" which lazy components got rendered, which chunks they "require" and which chunks you need to consider using for used-styles.

I'll adjust your example to work as needed, give me some time.

[ignatiqq]

I really appreciate your help. I've already done this myself. Thanks for mentioning 'webpack-imported'.

I just needed to collect all my react.lazy chunk names and compare them to "ImportedStats" to determine if they were actually being used.