build: chunk for FormKit

Use `git show -w` to ignore indentation changes here
spraakbanken · Jul 16, 2024 · c04eefb · c04eefb
1 parent f73be6f
commit c04eefb
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 202 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ As this project is a user-facing application, the places in the semantic version
 ### Changed
 
 - Drop unnecessary async usage of the `js-yaml` package
+- The FormKit and Highlight.js libs are imported dynamically to allow for a smaller main asset chunk
 
 ### Fixed
 

diff --git a/src/components/FormKitWrapper.vue b/src/components/FormKitWrapper.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+/** Wrap any FormKit forms with this to provide our custom config and sync locale. */
+import { watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
+import { changeLocale, FormKitProvider } from "@formkit/vue";
+import { formkitConfig } from "@/formkit";
+
+const { locale } = useI18n();
+
+watchEffect(() => changeLocale(locale.value));
+</script>
+
+<template>
+  <FormKitProvider :config="formkitConfig">
+    <slot />
+  </FormKitProvider>
+</template>
diff --git a/src/corpus/CreateCorpus.vue b/src/corpus/CreateCorpus.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
+import { FormKit } from "@formkit/vue";
 import PageTitle from "@/components/PageTitle.vue";
 import LayoutSection from "@/components/LayoutSection.vue";
 import useSpin from "@/spin/spin.composable";
@@ -9,6 +10,7 @@ import { FORMATS_EXT, type FileFormat } from "@/api/corpusConfig";
 import { useAuth } from "@/auth/auth.composable";
 import useCreateCorpus from "@/corpus/createCorpus.composable";
 import HelpBox from "@/components/HelpBox.vue";
+import FormKitWrapper from "@/components/FormKitWrapper.vue";
 
 const { requireAuthentication } = useAuth();
 const { createFromConfig } = useCreateCorpus();
@@ -51,60 +53,62 @@ async function submit(fields: Form) {
     <HelpBox>{{ $t("corpus.create.help") }}</HelpBox>
 
     <PendingContent on="create">
-      <FormKit
-        id="create-corpus"
-        v-slot="{ value }"
-        type="form"
-        :submit-label="$t('create')"
-        :submit-attrs="{
-          inputClass: 'mink-button button-primary',
-        }"
-        @submit="submit"
-      >
+      <FormKitWrapper>
         <FormKit
-          :label="$t('name')"
-          type="text"
-          validation="required:trim"
-          name="name"
-          input-class="w-72"
-          :help="$t('metadata.name.help')"
-        />
+          id="create-corpus"
+          v-slot="{ value }"
+          type="form"
+          :submit-label="$t('create')"
+          :submit-attrs="{
+            inputClass: 'mink-button button-primary',
+          }"
+          @submit="submit"
+        >
+          <FormKit
+            :label="$t('name')"
+            type="text"
+            validation="required:trim"
+            name="name"
+            input-class="w-72"
+            :help="$t('metadata.name.help')"
+          />
 
-        <FormKit
-          :label="$t('description')"
-          type="textarea"
-          name="description"
-          :help="$t('metadata.description.help')"
-          input-class="block w-full h-20"
-        />
+          <FormKit
+            :label="$t('description')"
+            type="textarea"
+            name="description"
+            :help="$t('metadata.description.help')"
+            input-class="block w-full h-20"
+          />
 
-        <FormKit
-          name="format"
-          :label="$t('fileFormat')"
-          type="select"
-          input-class="w-72"
-          :help="$t('config.format.help')"
-          :options="formatOptions"
-          validate="required"
-        />
+          <FormKit
+            name="format"
+            :label="$t('fileFormat')"
+            type="select"
+            input-class="w-72"
+            :help="$t('config.format.help')"
+            :options="formatOptions"
+            validate="required"
+          />
 
-        <HelpBox v-if="value!.format === 'pdf'" important>
-          <icon :icon="['far', 'lightbulb']" class="mr-1" />
-          {{ $t("config.format.note.pdf") }}
-        </HelpBox>
+          <HelpBox v-if="value!.format === 'pdf'" important>
+            <icon :icon="['far', 'lightbulb']" class="mr-1" />
+            {{ $t("config.format.note.pdf") }}
+          </HelpBox>
 
-        <FormKit
-          v-if="value!.format === 'xml'"
-          name="textAnnotation"
-          :label="$t('config.text_annotation')"
-          validation="required:trim|matches:/^[^<>\s]*$/"
-          input-class="w-40 font-mono"
-          :help="$t('config.text_annotation.help')"
-        >
-          <template #prefix>&lt;</template>
-          <template #suffix>&gt;</template>
+          <FormKit
+            v-if="value!.format === 'xml'"
+            name="textAnnotation"
+            :label="$t('config.text_annotation')"
+            validation="required:trim|matches:/^[^<>\s]*$/"
+            input-class="w-40 font-mono"
+            :help="$t('config.text_annotation.help')"
+          >
+            <template #prefix>&lt;</template>
+            <template #suffix>&gt;</template>
+          </FormKit>
         </FormKit>
-      </FormKit>
+      </FormKitWrapper>
     </PendingContent>
   </LayoutSection>
 </template>