chore: Nuxt 4 upgrade (#7426)

frontend/app/composables/recipe-page/shared-state.ts

@@ -0,0 +1,192 @@
+import type { UserOut } from "~/lib/api/types/user";
+import { useNavigationWarning } from "~/composables/use-navigation-warning";
+
+export enum PageMode {
+  EDIT = "EDIT",
+  VIEW = "VIEW",
+  COOK = "COOK",
+}
+
+export enum EditorMode {
+  JSON = "JSON",
+  FORM = "FORM",
+}
+
+/**
+ * PageState encapsulates the state of the recipe page the can be shared across components.
+ * It allows and facilitates the complex state management of the recipe page where many components
+ * need to share and communicate with each other and guarantee consistency.
+ *
+ * **Page Modes**
+ *
+ * are ComputedRefs so we can use a readonly reactive copy of the state of the page.
+ */
+interface PageState {
+  slug: Ref<string>;
+  imageKey: Ref<number>;
+
+  pageMode: ComputedRef<PageMode>;
+  editMode: ComputedRef<EditorMode>;
+
+  /**
+   * true is the page is in edit mode and the edit mode is in form mode.
+   */
+  isEditForm: ComputedRef<boolean>;
+  /**
+   * true is the page is in edit mode and the edit mode is in json mode.
+   */
+  isEditJSON: ComputedRef<boolean>;
+  /**
+   * true is the page is in view mode.
+   */
+  isEditMode: ComputedRef<boolean>;
+  /**
+   * true is the page is in cook mode.
+   */
+  isCookMode: ComputedRef<boolean>;
+  /**
+   * true if the recipe is currently being parsed.
+   */
+  isParsing: ComputedRef<boolean>;
+
+  setMode: (v: PageMode) => void;
+  setEditMode: (v: EditorMode) => void;
+  toggleEditMode: () => void;
+  toggleCookMode: () => void;
+  toggleIsParsing: (v?: boolean) => void;
+}
+
+type PageRefs = ReturnType<typeof pageRefs>;
+
+const memo: Record<string, PageRefs> = {};
+
+function pageRefs(slug: string) {
+  return {
+    slugRef: ref(slug),
+    pageModeRef: ref(PageMode.VIEW),
+    editModeRef: ref(EditorMode.FORM),
+    isParsingRef: ref(false),
+    imageKey: ref(1),
+  };
+}
+
+function pageState({ slugRef, pageModeRef, editModeRef, isParsingRef, imageKey }: PageRefs): PageState {
+  const { activateNavigationWarning, deactivateNavigationWarning } = useNavigationWarning();
+
+  const toggleEditMode = () => {
+    if (editModeRef.value === EditorMode.FORM) {
+      editModeRef.value = EditorMode.JSON;
+      return;
+    }
+    editModeRef.value = EditorMode.FORM;
+  };
+
+  const toggleCookMode = () => {
+    if (pageModeRef.value === PageMode.COOK) {
+      pageModeRef.value = PageMode.VIEW;
+      return;
+    }
+    pageModeRef.value = PageMode.COOK;
+  };
+
+  const toggleIsParsing = (v: boolean | null = null) => {
+    if (v === null) {
+      v = !isParsingRef.value;
+    }
+
+    isParsingRef.value = v;
+  };
+
+  const setEditMode = (v: EditorMode) => {
+    editModeRef.value = v;
+  };
+
+  const setMode = (toMode: PageMode) => {
+    const fromMode = pageModeRef.value;
+
+    if (fromMode === PageMode.EDIT) {
+      if (toMode === PageMode.VIEW) {
+        setEditMode(EditorMode.FORM);
+      }
+      deactivateNavigationWarning();
+    }
+    else if (toMode === PageMode.EDIT) {
+      activateNavigationWarning();
+    }
+
+    pageModeRef.value = toMode;
+  };
+
+  return {
+    slug: slugRef,
+    pageMode: computed(() => pageModeRef.value),
+    editMode: computed(() => editModeRef.value),
+    imageKey,
+
+    toggleEditMode,
+    setMode,
+    setEditMode,
+    toggleCookMode,
+    toggleIsParsing,
+
+    isEditForm: computed(() => {
+      return pageModeRef.value === PageMode.EDIT && editModeRef.value === EditorMode.FORM;
+    }),
+    isEditJSON: computed(() => {
+      return pageModeRef.value === PageMode.EDIT && editModeRef.value === EditorMode.JSON;
+    }),
+    isEditMode: computed(() => {
+      return pageModeRef.value === PageMode.EDIT;
+    }),
+    isCookMode: computed(() => {
+      return pageModeRef.value === PageMode.COOK;
+    }),
+    isParsing: computed(() => {
+      return isParsingRef.value;
+    }),
+  };
+}
+
+/**
+ * usePageState provides a common way to interact with shared state across the
+ * RecipePage component.
+ */
+export function usePageState(slug: string): PageState {
+  if (!memo[slug]) {
+    memo[slug] = pageRefs(slug);
+  }
+
+  return pageState(memo[slug]);
+}
+
+export function clearPageState(slug: string) {
+  // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+  delete memo[slug];
+}
+
+/**
+ * usePageUser provides a wrapper around auth that provides a type-safe way to
+ * access the UserOut type from the context. If no user is logged in then an empty
+ * object with all properties set to their zero value is returned.
+ */
+export function usePageUser(): { user: UserOut } {
+  const auth = useMealieAuth();
+
+  if (!auth.user.value) {
+    return {
+      user: {
+        id: "",
+        group: "",
+        groupId: "",
+        groupSlug: "",
+        household: "",
+        householdId: "",
+        householdSlug: "",
+        cacheKey: "",
+        email: "",
+      },
+    };
+  }
+
+  return { user: auth.user.value };
+}

frontend/app/composables/recipe-page/use-extract-ingredient-references.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { useExtractIngredientReferences } from "./use-extract-ingredient-references";
+import { useLocales } from "../use-locales";
+
+vi.mock("../use-locales");
+
+const punctuationMarks = ["*", "?", "/", "!", "**", "&", "."];
+
+describe("test use extract ingredient references", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useLocales).mockReturnValue({
+      locales: [{ value: "en-US", pluralFoodHandling: "without-unit" }],
+      locale: { value: "en-US", pluralFoodHandling: "without-unit" },
+    } as any);
+  });
+
+  test("when text empty return empty", () => {
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "");
+    expect(result).toStrictEqual(new Set());
+  });
+
+  test("when and ingredient matches exactly and has a reference id, return the referenceId", () => {
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onion");
+
+    expect(result).toEqual(new Set(["123"]));
+  });
+
+  test.each(punctuationMarks)("when ingredient is suffixed by punctuation, return the referenceId", (suffix) => {
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onion" + suffix);
+
+    expect(result).toEqual(new Set(["123"]));
+  });
+
+  test.each(punctuationMarks)("when ingredient is prefixed by punctuation, return the referenceId", (prefix) => {
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing " + prefix + "Onion");
+    expect(result).toEqual(new Set(["123"]));
+  });
+
+  test("when ingredient is first on a multiline, return the referenceId", () => {
+    const multilineSting = "lksjdlk\nOnion";
+
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], multilineSting);
+    expect(result).toEqual(new Set(["123"]));
+  });
+
+  test("when the ingredient matches partially exactly and has a reference id, return the referenceId", () => {
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onions");
+    expect(result).toEqual(new Set(["123"]));
+  });
+
+  test("when the ingredient matches with different casing and has a reference id, return the referenceId", () => {
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing oNions");
+    expect(result).toEqual(new Set(["123"]));
+  });
+
+  test("when no ingredients, return empty", () => {
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([], [], "A sentence containing oNions");
+    expect(result).toEqual(new Set());
+  });
+
+  test("when and ingredient matches but in the existing referenceIds, do not return the referenceId", () => {
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onion", referenceId: "123" }], ["123"], "A sentence containing Onion");
+
+    expect(result).toEqual(new Set());
+  });
+
+  test("when an word is 2 letter of shorter, it is ignored", () => {
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onion", referenceId: "123" }], [], "A sentence containing On");
+
+    expect(result).toEqual(new Set());
+  });
+});

