feat(ui): lazy load routes

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<APITesterForm>(),
     {
@@ -103,3 +103,5 @@ export const ApiTester = () => {
     </div>
   );
 };
+
+export default ApiTester;

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<CreateForm>({
     initialValues: {
       name: "",
@@ -205,3 +205,5 @@ type Meta = Extract<
   OperationResponse<"show_clan_meta">,
   { status: "success" }
 >["data"];
+
+export default CreateClan;

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;

pkgs/clan-app/ui/src/routes/clans/index.ts

@@ -1,3 +0,0 @@
-export * from "./list";
-export * from "./create";
-export * from "./details";

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 (
     <div class="">
@@ -158,3 +158,5 @@ export const ClanList = () => {
     </div>
   );
 };
+
+export default ClanList;

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;

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() {
       </p>
     </div>
   );
-}
+};
+
+export default DiskView;

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<FlashFormValues>({
     initialValues: {
       machine: {
@@ -436,3 +436,5 @@ export const Flash = () => {
     </>
   );
 };
+
+export default Flash;

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<ServiceModel>();
 
   return (
@@ -74,3 +74,5 @@ export const HostList: Component = () => {
     </div>
   );
 };
+
+export default HostList;

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<RouteDefinition, "children"> & {
   label: string;
@@ -24,6 +9,8 @@ export type AppRoute = Omit<RouteDefinition, "children"> & {
   hidden?: boolean;
 };
 
+const lazyLoad = (path: string) => lazy(() => import(path));
+
 const routes: AppRoute[] = [
   {
     path: "/",
@@ -39,24 +26,24 @@ const routes: AppRoute[] = [
       {
         path: "/",
         label: "Overview",
-        component: () => <MachineListView />,
+        component: lazyLoad("./machines/list"),
       },
       {
         path: "/create",
         label: "Create",
-        component: () => <CreateMachine />,
+        component: lazyLoad("./machines/create"),
       },
       {
         path: "/:id",
         label: "Details",
         hidden: true,
-        component: () => <MachineDetails />,
+        component: lazyLoad("./machines/details"),
       },
       {
         path: "/:id/vars",
         label: "Vars",
         hidden: true,
-        component: () => <VarsPage />,
+        component: lazyLoad("./machines/install/vars-step"),
       },
     ],
   },
@@ -69,18 +56,18 @@ const routes: AppRoute[] = [
       {
         path: "/",
         label: "Overview",
-        component: () => <ClanList />,
+        component: lazyLoad("./clans/list"),
       },
       {
         path: "/create",
         label: "Create",
-        component: () => <CreateClan />,
+        component: lazyLoad("./clans/create"),
       },
       {
         path: "/:id",
         label: "Details",
         hidden: true,
-        component: () => <ClanDetails />,
+        component: lazyLoad("./clans/details"),
       },
     ],
   },
@@ -92,19 +79,19 @@ const routes: AppRoute[] = [
       {
         path: "/",
         label: "App Store",
-        component: () => <ModuleList />,
+        component: lazyLoad("./modules/list"),
       },
       {
         path: "details/:id",
         label: "Details",
         hidden: true,
-        component: () => <ModuleDetails />,
+        component: lazyLoad("./modules/details"),
       },
       {
         path: "/add/:id",
         label: "Details",
         hidden: true,
-        component: () => <AddModule />,
+        component: lazyLoad("./modules/add"),
       },
     ],
   },
@@ -116,7 +103,7 @@ const routes: AppRoute[] = [
       {
         path: "/flash",
         label: "Flash Installer",
-        component: () => <Flash />,
+        component: lazyLoad("./flash/view"),
       },
     ],
   },
@@ -124,7 +111,7 @@ const routes: AppRoute[] = [
     path: "/welcome",
     label: "",
     hidden: true,
-    component: () => <Welcome />,
+    component: lazyLoad("./welcome"),
   },
   {
     path: "/internal-dev",
@@ -133,24 +120,24 @@ const routes: AppRoute[] = [
       {
         path: "/hosts",
         label: "Local Hosts",
-        component: () => <HostList />,
+        component: lazyLoad("./hosts/list"),
       },
       {
         path: "/3d",
         label: "3D-Playground",
-        component: () => <ThreePlayground />,
+        component: lazyLoad("../three"),
       },
       {
         path: "/api_testing",
         label: "api_testing",
         hidden: false,
-        component: () => <ApiTester />,
+        component: lazyLoad("../api_test"),
       },
       {
         path: "/components",
         label: "Components",
         hidden: false,
-        component: () => <Components />,
+        component: lazyLoad("./components"),
       },
     ],
   },

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() {
       </div>
     </>
   );
-}
+};
+
+export default CreateMachine;

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;

pkgs/clan-app/ui/src/routes/machines/index.ts

@@ -1,3 +0,0 @@
-export * from "./details";
-export * from "./create";
-export * from "./list";

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 = () => {
     </div>
   );
 };
+
+export default VarsPage;

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<Filter>({ tags: [] });
@@ -213,3 +213,5 @@ export const MachineListView: Component = () => {
     </>
   );
 };
+
+export default MachineListView;

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;

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<string, any>,

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;

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 = () => {
     </div>
   );
 };
+
+export default Welcome;

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<string>("");
 
@@ -269,3 +269,5 @@ export const ThreePlayground = () => {
     </div>
   );
 };
+
+export default ThreePlayground;