Merge branch 'main' into bugfix/fs-promises

.changeset/angry-jars-explain.md

@@ -0,0 +1,5 @@
+---
+"modular-scripts": patch
+---
+
+Remove react-refresh given we don't use babel anymore for the plugin.

.changeset/beige-carrots-do.md

@@ -0,0 +1,5 @@
+---
+"eslint-config-modular-app": patch
+---
+
+Bump eslint-plugin-react from 7.25.2 to 7.26.1

.changeset/cool-dolls-notice.md

@@ -0,0 +1,5 @@
+---
+"eslint-config-modular-app": patch
+---
+
+Bump @babel/eslint-parser from 7.15.4 to 7.15.8

.changeset/dirty-dodos-invent.md

@@ -0,0 +1,5 @@
+---
+'modular-scripts': patch
+---
+
+Simplify build script for webpack.

.changeset/eighty-pots-behave.md

@@ -0,0 +1,5 @@
+---
+"eslint-config-modular-app": patch
+---
+
+Bump eslint-plugin-react from 7.25.1 to 7.25.2

.changeset/metal-crews-hope.md

@@ -0,0 +1,6 @@
+---
+'modular-scripts': patch
+---
+
+Set "global" to be "window" when building with esbuild to ensure compatibility
+with NPM packages.

.changeset/perfect-ghosts-tease.md

@@ -0,0 +1,5 @@
+---
+"eslint-config-modular-app": patch
+---
+
+Bump eslint-plugin-testing-library from 4.12.2 to 4.12.4

.github/workflows/node.js.yml

@@ -21,7 +21,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js
-        uses: actions/setup-node@v2.4.0
+        uses: actions/setup-node@v2.4.1
         with:
           node-version: 14.x
           cache: 'yarn'
@@ -42,7 +42,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2.4.0
+        uses: actions/setup-node@v2.4.1
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'yarn'

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js
-        uses: actions/setup-node@v2.4.0
+        uses: actions/setup-node@v2.4.1
         with:
           node-version: 14.x
           registry-url: https://registry.npmjs.org/

docs/upgrading-to-1.0.0.md

@@ -25,8 +25,8 @@ configuring the types of static assets which are imported in TypeScript files.
 When upgrading to `1.x` of `modular-scripts` this file must be updated.
 
 ```typescript
-- /// <reference types="react-scripts">
-+ /// <reference types="modular-scripts/react-app-env">
+- /// <reference types="react-scripts" />
++ /// <reference types="modular-scripts/react-app-env" />
 ```
 
 ### Eslint webpack plugin

package.json