frontend/app/composables/recipe-page/use-extract-ingredient-references.ts

@@ -0,0 +1,66 @@
+import type { RecipeIngredient } from "~/lib/api/types/recipe";
+import { useIngredientTextParser } from "~/composables/recipes";
+
+function normalize(word: string): string {
+  let normalizing = word;
+  normalizing = removeTrailingPunctuation(normalizing);
+  normalizing = removeStartingPunctuation(normalizing);
+  return normalizing;
+}
+
+function removeTrailingPunctuation(word: string): string {
+  const punctuationAtEnding = /\p{P}+$/u;
+  return word.replace(punctuationAtEnding, "");
+}
+
+function removeStartingPunctuation(word: string): string {
+  const punctuationAtBeginning = /^\p{P}+/u;
+  return word.replace(punctuationAtBeginning, "");
+}
+
+function isBlackListedWord(word: string) {
+  // Ignore matching blacklisted words when auto-linking - This is kind of a cludgey implementation. We're blacklisting common words but
+  // other common phrases trigger false positives and I'm not sure how else to approach this. In the future I maybe look at looking directly
+  // at the food variable and seeing if the food is in the instructions, but I still need to support those who don't want to provide the value
+  // and only use the "notes" feature.
+  const blackListedText: string[] = [
+    "and",
+    "the",
+    "for",
+    "with",
+    "without",
+  ];
+  const blackListedRegexMatch = /\d/gm; // Match Any Number
+  return blackListedText.includes(word) || word.match(blackListedRegexMatch);
+}
+
+export function useExtractIngredientReferences() {
+  const { parseIngredientText } = useIngredientTextParser();
+
+  function extractIngredientReferences(recipeIngredients: RecipeIngredient[], activeRefs: string[], text: string): Set<string> {
+    function ingredientMatchesWord(ingredient: RecipeIngredient, word: string) {
+      const searchText = parseIngredientText(ingredient);
+      return searchText.toLowerCase().includes(word.toLowerCase());
+    }
+
+    const availableIngredients = recipeIngredients
+      .filter(ingredient => ingredient.referenceId !== undefined)
+      .filter(ingredient => !activeRefs.includes(ingredient.referenceId as string));
+
+    const allMatchedIngredientIds: string[] = text
+      .toLowerCase()
+      .split(/\s/)
+      .map(normalize)
+      .filter(word => word.length > 2)
+      .filter(word => !isBlackListedWord(word))
+      .flatMap(word => availableIngredients.filter(ingredient => ingredientMatchesWord(ingredient, word)))
+      .map(ingredient => ingredient.referenceId as string);
+    //  deduplicate
+
+    return new Set<string>(allMatchedIngredientIds);
+  }
+
+  return {
+    extractIngredientReferences,
+  };
+}