From 310452e4fb6c4be051e99da959b78ff87c7227cc Mon Sep 17 00:00:00 2001 From: Riley Brown Date: Fri, 31 Jan 2025 15:02:04 -0700 Subject: [PATCH 01/14] Add REACT_APP_INJECT_STYLES to allow injecting generated styles into window variable --- packages/react-scripts/config/webpack.config.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index b2ceb275d2e..6bb8d70f84e 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -140,7 +140,16 @@ module.exports = function (webpackEnv) { // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ - isEnvDevelopment && require.resolve('style-loader'), + isEnvDevelopment && { + loader: require.resolve('style-loader'), + options: process.env.REACT_APP_INJECT_STYLES ? { + injectType: 'singletonStyleTag', + insert: function addToWindowObject(element) { + const _window = typeof window !== 'undefined' ? window : {} + _window[process.env.REACT_APP_INJECT_STYLES] = element + } + } : {}, + }, isEnvProduction && { loader: MiniCssExtractPlugin.loader, // css is located in `static/css`, use '../../' to locate index.html folder From 8040ec91b2c989b8cfd688add13fa336a8476b3c Mon Sep 17 00:00:00 2001 From: Riley Brown Date: Wed, 26 Feb 2025 15:30:59 -0700 Subject: [PATCH 02/14] Add script injection from manifest entrypoints --- .../config/InjectEntrypointsPlugin.js | 28 +++++++++++++++++++ .../react-scripts/config/webpack.config.js | 8 ++++++ 2 files changed, 36 insertions(+) create mode 100644 packages/react-scripts/config/InjectEntrypointsPlugin.js diff --git a/packages/react-scripts/config/InjectEntrypointsPlugin.js b/packages/react-scripts/config/InjectEntrypointsPlugin.js new file mode 100644 index 00000000000..05306065e02 --- /dev/null +++ b/packages/react-scripts/config/InjectEntrypointsPlugin.js @@ -0,0 +1,28 @@ +'use strict'; +const { getCompilerHooks } = require('webpack-manifest-plugin'); +const fs = require('fs'); +const path = require('path'); + +class InjectEntrypointsPlugin { + constructor(options) { + this.options = options; + } + + apply(compiler) { + const {afterEmit} = getCompilerHooks(compiler) + + afterEmit.tap('InjectEntrypointsPlugin', (manifest) => { + const outputPath = path.join( + compiler.options.context, + this.options.outputFile + ); + + fs.writeFileSync(outputPath, + JSON.stringify( + manifest.entrypoints.map((entry) => this.options.outputPath + entry)), + 'utf8'); + }) + } +} + +module.exports = InjectEntrypointsPlugin; diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 6bb8d70f84e..021746d6777 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -60,6 +60,7 @@ console.log(`In webpack.config from @fs/react-scripts version ${reactScriptsVers const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier') // @remove-on-eject-end const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash') +const InjectEntrypointsPlugin = require('./InjectEntrypointsPlugin.js') // Source maps are resource heavy and can cause out of memory issue for large source files. const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false' @@ -139,6 +140,7 @@ module.exports = function (webpackEnv) { // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { + // todo handle inject styles for prod const loaders = [ isEnvDevelopment && { loader: require.resolve('style-loader'), @@ -771,6 +773,12 @@ module.exports = function (webpackEnv) { } }, }), + // Inject the manifest entrypoint file names into the outputFile + process.env.REACT_APP_INJECT_SCRIPTS == 'true' && + new InjectEntrypointsPlugin({ + outputPath: paths.publicUrlOrPath, + outputFile: 'hf-inj-react-scripts.js', + }), // Moment.js is an extremely popular library that bundles large locale files // by default due to how webpack interprets its code. This is a practical // solution that requires the user to opt into importing specific locales. From 07e8cd0ccdc62ddf340300cd57c6f44f700c4547 Mon Sep 17 00:00:00 2001 From: Riley Brown Date: Wed, 26 Feb 2025 16:28:22 -0700 Subject: [PATCH 03/14] Updating style injection for prod --- packages/react-scripts/config/webpack.config.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 021746d6777..2ba9ec21232 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -140,9 +140,8 @@ module.exports = function (webpackEnv) { // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { - // todo handle inject styles for prod const loaders = [ - isEnvDevelopment && { + (isEnvDevelopment || process.env.REACT_APP_INJECT_STYLES) && { loader: require.resolve('style-loader'), options: process.env.REACT_APP_INJECT_STYLES ? { injectType: 'singletonStyleTag', @@ -152,7 +151,7 @@ module.exports = function (webpackEnv) { } } : {}, }, - isEnvProduction && { + (isEnvProduction && !process.env.REACT_APP_INJECT_STYLES) && { loader: MiniCssExtractPlugin.loader, // css is located in `static/css`, use '../../' to locate index.html folder // in production `paths.publicUrlOrPath` can be a relative path @@ -742,7 +741,7 @@ module.exports = function (webpackEnv) { // a plugin that prints an error when you attempt to do this. // See https://github.com/facebook/create-react-app/issues/240 isEnvDevelopment && new CaseSensitivePathsPlugin(), - isEnvProduction && + (isEnvProduction && !process.env.REACT_APP_INJECT_STYLES) && new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional From 7c5b438f556883c8b74f3f9b45a58b7c557758dc Mon Sep 17 00:00:00 2001 From: Riley Brown Date: Thu, 27 Feb 2025 08:04:07 -0700 Subject: [PATCH 04/14] version bump --- CHANGELOG-FRONTIER.md | 4 ++++ packages/react-scripts/package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG-FRONTIER.md b/CHANGELOG-FRONTIER.md index 10f3d90e78b..51904f4dd44 100644 --- a/CHANGELOG-FRONTIER.md +++ b/CHANGELOG-FRONTIER.md @@ -1,3 +1,7 @@ +## 8.8.5 + +- Add options for injecting scripts and styles (for hf-inj-react) + ## 8.8.3 - Add photos/apiHelper endpoint to proxy list diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index af3c513366c..48872693b27 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "@fs/react-scripts", - "version": "8.8.4", + "version": "8.8.5", "upstreamVersion": "5.0.1", "description": "Configuration and scripts for Create React App.", "repository": { From fb2ca1378422fdf2c4d3546d85256bb72b1a5e6b Mon Sep 17 00:00:00 2001 From: Riley Date: Thu, 27 Feb 2025 10:17:16 -0700 Subject: [PATCH 05/14] Update packages/react-scripts/config/webpack.config.js Co-authored-by: Joey Cozza --- packages/react-scripts/config/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 2ba9ec21232..a17974330b2 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -143,7 +143,7 @@ module.exports = function (webpackEnv) { const loaders = [ (isEnvDevelopment || process.env.REACT_APP_INJECT_STYLES) && { loader: require.resolve('style-loader'), - options: process.env.REACT_APP_INJECT_STYLES ? { + options: process.env.REACT_APP_INJECT_STYLES === 'true' ? { injectType: 'singletonStyleTag', insert: function addToWindowObject(element) { const _window = typeof window !== 'undefined' ? window : {} From 87f698c3dead579e7fa0c9ca272579242c07621d Mon Sep 17 00:00:00 2001 From: Riley Date: Thu, 27 Feb 2025 10:17:29 -0700 Subject: [PATCH 06/14] Update packages/react-scripts/package.json Co-authored-by: Joey Cozza --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 48872693b27..6104b8ff64a 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "@fs/react-scripts", - "version": "8.8.5", + "version": "8.6.0", "upstreamVersion": "5.0.1", "description": "Configuration and scripts for Create React App.", "repository": { From 11de6895dfa9b06ea3b7435bc941934488ede8be Mon Sep 17 00:00:00 2001 From: Riley Date: Thu, 27 Feb 2025 10:17:37 -0700 Subject: [PATCH 07/14] Update packages/react-scripts/config/webpack.config.js Co-authored-by: Joey Cozza --- packages/react-scripts/config/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index a17974330b2..f32a9d2b412 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -141,7 +141,7 @@ module.exports = function (webpackEnv) { // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ - (isEnvDevelopment || process.env.REACT_APP_INJECT_STYLES) && { + (isEnvDevelopment || process.env.REACT_APP_INJECT_STYLES === 'true') && { loader: require.resolve('style-loader'), options: process.env.REACT_APP_INJECT_STYLES === 'true' ? { injectType: 'singletonStyleTag', From 6bfc452e3b13470441cadb28da34f6a830c02626 Mon Sep 17 00:00:00 2001 From: Riley Date: Thu, 27 Feb 2025 10:18:55 -0700 Subject: [PATCH 08/14] Update packages/react-scripts/config/webpack.config.js Co-authored-by: Joey Cozza --- packages/react-scripts/config/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index f32a9d2b412..cc3649af02b 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -773,7 +773,7 @@ module.exports = function (webpackEnv) { }, }), // Inject the manifest entrypoint file names into the outputFile - process.env.REACT_APP_INJECT_SCRIPTS == 'true' && + process.env.REACT_APP_INJECT_SCRIPTS === 'true' && new InjectEntrypointsPlugin({ outputPath: paths.publicUrlOrPath, outputFile: 'hf-inj-react-scripts.js', From 39f2d7409f118edb596d8b0ddca1adff053e3e62 Mon Sep 17 00:00:00 2001 From: Riley Date: Thu, 27 Feb 2025 10:19:05 -0700 Subject: [PATCH 09/14] Update packages/react-scripts/config/webpack.config.js Co-authored-by: Joey Cozza --- packages/react-scripts/config/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index cc3649af02b..3db846c7783 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -741,7 +741,7 @@ module.exports = function (webpackEnv) { // a plugin that prints an error when you attempt to do this. // See https://github.com/facebook/create-react-app/issues/240 isEnvDevelopment && new CaseSensitivePathsPlugin(), - (isEnvProduction && !process.env.REACT_APP_INJECT_STYLES) && + (isEnvProduction && process.env.REACT_APP_INJECT_STYLES !== 'true') && new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional From 2825ca5268810a3bea5ecf39df11a44ba0794669 Mon Sep 17 00:00:00 2001 From: Riley Brown Date: Thu, 27 Feb 2025 10:34:52 -0700 Subject: [PATCH 10/14] version change --- CHANGELOG-FRONTIER.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG-FRONTIER.md b/CHANGELOG-FRONTIER.md index 51904f4dd44..b81ca34f910 100644 --- a/CHANGELOG-FRONTIER.md +++ b/CHANGELOG-FRONTIER.md @@ -1,4 +1,4 @@ -## 8.8.5 +## 8.6.0 - Add options for injecting scripts and styles (for hf-inj-react) From 2f4cdd5a09256f392c34a6c72987673188b9684b Mon Sep 17 00:00:00 2001 From: Riley Brown Date: Thu, 27 Feb 2025 12:02:15 -0700 Subject: [PATCH 11/14] fix version bump --- CHANGELOG-FRONTIER.md | 2 +- packages/react-scripts/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG-FRONTIER.md b/CHANGELOG-FRONTIER.md index b81ca34f910..19d7d796887 100644 --- a/CHANGELOG-FRONTIER.md +++ b/CHANGELOG-FRONTIER.md @@ -1,4 +1,4 @@ -## 8.6.0 +## 8.9.0 - Add options for injecting scripts and styles (for hf-inj-react) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 6104b8ff64a..c2bf1807f94 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "@fs/react-scripts", - "version": "8.6.0", + "version": "8.9.0", "upstreamVersion": "5.0.1", "description": "Configuration and scripts for Create React App.", "repository": { From f242bd09ec3f329365f538c5f8328258e3ba8e60 Mon Sep 17 00:00:00 2001 From: Riley Brown Date: Fri, 28 Feb 2025 13:51:04 -0700 Subject: [PATCH 12/14] Simplify env vars; fix plugin variable names --- .../react-scripts/config/InjectEntrypointsPlugin.js | 3 ++- packages/react-scripts/config/webpack.config.js | 13 ++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-scripts/config/InjectEntrypointsPlugin.js b/packages/react-scripts/config/InjectEntrypointsPlugin.js index 05306065e02..000e8e9feac 100644 --- a/packages/react-scripts/config/InjectEntrypointsPlugin.js +++ b/packages/react-scripts/config/InjectEntrypointsPlugin.js @@ -2,6 +2,7 @@ const { getCompilerHooks } = require('webpack-manifest-plugin'); const fs = require('fs'); const path = require('path'); +const paths = require('./paths') class InjectEntrypointsPlugin { constructor(options) { @@ -19,7 +20,7 @@ class InjectEntrypointsPlugin { fs.writeFileSync(outputPath, JSON.stringify( - manifest.entrypoints.map((entry) => this.options.outputPath + entry)), + manifest.entrypoints.map((entry) => paths.publicUrlOrPath + entry)), 'utf8'); }) } diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 3db846c7783..37f4e94277b 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -141,17 +141,17 @@ module.exports = function (webpackEnv) { // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ - (isEnvDevelopment || process.env.REACT_APP_INJECT_STYLES === 'true') && { + (isEnvDevelopment || process.env.INJECT_STYLES === 'true') && { loader: require.resolve('style-loader'), - options: process.env.REACT_APP_INJECT_STYLES === 'true' ? { + options: process.env.INJECT_STYLES === 'true' ? { injectType: 'singletonStyleTag', insert: function addToWindowObject(element) { const _window = typeof window !== 'undefined' ? window : {} - _window[process.env.REACT_APP_INJECT_STYLES] = element + _window['hfBundleStyles'] = element } } : {}, }, - (isEnvProduction && !process.env.REACT_APP_INJECT_STYLES) && { + (isEnvProduction && !process.env.INJECT_STYLES) && { loader: MiniCssExtractPlugin.loader, // css is located in `static/css`, use '../../' to locate index.html folder // in production `paths.publicUrlOrPath` can be a relative path @@ -741,7 +741,7 @@ module.exports = function (webpackEnv) { // a plugin that prints an error when you attempt to do this. // See https://github.com/facebook/create-react-app/issues/240 isEnvDevelopment && new CaseSensitivePathsPlugin(), - (isEnvProduction && process.env.REACT_APP_INJECT_STYLES !== 'true') && + (isEnvProduction && process.env.INJECT_STYLES !== 'true') && new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional @@ -773,9 +773,8 @@ module.exports = function (webpackEnv) { }, }), // Inject the manifest entrypoint file names into the outputFile - process.env.REACT_APP_INJECT_SCRIPTS === 'true' && + process.env.INJECT_SCRIPTS === 'true' && new InjectEntrypointsPlugin({ - outputPath: paths.publicUrlOrPath, outputFile: 'hf-inj-react-scripts.js', }), // Moment.js is an extremely popular library that bundles large locale files From 5a9e6e795cf5c9e7ef78c510284859d58a5858f3 Mon Sep 17 00:00:00 2001 From: Riley Brown Date: Tue, 11 Mar 2025 09:05:17 -0600 Subject: [PATCH 13/14] Change hf scripts output to json file --- packages/react-scripts/config/InjectEntrypointsPlugin.js | 2 +- packages/react-scripts/config/webpack.config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/InjectEntrypointsPlugin.js b/packages/react-scripts/config/InjectEntrypointsPlugin.js index 000e8e9feac..5e98646b2e6 100644 --- a/packages/react-scripts/config/InjectEntrypointsPlugin.js +++ b/packages/react-scripts/config/InjectEntrypointsPlugin.js @@ -2,7 +2,7 @@ const { getCompilerHooks } = require('webpack-manifest-plugin'); const fs = require('fs'); const path = require('path'); -const paths = require('./paths') +const paths = require('./paths'); class InjectEntrypointsPlugin { constructor(options) { diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 37f4e94277b..4b17ed67ee4 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -775,7 +775,7 @@ module.exports = function (webpackEnv) { // Inject the manifest entrypoint file names into the outputFile process.env.INJECT_SCRIPTS === 'true' && new InjectEntrypointsPlugin({ - outputFile: 'hf-inj-react-scripts.js', + outputFile: 'hf-inj-react-scripts.json', }), // Moment.js is an extremely popular library that bundles large locale files // by default due to how webpack interprets its code. This is a practical From 4936cc1be730a7f6ac9f795bcf9343f10d96f5a5 Mon Sep 17 00:00:00 2001 From: Riley Brown Date: Tue, 11 Mar 2025 09:12:40 -0600 Subject: [PATCH 14/14] add directory for hf script output files --- packages/react-scripts/config/InjectEntrypointsPlugin.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-scripts/config/InjectEntrypointsPlugin.js b/packages/react-scripts/config/InjectEntrypointsPlugin.js index 5e98646b2e6..ffa67b25971 100644 --- a/packages/react-scripts/config/InjectEntrypointsPlugin.js +++ b/packages/react-scripts/config/InjectEntrypointsPlugin.js @@ -15,9 +15,12 @@ class InjectEntrypointsPlugin { afterEmit.tap('InjectEntrypointsPlugin', (manifest) => { const outputPath = path.join( compiler.options.context, + 'build-hf', this.options.outputFile ); + fs.mkdirSync(path.dirname(outputPath)); + fs.writeFileSync(outputPath, JSON.stringify( manifest.entrypoints.map((entry) => paths.publicUrlOrPath + entry)),