From 6ee78e66fe77649527ef9858f3b3a4d151cf3d98 Mon Sep 17 00:00:00 2001
From: Marcus Notheis <marcus.notheis@sap.com>
Date: Tue, 10 Dec 2024 12:09:28 +0100
Subject: [PATCH] chore(examples): migrate vite example to React Router 7
 (#6722)

---
 docs/ProjectTemplates.mdx            |  4 +-
 examples/vite-ts/package-lock.json   | 74 ++++++++++++++++------------
 examples/vite-ts/package.json        |  2 +-
 examples/vite-ts/src/AppShell.tsx    |  2 +-
 examples/vite-ts/src/ToDos.tsx       |  2 +-
 examples/vite-ts/src/TodoDetails.tsx |  2 +-
 examples/vite-ts/src/main.tsx        |  5 +-
 7 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/docs/ProjectTemplates.mdx b/docs/ProjectTemplates.mdx
index 942810d1875..d18277ebdbc 100644
--- a/docs/ProjectTemplates.mdx
+++ b/docs/ProjectTemplates.mdx
@@ -98,7 +98,9 @@ A curated list of minimal project templates and examples to get started using UI
   >
     <ul>
       <li>
-        <LabelWithWrapping>Routing and Data Fetching using the createBrowserRouter of React Router</LabelWithWrapping>
+        <LabelWithWrapping>
+          Routing and Data Fetching using the createBrowserRouter of React Router v7
+        </LabelWithWrapping>
       </li>
       <li>
         <Label>Cypress Component Test setup</Label>
diff --git a/examples/vite-ts/package-lock.json b/examples/vite-ts/package-lock.json
index 2d68ae514c8..30a3b57b72d 100644
--- a/examples/vite-ts/package-lock.json
+++ b/examples/vite-ts/package-lock.json
@@ -14,7 +14,7 @@
         "@ui5/webcomponents-react": "~2.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.22.0"
+        "react-router": "^7.0.2"
       },
       "devDependencies": {
         "@types/react": "^18.0.28",
@@ -1068,15 +1068,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
-      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.22.5",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.5.tgz",
@@ -1358,6 +1349,12 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -2474,6 +2471,15 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -4427,35 +4433,27 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.28.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
-      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz",
+      "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.21.0"
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.28.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
-      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.21.0",
-        "react-router": "6.28.0"
+        "react": ">=18",
+        "react-dom": ">=18"
       },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/react-table": {
@@ -4655,6 +4653,12 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -4948,6 +4952,12 @@
         "node": "*"
       }
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
diff --git a/examples/vite-ts/package.json b/examples/vite-ts/package.json
index 0f7bae8f9ed..9e870af3200 100644
--- a/examples/vite-ts/package.json
+++ b/examples/vite-ts/package.json
@@ -20,7 +20,7 @@
     "@ui5/webcomponents-react": "~2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0"
+    "react-router": "^7.0.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
diff --git a/examples/vite-ts/src/AppShell.tsx b/examples/vite-ts/src/AppShell.tsx
index b3c616d27c6..ce77a709146 100644
--- a/examples/vite-ts/src/AppShell.tsx
+++ b/examples/vite-ts/src/AppShell.tsx
@@ -17,7 +17,7 @@ import {
   Title
 } from '@ui5/webcomponents-react';
 import { useRef, useState } from 'react';
-import { Outlet, useLocation, useMatches, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useMatches, useNavigate } from 'react-router';
 import { SingleTodoHandle } from './main.tsx';
 import { Todo } from './mockImplementations/mockData.ts';
 import classes from './AppShell.module.css';
diff --git a/examples/vite-ts/src/ToDos.tsx b/examples/vite-ts/src/ToDos.tsx
index 65c1f881c67..3b621e8cb5d 100644
--- a/examples/vite-ts/src/ToDos.tsx
+++ b/examples/vite-ts/src/ToDos.tsx
@@ -1,6 +1,6 @@
 import { BusyIndicator, Card, List, ListItemStandard } from '@ui5/webcomponents-react';
 import { Suspense } from 'react';
-import { Await, useLoaderData, useNavigate } from 'react-router-dom';
+import { Await, useLoaderData, useNavigate } from 'react-router';
 import { Todo } from './mockImplementations/mockData.ts';
 import classes from './ToDos.module.css';
 
diff --git a/examples/vite-ts/src/TodoDetails.tsx b/examples/vite-ts/src/TodoDetails.tsx
index ea100fdc07f..3f9fab2e223 100644
--- a/examples/vite-ts/src/TodoDetails.tsx
+++ b/examples/vite-ts/src/TodoDetails.tsx
@@ -9,7 +9,7 @@ import {
   Switch,
   TextArea
 } from '@ui5/webcomponents-react';
-import { useLoaderData } from 'react-router-dom';
+import { useLoaderData } from 'react-router';
 import { Todo } from './mockImplementations/mockData.ts';
 import classes from './TodoDetails.module.css';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
diff --git a/examples/vite-ts/src/main.tsx b/examples/vite-ts/src/main.tsx
index 6aed4e127d6..5dc4ff35011 100644
--- a/examples/vite-ts/src/main.tsx
+++ b/examples/vite-ts/src/main.tsx
@@ -3,7 +3,8 @@ import ErrorScreenIllustration from '@ui5/webcomponents-fiori/dist/illustrations
 import { BreadcrumbsItem, IllustratedMessage, ThemeProvider } from '@ui5/webcomponents-react';
 import { ReactNode, StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { createBrowserRouter, defer, LoaderFunctionArgs, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, LoaderFunctionArgs } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
 import './index.css';
 import AppShell from './AppShell.tsx';
 import { fetchToDos } from './mockImplementations/mockAPIs.ts';
@@ -19,7 +20,7 @@ export interface SingleTodoHandle {
 // To simulate a slow loader increase the `delay`, to simulate a failed request set `shouldThrow` to `true`
 async function toDosLoader() {
   const todosPromise = fetchToDos({ delay: 500, shouldThrow: false });
-  return defer({ todos: todosPromise });
+  return { todos: todosPromise };
 }
 
 async function singleToDoLoader({ params }: LoaderFunctionArgs) {