diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 3f798c90cdb86..08b500a221857 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -26,7 +26,7 @@ Examples of unacceptable behavior by participants include:
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
-* Publishing other's private information, such as a physical or electronic
+* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
diff --git a/fixtures/fizz/README.md b/fixtures/fizz/README.md
index 63acd3ddc545d..7cd118b8947ba 100644
--- a/fixtures/fizz/README.md
+++ b/fixtures/fizz/README.md
@@ -1,6 +1,6 @@
# Fizz Fixtures
-A set of basic tests for Fizz primarily focussed on baseline perfomrance of legacy renderToString and streaming implementations.
+A set of basic tests for Fizz primarily focussed on baseline performance of legacy renderToString and streaming implementations.
## Setup
diff --git a/fixtures/flight/.env b/fixtures/flight/.env
deleted file mode 100644
index 7d910f1484c5e..0000000000000
--- a/fixtures/flight/.env
+++ /dev/null
@@ -1 +0,0 @@
-SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/fixtures/flight/config/env.js b/fixtures/flight/config/env.js
index 56ac7fbd0e75e..ce1d7b78f3822 100644
--- a/fixtures/flight/config/env.js
+++ b/fixtures/flight/config/env.js
@@ -86,8 +86,6 @@ function getClientEnvironment(publicUrl) {
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
// Whether or not react-refresh is enabled.
- // react-refresh is not 100% stable at this time,
- // which is why it's disabled by default.
// It is defined here so it is available in the webpackHotDevClient.
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
}
diff --git a/fixtures/flight/config/jest/babelTransform.js b/fixtures/flight/config/jest/babelTransform.js
new file mode 100644
index 0000000000000..5b391e4055620
--- /dev/null
+++ b/fixtures/flight/config/jest/babelTransform.js
@@ -0,0 +1,29 @@
+'use strict';
+
+const babelJest = require('babel-jest').default;
+
+const hasJsxRuntime = (() => {
+ if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+ return false;
+ }
+
+ try {
+ require.resolve('react/jsx-runtime');
+ return true;
+ } catch (e) {
+ return false;
+ }
+})();
+
+module.exports = babelJest.createTransformer({
+ presets: [
+ [
+ require.resolve('babel-preset-react-app'),
+ {
+ runtime: hasJsxRuntime ? 'automatic' : 'classic',
+ },
+ ],
+ ],
+ babelrc: false,
+ configFile: false,
+});
diff --git a/fixtures/flight/config/paths.js b/fixtures/flight/config/paths.js
index 20c5e12018038..01f2dd1fd295b 100644
--- a/fixtures/flight/config/paths.js
+++ b/fixtures/flight/config/paths.js
@@ -21,6 +21,8 @@ const publicUrlOrPath = getPublicUrlOrPath(
process.env.PUBLIC_URL
);
+const buildPath = process.env.BUILD_PATH || 'build';
+
const moduleFileExtensions = [
'web.mjs',
'mjs',
@@ -52,7 +54,7 @@ const resolveModule = (resolveFn, filePath) => {
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
- appBuild: resolveApp('build'),
+ appBuild: resolveApp(buildPath),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
@@ -64,6 +66,8 @@ module.exports = {
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
+ appWebpackCache: resolveApp('node_modules/.cache'),
+ appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
swSrc: resolveModule(resolveApp, 'src/service-worker'),
publicUrlOrPath,
};
diff --git a/fixtures/flight/config/pnpTs.js b/fixtures/flight/config/pnpTs.js
deleted file mode 100644
index 71b9c6c3b07a9..0000000000000
--- a/fixtures/flight/config/pnpTs.js
+++ /dev/null
@@ -1,35 +0,0 @@
-'use strict';
-
-const {resolveModuleName} = require('ts-pnp');
-
-exports.resolveModuleName = (
- typescript,
- moduleName,
- containingFile,
- compilerOptions,
- resolutionHost
-) => {
- return resolveModuleName(
- moduleName,
- containingFile,
- compilerOptions,
- resolutionHost,
- typescript.resolveModuleName
- );
-};
-
-exports.resolveTypeReferenceDirective = (
- typescript,
- moduleName,
- containingFile,
- compilerOptions,
- resolutionHost
-) => {
- return resolveModuleName(
- moduleName,
- containingFile,
- compilerOptions,
- resolutionHost,
- typescript.resolveTypeReferenceDirective
- );
-};
diff --git a/fixtures/flight/config/webpack.config.js b/fixtures/flight/config/webpack.config.js
index abcff50d4d183..05590ff0353ed 100644
--- a/fixtures/flight/config/webpack.config.js
+++ b/fixtures/flight/config/webpack.config.js
@@ -8,18 +8,15 @@ const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const ManifestPlugin = require('webpack-manifest-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const ESLintPlugin = require('eslint-webpack-plugin');
@@ -27,28 +24,37 @@ const paths = require('./paths');
const modules = require('./modules');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const ForkTsCheckerWebpackPlugin =
+ process.env.TSC_COMPILE_ON_ERROR === 'true'
+ ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
+ : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const postcssNormalize = require('postcss-normalize');
-
-const appPackageJson = require(paths.appPackageJson);
+const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-const webpackDevClientEntry = require.resolve(
- 'react-dev-utils/webpackHotDevClient'
+const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
+const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
+ '@pmmmwh/react-refresh-webpack-plugin'
);
-const reactRefreshOverlayEntry = require.resolve(
- 'react-dev-utils/refreshOverlayInterop'
+const babelRuntimeEntry = require.resolve('babel-preset-react-app');
+const babelRuntimeEntryHelpers = require.resolve(
+ '@babel/runtime/helpers/esm/assertThisInitialized',
+ {paths: [babelRuntimeEntry]}
);
+const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
+ paths: [babelRuntimeEntry],
+});
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
+const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
+
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
);
@@ -56,6 +62,11 @@ const imageInlineSizeLimit = parseInt(
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
+// Check if Tailwind config exists
+const useTailwind = fs.existsSync(
+ path.join(paths.appPath, 'tailwind.config.js')
+);
+
// Get the path to the uncompiled service worker (if it exists).
const swSrc = paths.swSrc;
@@ -119,22 +130,42 @@ module.exports = function(webpackEnv) {
// package.json
loader: require.resolve('postcss-loader'),
options: {
- // Necessary for external CSS imports to work
- // https://github.com/facebook/create-react-app/issues/2677
- ident: 'postcss',
- plugins: () => [
- require('postcss-flexbugs-fixes'),
- require('postcss-preset-env')({
- autoprefixer: {
- flexbox: 'no-2009',
- },
- stage: 3,
- }),
- // Adds PostCSS Normalize as the reset css with default options,
- // so that it honors browserslist config in package.json
- // which in turn let's users customize the target behavior as per their needs.
- postcssNormalize(),
- ],
+ postcssOptions: {
+ // Necessary for external CSS imports to work
+ // https://github.com/facebook/create-react-app/issues/2677
+ ident: 'postcss',
+ config: false,
+ plugins: !useTailwind
+ ? [
+ 'postcss-flexbugs-fixes',
+ [
+ 'postcss-preset-env',
+ {
+ autoprefixer: {
+ flexbox: 'no-2009',
+ },
+ stage: 3,
+ },
+ ],
+ // Adds PostCSS Normalize as the reset css with default options,
+ // so that it honors browserslist config in package.json
+ // which in turn let's users customize the target behavior as per their needs.
+ 'postcss-normalize',
+ ]
+ : [
+ 'tailwindcss',
+ 'postcss-flexbugs-fixes',
+ [
+ 'postcss-preset-env',
+ {
+ autoprefixer: {
+ flexbox: 'no-2009',
+ },
+ stage: 3,
+ },
+ ],
+ ],
+ },
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
@@ -160,6 +191,9 @@ module.exports = function(webpackEnv) {
};
return {
+ target: ['browserslist'],
+ // Webpack noise constrained to errors and warnings
+ stats: 'errors-warnings',
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
@@ -170,34 +204,10 @@ module.exports = function(webpackEnv) {
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
- entry:
- isEnvDevelopment && !shouldUseReactRefresh
- ? [
- // Include an alternative client for WebpackDevServer. A client's job is to
- // connect to WebpackDevServer by a socket and get notified about changes.
- // When you save a file, the client will either apply hot updates (in case
- // of CSS changes), or refresh the page (in case of JS changes). When you
- // make a syntax error, this client will display a syntax error overlay.
- // Note: instead of the default WebpackDevServer client, we use a custom one
- // to bring better experience for Create React App users. You can replace
- // the line below with these two lines if you prefer the stock client:
- //
- // require.resolve('webpack-dev-server/client') + '?/',
- // require.resolve('webpack/hot/dev-server'),
- //
- // When using the experimental react-refresh integration,
- // the webpack plugin takes care of injecting the dev client for us.
- webpackDevClientEntry,
- // Finally, this is your app's code:
- paths.appIndexJs,
- // We include the app code last so that if there is a runtime error during
- // initialization, it doesn't blow up the WebpackDevServer client, and
- // changing JS code would still trigger a refresh.
- ]
- : paths.appIndexJs,
+ entry: paths.appIndexJs,
output: {
// The build folder.
- path: isEnvProduction ? paths.appBuild : undefined,
+ path: paths.appBuild,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
@@ -205,12 +215,11 @@ module.exports = function(webpackEnv) {
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
- // TODO: remove this when upgrading to webpack 5
- futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
+ assetModuleFilename: 'static/media/[name].[hash][ext]',
// webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// We inferred the "public path" (such as / or /my-project) from homepage.
@@ -223,12 +232,22 @@ module.exports = function(webpackEnv) {
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
- // Prevents conflicts when multiple webpack runtimes (from different apps)
- // are used on the same page.
- jsonpFunction: `webpackJsonp${appPackageJson.name}`,
- // this defaults to 'window', but by setting it to 'this' then
- // module chunks which are built will work in web workers as well.
- globalObject: 'this',
+ },
+ cache: {
+ type: 'filesystem',
+ version: createEnvironmentHash(env.raw),
+ cacheDirectory: paths.appWebpackCache,
+ store: 'pack',
+ buildDependencies: {
+ defaultWebpack: ['webpack/lib/'],
+ config: [__filename],
+ tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
+ fs.existsSync(f)
+ ),
+ },
+ },
+ infrastructureLogging: {
+ level: 'none',
},
optimization: {
minimize: isEnvProduction,
@@ -272,41 +291,10 @@ module.exports = function(webpackEnv) {
ascii_only: true,
},
},
- sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
- new OptimizeCSSAssetsPlugin({
- cssProcessorOptions: {
- parser: safePostCssParser,
- map: shouldUseSourceMap
- ? {
- // `inline: false` forces the sourcemap to be output into a
- // separate file
- inline: false,
- // `annotation: true` appends the sourceMappingURL to the end of
- // the css file, helping the browser find the sourcemap
- annotation: true,
- }
- : false,
- },
- cssProcessorPluginOptions: {
- preset: ['default', {minifyFontValues: {removeQuotes: false}}],
- },
- }),
+ new CssMinimizerPlugin(),
],
- // Automatically split vendor and commons
- // https://twitter.com/wSokra/status/969633336732905474
- // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
- splitChunks: {
- chunks: 'all',
- name: false,
- },
- // Keep the runtime chunk separated to enable long term caching
- // https://twitter.com/wSokra/status/969679223278505985
- // https://github.com/facebook/create-react-app/issues/5358
- runtimeChunk: {
- name: entrypoint => `runtime-${entrypoint.name}`,
- },
},
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
@@ -337,9 +325,6 @@ module.exports = function(webpackEnv) {
...(modules.webpackAliases || {}),
},
plugins: [
- // Adds support for installing with Plug'n'Play, leading to faster installs and adding
- // guards against forgotten dependencies and such.
- PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
@@ -347,22 +332,24 @@ module.exports = function(webpackEnv) {
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [
paths.appPackageJson,
- reactRefreshOverlayEntry,
+ reactRefreshRuntimeEntry,
+ reactRefreshWebpackPluginRuntimeEntry,
+ babelRuntimeEntry,
+ babelRuntimeEntryHelpers,
+ babelRuntimeRegenerator,
]),
],
},
- resolveLoader: {
- plugins: [
- // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
- // from the current package.
- PnpWebpackPlugin.moduleLoader(module),
- ],
- },
module: {
strictExportPresence: true,
rules: [
- // Disable require.ensure as it's not a standard language feature.
- {parser: {requireEnsure: false}},
+ // Handle node_modules packages that contain sourcemaps
+ shouldUseSourceMap && {
+ enforce: 'pre',
+ exclude: /@babel(?:\/|\\{1,2})runtime/,
+ test: /\.(js|mjs|jsx|ts|tsx|css)$/,
+ loader: require.resolve('source-map-loader'),
+ },
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
@@ -372,11 +359,12 @@ module.exports = function(webpackEnv) {
// https://github.com/jshttp/mime-db
{
test: [/\.avif$/],
- loader: require.resolve('url-loader'),
- options: {
- limit: imageInlineSizeLimit,
- mimetype: 'image/avif',
- name: 'static/media/[name].[hash:8].[ext]',
+ type: 'asset',
+ mimetype: 'image/avif',
+ parser: {
+ dataUrlCondition: {
+ maxSize: imageInlineSizeLimit,
+ },
},
},
// "url" loader works like "file" loader except that it embeds assets
@@ -384,10 +372,37 @@ module.exports = function(webpackEnv) {
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
- loader: require.resolve('url-loader'),
- options: {
- limit: imageInlineSizeLimit,
- name: 'static/media/[name].[hash:8].[ext]',
+ type: 'asset',
+ parser: {
+ dataUrlCondition: {
+ maxSize: imageInlineSizeLimit,
+ },
+ },
+ },
+ {
+ test: /\.svg$/,
+ use: [
+ {
+ loader: require.resolve('@svgr/webpack'),
+ options: {
+ prettier: false,
+ svgo: false,
+ svgoConfig: {
+ plugins: [{removeViewBox: false}],
+ },
+ titleProp: true,
+ ref: true,
+ },
+ },
+ {
+ loader: require.resolve('file-loader'),
+ options: {
+ name: 'static/media/[name].[hash].[ext]',
+ },
+ },
+ ],
+ issuer: {
+ and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
},
},
// Process application JS with Babel.
@@ -410,17 +425,6 @@ module.exports = function(webpackEnv) {
],
plugins: [
- [
- require.resolve('babel-plugin-named-asset-import'),
- {
- loaderMap: {
- svg: {
- ReactComponent:
- '@svgr/webpack?-svgo,+titleProp,+ref![path]',
- },
- },
- },
- ],
isEnvDevelopment &&
shouldUseReactRefresh &&
require.resolve('react-refresh/babel'),
@@ -476,6 +480,9 @@ module.exports = function(webpackEnv) {
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
+ modules: {
+ mode: 'icss',
+ },
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
@@ -493,6 +500,7 @@ module.exports = function(webpackEnv) {
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
+ mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
}),
@@ -509,6 +517,9 @@ module.exports = function(webpackEnv) {
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
+ modules: {
+ mode: 'icss',
+ },
},
'sass-loader'
),
@@ -529,6 +540,7 @@ module.exports = function(webpackEnv) {
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
+ mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
@@ -541,21 +553,18 @@ module.exports = function(webpackEnv) {
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
- loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
- exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
- options: {
- name: 'static/media/[name].[hash:8].[ext]',
- },
+ exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+ type: 'asset/resource',
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
- ],
+ ].filter(Boolean),
},
plugins: [
// Generates an `index.html` file with the ',
+ '',
+ '',
+ '',
+ '',
+ '',
+ ]);
+ });
+
describe('bootstrapScriptContent escaping', () => {
it('the "S" in " {
window.__test_outlet = '';
@@ -4194,6 +4275,380 @@ describe('ReactDOMFizzServer', () => {
);
});
+ // @gate enableFloat
+ it('emits html and head start tags (the preamble) before other content if rendered in the shell', async () => {
+ await actIntoEmptyDocument(() => {
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+ <>
+ a title
+
+
+