fix: nextjs is slow dev server (#364)

* fix: nextjs slow compile time * fix: change optimized package imports and transpile packages * fix: format issue
2024-04-25 22:06:15 +02:00
parent 04a313186f
commit b78d32b81c
112 changed files with 345 additions and 394 deletions
@@ -1,6 +1,8 @@
 "use client";

 import { useCallback } from "react";
+import { ActionIcon } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -10,7 +12,6 @@ import {
  showSuccessNotification,
 } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { ActionIcon, IconTrash } from "@homarr/ui";

 import { revalidatePathAction } from "../../../revalidatePathAction";

@@ -1,11 +1,11 @@
 "use client";

 import Link from "next/link";
+import { Button, Group, Stack, Textarea, TextInput } from "@mantine/core";

 import { useForm, zodResolver } from "@homarr/form";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Group, Stack, Textarea, TextInput } from "@homarr/ui";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";

@@ -1,6 +1,7 @@
+import { Container, Stack, Title } from "@mantine/core";
+
 import { api } from "@homarr/api/server";
 import { getI18n } from "@homarr/translation/server";
-import { Container, Stack, Title } from "@homarr/ui";

 import { AppEditForm } from "./_app-edit-form";

@@ -1,4 +1,4 @@
-import { Container, Stack, Title } from "@homarr/ui";
+import { Container, Stack, Title } from "@mantine/core";

 import { AppNewForm } from "./_app-new-form";

@@ -1,8 +1,4 @@
 import Link from "next/link";
