fix: fix loadDictionary for React Router (#1054)

* fix: fix loadDictionary for React Router

* fix: fix loadDictionary for React Router

* fix: fix loadDictionary for React Router

* fix: add changeset for loadLocaleFromCookies bug fix

Co-Authored-By: Max Prilutskiy <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Max Prilutskiy <[email protected]>

Author: 3 people

.changeset/five-bugs-confess.md

@@ -0,0 +1,5 @@
+---
+"@lingo.dev/_react": patch
+---
+
+Fix loadLocaleFromCookies to return default locale instead of null when no cookie is found

packages/react/src/react-router/loader.spec.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it, vi } from "vitest";
+import { LOCALE_COOKIE_NAME } from "../core";
+import { loadDictionary_internal } from "./loader";
+
+describe("loadDictionary_internal", () => {
+  function createMockRequest(cookieHeader?: string): Request {
+    const headers = new Headers();
+    if (cookieHeader) {
+      headers.set("Cookie", cookieHeader);
+    }
+    return new Request("http://localhost", { headers });
+  }
+
+  const mockDictionaryLoader = {
+    en: vi.fn().mockResolvedValue({ default: { hello: "Hello" } }),
+    es: vi.fn().mockResolvedValue({ default: { hello: "Hola" } }),
+    fr: vi.fn().mockResolvedValue({ default: { hello: "Bonjour" } }),
+  };
+
+  it("should return null when no Cookie header is present", async () => {
+    const request = createMockRequest();
+    const result = await loadDictionary_internal(request, mockDictionaryLoader);
+
+    expect(mockDictionaryLoader.en).toHaveBeenCalled();
+    expect(result).toEqual({ hello: "Hello" });
+  });
+
+  it("should return null when Cookie header exists but no lingo-locale cookie", async () => {
+    const request = createMockRequest("session=abc123; other-cookie=value");
+    const result = await loadDictionary_internal(request, mockDictionaryLoader);
+
+    expect(mockDictionaryLoader.en).toHaveBeenCalled();
+    expect(result).toEqual({ hello: "Hello" });
+  });
+
+  it("should parse locale from lingo-locale cookie", async () => {
+    const request = createMockRequest(`${LOCALE_COOKIE_NAME}=es`);
+    const result = await loadDictionary_internal(request, mockDictionaryLoader);
+
+    expect(mockDictionaryLoader.es).toHaveBeenCalled();
+    expect(result).toEqual({ hello: "Hola" });
+  });
+
+  it("should handle lingo-locale cookie with other cookies", async () => {
+    const request = createMockRequest(
+      `session=abc; ${LOCALE_COOKIE_NAME}=fr; other=value`,
+    );
+    const result = await loadDictionary_internal(request, mockDictionaryLoader);
+
+    expect(mockDictionaryLoader.fr).toHaveBeenCalled();
+    expect(result).toEqual({ hello: "Bonjour" });
+  });
+
+  it("should handle lingo-locale cookie with spaces", async () => {
+    const request = createMockRequest(
+      `session=abc; ${LOCALE_COOKIE_NAME}=es ; other=value`,
+    );
+    const result = await loadDictionary_internal(request, mockDictionaryLoader);
+
+    expect(mockDictionaryLoader.es).toHaveBeenCalled();
+    expect(result).toEqual({ hello: "Hola" });
+  });
+
+  it("should use explicit locale string when provided", async () => {
+    const result = await loadDictionary_internal("fr", mockDictionaryLoader);
+
+    expect(mockDictionaryLoader.fr).toHaveBeenCalled();
+    expect(result).toEqual({ hello: "Bonjour" });
+  });
+
+  it("should return null when locale is not available in dictionary", async () => {
+    const request = createMockRequest(`${LOCALE_COOKIE_NAME}=de`);
+    const result = await loadDictionary_internal(request, mockDictionaryLoader);
+
+    expect(result).toBeNull();
+  });
+
+  it("should return null when explicit locale is not available", async () => {
+    const result = await loadDictionary_internal("de", mockDictionaryLoader);
+
+    expect(result).toBeNull();
+  });
+
+  it("should handle malformed cookie values gracefully", async () => {
+    const request = createMockRequest(`${LOCALE_COOKIE_NAME}=`);
+    const result = await loadDictionary_internal(request, mockDictionaryLoader);
+
+    expect(result).toBeNull();
+  });
+
+  it("should handle cookie with equals sign in value", async () => {
+    const request = createMockRequest(`${LOCALE_COOKIE_NAME}=en=US`);
+    const mockLoader = {
+      "en=US": vi.fn().mockResolvedValue({ default: { hello: "Hello US" } }),
+    };
+    const result = await loadDictionary_internal(request, mockLoader);
+
+    expect(mockLoader["en=US"]).toHaveBeenCalled();
+    expect(result).toEqual({ hello: "Hello US" });
+  });
+
+  it("should handle empty string locale", async () => {
+    const result = await loadDictionary_internal("", mockDictionaryLoader);
+
+    expect(result).toBeNull();
+  });
+
+  it("should extract default export from loader result", async () => {
+    const customLoader = {
+      custom: vi.fn().mockResolvedValue({
+        default: { test: "value" },
+        other: { ignored: "data" },
+      }),
+    };
+    const result = await loadDictionary_internal("custom", customLoader);
+
+    expect(result).toEqual({ test: "value" });
+  });
+});

