Codex/update node engine and dependencies in packages

README.md

@@ -2,9 +2,9 @@
 
 ## Still Up To Date!
 
-May 6, 2020
+August 18, 2025
 <br />
-Just wanted to note that version [v3.4.1](https://github.com/facebook/create-react-app/releases/tag/v3.4.1) of [Create-React-App](https://create-react-app.dev/) is still the latest.
+As of now, version [v5.1.0](https://github.com/facebook/create-react-app/releases/tag/v5.1.0) of [Create React App](https://create-react-app.dev/) is the latest release.
 
 If you have a theme made with an earlier version of `create-react-wptheme` and want to update it to the latest code, [just follow these instructions](#updating-existing-themes).
 
@@ -99,6 +99,17 @@ So for example, if the tutorial instructs you to edit the `src/App.js` file, the
 
 `<Your Theme's Root Folder>/react-src/src/App.js`
 
+Since Create React App automatically resolves `.jsx` extensions, you can drop an `App.jsx` file right next to `index.js` without any extra configuration. A basic folder layout might look like:
+
+```
+react-src/
+└─ src/
+   ├─ index.js
+   └─ App.jsx
+```
+
+From inside the `react-src` directory run `npm start` to develop locally or `npm run build` to create an optimized production build with the `.jsx` entry point.
+
 ### The Public Folder
 
 The authors of the original `create-react-app` say that using the "Public" folder (found at `react-src/public` in your new theme's folder) is a last ditch "escape hatch" for adding otherwise-hard-to-deal-with files.

packages/cra-template-wptheme-typescript/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cra-template-wptheme-typescript",
-    "version": "3.4.1-wp.1",
+    "version": "5.0.1-wp.1",
     "keywords": [
         "react",
         "create-react-app",
@@ -17,7 +17,7 @@
     },
     "license": "MIT",
     "engines": {
-        "node": ">=8.10"
+        "node": ">=14"
     },
     "bugs": {
         "url": "https://github.com/devloco/create-react-wptheme/issues"

packages/cra-template-wptheme-typescript/template.json

@@ -1,14 +1,15 @@
 {
   "package": {
     "dependencies": {
-      "@testing-library/react": "^9.3.2",
-      "@testing-library/jest-dom": "^4.2.4",
-      "@testing-library/user-event": "^7.1.2",
-      "@types/node": "^12.0.0",
-      "@types/react": "^16.9.0",
-      "@types/react-dom": "^16.9.0",
-      "@types/jest": "^24.0.0",
-      "typescript": "~3.7.2"
+      "@testing-library/jest-dom": "^5.16.5",
+      "@testing-library/react": "^13.4.0",
+      "@testing-library/user-event": "^13.5.0",
+      "@types/jest": "^27.5.2",
+      "@types/node": "^16.18.11",
+      "@types/react": "^18.0.27",
+      "@types/react-dom": "^18.0.10",
+      "typescript": "^4.9.5",
+      "web-vitals": "^2.1.4"
     }
   }
 }

packages/cra-template-wptheme-typescript/template/src/index.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
-// 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();
+// Log web vitals for performance measurements.
+reportWebVitals();

packages/cra-template-wptheme-typescript/template/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

packages/cra-template-wptheme-typescript/template/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';

packages/cra-template-wptheme/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cra-template-wptheme",
-    "version": "3.4.1-wp.1",
+    "version": "5.0.1-wp.1",
     "keywords": [
         "wordpress",
         "create-react-app",
@@ -25,7 +25,7 @@
     },
     "license": "MIT",
     "engines": {
-        "node": ">=8"
+        "node": ">=14"
     },
     "bugs": {
         "url": "https://github.com/devloco/create-react-wptheme/issues"

packages/cra-template-wptheme/template.json

@@ -1,9 +1,10 @@
 {
   "package": {
     "dependencies": {
-      "@testing-library/react": "^9.3.2",
-      "@testing-library/jest-dom": "^4.2.4",
-      "@testing-library/user-event": "^7.1.2"
+      "@testing-library/jest-dom": "^5.16.5",
+      "@testing-library/react": "^13.4.0",
+      "@testing-library/user-event": "^13.5.0",
+      "web-vitals": "^2.1.4"
     }
   }
 }

packages/cra-template-wptheme/template/src/App.js → packages/cra-template-wptheme/template/src/App.jsx

@@ -8,7 +8,7 @@ function App() {
             <header className="App-header">
                 <img src={logo} className="App-logo" alt="logo" />
                 <p>
-                    Edit <code>react-src/src/App.js</code> and save to reload.
+                    Edit <code>react-src/src/App.jsx</code> and save to reload.
                 </p>
                 <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
                     Learn React

packages/cra-template-wptheme/template/src/index.js

@@ -1,17 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+// Explicitly import the JSX component to avoid resolution issues.
+import App from './App.jsx';
+import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
-// 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();
+// Log web vitals for performance measurements.
+reportWebVitals();

packages/cra-template-wptheme/template/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;