-
-import type { RouterOutputs } from "@homarr/api";
-import { api } from "@homarr/api/server";
-import { getI18n } from "@homarr/translation/server";
 import {
  ActionIcon,
  ActionIconGroup,
@@ -12,12 +8,15 @@ import {
  Card,
  Container,
  Group,
-  IconApps,
-  IconPencil,
  Stack,
  Text,
  Title,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconApps, IconPencil } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { api } from "@homarr/api/server";
+import { getI18n } from "@homarr/translation/server";

 import { AppDeleteButton } from "./_app-delete-button";

@@ -1,7 +1,8 @@
+import { Avatar } from "@mantine/core";
+import type { MantineSize } from "@mantine/core";
+
 import { getIconUrl } from "@homarr/definitions";
 import type { IntegrationKind } from "@homarr/definitions";
-import { Avatar } from "@homarr/ui";
-import type { MantineSize } from "@homarr/ui";

 interface IntegrationAvatarProps {
  size: MantineSize;
@@ -1,6 +1,8 @@
 "use client";

 import { useRouter } from "next/navigation";
+import { ActionIcon } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";

 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal } from "@homarr/modals";
@@ -9,7 +11,6 @@ import {
  showSuccessNotification,
 } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { ActionIcon, IconTrash } from "@homarr/ui";

 import { revalidatePathAction } from "../../../revalidatePathAction";

@@ -2,13 +2,6 @@

 import { useState } from "react";
 import { useParams } from "next/navigation";
-import { useDisclosure } from "@mantine/hooks";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-import type { RouterOutputs } from "@homarr/api";
-import { integrationSecretKindObject } from "@homarr/definitions";
-import { useI18n } from "@homarr/translation/client";
 import {
  ActionIcon,
  Avatar,
@@ -16,12 +9,18 @@ import {
  Card,
  Collapse,
  Group,
-  IconEye,
-  IconEyeOff,
  Kbd,
  Stack,
  Text,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+import type { RouterOutputs } from "@homarr/api";
+import { integrationSecretKindObject } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";

 import { integrationSecretIcons } from "./_integration-secret-icons";

@@ -1,6 +1,7 @@
+import { IconKey, IconPassword, IconUser } from "@tabler/icons-react";
+
 import type { IntegrationSecretKind } from "@homarr/definitions";
 import type { TablerIcon } from "@homarr/ui";
-import { IconKey, IconPassword, IconUser } from "@homarr/ui";

 export const integrationSecretIcons = {
  username: IconUser,
@@ -1,11 +1,11 @@
 "use client";

 import type { ChangeEventHandler, FocusEventHandler } from "react";
+import { PasswordInput, TextInput } from "@mantine/core";

 import { integrationSecretKindObject } from "@homarr/definitions";
 import type { IntegrationSecretKind } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
-import { PasswordInput, TextInput } from "@homarr/ui";

 import { integrationSecretIcons } from "./_integration-secret-icons";

@@ -1,6 +1,8 @@
 "use client";

 import { useRef, useState } from "react";
+import { Alert, Anchor, Group, Loader } from "@mantine/core";
+import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";

 import type { RouterInputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -9,15 +11,6 @@ import {
  showSuccessNotification,
 } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import {
-  Alert,
-  Anchor,
-  Group,
-  IconCheck,
-  IconInfoCircle,
-  IconX,
-  Loader,
-} from "@homarr/ui";

 interface UseTestConnectionDirtyProps {
  defaultDirty: boolean;
@@ -2,6 +2,7 @@

 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { Button, Fieldset, Group, Stack, TextInput } from "@mantine/core";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -16,7 +17,6 @@ import {
  showSuccessNotification,
 } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Fieldset, Group, Stack, TextInput } from "@homarr/ui";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";

@@ -1,7 +1,8 @@
+import { Container, Group, Stack, Title } from "@mantine/core";
+
 import { api } from "@homarr/api/server";
 import { getIntegrationName } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
-import { Container, Group, Stack, Title } from "@homarr/ui";

 import { IntegrationAvatar } from "../../_integration-avatar";
 import { EditIntegrationForm } from "./_integration-edit-form";
@@ -2,18 +2,11 @@

 import { useMemo, useState } from "react";
 import Link from "next/link";
+import { Group, Menu, ScrollArea, Stack, Text, TextInput } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";

 import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
-import {
-  Group,
-  IconSearch,
-  Menu,
-  ScrollArea,
-  Stack,
-  Text,
-  TextInput,
-} from "@homarr/ui";

 import { IntegrationAvatar } from "../_integration-avatar";

@@ -3,6 +3,14 @@
 import { useCallback } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import {
+  Button,
+  Fieldset,
+  Group,
+  SegmentedControl,
+  Stack,
+  TextInput,
+} from "@mantine/core";

 import { clientApi } from "@homarr/api/client";
 import type {
@@ -17,14 +25,6 @@ import {
  showSuccessNotification,
 } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import {
-  Button,
-  Fieldset,
-  Group,
-  SegmentedControl,
-  Stack,
-  TextInput,
-} from "@homarr/ui";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";

@@ -1,9 +1,9 @@
 import { notFound } from "next/navigation";
+import { Container, Group, Stack, Title } from "@mantine/core";

 import type { IntegrationKind } from "@homarr/definitions";
 import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
-import { Container, Group, Stack, Title } from "@homarr/ui";
 import type { validation } from "@homarr/validation";
 import { z } from "@homarr/validation";

@@ -1,11 +1,4 @@
 import Link from "next/link";
-
-import type { RouterOutputs } from "@homarr/api";
-import { api } from "@homarr/api/server";
-import { objectEntries } from "@homarr/common";
-import type { IntegrationKind } from "@homarr/definitions";
-import { getIntegrationName } from "@homarr/definitions";
-import { getScopedI18n } from "@homarr/translation/server";
 import {
  AccordionControl,
  AccordionItem,
@@ -15,10 +8,7 @@ import {
  Anchor,
  Button,
  Container,
-  CountBadge,
  Group,
-  IconChevronDown,
-  IconPencil,
  Menu,
  MenuDropdown,
  MenuTarget,
@@ -31,7 +21,16 @@ import {
  TableTr,
  Text,
  Title,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconChevronDown, IconPencil } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { api } from "@homarr/api/server";
+import { objectEntries } from "@homarr/common";
+import type { IntegrationKind } from "@homarr/definitions";
+import { getIntegrationName } from "@homarr/definitions";
+import { getScopedI18n } from "@homarr/translation/server";
+import { CountBadge } from "@homarr/ui";

 import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
 import { IntegrationAvatar } from "./_integration-avatar";
@@ -1,6 +1,5 @@
 import type { PropsWithChildren } from "react";
-
-import { AppShellMain } from "@homarr/ui";
+import { AppShellMain } from "@mantine/core";

 import { MainHeader } from "~/components/layout/header";
 import { ClientShell } from "~/components/layout/shell";
@@ -1,4 +1,4 @@
-import { Stack, Title } from "@homarr/ui";
+import { Stack, Title } from "@mantine/core";

 export default function HomePage() {
  return (