@@ -22,7 +22,7 @@
     "typecheck": "yarn modular typecheck"
   },
   "dependencies": {
-    "@babel/cli": "7.15.4",
+    "@babel/cli": "7.15.7",
     "@babel/core": "7.15.5",
     "@babel/preset-env": "7.15.6",
     "@babel/preset-react": "7.14.5",
@@ -41,7 +41,7 @@
     "@types/express": "^4.17.13",
     "@types/express-ws": "^3.0.1",
     "@types/find-up": "4.0.0",
-    "@types/fs-extra": "9.0.12",
+    "@types/fs-extra": "9.0.13",
     "@types/global-modules": "^2.0.0",
     "@types/is-ci": "3.0.0",
     "@types/jest": "26.0.24",
@@ -50,7 +50,7 @@
     "@types/parse5": "^6.0.1",
     "@types/prompts": "2.0.14",
     "@types/puppeteer": "5.4.4",
-    "@types/react": "17.0.21",
+    "@types/react": "17.0.27",
     "@types/react-dom": "17.0.9",
     "@types/recursive-readdir": "^2.2.0",
     "@types/rimraf": "3.0.2",
@@ -68,7 +68,7 @@
     "micromatch": "4.0.4",
     "patch-package": "^6.4.7",
     "pptr-testing-library": "0.6.5",
-    "prettier": "2.4.0",
+    "prettier": "2.4.1",
     "puppeteer": "10.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

packages/eslint-config-modular-app/package.json

@@ -6,17 +6,17 @@
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "4.31.1",
     "@typescript-eslint/parser": "4.31.1",
-    "@babel/eslint-parser": "7.15.4",
+    "@babel/eslint-parser": "7.15.8",
     "babel-eslint": "10.1.0",
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "5.10.0",
     "eslint-plugin-import": "2.24.2",
     "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-jest-dom": "3.9.2",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "7.25.1",
+    "eslint-plugin-react": "7.26.1",
     "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-testing-library": "4.12.2"
+    "eslint-plugin-testing-library": "4.12.4"
   },
   "peerDependencies": {
     "typescript": "^4.3.5"

packages/modular-scripts/CHANGELOG.md

@@ -1,5 +1,11 @@
 # modular-scripts
 
+## 1.3.2
+
+### Patch Changes
+
+- f6377a7: Fix release issue due to tsx file
+
 ## 1.3.1
 
 ### Patch Changes

packages/modular-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "modular-scripts",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "license": "Apache-2.0",
   "bin": {
     "modular": "dist-cjs/cli.js"
@@ -24,7 +24,6 @@
     "@babel/preset-env": "7.15.6",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "7.15.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "20.0.0",
     "@rollup/plugin-json": "4.1.0",
@@ -36,7 +35,6 @@
     "babel-code-frame": "^6.26.0",
     "babel-jest": "26.6.3",
     "babel-preset-react-app": "10.0.0",
-    "bfj": "7.0.2",
     "browserslist": "4.17.0",
     "builtin-modules": "3.2.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",

packages/modular-scripts/react-dev-utils/webpackHotDevClient.js

@@ -236,11 +236,9 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   }
 
   function handleApplyUpdates(err, updatedModules) {
-    // NOTE: This var is injected by Webpack's DefinePlugin, and is a boolean instead of string.
-    const hasReactRefresh = process.env.FAST_REFRESH;
     const wantsForcedReload = err || !updatedModules || hadRuntimeError;
     // React refresh can handle hot-reloading over errors.
-    if (!hasReactRefresh && wantsForcedReload) {
+    if (wantsForcedReload) {
       window.location.reload();
       return;
     }

packages/modular-scripts/react-scripts/config/env.js

@@ -29,11 +29,6 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
         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',
       },
     );
   // Stringify all values so we can feed into webpack DefinePlugin

packages/modular-scripts/react-scripts/config/webpack.config.js

@@ -25,7 +25,6 @@ const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('../../react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const typescriptFormatter = require('../../react-dev-utils/typescriptFormatter');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const postcssNormalize = require('postcss-normalize');
 const isCI = require('is-ci');
 
@@ -78,8 +77,6 @@ module.exports = function (webpackEnv) {
   // Get environment variables to inject into our app.
   const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 
-  const shouldUseReactRefresh = env.raw.FAST_REFRESH;
-
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
@@ -153,31 +150,30 @@ 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: isEnvDevelopment
+      ? [
+          // 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,
     output: {
       // The build folder.
       path: isEnvProduction ? paths.appBuild : undefined,
@@ -560,21 +556,6 @@ module.exports = function (webpackEnv) {
       new webpack.DefinePlugin(env.stringified),
       // This is necessary to emit hot updates (CSS and Fast Refresh):
       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
-      // Experimental hot reloading for React .
-      // https://github.com/facebook/react/tree/master/packages/react-refresh
-      isEnvDevelopment &&
-        shouldUseReactRefresh &&
-        new ReactRefreshWebpackPlugin({
-          overlay: {
-            entry: webpackDevClientEntry,
-            // The expected exports are slightly different from what the overlay exports,
-            // so an interop is included here to enable feedback on module-level errors.
-            module: reactRefreshOverlayEntry,
-            // Since we ship a custom dev client and overlay integration,
-            // the bundled socket handling logic can be eliminated.
-            sockIntegration: false,
-          },
-        }),
       // Watcher doesn't work well if you mistype casing in a path so we use
       // a plugin that prints an error when you attempt to do this.
       // See https://github.com/facebook/create-react-app/issues/240