fix: move easymde out of the server chunk by turning markdown editor into a client component

frontend/nuxt.config.ts

@@ -81,6 +81,7 @@ export default defineNuxtConfig({
   },
   experimental: {
     writeEarlyHints: false,
+    componentIslands: true,
   },
   typescript: {
     // typeCheck: "build", // TODO enable typechecking on build

frontend/src/components/MarkdownEditor.client.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, reactive, ref, watch } from "vue";
-import { useVuelidate, ValidationRule } from "@vuelidate/core";
+import { ValidationRule } from "@vuelidate/core";
 import type Easymde from "easymde";
 import EasyMDE from "easymde";
 import Markdown from "~/components/Markdown.vue";

frontend/src/components/MarkdownEditor.server.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ValidationRule } from "@vuelidate/core";
+import Markdown from "~/components/Markdown.vue";
+import Button from "~/lib/components/design/Button.vue";
+
+const props = withDefaults(
+  defineProps<{
+    raw: string;
+    editing: boolean;
+    deletable: boolean;
+    cancellable: boolean;
+    saveable: boolean;
+    maxlength?: number;
+    errorMessages?: string[];
+    rules?: ValidationRule<string | undefined>[];
+    noPaddingTop?: boolean;
+    maxHeight?: string;
+  }>(),
+  {
+    maxlength: 30_000,
+    errorMessages: undefined,
+    rules: undefined,
+    noPaddingTop: false,
+    maxHeight: "500px",
+  }
+);
+</script>
+
+<template>
+  <div class="relative">
+    <slot name="title" />
+    <div class="flex">
+      <div class="absolute top-2 right-0 space-x-1">
+        <Button>
+          <IconMdiPencil />
+        </Button>
+      </div>
+    </div>
+    <Markdown :raw="raw" />>
+  </div>
+</template>

frontend/src/pages/[user]/[project]/index.vue

@@ -7,7 +7,8 @@ import { ref } from "vue";
 import Card from "~/lib/components/design/Card.vue";
 import ProjectInfo from "~/components/projects/ProjectInfo.vue";
 import MemberList from "~/components/projects/MemberList.vue";
-import MarkdownEditor from "~/components/MarkdownEditor.vue";
+// eslint-disable-next-line import/no-unresolved
+import { MarkdownEditor } from "#components";
 import { hasPerms } from "~/composables/usePerm";
 import { NamedPermission } from "~/types/enums";
 import Markdown from "~/components/Markdown.vue";

frontend/src/pages/[user]/[project]/pages/[...all].vue

@@ -5,7 +5,8 @@ import { User } from "hangar-api";
 import { HangarProject } from "hangar-internal";
 import ProjectPageList from "~/components/projects/ProjectPageList.vue";
 import Markdown from "~/components/Markdown.vue";
-import MarkdownEditor from "~/components/MarkdownEditor.vue";
+// eslint-disable-next-line import/no-unresolved
+import { MarkdownEditor } from "#components";
 import { hasPerms } from "~/composables/usePerm";
 import { NamedPermission } from "~/types/enums";
 import Card from "~/lib/components/design/Card.vue";

frontend/src/pages/[user]/[project]/versions/[version]/index.vue

@@ -15,7 +15,8 @@ import { useErrorRedirect } from "~/lib/composables/useErrorRedirect";
 import TagComponent from "~/components/Tag.vue";
 import { hasPerms } from "~/composables/usePerm";
 import Button from "~/lib/components/design/Button.vue";
-import MarkdownEditor from "~/components/MarkdownEditor.vue";
+// eslint-disable-next-line import/no-unresolved
+import { MarkdownEditor } from "#components";
 import Markdown from "~/components/Markdown.vue";
 import Card from "~/lib/components/design/Card.vue";
 import Link from "~/lib/components/design/Link.vue";

frontend/src/pages/[user]/[project]/versions/new.vue

@@ -13,7 +13,8 @@ import InputText from "~/lib/components/ui/InputText.vue";
 import InputSelect from "~/lib/components/ui/InputSelect.vue";
 import Button from "~/lib/components/design/Button.vue";
 import InputCheckbox from "~/lib/components/ui/InputCheckbox.vue";
-import MarkdownEditor from "~/components/MarkdownEditor.vue";
+// eslint-disable-next-line import/no-unresolved
+import { MarkdownEditor } from "#components";
 import { maxFileSize, minLength, noDuplicated, required, requiredIf, url as validUrl } from "~/lib/composables/useValidationHelpers";
 import { useInternalApi } from "~/composables/useApi";
 import { Platform } from "~/types/enums";

frontend/src/pages/tools/importer.vue

@@ -16,7 +16,8 @@ import InputText from "~/lib/components/ui/InputText.vue";
 import InputSelect from "~/lib/components/ui/InputSelect.vue";
 import UserAvatar from "~/components/UserAvatar.vue";
 import Spoiler from "~/lib/components/design/Spoiler.vue";
-import MarkdownEditor from "~/components/MarkdownEditor.vue";
+// eslint-disable-next-line import/no-unresolved
+import { MarkdownEditor } from "#components";
 import InputTag from "~/lib/components/ui/InputTag.vue";
 import { useAuthStore } from "~/store/auth";
 import { useBackendData, useCategoryOptions, useLicenseOptions } from "~/store/backendData";

frontend/tsconfig.json

@@ -19,7 +19,8 @@
     "types": ["vite/client", "unplugin-icons/types/vue", "nuxt-windicss"],
     "paths": {
       "~/*": ["src/*"],
-      "#imports": [".nuxt/imports"]
+      "#imports": [".nuxt/imports"],
+      "#components": [".nuxt/components"]
     }
   },
   "vueCompilerOptions": {