Drop async js-yaml usage, #161

CHANGELOG.md

@@ -13,6 +13,10 @@ As this project is a user-facing application, the places in the semantic version
 
 ## [Unreleased]
 
+### Changed
+
+- Drop unnecessary async usage of the `js-yaml` package
+
 ## [1.6.0] (2024-04-30)
 
 ### Added

src/api/corpusConfig.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import yaml from "js-yaml";
+import Yaml from "js-yaml";
 import {
   makeConfig,
   parseConfig,
@@ -8,8 +8,8 @@ import {
 } from "@/api/corpusConfig";
 
 describe("makeConfig", () => {
-  test("sets minimal info", async () => {
-    const yaml = await makeConfig("mink-abc123", {
+  test("sets minimal info", () => {
+    const yaml = makeConfig("mink-abc123", {
       name: { swe: "Nyheter", eng: "News" },
       format: "txt",
     });
@@ -20,17 +20,17 @@ describe("makeConfig", () => {
     expect(yaml).toContain("- <token>:saldo.baseform2 as lemma");
   });
 
-  test("sets segmenter", async () => {
-    const yaml = await makeConfig("mink-abc123", {
+  test("sets segmenter", () => {
+    const yaml = makeConfig("mink-abc123", {
       name: { swe: "Nyheter", eng: "News" },
       format: "txt",
       sentenceSegmenter: "linebreaks",
     });
     expect(yaml).toContain("sentence_segmenter: linebreaks");
   });
 
-  test("sets text_annotation", async () => {
-    const yaml = await makeConfig("mink-abc123", {
+  test("sets text_annotation", () => {
+    const yaml = makeConfig("mink-abc123", {
       name: { swe: "Nyheter", eng: "News" },
       format: "xml",
       textAnnotation: "article",
@@ -39,35 +39,35 @@ describe("makeConfig", () => {
     expect(yaml).toContain("- article as text");
   });
 
-  test("sets pdf annotations", async () => {
-    const yaml = await makeConfig("mink-abc123", {
+  test("sets pdf annotations", () => {
+    const yaml = makeConfig("mink-abc123", {
       name: { swe: "Nyheter", eng: "News" },
       format: "pdf",
     });
     expect(yaml).toContain("- text");
     expect(yaml).toContain("- page:number");
   });
 
-  test("requires complete timespan", async () => {
+  test("requires complete timespan", () => {
     const yamlFrom = () =>
       makeConfig("mink-abc123", {
         name: { swe: "Nyheter", eng: "News" },
         format: "pdf",
         datetimeFrom: "2024-02-01",
       });
-    expect(yamlFrom).rejects.toThrowError();
+    expect(yamlFrom).toThrowError();
 
     const yamlTo = () =>
       makeConfig("mink-abc123", {
         name: { swe: "Nyheter", eng: "News" },
         format: "pdf",
         datetimeTo: "2024-02-01",
       });
-    expect(yamlTo).rejects.toThrowError();
+    expect(yamlTo).toThrowError();
   });
 
-  test("sets timespan info", async () => {
-    const yaml = await makeConfig("mink-abc123", {
+  test("sets timespan info", () => {
+    const yaml = makeConfig("mink-abc123", {
       name: { swe: "Nyheter", eng: "News" },
       format: "pdf",
       datetimeFrom: "2000-01-01",
@@ -81,8 +81,8 @@ describe("makeConfig", () => {
     expect(yaml).toContain("- <text>:dateformat.datefrom");
   });
 
-  test("sets NER info", async () => {
-    const yaml = await makeConfig("mink-abc123", {
+  test("sets NER info", () => {
+    const yaml = makeConfig("mink-abc123", {
       name: { swe: "Nyheter", eng: "News" },
       format: "pdf",
       enableNer: true,
@@ -92,32 +92,32 @@ describe("makeConfig", () => {
 });
 
 describe("parseConfig", () => {
-  test("handle minimal info", async () => {
-    const configYaml = await yaml.dump({
+  test("handle minimal info", () => {
+    const configYaml = Yaml.dump({
       metadata: { name: { swe: "Nyheter", eng: "News" } },
       import: { importer: "text_import:parse" },
     });
-    const config = await parseConfig(configYaml);
+    const config = parseConfig(configYaml);
     expect(config.name).toStrictEqual({ swe: "Nyheter", eng: "News" });
     expect(config.format).toBe("txt");
   });
 
-  test("requires format", async () => {
-    const configYaml = await yaml.dump({
+  test("requires format", () => {
+    const configYaml = Yaml.dump({
       metadata: { name: { swe: "Nyheter", eng: "News" } },
     });
-    expect(() => parseConfig(configYaml)).rejects.toThrowError();
+    expect(() => parseConfig(configYaml)).toThrowError();
   });
 
-  test("requires name", async () => {
-    const configYaml = await yaml.dump({
+  test("requires name", () => {
+    const configYaml = Yaml.dump({
       import: { importer: "text_import:parse" },
     });
-    expect(() => parseConfig(configYaml)).rejects.toThrowError();
+    expect(() => parseConfig(configYaml)).toThrowError();
   });
 
-  test("handle full info", async () => {
-    const configYaml = await yaml.dump({
+  test("handle full info", () => {
+    const configYaml = Yaml.dump({
       metadata: {
         name: { swe: "Nyheter", eng: "News" },
         description: { swe: "Senaste nytt", eng: "Latest news" },
@@ -135,7 +135,7 @@ describe("parseConfig", () => {
         annotations: ["swener.ne"],
       },
     });
-    const config = await parseConfig(configYaml);
+    const config = parseConfig(configYaml);
     const expected: ConfigOptions = {
       format: "xml",
       name: { swe: "Nyheter", eng: "News" },

src/api/corpusConfig.ts

@@ -1,4 +1,4 @@
-const Yaml = import("js-yaml").then((m) => m.default);
+import Yaml from "js-yaml";
 
 import type { ByLang } from "@/util.types";
 import type {
@@ -32,7 +32,7 @@ export const FORMATS_EXT = Object.keys(FORMATS);
 
 export const SEGMENTERS: ConfigSentenceSegmenter[] = ["linebreaks"];
 
-export async function makeConfig(id: string, options: ConfigOptions) {
+export function makeConfig(id: string, options: ConfigOptions): string {
   const {
     format,
     name,
@@ -150,7 +150,7 @@ export async function makeConfig(id: string, options: ConfigOptions) {
     );
   }
 
-  return (await Yaml).dump(config as SparvConfig);
+  return Yaml.dump(config as SparvConfig);
 }
 
 export function emptyConfig(): ConfigOptions {
@@ -166,8 +166,8 @@ export function emptyConfig(): ConfigOptions {
  *
  * May throw all kinds of errors, the sky is the limit.
  */
-export async function parseConfig(configYaml: string): Promise<ConfigOptions> {
-  const config = (await Yaml).load(configYaml) as any;
+export function parseConfig(configYaml: string): ConfigOptions {
+  const config = Yaml.load(configYaml) as any;
 
   if (!config)
     throw new TypeError(`Parsing config failed, returned "${config}"`);

src/corpus/config/CorpusConfiguration.vue

@@ -4,7 +4,6 @@ import type { AxiosError } from "axios";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import { computedAsync } from "@vueuse/core";
 import type { MinkResponse } from "@/api/api.types";
 import {
   type ConfigOptions,
@@ -44,7 +43,7 @@ type Form = {
   enableNer: boolean;
 };
 
-const configOptions = computedAsync(getParsedConfig);
+const configOptions = computed(getParsedConfig);
 
 const formatOptions = computed<FormKitOptionsList>(() =>
   FORMATS_EXT.map((ext) => ({
@@ -76,10 +75,10 @@ const segmenterOptions = computed<SegmenterOptions>(() => {
   return options as SegmenterOptions;
 });
 
-async function getParsedConfig() {
+function getParsedConfig() {
   if (!config.value) return undefined;
   try {
-    const parsed = await parseConfig(config.value);
+    const parsed = parseConfig(config.value);
     return parsed;
   } catch (error) {
     alert(t("corpus.config.parse.error"), "error");
@@ -117,11 +116,11 @@ async function submit(fields: Form) {
 
 <template>
   <PendingContent :on="`corpus/${corpusId}/config`">
-    <!-- Using the key attribute to re-render whole form when async parseConfig is done -->
+    <!-- Using the key attribute to re-render whole form after fetching config -->
     <FormKit
       id="corpus-config"
       v-slot="{ value }"
-      :key="JSON.stringify(configOptions)"
+      :key="config"
       type="form"
       :submit-label="$t('save')"
       :submit-attrs="{

src/corpus/config/config.composable.ts

@@ -1,5 +1,4 @@
 import { computed } from "vue";
-import { computedAsync } from "@vueuse/core";
 import {
   makeConfig,
   parseConfig,
@@ -16,7 +15,7 @@ export default function useConfig(corpusId: string) {
 
   const corpus = computed(() => resourceStore.corpora[corpusId]);
   const config = computed(() => corpus.value?.config);
-  const configOptions = computedAsync(getParsedConfig);
+  const configOptions = computed(getParsedConfig);
   const corpusName = computed(() => th(configOptions.value?.name));
 
   async function loadConfig() {
@@ -31,7 +30,7 @@ export default function useConfig(corpusId: string) {
   }
 
   async function uploadConfig(configOptions: ConfigOptions) {
-    const configYaml = await makeConfig(corpusId, configOptions);
+    const configYaml = makeConfig(corpusId, configOptions);
     await uploadConfigRaw(configYaml);
   }
 
@@ -42,10 +41,10 @@ export default function useConfig(corpusId: string) {
     loadConfig();
   }
 
-  async function getParsedConfig() {
+  function getParsedConfig() {
     if (!config.value) return undefined;
     try {
-      const parsed = await parseConfig(config.value);
+      const parsed = parseConfig(config.value);
       return parsed;
     } catch (error) {
       console.error(`Error parsing config for "${corpusId}":`, error);

src/corpus/createCorpus.composable.ts

@@ -63,7 +63,7 @@ export default function useCreateCorpus() {
 
   // Like the `uploadConfig` in `config.composable.ts` but takes `corpusId` as argument.
   async function uploadConfig(configOptions: ConfigOptions, corpusId: string) {
-    const configYaml = await makeConfig(corpusId, configOptions);
+    const configYaml = makeConfig(corpusId, configOptions);
     await mink.saveConfig(corpusId, configYaml);
     resourceStore.corpora[corpusId].config = configYaml;
   }