feat: create-react-app 5 support (#48)

.changeset/stupid-fishes-film.md

@@ -0,0 +1,16 @@
+---
+'craco-esbuild': minor
+---
+
+🚀 create-react-app 5 is now supported 🚀
+
+## Breaking Changes
+
+- Removed the `enableSvgr` and `svgrOptions` options. Svgr is now working out of the box.
+- Drop support for CRA 3 and 4. As many underlying libraries have changed, CRA 4 and 3 are no longer supported. Check the [CRA changelog](https://github.com/facebook/create-react-app/releases/tag/v5.0.0) to see what changed.
+
+## Migrating from 0.4.X to 0.5.X
+
+- You will first need to migrate your project to CRA 5. See the CRA [Migration guide](https://github.com/facebook/create-react-app/releases/tag/v5.0.0) for more information.
+- Upgrade `craco-esbuild` to version 0.5.0 or higher in your project.
+- If you are using `enableSvgr` or `svgrOptions` you can remove them from the `craco.config.js` file. Svgr is now working out of the box.

.github/workflows/node.js.yml

@@ -11,17 +11,21 @@ jobs:
   test-react-scripts:
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+
     steps:
       - uses: actions/checkout@v2
 
       - uses: pnpm/action-setup@v2
         with:
           version: 6.24.1
 
-      - name: Use Node.js 14
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -38,17 +42,21 @@ jobs:
   test:
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+
     steps:
       - uses: actions/checkout@v2
 
       - uses: pnpm/action-setup@v2
         with:
           version: 6.24.1
 
-      - name: Use Node.js 14
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/release.yml

@@ -19,10 +19,10 @@ jobs:
         with:
           version: 6.24.1
 
-      - name: Use Node.js 14.x
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: 16.x
           cache: 'pnpm'
 
       - name: Install dependencies

README.md

@@ -7,6 +7,7 @@ Use [esbuild](https://github.com/evanw/esbuild) in your [create-react-app](https
 - Replace babel-loader with esbuild during development
 - Replace babel-loader with esbuild for faster build time
 - Replace terser with esbuild for faster build time
+- Replace OptimizeCssAssetsWebpackPlugin with esbuild for faster build time
 - Use esbuild when running jest
 
 ## Getting started

examples/with-javascript/.gitignore

@@ -17,7 +17,6 @@
 .env.development.local
 .env.test.local
 .env.production.local
-.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

examples/with-javascript/package.json

@@ -3,14 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "6.2.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
+    "@craco/craco": "6.4.3",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "craco-esbuild": "workspace:craco-esbuild",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3"
+    "react-scripts": "5.0.0"
   },
   "scripts": {
     "start": "craco start",

examples/with-javascript/src/App.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });

examples/with-javascript/src/setupTests.js

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

examples/with-svgr/package.json

@@ -3,15 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "6.2.0",
-    "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
+    "@craco/craco": "6.4.3",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "craco-esbuild": "workspace:craco-esbuild",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3"
+    "react-scripts": "5.0.0"
   },
   "scripts": {
     "start": "craco start",

examples/with-typescript/.gitignore

@@ -17,7 +17,6 @@
 .env.development.local
 .env.test.local
 .env.production.local
-.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

examples/with-typescript/package.json

@@ -3,19 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "6.2.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.10",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@craco/craco": "6.4.3",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^16.11.15",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
     "craco-esbuild": "workspace:craco-esbuild",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "typescript": "~4.4.2"
+    "react-scripts": "5.0.0",
+    "typescript": "^4.5.4"
   },
   "scripts": {
     "start": "craco start",

examples/with-typescript/src/App.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });

examples/with-typescript/src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

examples/with-typescript/tsconfig.json

@@ -8,13 +8,13 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
-    "noFallthroughCasesInSwitch": true
+    "jsx": "react-jsx"
   },
   "include": ["src"]
 }

package.json

@@ -19,7 +19,7 @@
     "@changesets/changelog-github": "0.4.2",
     "@changesets/cli": "2.19.0",
     "husky": "7.0.4",
-    "lint-staged": "12.1.2",
-    "prettier": "2.5.0"
+    "lint-staged": "12.1.7",
+    "prettier": "2.5.1"
   }
 }

packages/craco-esbuild/README.md

@@ -7,6 +7,7 @@ Use [esbuild](https://github.com/evanw/esbuild) in your [create-react-app](https
 - Replace babel-loader with esbuild during development
 - Replace babel-loader with esbuild for faster build time
 - Replace terser with esbuild for faster build time
+- Replace OptimizeCssAssetsWebpackPlugin with esbuild for faster build time
 - Use esbuild when running jest
 
 ## Installation
@@ -56,8 +57,6 @@ You can configure the options of the plugin by passing an `options` object.
 - `esbuildLoaderOptions`: customise the options passed down to the `esbuild` loader. _Note: This will be used only by webpack_
 - `esbuildMinimizerOptions`: customise the options passed down to `ESBuildMinifyPlugin`. _Note: This will be used only by webpack_
 - `includePaths`: include external directories in loader.
-- `enableSvgr`: enable the svgr webpack plugin. SVGs are loaded as separate files by default. Enabling this options allow you to import SVGs as React components. See [CRA documentation](https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs) for more detailed explanation.
-- `svgrOptions`: customise the options passed down to the `svgr` loader.
 - `skipEsbuildJest`: Avoid using `esbuild-jest` for jest configuration. Could be useful to avoid compatibility issues with transpiling tests.
 - `esbuildJestOptions`: customise the [options](https://github.com/aelbore/esbuild-jest#setting-up-jest-config-file-with-transformoptions) passed down to the `esbuild-jest` transformer.
 
@@ -73,11 +72,6 @@ module.exports = {
       plugin: CracoEsbuildPlugin,
       options: {
         includePaths: ['/external/dir/with/components'], // Optional. If you want to include components which are not in src folder
-        enableSvgr: true, // Optional.
-        svgrOptions: {
-          // Optional. is enableSvgr set to true, used as options for svgr
-          icon: true,
-        },
         esbuildLoaderOptions: {
           // Optional. Defaults to auto-detect loader.
           loader: 'jsx', // Set the value to 'tsx' if you use typescript