chore: update npm packages (#146)

Co-authored-by: Joseph Pender <joey.pender@outsystems.com>

Author: ItsChaceD

example-app-spm/package.json

@@ -11,38 +11,38 @@
     "@capacitor/ios": "next",
     "@capacitor/keyboard": "next",
     "@capacitor/status-bar": "next",
-    "@ionic/react": "^6.0.0",
-    "@ionic/react-router": "^6.0.0",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.6.3",
+    "@ionic/react": "^8.7.10",
+    "@ionic/react-router": "^8.7.10",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/google.maps": "~3.58.1",
-    "@types/jest": "^26.0.20",
-    "@types/node": "^12.19.15",
-    "@types/react": "^16.14.3",
-    "@types/react-dom": "^16.9.10",
-    "@types/react-router": "^5.1.11",
-    "@types/react-router-dom": "^5.1.7",
-    "ionicons": "^5.4.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^5.0.0",
-    "typescript": "^4.1.3",
-    "web-vitals": "^0.2.4",
-    "workbox-background-sync": "^5.1.4",
-    "workbox-broadcast-update": "^5.1.4",
-    "workbox-cacheable-response": "^5.1.4",
-    "workbox-core": "^5.1.4",
-    "workbox-expiration": "^5.1.4",
-    "workbox-google-analytics": "^5.1.4",
-    "workbox-navigation-preload": "^5.1.4",
-    "workbox-precaching": "^5.1.4",
-    "workbox-range-requests": "^5.1.4",
-    "workbox-routing": "^5.1.4",
-    "workbox-strategies": "^5.1.4",
-    "workbox-streams": "^5.1.4"
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "ionicons": "^8.0.13",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
+    "react-scripts": "^5.0.1",
+    "typescript": "^5.9.3",
+    "web-vitals": "^5.1.0",
+    "workbox-background-sync": "^7.4.0",
+    "workbox-broadcast-update": "^7.4.0",
+    "workbox-cacheable-response": "^7.4.0",
+    "workbox-core": "^7.4.0",
+    "workbox-expiration": "^7.4.0",
+    "workbox-google-analytics": "^7.4.0",
+    "workbox-navigation-preload": "^7.4.0",
+    "workbox-precaching": "^7.4.0",
+    "workbox-range-requests": "^7.4.0",
+    "workbox-routing": "^7.4.0",
+    "workbox-strategies": "^7.4.0",
+    "workbox-streams": "^7.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

example-app-spm/src/custom-elements.d.ts

@@ -0,0 +1,12 @@
+import '@capacitor/google-maps';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'capacitor-google-map': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export {};
+

example-app-spm/src/index.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </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.

example-app-spm/src/pages/Drawing/Circles.tsx

@@ -173,6 +173,7 @@ const CircleMapPage: React.FC = () => {
           autoGrow={true}
         ></IonTextarea>
       </div>
+      {/* @ts-ignore - custom element */}
       <capacitor-google-map
         id="map_circles"
         style={{

example-app-spm/src/react-app-env.d.ts

@@ -1 +1,11 @@
 /// <reference types="react-scripts" />
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'capacitor-google-map': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export {};

example-app-spm/src/reportWebVitals.ts

@@ -1,14 +1,12 @@
-import { ReportHandler } from 'web-vitals';
+import { onCLS, onINP, onFCP, onLCP, onTTFB, Metric } from 'web-vitals';
 
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+const reportWebVitals = (onPerfEntry?: (metric: Metric) => void) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+    onCLS(onPerfEntry);
+    onINP(onPerfEntry);
+    onFCP(onPerfEntry);
+    onLCP(onPerfEntry);
+    onTTFB(onPerfEntry);
   }
 };
 

example-app-spm/tsconfig.json

@@ -21,6 +21,7 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src",
+    "src/**/*.d.ts"
   ]
 }

package.json

@@ -17,11 +17,11 @@
   },
   "devDependencies": {
     "@capacitor/ios": "next",
-    "@types/node": "^20.11.25",
-    "glob": "^11.0.0",
-    "husky": "^9.0.1",
-    "lerna": "^8.1.2",
-    "typescript": "^5.4.2"
+    "@types/node": "^24.10.1",
+    "glob": "^13.0.0",
+    "husky": "^9.1.7",
+    "lerna": "^9.0.1",
+    "typescript": "^5.9.3"
   },
   "engines": {
     "node": ">=20",