React 18 and Vite (#4510)

resources/scripts/routers/routes.ts

@@ -1,4 +1,6 @@
-import React, { lazy } from 'react';
+import type { ComponentType } from 'react';
+import { lazy } from 'react';
+
 import ServerConsole from '@/components/server/console/ServerConsoleContainer';
 import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
 import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
@@ -15,7 +17,7 @@ import ActivityLogContainer from '@/components/dashboard/activity/ActivityLogCon
 import ServerActivityLogContainer from '@/components/server/ServerActivityLogContainer';
 
 // Each of the router files is already code split out appropriately — so
-// all of the items above will only be loaded in when that router is loaded.
+// all the items above will only be loaded in when that router is loaded.
 //
 // These specific lazy loaded routes are to avoid loading in heavy screens
 // for the server dashboard when they're only needed for specific instances.
@@ -23,119 +25,147 @@ const FileEditContainer = lazy(() => import('@/components/server/files/FileEditC
 const ScheduleEditContainer = lazy(() => import('@/components/server/schedules/ScheduleEditContainer'));
 
 interface RouteDefinition {
-    path: string;
+    /**
+     * Route is the path that will be matched against, this field supports wildcards.
+     */
+    route: string;
+    /**
+     * Path is the path that will be used for any navbars or links, do not use wildcards or fancy
+     * matchers here. If this field is left undefined, this route will not have a navigation element,
+     */
+    path?: string;
     // If undefined is passed this route is still rendered into the router itself
     // but no navigation link is displayed in the sub-navigation menu.
     name: string | undefined;
-    component: React.ComponentType;
-    exact?: boolean;
+    component: ComponentType;
+    end?: boolean;
 }
 
 interface ServerRouteDefinition extends RouteDefinition {
-    permission: string | string[] | null;
+    permission?: string | string[];
 }
 
 interface Routes {
-    // All of the routes available under "/account"
+    // All the routes available under "/account"
     account: RouteDefinition[];
-    // All of the routes available under "/server/:id"
+    // All the routes available under "/server/:id"
     server: ServerRouteDefinition[];
 }
 
 export default {
     account: [
         {
-            path: '/',
+            route: '',
+            path: '',
             name: 'Account',
             component: AccountOverviewContainer,
-            exact: true,
+            end: true,
         },
         {
-            path: '/api',
+            route: 'api',
+            path: 'api',
             name: 'API Credentials',
             component: AccountApiContainer,
         },
         {
-            path: '/ssh',
+            route: 'ssh',
+            path: 'ssh',
             name: 'SSH Keys',
             component: AccountSSHContainer,
         },
         {
-            path: '/activity',
+            route: 'activity',
+            path: 'activity',
             name: 'Activity',
             component: ActivityLogContainer,
         },
     ],
     server: [
         {
-            path: '/',
+            route: '',
+            path: '',
             permission: null,
             name: 'Console',
             component: ServerConsole,
-            exact: true,
+            end: true,
         },
         {
-            path: '/files',
+            route: 'files/*',
+            path: 'files',
             permission: 'file.*',
             name: 'Files',
             component: FileManagerContainer,
         },
         {
-            path: '/files/:action(edit|new)',
+            route: 'files/edit/*',
             permission: 'file.*',
             name: undefined,
             component: FileEditContainer,
         },
         {
-            path: '/databases',
+            route: 'files/new/*',
+            permission: 'file.*',
+            name: undefined,
+            component: FileEditContainer,
+        },
+        {
+            route: 'databases/*',
+            path: 'databases',
             permission: 'database.*',
             name: 'Databases',
             component: DatabasesContainer,
         },
         {
-            path: '/schedules',
+            route: 'schedules/*',
+            path: 'schedules',
             permission: 'schedule.*',
             name: 'Schedules',
             component: ScheduleContainer,
         },
         {
-            path: '/schedules/:id',
+            route: 'schedules/:id/*',
             permission: 'schedule.*',
             name: undefined,
             component: ScheduleEditContainer,
         },
         {
-            path: '/users',
+            route: 'users/*',
+            path: 'users',
             permission: 'user.*',
             name: 'Users',
             component: UsersContainer,
         },
         {
-            path: '/backups',
+            route: 'backups/*',
+            path: 'backups',
             permission: 'backup.*',
             name: 'Backups',
             component: BackupContainer,
         },
         {
-            path: '/network',
+            route: 'network/*',
+            path: 'network',
             permission: 'allocation.*',
             name: 'Network',
             component: NetworkContainer,
         },
         {
-            path: '/startup',
+            route: 'startup/*',
+            path: 'startup',
             permission: 'startup.*',
             name: 'Startup',
             component: StartupContainer,
         },
         {
-            path: '/settings',
+            route: 'settings/*',
+            path: 'settings',
             permission: ['settings.*', 'file.sftp'],
             name: 'Settings',
             component: SettingsContainer,
         },
         {
-            path: '/activity',
+            route: 'activity/*',
+            path: 'activity',
             permission: 'activity.*',
             name: 'Activity',
             component: ServerActivityLogContainer,