app,create-app: update to use app.createRoot()

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/shy-birds-hammer.md

@@ -2,7 +2,7 @@
 '@backstage/create-app': patch
 ---
 
-Updated the app template to use the new `AppRouter` component instead of `app.getRouter()`.
+Updated the app template to use the new `AppRouter` component instead of `app.getRouter()`, as well as `app.createRoot()` instead of `app.getProvider()`.
 
 To apply this change to an existing app, make the following change to `packages/app/src/App.tsx`:
 
@@ -12,6 +12,37 @@ To apply this change to an existing app, make the following change to `packages/
 
  ...
 
- const AppProvider = app.getProvider();
+-const AppProvider = app.getProvider();
 -const AppRouter = app.getRouter();
+
+ ...
+
+-const App = () => (
++export default app.createRoot(
+-  <AppProvider>
++  <>
+     <AlertDisplay />
+     <OAuthRequestDialog />
+     <AppRouter>
+       <Root>{routes}</Root>
+     </AppRouter>
+-  </AppProvider>
++  </>,
+ );
 ```
+
+The final export step should end up looking something like this:
+
+```tsx
+export default app.createRoot(
+  <>
+    <AlertDisplay />
+    <OAuthRequestDialog />
+    <AppRouter>
+      <Root>{routes}</Root>
+    </AppRouter>
+  </>,
+);
+```
+
+Note that `app.createRoot()` accepts a React element, rather than a component.

packages/app/src/App.tsx

@@ -145,8 +145,6 @@ const app = createApp({
   },
 });
 
-const AppProvider = app.getProvider();
-
 const routes = (
   <FlatRoutes>
     <Route path="/" element={<Navigate to="catalog" />} />
@@ -277,14 +275,12 @@ const routes = (
   </FlatRoutes>
 );
 
-const App = () => (
-  <AppProvider>
+export default app.createRoot(
+  <>
     <AlertDisplay transientTimeoutMs={2500} />
     <OAuthRequestDialog />
     <AppRouter>
       <Root>{routes}</Root>
     </AppRouter>
-  </AppProvider>
+  </>,
 );
-
-export default App;

packages/create-app/templates/default-app/packages/app/src/App.tsx

@@ -53,8 +53,6 @@ const app = createApp({
   },
 });
 
-const AppProvider = app.getProvider();
-
 const routes = (
   <FlatRoutes>
     <Route path="/" element={<Navigate to="catalog" />} />
@@ -96,14 +94,12 @@ const routes = (
   </FlatRoutes>
 );
 
-const App = () => (
-  <AppProvider>
+export default app.createRoot(
+  <>
     <AlertDisplay />
     <OAuthRequestDialog />
     <AppRouter>
       <Root>{routes}</Root>
     </AppRouter>
-  </AppProvider>
+  </>,
 );
-
-export default App;