[Flight Plugin] Scan for "use client"

[gaearon]

Summary

Our toy webpack plugin for Server Components is pretty broken right now because, now that .client.js convention is gone, it ends up adding every single JS file it can find (including node_modules) as a potential async dependency. Instead, it should only look for files with the 'use client' directive.

The ideal way is to implement this by bundling the RSC graph first. Then, we would know which 'use client' files were actually discovered — and so there would be no point to scanning the disk for them. That's how Next.js bundler does it.

We're not doing that here.

This toy plugin is very simple, and I'm not planning to do heavy lifting. I'm just bringing it up to date with the convention. The change is that we now read every file we discover (alas), bail if it has no 'use client', and parse it if it does (to verify it's actually used as a directive). I've changed to use acorn-loose because it's forgiving of JSX (and likely TypeScript/Flow). Otherwise, this wouldn't work on uncompiled source.

Test plan

Verified I can get our initial Server Components Demo running after this change. Previously, it would get stuck compiling and then emit thousands of errors.

Also confirmed the fixture still works. (It doesn’t work correctly on the first load after dev server starts, but that’s already the case on main so seems unrelated.)

[react-sizebot]

Comparing: 175962c...566e982

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	159.33 kB	159.33 kB	=	50.47 kB	50.47 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	161.07 kB	161.07 kB	=	50.99 kB	50.99 kB
facebook-www/ReactDOM-prod.classic.js	=	546.16 kB	546.16 kB	=	96.84 kB	96.84 kB
facebook-www/ReactDOM-prod.modern.js	=	529.86 kB	529.86 kB	=	94.38 kB	94.38 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+12.93%	4.29 kB	4.85 kB	+14.05%	1.84 kB	2.10 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+12.93%	4.29 kB	4.85 kB	+14.05%	1.84 kB	2.10 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+12.93%	4.29 kB	4.85 kB	+14.05%	1.84 kB	2.10 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+12.93%	4.29 kB	4.85 kB	+14.05%	1.84 kB	2.10 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+12.93%	4.29 kB	4.85 kB	+14.05%	1.84 kB	2.10 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js	+12.93%	4.29 kB	4.85 kB	+14.05%	1.84 kB	2.10 kB

Generated by 🚫 dangerJS against 566e982

[gaearon]

This is copypasta from the Node code we already have.

[gaearon]

I don't love the structure of this but I tried to write similar to the surrounding code.

[davidmccabe]

Looks good!

[Pranav-yadav]

Suggested change

	if (source.indexOf('use client') === -1) {
	return false;
	}
	if (!source.includes('use client')) {
	return false;
	}

Even if it's copypasta :), why not make it more readable at least in this part of the code... WDYT?

[Pranav-yadav]

Click to expand :)

Ik, you also don't like this structure! But, if it needs a refactor; I would be happy to refactor it, just Lmk...

[sebmarkbage]

Seems like this file should already be parsed by Webpack somewhere...

[gaearon]

It’s too early because this is pre-AST. In order to feed into webpack parsing process we’d have to add each file as a dependency — but this gets us back to where we started (we don’t want them all as dependencies cause that would everything everything in the world to the build).