From 8e0a1974f8a3a1c8b2961e09515c319d1443b235 Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Fri, 7 Jun 2019 09:43:20 +0200 Subject: [PATCH 01/11] First draft --- packages/react-dev-utils/FileSizeReporter.js | 6 +-- packages/react-dev-utils/package.json | 4 +- packages/react-scripts/config/paths.js | 6 +++ .../react-scripts/config/webpack.config.js | 44 +++++++++++-------- packages/react-scripts/package.json | 5 ++- packages/react-scripts/scripts/build.js | 4 +- 6 files changed, 40 insertions(+), 29 deletions(-) diff --git a/packages/react-dev-utils/FileSizeReporter.js b/packages/react-dev-utils/FileSizeReporter.js index b2b4cc6904d..80a1b4e7244 100644 --- a/packages/react-dev-utils/FileSizeReporter.js +++ b/packages/react-dev-utils/FileSizeReporter.js @@ -16,11 +16,7 @@ var stripAnsi = require('strip-ansi'); var gzipSize = require('gzip-size').sync; function canReadAsset(asset) { - return ( - /\.(js|css)$/.test(asset) && - !/service-worker\.js/.test(asset) && - !/precache-manifest\.[0-9a-f]+\.js/.test(asset) - ); + return /\.(js|css)$/.test(asset); } // Prints a detailed summary of build files. diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index ad5882ca7b1..267ef07c0b2 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { - "name": "react-dev-utils", - "version": "9.0.1", + "name": "@ouihelp/react-dev-utils", + "version": "900010.0.0", "description": "Webpack utilities used by Create React App", "repository": { "type": "git", diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index e5a3e0b5374..84de6dff7b0 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -81,6 +81,7 @@ module.exports = { appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'), appIndexJs: resolveModule(resolveApp, 'src/index'), + appServiceWorkerJs: resolveModule(resolveApp, 'src/service-worker/index'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), @@ -104,6 +105,7 @@ module.exports = { appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'), appIndexJs: resolveModule(resolveApp, 'src/index'), + appServiceWorkerJs: resolveModule(resolveApp, 'src/service-worker/index'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), @@ -139,6 +141,10 @@ if ( appPublic: resolveOwn('template/public'), appHtml: resolveOwn('template/public/index.html'), appIndexJs: resolveModule(resolveOwn, 'template/src/index'), + appServiceWorkerJs: resolveModule( + resolveApp, + 'template/src/service-worker/index' + ), appPackageJson: resolveOwn('package.json'), appSrc: resolveOwn('template/src'), appTsConfig: resolveOwn('template/tsconfig.json'), diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 8f70442d584..3aac44dadbc 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -23,7 +23,6 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const safePostCssParser = require('postcss-safe-parser'); const ManifestPlugin = 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'); @@ -127,7 +126,7 @@ module.exports = function(webpackEnv) { return loaders; }; - return { + const originalConfig = { mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development', // Stop compilation early in production bail: isEnvProduction, @@ -612,22 +611,6 @@ module.exports = function(webpackEnv) { // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // You can remove this if you don't use Moment.js: new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), - // Generate a service worker script that will precache, and keep up to date, - // the HTML & assets that are part of the Webpack build. - isEnvProduction && - new WorkboxWebpackPlugin.GenerateSW({ - clientsClaim: true, - exclude: [/\.map$/, /asset-manifest\.json$/], - importWorkboxFrom: 'cdn', - navigateFallback: publicUrl + '/index.html', - navigateFallbackBlacklist: [ - // Exclude URLs starting with /_, as they're likely an API call - new RegExp('^/_'), - // Exclude URLs containing a dot, as they're likely a resource in - // public/ and not a SPA route - new RegExp('/[^/]+\\.[^/]+$'), - ], - }), // TypeScript type checking useTypeScript && new ForkTsCheckerWebpackPlugin({ @@ -673,4 +656,29 @@ module.exports = function(webpackEnv) { // our own hints via the FileSizeReporter performance: false, }; + + const serviceWorkerConfig = { + target: 'webworker', + mode: originalConfig.mode, + bail: originalConfig.bail, + devtool: originalConfig.devtool, + entry: { 'service-worker': paths.appServiceWorkerJs }, + output: { + path: originalConfig.output.path, + pathinfo: originalConfig.output.pathinfo, + filename: 'sw.js', + publicPath: originalConfig.output.publicPath, + devtoolModuleFilenameTemplate: + originalConfig.output.devtoolModuleFilenameTemplate, + }, + optimization: { + minimize: originalConfig.optimization.minimize, + minimizer: originalConfig.optimization.minimizer, + }, + resolve: originalConfig.resolve, + resolveLoader: originalConfig.resolveLoader, + module: originalConfig.module, + }; + + return [originalConfig, serviceWorkerConfig]; }; diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 8702109710d..aa74be6c786 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { - "name": "react-scripts", - "version": "3.0.1", + "name": "@ouihelp/react-scripts", + "version": "300010.0.0", "description": "Configuration and scripts for Create React App.", "repository": { "type": "git", @@ -69,6 +69,7 @@ "postcss-safe-parser": "4.0.1", "react-app-polyfill": "^1.0.1", "react-dev-utils": "^9.0.1", + "@ouihelp/react-dev-utils": "900010.0.0", "resolve": "1.10.0", "sass-loader": "7.1.0", "semver": "6.0.0", diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index edbc6d11557..75f0d730050 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -40,7 +40,7 @@ const paths = require('../config/paths'); const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); -const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); +const FileSizeReporter = require('@ouihelp/react-dev-utils/FileSizeReporter'); const printBuildError = require('react-dev-utils/printBuildError'); const measureFileSizesBeforeBuild = @@ -111,7 +111,7 @@ checkBrowsers(paths.appPath, isInteractive) const appPackage = require(paths.appPackageJson); const publicUrl = paths.publicUrl; - const publicPath = config.output.publicPath; + const publicPath = config[0].output.publicPath; const buildFolder = path.relative(process.cwd(), paths.appBuild); printHostingInstructions( appPackage, From c194eb8786396dca413d341eb323e8e7143a0cda Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Sat, 8 Jun 2019 12:49:10 +0200 Subject: [PATCH 02/11] Try to add templates --- packages/react-scripts/config/paths.js | 8 ++++---- packages/react-scripts/config/webpack.config.js | 3 ++- .../template-typescript/src/service-worker.entry.ts | 1 + .../react-scripts/template/src/service-worker.entry.js | 1 + 4 files changed, 8 insertions(+), 5 deletions(-) create mode 100644 packages/react-scripts/template-typescript/src/service-worker.entry.ts create mode 100644 packages/react-scripts/template/src/service-worker.entry.js diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index 84de6dff7b0..c2a6a4f428a 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -81,7 +81,7 @@ module.exports = { appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'), appIndexJs: resolveModule(resolveApp, 'src/index'), - appServiceWorkerJs: resolveModule(resolveApp, 'src/service-worker/index'), + appServiceWorkerJs: resolveModule(resolveApp, 'src/service-worker.entry'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), @@ -105,7 +105,7 @@ module.exports = { appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'), appIndexJs: resolveModule(resolveApp, 'src/index'), - appServiceWorkerJs: resolveModule(resolveApp, 'src/service-worker/index'), + appServiceWorkerJs: resolveModule(resolveApp, 'src/service-worker.entry'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), @@ -142,8 +142,8 @@ if ( appHtml: resolveOwn('template/public/index.html'), appIndexJs: resolveModule(resolveOwn, 'template/src/index'), appServiceWorkerJs: resolveModule( - resolveApp, - 'template/src/service-worker/index' + resolveOwn, + 'template/src/service-worker.entry' ), appPackageJson: resolveOwn('package.json'), appSrc: resolveOwn('template/src'), diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 3aac44dadbc..140ea71f428 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -680,5 +680,6 @@ module.exports = function(webpackEnv) { module: originalConfig.module, }; - return [originalConfig, serviceWorkerConfig]; + // return [originalConfig, serviceWorkerConfig]; + return [originalConfig]; }; diff --git a/packages/react-scripts/template-typescript/src/service-worker.entry.ts b/packages/react-scripts/template-typescript/src/service-worker.entry.ts new file mode 100644 index 00000000000..da5e881edbb --- /dev/null +++ b/packages/react-scripts/template-typescript/src/service-worker.entry.ts @@ -0,0 +1 @@ +console.log('Inside service-worker.entry.ts'); diff --git a/packages/react-scripts/template/src/service-worker.entry.js b/packages/react-scripts/template/src/service-worker.entry.js new file mode 100644 index 00000000000..03632d7e104 --- /dev/null +++ b/packages/react-scripts/template/src/service-worker.entry.js @@ -0,0 +1 @@ +console.log('Inside service-worker.entry.js'); From 0e8c212f8c555f15913815bbe4665db4cfa6a17e Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Sat, 8 Jun 2019 17:09:56 +0200 Subject: [PATCH 03/11] Kinda working --- .../react-dev-utils/WebpackDevServerUtils.js | 83 ++++++++++++------- packages/react-dev-utils/package.json | 2 +- .../react-scripts/config/webpack.config.js | 32 ++++++- packages/react-scripts/package.json | 4 +- 4 files changed, 85 insertions(+), 36 deletions(-) diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 1d7021e037c..771cd0d70de 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -112,9 +112,9 @@ function createCompiler({ }) { // "Compiler" is a low-level interface to Webpack. // It lets us listen to some events and provide our own custom messages. - let compiler; + let masterCompiler; try { - compiler = webpack(config); + masterCompiler = webpack(config); } catch (err) { console.log(chalk.red('Failed to compile.')); console.log(); @@ -127,7 +127,7 @@ function createCompiler({ // recompiling a bundle. WebpackDevServer takes care to pause serving the // bundle, so if you refresh, it'll wait instead of serving the old one. // "invalid" is short for "bundle invalidated", it doesn't imply any errors. - compiler.hooks.invalid.tap('invalid', () => { + masterCompiler.hooks.invalid.tap('invalid', () => { if (isInteractive) { clearConsole(); } @@ -135,39 +135,53 @@ function createCompiler({ }); let isFirstCompile = true; - let tsMessagesPromise; - let tsMessagesResolver; + let tsMessagesPromises = []; - if (useTypeScript) { - compiler.hooks.beforeCompile.tap('beforeCompile', () => { - tsMessagesPromise = new Promise(resolve => { - tsMessagesResolver = msgs => resolve(msgs); - }); - }); + masterCompiler.compilers.forEach((compiler, compilerIndex) => { + let tsMessagesResolver; - forkTsCheckerWebpackPlugin - .getCompilerHooks(compiler) - .receive.tap('afterTypeScriptCheck', (diagnostics, lints) => { - const allMsgs = [...diagnostics, ...lints]; - const format = message => - `${message.file}\n${typescriptFormatter(message, true)}`; - - tsMessagesResolver({ - errors: allMsgs.filter(msg => msg.severity === 'error').map(format), - warnings: allMsgs - .filter(msg => msg.severity === 'warning') - .map(format), + if (useTypeScript) { + compiler.hooks.beforeCompile.tap('beforeCompile', () => { + tsMessagesPromises[compilerIndex] = new Promise(resolve => { + tsMessagesResolver = msgs => resolve(msgs); }); }); - } + + forkTsCheckerWebpackPlugin + .getCompilerHooks(compiler) + .receive.tap('afterTypeScriptCheck', (diagnostics, lints) => { + const allMsgs = [...diagnostics, ...lints]; + const format = message => + `${message.file}\n${typescriptFormatter(message, true)}`; + + tsMessagesResolver({ + errors: allMsgs.filter(msg => msg.severity === 'error').map(format), + warnings: allMsgs + .filter(msg => msg.severity === 'warning') + .map(format), + }); + }); + } + }); // "done" event fires when Webpack has finished recompiling the bundle. // Whether or not you have warnings or errors, you will get this event. - compiler.hooks.done.tap('done', async stats => { + masterCompiler.hooks.done.tap('done', async stats => { if (isInteractive) { clearConsole(); } + stats.compilation = { + errors: stats.stats.reduce( + (previousErrors, s) => [...previousErrors, ...s.compilation.errors], + [] + ), + warnings: stats.stats.reduce( + (previousErrors, s) => [...previousErrors, ...s.compilation.warnings], + [] + ), + }; + // We have switched off the default Webpack output in WebpackDevServer // options so we are going to "massage" the warnings and errors and present // them in a readable focused way. @@ -188,7 +202,14 @@ function createCompiler({ ); }, 100); - const messages = await tsMessagesPromise; + const masterMessages = await Promise.all(tsMessagesPromises); + const messages = masterMessages.reduce( + (previousMessages, currentMessages) => ({ + errors: [...previousMessages.errors, ...currentMessages.errors], + warnings: [...previousMessages.warnings, ...currentMessages.warnings], + }), + { errors: [], warnings: [] } + ); clearTimeout(delayedMsg); statsData.errors.push(...messages.errors); statsData.warnings.push(...messages.warnings); @@ -256,12 +277,12 @@ function createCompiler({ arg => arg.indexOf('--smoke-test') > -1 ); if (isSmokeTest) { - compiler.hooks.failed.tap('smokeTest', async () => { - await tsMessagesPromise; + masterCompiler.hooks.failed.tap('smokeTest', async () => { + await Promise.all(tsMessagesPromises); process.exit(1); }); - compiler.hooks.done.tap('smokeTest', async stats => { - await tsMessagesPromise; + masterCompiler.hooks.done.tap('smokeTest', async stats => { + await Promise.all(tsMessagesPromises); if (stats.hasErrors() || stats.hasWarnings()) { process.exit(1); } else { @@ -270,7 +291,7 @@ function createCompiler({ }); } - return compiler; + return masterCompiler; } function resolveLoopback(proxy) { diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 267ef07c0b2..c044a66e9e1 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { "name": "@ouihelp/react-dev-utils", - "version": "900010.0.0", + "version": "900010.0.9", "description": "Webpack utilities used by Create React App", "repository": { "type": "git", diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 140ea71f428..bc5a5cfe088 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -678,8 +678,36 @@ module.exports = function(webpackEnv) { resolve: originalConfig.resolve, resolveLoader: originalConfig.resolveLoader, module: originalConfig.module, + plugins: [ + useTypeScript && + new ForkTsCheckerWebpackPlugin({ + typescript: resolve.sync('typescript', { + basedir: paths.appNodeModules, + }), + async: isEnvDevelopment, + useTypescriptIncrementalApi: true, + checkSyntacticErrors: true, + resolveModuleNameModule: process.versions.pnp + ? `${__dirname}/pnpTs.js` + : undefined, + resolveTypeReferenceDirectiveModule: process.versions.pnp + ? `${__dirname}/pnpTs.js` + : undefined, + tsconfig: paths.appTsConfig, + reportFiles: [ + '**', + '!**/__tests__/**', + '!**/?(*.)(spec|test).*', + '!**/src/setupProxy.*', + '!**/src/setupTests.*', + ], + watch: paths.appSrc, + silent: true, + // The formatter is invoked directly in WebpackDevServerUtils during development + formatter: isEnvProduction ? typescriptFormatter : undefined, + }), + ].filter(Boolean), }; - // return [originalConfig, serviceWorkerConfig]; - return [originalConfig]; + return [originalConfig, serviceWorkerConfig]; }; diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index aa74be6c786..f0836501d13 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "@ouihelp/react-scripts", - "version": "300010.0.0", + "version": "300010.0.2", "description": "Configuration and scripts for Create React App.", "repository": { "type": "git", @@ -29,6 +29,7 @@ "types": "./lib/react-app.d.ts", "dependencies": { "@babel/core": "7.4.3", + "@ouihelp/react-dev-utils": "900010.0.8", "@svgr/webpack": "4.1.0", "@typescript-eslint/eslint-plugin": "1.6.0", "@typescript-eslint/parser": "1.6.0", @@ -69,7 +70,6 @@ "postcss-safe-parser": "4.0.1", "react-app-polyfill": "^1.0.1", "react-dev-utils": "^9.0.1", - "@ouihelp/react-dev-utils": "900010.0.0", "resolve": "1.10.0", "sass-loader": "7.1.0", "semver": "6.0.0", From f779495c068db8fe9a87b8be36c632998f02ff19 Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Sat, 8 Jun 2019 18:14:20 +0200 Subject: [PATCH 04/11] Forgot to reference the correct one --- packages/react-scripts/package.json | 2 +- packages/react-scripts/scripts/build.js | 2 +- packages/react-scripts/scripts/start.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index f0836501d13..2c34c1d0fb7 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -29,7 +29,7 @@ "types": "./lib/react-app.d.ts", "dependencies": { "@babel/core": "7.4.3", - "@ouihelp/react-dev-utils": "900010.0.8", + "@ouihelp/react-dev-utils": "900010.0.9", "@svgr/webpack": "4.1.0", "@typescript-eslint/eslint-plugin": "1.6.0", "@typescript-eslint/parser": "1.6.0", diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 75f0d730050..f4b60f4d497 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -64,7 +64,7 @@ const config = configFactory('production'); // We require that you explicitly set browsers and do not fall back to // browserslist defaults. -const { checkBrowsers } = require('react-dev-utils/browsersHelper'); +const { checkBrowsers } = require('@ouihelp/react-dev-utils/browsersHelper'); checkBrowsers(paths.appPath, isInteractive) .then(() => { // First, read the current file sizes in build directory. diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index d4726f5f67e..5df1f39da1a 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -42,7 +42,7 @@ const { createCompiler, prepareProxy, prepareUrls, -} = require('react-dev-utils/WebpackDevServerUtils'); +} = require('@ouihelp/react-dev-utils/WebpackDevServerUtils'); const openBrowser = require('react-dev-utils/openBrowser'); const paths = require('../config/paths'); const configFactory = require('../config/webpack.config'); From 48650bd31525ac620497058e809c13fcc1e6fb0e Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Sat, 8 Jun 2019 18:14:52 +0200 Subject: [PATCH 05/11] v300010.0.3 --- 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 2c34c1d0fb7..79b46d1a899 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "@ouihelp/react-scripts", - "version": "300010.0.2", + "version": "300010.0.3", "description": "Configuration and scripts for Create React App.", "repository": { "type": "git", From cd5ccf9baed288f3308af02abaae5eb2fceabd34 Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Sun, 9 Jun 2019 12:18:07 +0200 Subject: [PATCH 06/11] With correct types --- packages/react-scripts/scripts/build.js | 2 +- .../scripts/utils/verifyTypeScriptSetup.js | 2 +- .../template-typescript/src/index.tsx | 6 - .../template-typescript/src/serviceWorker.ts | 143 ------------------ packages/react-scripts/template/src/index.js | 6 - .../template/src/serviceWorker.js | 135 ----------------- 6 files changed, 2 insertions(+), 292 deletions(-) delete mode 100644 packages/react-scripts/template-typescript/src/serviceWorker.ts delete mode 100644 packages/react-scripts/template/src/serviceWorker.js diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index f4b60f4d497..75f0d730050 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -64,7 +64,7 @@ const config = configFactory('production'); // We require that you explicitly set browsers and do not fall back to // browserslist defaults. -const { checkBrowsers } = require('@ouihelp/react-dev-utils/browsersHelper'); +const { checkBrowsers } = require('react-dev-utils/browsersHelper'); checkBrowsers(paths.appPath, isInteractive) .then(() => { // First, read the current file sizes in build directory. diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index a73b8c0db3b..63d360f310a 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -257,7 +257,7 @@ function verifyTypeScriptSetup() { if (!fs.existsSync(paths.appTypeDeclarations)) { fs.writeFileSync( paths.appTypeDeclarations, - `/// ${os.EOL}` + `/// ${os.EOL}` ); } } diff --git a/packages/react-scripts/template-typescript/src/index.tsx b/packages/react-scripts/template-typescript/src/index.tsx index 87d1be55189..395b74997b2 100644 --- a/packages/react-scripts/template-typescript/src/index.tsx +++ b/packages/react-scripts/template-typescript/src/index.tsx @@ -2,11 +2,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementById('root')); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); diff --git a/packages/react-scripts/template-typescript/src/serviceWorker.ts b/packages/react-scripts/template-typescript/src/serviceWorker.ts deleted file mode 100644 index 15d90cb81a1..00000000000 --- a/packages/react-scripts/template-typescript/src/serviceWorker.ts +++ /dev/null @@ -1,143 +0,0 @@ -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read https://bit.ly/CRA-PWA - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); - -type Config = { - onSuccess?: (registration: ServiceWorkerRegistration) => void; - onUpdate?: (registration: ServiceWorkerRegistration) => void; -}; - -export function register(config?: Config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL( - (process as { env: { [key: string]: string } }).env.PUBLIC_URL, - window.location.href - ); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' - ); - }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - -function registerValidSW(swUrl: string, config?: Config) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (installingWorker == null) { - return; - } - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl: string, config?: Config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - if ( - response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); - } -} diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js index 87d1be55189..395b74997b2 100644 --- a/packages/react-scripts/template/src/index.js +++ b/packages/react-scripts/template/src/index.js @@ -2,11 +2,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementById('root')); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); diff --git a/packages/react-scripts/template/src/serviceWorker.js b/packages/react-scripts/template/src/serviceWorker.js deleted file mode 100644 index f8c7e50c201..00000000000 --- a/packages/react-scripts/template/src/serviceWorker.js +++ /dev/null @@ -1,135 +0,0 @@ -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read https://bit.ly/CRA-PWA - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); - -export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' - ); - }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - -function registerValidSW(swUrl, config) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (installingWorker == null) { - return; - } - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl, config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - if ( - response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); - } -} From f1f3bd25be301f20359e69ffb43982490809f2a9 Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Sun, 9 Jun 2019 12:18:56 +0200 Subject: [PATCH 07/11] v300010.0.4 --- 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 79b46d1a899..47b59340156 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "@ouihelp/react-scripts", - "version": "300010.0.3", + "version": "300010.0.4", "description": "Configuration and scripts for Create React App.", "repository": { "type": "git", From 5b54cfe6cb8b313da71958f014ab053aaa7cd9f7 Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Sun, 9 Jun 2019 13:14:33 +0200 Subject: [PATCH 08/11] Missed export --- .../template-typescript/src/service-worker.entry.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/template-typescript/src/service-worker.entry.ts b/packages/react-scripts/template-typescript/src/service-worker.entry.ts index da5e881edbb..ec9c52b86d7 100644 --- a/packages/react-scripts/template-typescript/src/service-worker.entry.ts +++ b/packages/react-scripts/template-typescript/src/service-worker.entry.ts @@ -1 +1,2 @@ console.log('Inside service-worker.entry.ts'); +export {}; From d9f6f91b72f7cd167396067fe660f345286af62c Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Sun, 9 Jun 2019 13:14:59 +0200 Subject: [PATCH 09/11] v300010.0.5 --- 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 47b59340156..d41204551b7 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "@ouihelp/react-scripts", - "version": "300010.0.4", + "version": "300010.0.5", "description": "Configuration and scripts for Create React App.", "repository": { "type": "git", From 881810d44ccde8dc291d30c8a461d036c44cb06e Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Tue, 16 Jul 2019 21:55:46 +0200 Subject: [PATCH 10/11] Add env variable to service worker --- packages/react-scripts/config/webpack.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index bc5a5cfe088..e5f790365bf 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -679,6 +679,7 @@ module.exports = function(webpackEnv) { resolveLoader: originalConfig.resolveLoader, module: originalConfig.module, plugins: [ + new webpack.DefinePlugin(env.stringified), useTypeScript && new ForkTsCheckerWebpackPlugin({ typescript: resolve.sync('typescript', { From 30f92e816293cce2ed1792aa3d11f82101a7bd28 Mon Sep 17 00:00:00 2001 From: Bastien Gandouet Date: Tue, 16 Jul 2019 21:56:25 +0200 Subject: [PATCH 11/11] v300010.0.6 --- 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 d41204551b7..4524673741c 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "@ouihelp/react-scripts", - "version": "300010.0.5", + "version": "300010.0.6", "description": "Configuration and scripts for Create React App.", "repository": { "type": "git",