[Flight Fixture] Show SSR Support with CSS (#26263)

Builds on #26257.

To do this we need access to a manifest for which scripts and CSS are
used for each "page" (entrypoint).

The initial script to bootstrap the app is inserted with
`bootstrapScripts`. Subsequent content are loaded using the chunks
mechanism built-in.

The stylesheets for each pages are prepended to each RSC payload and
rendered using Float. This doesn't yet support styles imported in
components that are also SSR:ed nor imported through Server Components.
That's more complex and not implemented in the node loader.

HMR doesn't work after reloads right now because the SSR renderer isn't
hot reloaded because there's no idiomatic way to hot reload ESM modules
in Node.js yet. Without killing the HMR server. This leads to hydration
mismatches when reloading the page after a hot reload.

Notably this doesn't show serializing the stream through the HTML like
real implementations do. This will lead to possible hydration mismatches
based on the data. However, manually serializing the stream as a string
isn't exactly correct due to binary data. It's not the idiomatic way
this is supposed to work. This will all be built-in which will make this
automatic in the future.

DiffTrain build for [67a61d5bd7](https://github.com/facebook/react/commit/67a61d5bd7f731f5eb37d148dfc4ae0515a8c934)
This commit is contained in:
sebmarkbage
2023-03-01 00:49:41 +00:00
parent d23a4f28d1
commit f091225e5c
28 changed files with 42 additions and 42 deletions
+1 -1
View File
@@ -1 +1 @@
40755c01a68de4b44bc24cca7f03a46140f31d5e
67a61d5bd7f731f5eb37d148dfc4ae0515a8c934
+1 -1
View File
@@ -1 +1 @@
40755c01a68de4b44bc24cca7f03a46140f31d5e
67a61d5bd7f731f5eb37d148dfc4ae0515a8c934
+1 -1
View File
@@ -27,7 +27,7 @@ if (
}
"use strict";
var ReactVersion = "18.3.0-www-classic-40755c01a-20230228";
var ReactVersion = "18.3.0-www-classic-67a61d5bd-20230228";
// ATTENTION
// When adding new symbols to this file,
+1 -1
View File
@@ -27,7 +27,7 @@ if (
}
"use strict";
var ReactVersion = "18.3.0-www-modern-40755c01a-20230228";
var ReactVersion = "18.3.0-www-modern-67a61d5bd-20230228";
// ATTENTION
// When adding new symbols to this file,
+1 -1
View File
@@ -646,4 +646,4 @@ exports.useSyncExternalStore = function (
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-www-classic-40755c01a-20230228";
exports.version = "18.3.0-www-classic-67a61d5bd-20230228";
+1 -1
View File
@@ -638,4 +638,4 @@ exports.useSyncExternalStore = function (
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-www-modern-40755c01a-20230228";
exports.version = "18.3.0-www-modern-67a61d5bd-20230228";
@@ -657,7 +657,7 @@ exports.useSyncExternalStore = function (
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-www-classic-40755c01a-20230228";
exports.version = "18.3.0-www-classic-67a61d5bd-20230228";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -649,7 +649,7 @@ exports.useSyncExternalStore = function (
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-www-modern-40755c01a-20230228";
exports.version = "18.3.0-www-modern-67a61d5bd-20230228";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
return self;
}
var ReactVersion = "18.3.0-www-classic-40755c01a-20230228";
var ReactVersion = "18.3.0-www-classic-67a61d5bd-20230228";
var LegacyRoot = 0;
var ConcurrentRoot = 1;
+1 -1
View File
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
return self;
}
var ReactVersion = "18.3.0-www-modern-40755c01a-20230228";
var ReactVersion = "18.3.0-www-modern-67a61d5bd-20230228";
var LegacyRoot = 0;
var ConcurrentRoot = 1;
@@ -9780,7 +9780,7 @@ var slice = Array.prototype.slice,
return null;
},
bundleType: 0,
version: "18.3.0-www-classic-40755c01a-20230228",
version: "18.3.0-www-classic-67a61d5bd-20230228",
rendererPackageName: "react-art"
};
var internals$jscomp$inline_1300 = {
@@ -9811,7 +9811,7 @@ var internals$jscomp$inline_1300 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-40755c01a-20230228"
reconcilerVersion: "18.3.0-next-67a61d5bd-20230228"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1301 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -9445,7 +9445,7 @@ var slice = Array.prototype.slice,
return null;
},
bundleType: 0,
version: "18.3.0-www-modern-40755c01a-20230228",
version: "18.3.0-www-modern-67a61d5bd-20230228",
rendererPackageName: "react-art"
};
var internals$jscomp$inline_1280 = {
@@ -9476,7 +9476,7 @@ var internals$jscomp$inline_1280 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-40755c01a-20230228"
reconcilerVersion: "18.3.0-next-67a61d5bd-20230228"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1281 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -42099,7 +42099,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-classic-40755c01a-20230228";
var ReactVersion = "18.3.0-www-classic-67a61d5bd-20230228";
function createPortal$1(
children,
+1 -1
View File
@@ -41703,7 +41703,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-40755c01a-20230228";
var ReactVersion = "18.3.0-www-modern-67a61d5bd-20230228";
function createPortal$1(
children,
@@ -15490,7 +15490,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1741 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-classic-40755c01a-20230228",
version: "18.3.0-www-classic-67a61d5bd-20230228",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2108 = {
@@ -15520,7 +15520,7 @@ var internals$jscomp$inline_2108 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-40755c01a-20230228"
reconcilerVersion: "18.3.0-next-67a61d5bd-20230228"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2109 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15776,4 +15776,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
);
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-40755c01a-20230228";
exports.version = "18.3.0-next-67a61d5bd-20230228";
@@ -15019,7 +15019,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1700 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-40755c01a-20230228",
version: "18.3.0-www-modern-67a61d5bd-20230228",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2072 = {
@@ -15050,7 +15050,7 @@ var internals$jscomp$inline_2072 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-40755c01a-20230228"
reconcilerVersion: "18.3.0-next-67a61d5bd-20230228"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2073 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15235,4 +15235,4 @@ exports.unstable_flushControlled = function (fn) {
}
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-40755c01a-20230228";
exports.version = "18.3.0-next-67a61d5bd-20230228";
@@ -16260,7 +16260,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1821 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-classic-40755c01a-20230228",
version: "18.3.0-www-classic-67a61d5bd-20230228",
rendererPackageName: "react-dom"
};
(function (internals) {
@@ -16304,7 +16304,7 @@ var devToolsConfig$jscomp$inline_1821 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-40755c01a-20230228"
reconcilerVersion: "18.3.0-next-67a61d5bd-20230228"
});
assign(Internals, {
ReactBrowserEventEmitter: {
@@ -16547,7 +16547,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
);
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-40755c01a-20230228";
exports.version = "18.3.0-next-67a61d5bd-20230228";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -15779,7 +15779,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1780 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-40755c01a-20230228",
version: "18.3.0-www-modern-67a61d5bd-20230228",
rendererPackageName: "react-dom"
};
(function (internals) {
@@ -15824,7 +15824,7 @@ var devToolsConfig$jscomp$inline_1780 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-40755c01a-20230228"
reconcilerVersion: "18.3.0-next-67a61d5bd-20230228"
});
exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
exports.createPortal = function (children, container) {
@@ -15996,7 +15996,7 @@ exports.unstable_flushControlled = function (fn) {
}
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-40755c01a-20230228";
exports.version = "18.3.0-next-67a61d5bd-20230228";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");
var ReactVersion = "18.3.0-www-classic-40755c01a-20230228";
var ReactVersion = "18.3.0-www-classic-67a61d5bd-20230228";
// This refers to a WWW module.
var warningWWW = require("warning");
@@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");
var ReactVersion = "18.3.0-www-modern-40755c01a-20230228";
var ReactVersion = "18.3.0-www-modern-67a61d5bd-20230228";
// This refers to a WWW module.
var warningWWW = require("warning");
@@ -3721,4 +3721,4 @@ exports.renderToString = function (children, options) {
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
);
};
exports.version = "18.3.0-www-classic-40755c01a-20230228";
exports.version = "18.3.0-www-classic-67a61d5bd-20230228";
@@ -3619,4 +3619,4 @@ exports.renderToString = function (children, options) {
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
);
};
exports.version = "18.3.0-www-modern-40755c01a-20230228";
exports.version = "18.3.0-www-modern-67a61d5bd-20230228";
@@ -31237,7 +31237,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-classic-40755c01a-20230228";
var ReactVersion = "18.3.0-www-classic-67a61d5bd-20230228";
function createPortal$1(
children,
@@ -37728,7 +37728,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-40755c01a-20230228";
var ReactVersion = "18.3.0-www-modern-67a61d5bd-20230228";
function createPortal$1(
children,
@@ -11521,7 +11521,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1535 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-classic-40755c01a-20230228",
version: "18.3.0-www-classic-67a61d5bd-20230228",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2058 = {
@@ -11551,7 +11551,7 @@ var internals$jscomp$inline_2058 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-40755c01a-20230228"
reconcilerVersion: "18.3.0-next-67a61d5bd-20230228"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2059 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -14782,4 +14782,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
);
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-40755c01a-20230228";
exports.version = "18.3.0-next-67a61d5bd-20230228";
@@ -13881,7 +13881,7 @@ Internals.Events = [
var devToolsConfig$jscomp$inline_1652 = {
findFiberByHostInstance: getClosestInstanceFromNode,
bundleType: 0,
version: "18.3.0-www-modern-40755c01a-20230228",
version: "18.3.0-www-modern-67a61d5bd-20230228",
rendererPackageName: "react-dom"
};
var internals$jscomp$inline_2032 = {
@@ -13912,7 +13912,7 @@ var internals$jscomp$inline_2032 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-40755c01a-20230228"
reconcilerVersion: "18.3.0-next-67a61d5bd-20230228"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_2033 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -14240,4 +14240,4 @@ exports.unstable_flushControlled = function (fn) {
}
};
exports.unstable_runWithPriority = runWithPriority;
exports.version = "18.3.0-next-40755c01a-20230228";
exports.version = "18.3.0-next-67a61d5bd-20230228";
@@ -23753,7 +23753,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-classic-40755c01a-20230228";
var ReactVersion = "18.3.0-www-classic-67a61d5bd-20230228";
// Might add PROFILE later.
@@ -23753,7 +23753,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-www-modern-40755c01a-20230228";
var ReactVersion = "18.3.0-www-modern-67a61d5bd-20230228";
// Might add PROFILE later.