packages/react/src/react-router/loader.ts

@@ -1,4 +1,4 @@
-import { LOCALE_COOKIE_NAME } from "../core";
+import { DEFAULT_LOCALE, LOCALE_COOKIE_NAME } from "../core";
 
 /**
  * A placeholder function for loading dictionaries that contain localized content.
@@ -67,28 +67,48 @@ export const loadDictionary = async (
   return null;
 };
 
-async function loadLocaleFromCookies(request: Request) {
-  const cookieHeaderValue = request.headers.get("Cookie") || "";
-  const cookieValue = cookieHeaderValue
+function loadLocaleFromCookies(request: Request) {
+  // it's a Request, so get the Cookie header
+  const cookieHeaderValue = request.headers.get("Cookie");
+
+  // there's no Cookie header, so return default
+  if (!cookieHeaderValue) {
+    return DEFAULT_LOCALE;
+  }
+
+  // get the lingo-locale cookie
+  const cookiePrefix = `${LOCALE_COOKIE_NAME}=`;
+  const cookie = cookieHeaderValue
     .split(";")
-    .find((cookie) => cookie.trim().startsWith(`${LOCALE_COOKIE_NAME}=`));
-  const locale = cookieValue ? cookieValue.split("=")[1] : null;
-  return locale;
+    .find((cookie) => cookie.trim().startsWith(cookiePrefix));
+
+  // there's no lingo-locale cookie, so return default
+  if (!cookie) {
+    return DEFAULT_LOCALE;
+  }
+
+  // extract the locale value from the cookie
+  return cookie.trim().substring(cookiePrefix.length);
 }
 
 export async function loadDictionary_internal(
   requestOrExplicitLocale: Request | string,
   dictionaryLoader: Record<string, () => Promise<any>>,
 ) {
+  // gets the locale (falls back to "en")
   const locale =
     typeof requestOrExplicitLocale === "string"
       ? requestOrExplicitLocale
-      : await loadLocaleFromCookies(requestOrExplicitLocale);
+      : loadLocaleFromCookies(requestOrExplicitLocale);
+
+  // get dictionary loader for the locale
+  const loader = dictionaryLoader[locale];
 
-  if (locale && dictionaryLoader[locale]) {
-    return dictionaryLoader[locale]().then((value) => {
-      return value.default;
-    });
+  // locale is not available in the dictionary
+  if (!loader) {
+    // TODO: throw a clear error message
+    return null;
   }
-  return null;
+
+  return loader().then((value) => value.default);
 }