From 985f66dac8ce21df6b5a8e802d61f21b074b7909 Mon Sep 17 00:00:00 2001 From: Brian McGee Date: Thu, 22 May 2025 16:05:18 +0100 Subject: [PATCH] feat(ui): lazy load routes --- pkgs/clan-app/ui/src/api_test.tsx | 4 +- pkgs/clan-app/ui/src/routes/clans/create.tsx | 4 +- pkgs/clan-app/ui/src/routes/clans/details.tsx | 4 +- pkgs/clan-app/ui/src/routes/clans/index.ts | 3 -- pkgs/clan-app/ui/src/routes/clans/list.tsx | 4 +- .../ui/src/routes/components/index.tsx | 4 +- pkgs/clan-app/ui/src/routes/disk/view.tsx | 6 ++- pkgs/clan-app/ui/src/routes/flash/view.tsx | 4 +- .../src/routes/hosts/{view.tsx => list.tsx} | 4 +- pkgs/clan-app/ui/src/routes/index.tsx | 51 +++++++------------ .../ui/src/routes/machines/create.tsx | 6 ++- .../ui/src/routes/machines/details.tsx | 4 +- pkgs/clan-app/ui/src/routes/machines/index.ts | 3 -- .../src/routes/machines/install/vars-step.tsx | 4 +- pkgs/clan-app/ui/src/routes/machines/list.tsx | 4 +- pkgs/clan-app/ui/src/routes/modules/add.tsx | 4 +- .../ui/src/routes/modules/details.tsx | 4 +- pkgs/clan-app/ui/src/routes/modules/list.tsx | 4 +- pkgs/clan-app/ui/src/routes/welcome/index.tsx | 4 +- pkgs/clan-app/ui/src/three.tsx | 4 +- 20 files changed, 72 insertions(+), 57 deletions(-) delete mode 100644 pkgs/clan-app/ui/src/routes/clans/index.ts rename pkgs/clan-app/ui/src/routes/hosts/{view.tsx => list.tsx} (97%) delete mode 100644 pkgs/clan-app/ui/src/routes/machines/index.ts diff --git a/pkgs/clan-app/ui/src/api_test.tsx b/pkgs/clan-app/ui/src/api_test.tsx index 299de699f..7e6ee1b26 100644 --- a/pkgs/clan-app/ui/src/api_test.tsx +++ b/pkgs/clan-app/ui/src/api_test.tsx @@ -18,7 +18,7 @@ interface APITesterForm extends FieldValues { payload: string; } -export const ApiTester = () => { +const ApiTester = () => { const [persistedTestData, setPersistedTestData] = makePersisted( createSignal(), { @@ -103,3 +103,5 @@ export const ApiTester = () => { ); }; + +export default ApiTester; diff --git a/pkgs/clan-app/ui/src/routes/clans/create.tsx b/pkgs/clan-app/ui/src/routes/clans/create.tsx index 6533d2ed6..1358e0312 100644 --- a/pkgs/clan-app/ui/src/routes/clans/create.tsx +++ b/pkgs/clan-app/ui/src/routes/clans/create.tsx @@ -17,7 +17,7 @@ type CreateForm = Meta & { template: string; }; -export const CreateClan = () => { +const CreateClan = () => { const [formStore, { Form, Field }] = createForm({ initialValues: { name: "", @@ -205,3 +205,5 @@ type Meta = Extract< OperationResponse<"show_clan_meta">, { status: "success" } >["data"]; + +export default CreateClan; diff --git a/pkgs/clan-app/ui/src/routes/clans/details.tsx b/pkgs/clan-app/ui/src/routes/clans/details.tsx index 1b3f90369..4aef296fb 100644 --- a/pkgs/clan-app/ui/src/routes/clans/details.tsx +++ b/pkgs/clan-app/ui/src/routes/clans/details.tsx @@ -139,7 +139,7 @@ const EditClanForm = (props: EditClanFormProps) => { type GeneralData = SuccessQuery<"show_clan_meta">["data"]; -export const ClanDetails = () => { +const ClanDetails = () => { const params = useParams(); const clan_dir = window.atob(params.id); // Fetch general meta data @@ -158,3 +158,5 @@ export const ClanDetails = () => { ); }; + +export default ClanDetails; diff --git a/pkgs/clan-app/ui/src/routes/clans/index.ts b/pkgs/clan-app/ui/src/routes/clans/index.ts deleted file mode 100644 index 7c0e879c8..000000000 --- a/pkgs/clan-app/ui/src/routes/clans/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from "./list"; -export * from "./create"; -export * from "./details"; diff --git a/pkgs/clan-app/ui/src/routes/clans/list.tsx b/pkgs/clan-app/ui/src/routes/clans/list.tsx index d14988418..5a4544014 100644 --- a/pkgs/clan-app/ui/src/routes/clans/list.tsx +++ b/pkgs/clan-app/ui/src/routes/clans/list.tsx @@ -124,7 +124,7 @@ const ClanItem = (props: ClanItemProps) => { ); }; -export const ClanList = () => { +const ClanList = () => { const navigate = useNavigate(); return (
@@ -158,3 +158,5 @@ export const ClanList = () => {
); }; + +export default ClanList; diff --git a/pkgs/clan-app/ui/src/routes/components/index.tsx b/pkgs/clan-app/ui/src/routes/components/index.tsx index 91f130fb4..d2a67474d 100644 --- a/pkgs/clan-app/ui/src/routes/components/index.tsx +++ b/pkgs/clan-app/ui/src/routes/components/index.tsx @@ -8,7 +8,7 @@ const disabled = [false, true]; const readOnly = [false, true]; const error = [false, true]; -export const Components = () => { +const Components = () => { const [formStore, { Form, Field }] = createForm<{ ef: string }>({}); return ( <> @@ -116,3 +116,5 @@ export const Components = () => { ); }; + +export default Components; diff --git a/pkgs/clan-app/ui/src/routes/disk/view.tsx b/pkgs/clan-app/ui/src/routes/disk/view.tsx index 6c5ded434..58f855be6 100644 --- a/pkgs/clan-app/ui/src/routes/disk/view.tsx +++ b/pkgs/clan-app/ui/src/routes/disk/view.tsx @@ -2,7 +2,7 @@ import { callApi } from "@/src/api"; import { useQuery } from "@tanstack/solid-query"; import { useClanContext } from "@/src/contexts/clan"; -export function DiskView() { +const DiskView = () => { const { activeClanURI } = useClanContext(); const query = useQuery(() => ({ @@ -28,4 +28,6 @@ export function DiskView() {

); -} +}; + +export default DiskView; diff --git a/pkgs/clan-app/ui/src/routes/flash/view.tsx b/pkgs/clan-app/ui/src/routes/flash/view.tsx index 000489b08..baff76836 100644 --- a/pkgs/clan-app/ui/src/routes/flash/view.tsx +++ b/pkgs/clan-app/ui/src/routes/flash/view.tsx @@ -46,7 +46,7 @@ export interface FlashFormValues extends FieldValues { sshKeys: File[]; // This field will use CustomFileField } -export const Flash = () => { +const Flash = () => { const [formStore, { Form, Field }] = createForm({ initialValues: { machine: { @@ -436,3 +436,5 @@ export const Flash = () => { ); }; + +export default Flash; diff --git a/pkgs/clan-app/ui/src/routes/hosts/view.tsx b/pkgs/clan-app/ui/src/routes/hosts/list.tsx similarity index 97% rename from pkgs/clan-app/ui/src/routes/hosts/view.tsx rename to pkgs/clan-app/ui/src/routes/hosts/list.tsx index e80d8b9e8..a1ae30fdb 100644 --- a/pkgs/clan-app/ui/src/routes/hosts/view.tsx +++ b/pkgs/clan-app/ui/src/routes/hosts/list.tsx @@ -8,7 +8,7 @@ type ServiceModel = Extract< { status: "success" } >["data"]["services"]; -export const HostList: Component = () => { +const HostList: Component = () => { const [services, setServices] = createSignal(); return ( @@ -74,3 +74,5 @@ export const HostList: Component = () => { ); }; + +export default HostList; diff --git a/pkgs/clan-app/ui/src/routes/index.tsx b/pkgs/clan-app/ui/src/routes/index.tsx index 18958e539..14d619ee5 100644 --- a/pkgs/clan-app/ui/src/routes/index.tsx +++ b/pkgs/clan-app/ui/src/routes/index.tsx @@ -1,21 +1,6 @@ import { Navigate, RouteDefinition } from "@solidjs/router"; -import { - CreateMachine, - MachineDetails, - MachineListView, -} from "@/src/routes/machines"; -import { VarsPage } from "@/src/routes/machines/install/vars-step"; -import { ClanDetails, ClanList, CreateClan } from "@/src/routes/clans"; -import { ModuleList } from "@/src/routes/modules/list"; -import { ModuleDetails } from "@/src/routes/modules/details"; -import { ModuleDetails as AddModule } from "@/src/routes/modules/add"; -import { Flash } from "@/src/routes/flash/view"; -import { Welcome } from "@/src/routes/welcome"; -import { HostList } from "@/src/routes/hosts/view"; -import { ThreePlayground } from "@/src/three"; -import { ApiTester } from "@/src/api_test"; -import { Components } from "@/src/routes/components"; import { IconVariant } from "@/src/components/icon"; +import { lazy } from "solid-js"; export type AppRoute = Omit & { label: string; @@ -24,6 +9,8 @@ export type AppRoute = Omit & { hidden?: boolean; }; +const lazyLoad = (path: string) => lazy(() => import(path)); + const routes: AppRoute[] = [ { path: "/", @@ -39,24 +26,24 @@ const routes: AppRoute[] = [ { path: "/", label: "Overview", - component: () => , + component: lazyLoad("./machines/list"), }, { path: "/create", label: "Create", - component: () => , + component: lazyLoad("./machines/create"), }, { path: "/:id", label: "Details", hidden: true, - component: () => , + component: lazyLoad("./machines/details"), }, { path: "/:id/vars", label: "Vars", hidden: true, - component: () => , + component: lazyLoad("./machines/install/vars-step"), }, ], }, @@ -69,18 +56,18 @@ const routes: AppRoute[] = [ { path: "/", label: "Overview", - component: () => , + component: lazyLoad("./clans/list"), }, { path: "/create", label: "Create", - component: () => , + component: lazyLoad("./clans/create"), }, { path: "/:id", label: "Details", hidden: true, - component: () => , + component: lazyLoad("./clans/details"), }, ], }, @@ -92,19 +79,19 @@ const routes: AppRoute[] = [ { path: "/", label: "App Store", - component: () => , + component: lazyLoad("./modules/list"), }, { path: "details/:id", label: "Details", hidden: true, - component: () => , + component: lazyLoad("./modules/details"), }, { path: "/add/:id", label: "Details", hidden: true, - component: () => , + component: lazyLoad("./modules/add"), }, ], }, @@ -116,7 +103,7 @@ const routes: AppRoute[] = [ { path: "/flash", label: "Flash Installer", - component: () => , + component: lazyLoad("./flash/view"), }, ], }, @@ -124,7 +111,7 @@ const routes: AppRoute[] = [ path: "/welcome", label: "", hidden: true, - component: () => , + component: lazyLoad("./welcome"), }, { path: "/internal-dev", @@ -133,24 +120,24 @@ const routes: AppRoute[] = [ { path: "/hosts", label: "Local Hosts", - component: () => , + component: lazyLoad("./hosts/list"), }, { path: "/3d", label: "3D-Playground", - component: () => , + component: lazyLoad("../three"), }, { path: "/api_testing", label: "api_testing", hidden: false, - component: () => , + component: lazyLoad("../api_test"), }, { path: "/components", label: "Components", hidden: false, - component: () => , + component: lazyLoad("./components"), }, ], }, diff --git a/pkgs/clan-app/ui/src/routes/machines/create.tsx b/pkgs/clan-app/ui/src/routes/machines/create.tsx index e6719e251..04a93c901 100644 --- a/pkgs/clan-app/ui/src/routes/machines/create.tsx +++ b/pkgs/clan-app/ui/src/routes/machines/create.tsx @@ -16,7 +16,7 @@ import { useClanContext } from "@/src/contexts/clan"; type CreateMachineForm = OperationArgs<"create_machine">; -export function CreateMachine() { +const CreateMachine = () => { const navigate = useNavigate(); const { activeClanURI } = useClanContext(); @@ -189,4 +189,6 @@ export function CreateMachine() { ); -} +}; + +export default CreateMachine; diff --git a/pkgs/clan-app/ui/src/routes/machines/details.tsx b/pkgs/clan-app/ui/src/routes/machines/details.tsx index 64e0d7794..0b713cb8d 100644 --- a/pkgs/clan-app/ui/src/routes/machines/details.tsx +++ b/pkgs/clan-app/ui/src/routes/machines/details.tsx @@ -699,7 +699,7 @@ const MachineForm = (props: MachineDetailsProps) => { ); }; -export const MachineDetails = () => { +const MachineDetails = () => { const params = useParams(); const { activeClanURI } = useClanContext(); @@ -735,3 +735,5 @@ export const MachineDetails = () => { ); }; + +export default MachineDetails; diff --git a/pkgs/clan-app/ui/src/routes/machines/index.ts b/pkgs/clan-app/ui/src/routes/machines/index.ts deleted file mode 100644 index d7371c018..000000000 --- a/pkgs/clan-app/ui/src/routes/machines/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from "./details"; -export * from "./create"; -export * from "./list"; diff --git a/pkgs/clan-app/ui/src/routes/machines/install/vars-step.tsx b/pkgs/clan-app/ui/src/routes/machines/install/vars-step.tsx index f83a155b4..fae1cdf02 100644 --- a/pkgs/clan-app/ui/src/routes/machines/install/vars-step.tsx +++ b/pkgs/clan-app/ui/src/routes/machines/install/vars-step.tsx @@ -203,7 +203,7 @@ export const VarsStep = (props: VarsStepProps) => { ); }; -export const VarsPage = () => { +const VarsPage = () => { const params = useParams(); const navigate = useNavigate(); const { activeClanURI } = useClanContext(); @@ -249,3 +249,5 @@ export const VarsPage = () => { ); }; + +export default VarsPage; diff --git a/pkgs/clan-app/ui/src/routes/machines/list.tsx b/pkgs/clan-app/ui/src/routes/machines/list.tsx index ff2a20e83..7e5d34f34 100644 --- a/pkgs/clan-app/ui/src/routes/machines/list.tsx +++ b/pkgs/clan-app/ui/src/routes/machines/list.tsx @@ -18,7 +18,7 @@ export interface Filter { tags: string[]; } -export const MachineListView: Component = () => { +const MachineListView: Component = () => { const queryClient = useQueryClient(); const [filter, setFilter] = createSignal({ tags: [] }); @@ -213,3 +213,5 @@ export const MachineListView: Component = () => { ); }; + +export default MachineListView; diff --git a/pkgs/clan-app/ui/src/routes/modules/add.tsx b/pkgs/clan-app/ui/src/routes/modules/add.tsx index c11f045e0..8b323b23b 100644 --- a/pkgs/clan-app/ui/src/routes/modules/add.tsx +++ b/pkgs/clan-app/ui/src/routes/modules/add.tsx @@ -7,7 +7,7 @@ import { createForm, FieldValues, SubmitHandler } from "@modular-forms/solid"; import { SelectInput } from "@/src/Form/fields/Select"; import { useClanContext } from "@/src/contexts/clan"; -export const ModuleDetails = () => { +const ModuleDetails = () => { const params = useParams(); const { activeClanURI } = useClanContext(); const modulesQuery = createModulesQuery(activeClanURI()); @@ -27,6 +27,8 @@ export const ModuleDetails = () => { ); }; +export default ModuleDetails; + interface AddModuleProps { data: ModuleInfo; id: string; diff --git a/pkgs/clan-app/ui/src/routes/modules/details.tsx b/pkgs/clan-app/ui/src/routes/modules/details.tsx index 504c0c6b9..9c1b05ed1 100644 --- a/pkgs/clan-app/ui/src/routes/modules/details.tsx +++ b/pkgs/clan-app/ui/src/routes/modules/details.tsx @@ -12,7 +12,7 @@ import Icon from "@/src/components/icon"; import { useClanContext } from "@/src/contexts/clan"; import { activeClanURI } from "@/src/stores/clan"; -export const ModuleDetails = () => { +const ModuleDetails = () => { const params = useParams(); const { activeClanURI } = useClanContext(); const modulesQuery = createModulesQuery(activeClanURI()); @@ -32,6 +32,8 @@ export const ModuleDetails = () => { ); }; +export default ModuleDetails; + function deepMerge( // eslint-disable-next-line @typescript-eslint/no-explicit-any obj1: Record, diff --git a/pkgs/clan-app/ui/src/routes/modules/list.tsx b/pkgs/clan-app/ui/src/routes/modules/list.tsx index 31288c107..216f23cf3 100644 --- a/pkgs/clan-app/ui/src/routes/modules/list.tsx +++ b/pkgs/clan-app/ui/src/routes/modules/list.tsx @@ -108,7 +108,7 @@ const ModuleItem = (props: { ); }; -export const ModuleList = () => { +const ModuleList = () => { const queryClient = useQueryClient(); const { activeClanURI } = useClanContext(); const modulesQuery = createModulesQuery(activeClanURI(), { @@ -214,3 +214,5 @@ export const ModuleList = () => { ); }; + +export default ModuleList; diff --git a/pkgs/clan-app/ui/src/routes/welcome/index.tsx b/pkgs/clan-app/ui/src/routes/welcome/index.tsx index 0d31557e0..90bc465eb 100644 --- a/pkgs/clan-app/ui/src/routes/welcome/index.tsx +++ b/pkgs/clan-app/ui/src/routes/welcome/index.tsx @@ -3,7 +3,7 @@ import { registerClan } from "@/src/hooks"; import { useNavigate } from "@solidjs/router"; import { useClanContext } from "@/src/contexts/clan"; -export const Welcome = () => { +const Welcome = () => { const navigate = useNavigate(); const { setActiveClanURI } = useClanContext(); return ( @@ -35,3 +35,5 @@ export const Welcome = () => { ); }; + +export default Welcome; diff --git a/pkgs/clan-app/ui/src/three.tsx b/pkgs/clan-app/ui/src/three.tsx index 0f9e9b0ed..4505b152c 100644 --- a/pkgs/clan-app/ui/src/three.tsx +++ b/pkgs/clan-app/ui/src/three.tsx @@ -230,7 +230,7 @@ const View = (props: ViewProps) => { ); }; -export const ThreePlayground = () => { +const ThreePlayground = () => { const [count, setCount] = createSignal(1); const [selected, setSelected] = createSignal(""); @@ -269,3 +269,5 @@ export const ThreePlayground = () => { ); }; + +export default ThreePlayground;