[Flight Plugin] Scan for "use client" (#26474)

## 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.)

DiffTrain build for commit https://github.com/facebook/react/commit/1308e49a6923d0dfd935dcd12cc420ec57239981.
This commit is contained in:
gaearon
2023-03-30 22:19:41 +00:00
parent 8f8c5a67a1
commit c759247af2
13 changed files with 19 additions and 19 deletions
@@ -23755,7 +23755,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-next-1a1d61fed-20230330";
var ReactVersion = "18.3.0-next-1308e49a6-20230330";
// Might add PROFILE later.
@@ -8640,7 +8640,7 @@ var devToolsConfig$jscomp$inline_1007 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-next-1a1d61fed-20230330",
version: "18.3.0-next-1308e49a6-20230330",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1198 = {
@@ -8671,7 +8671,7 @@ var internals$jscomp$inline_1198 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-1a1d61fed-20230330"
reconcilerVersion: "18.3.0-next-1308e49a6-20230330"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1199 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -9065,7 +9065,7 @@ var devToolsConfig$jscomp$inline_1050 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-next-1a1d61fed-20230330",
version: "18.3.0-next-1308e49a6-20230330",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1239 = {
@@ -9096,7 +9096,7 @@ var internals$jscomp$inline_1239 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-1a1d61fed-20230330"
reconcilerVersion: "18.3.0-next-1308e49a6-20230330"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1240 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -27,7 +27,7 @@ if (
}
"use strict";
var ReactVersion = "18.3.0-next-1a1d61fed-20230330";
var ReactVersion = "18.3.0-next-1308e49a6-20230330";
// ATTENTION
// When adding new symbols to this file,
@@ -639,4 +639,4 @@ exports.useSyncExternalStore = function (
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-next-1a1d61fed-20230330";
exports.version = "18.3.0-next-1308e49a6-20230330";
@@ -642,7 +642,7 @@ exports.useSyncExternalStore = function (
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-next-1a1d61fed-20230330";
exports.version = "18.3.0-next-1308e49a6-20230330";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -1 +1 @@
1a1d61fed98a02c9b1bac029d0bc11c3e4db896d
1308e49a6923d0dfd935dcd12cc420ec57239981
@@ -27021,7 +27021,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-next-1a1d61fed-20230330";
var ReactVersion = "18.3.0-next-1308e49a6-20230330";
function createPortal$1(
children,
@@ -9507,7 +9507,7 @@ var roots = new Map(),
devToolsConfig$jscomp$inline_1027 = {
findFiberByHostInstance: getInstanceFromNode,
bundleType: 0,
version: "18.3.0-next-1a1d61fed-20230330",
version: "18.3.0-next-1308e49a6-20230330",
rendererPackageName: "react-native-renderer",
rendererConfig: {
getInspectorDataForViewTag: function () {
@@ -9549,7 +9549,7 @@ var internals$jscomp$inline_1273 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-1a1d61fed-20230330"
reconcilerVersion: "18.3.0-next-1308e49a6-20230330"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1274 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -10215,7 +10215,7 @@ var roots = new Map(),
devToolsConfig$jscomp$inline_1106 = {
findFiberByHostInstance: getInstanceFromNode,
bundleType: 0,
version: "18.3.0-next-1a1d61fed-20230330",
version: "18.3.0-next-1308e49a6-20230330",
rendererPackageName: "react-native-renderer",
rendererConfig: {
getInspectorDataForViewTag: function () {
@@ -10270,7 +10270,7 @@ var roots = new Map(),
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-1a1d61fed-20230330"
reconcilerVersion: "18.3.0-next-1308e49a6-20230330"
});
exports.createPortal = function (children, containerTag) {
return createPortal$1(
@@ -27561,7 +27561,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-next-1a1d61fed-20230330";
var ReactVersion = "18.3.0-next-1308e49a6-20230330";
function createPortal$1(
children,
@@ -9763,7 +9763,7 @@ var roots = new Map(),
devToolsConfig$jscomp$inline_1086 = {
findFiberByHostInstance: getInstanceFromTag,
bundleType: 0,
version: "18.3.0-next-1a1d61fed-20230330",
version: "18.3.0-next-1308e49a6-20230330",
rendererPackageName: "react-native-renderer",
rendererConfig: {
getInspectorDataForViewTag: function () {
@@ -9805,7 +9805,7 @@ var internals$jscomp$inline_1339 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-1a1d61fed-20230330"
reconcilerVersion: "18.3.0-next-1308e49a6-20230330"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1340 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -10471,7 +10471,7 @@ var roots = new Map(),
devToolsConfig$jscomp$inline_1165 = {
findFiberByHostInstance: getInstanceFromTag,
bundleType: 0,
version: "18.3.0-next-1a1d61fed-20230330",
version: "18.3.0-next-1308e49a6-20230330",
rendererPackageName: "react-native-renderer",
rendererConfig: {
getInspectorDataForViewTag: function () {
@@ -10526,7 +10526,7 @@ var roots = new Map(),
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-1a1d61fed-20230330"
reconcilerVersion: "18.3.0-next-1308e49a6-20230330"
});
exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
computeComponentStackForErrorReporting: function (reactTag) {