chore(examples): fix tanstack-start example on API & SSR requests (#2210)

Author: depsimon

examples/tanstack-start/src/api.ts

@@ -2,5 +2,18 @@ import {
   createStartAPIHandler,
   defaultAPIFileRouteHandler,
 } from "@tanstack/react-start/api"
+import {
+  defaultLocale,
+  dynamicActivate,
+  isLocaleValid,
+} from "./modules/lingui/i18n"
+
+export default createStartAPIHandler(async (ctx) => {
+  // Define the locale based on the Accept-Language header
+  const headerLocale = ctx.request.headers.get("Accept-Language") ?? ""
+  await dynamicActivate(
+    isLocaleValid(headerLocale) ? headerLocale : defaultLocale
+  )
 
-export default createStartAPIHandler(defaultAPIFileRouteHandler)
+  return defaultAPIFileRouteHandler(ctx)
+})

examples/tanstack-start/src/locales/en/messages.po

@@ -13,43 +13,50 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
+#. js-lingui-explicit-id
+#: src/routes/users.$userId.tsx:18
+msgid "Failed to fetch user"
+msgstr "Failed to fetch user"
+
+#. js-lingui-explicit-id
+#: src/routes/users.route.tsx:18
+msgid "Failed to fetch users"
+msgstr "Failed to fetch users"
+
+#. js-lingui-explicit-id
+#: src/routes/api/users.$id.ts:22
+msgid "User not found"
+msgstr "User not found"
+
 #: src/routes/posts_.$postId.deep.tsx:24
 msgid "← All Posts"
 msgstr "← All Posts"
 
-#: src/routes/deferred.tsx:57
+#: src/routes/deferred.tsx:70
 msgid "Count: {count}"
 msgstr "Count: {count}"
 
-#: src/routes/posts.$postId.tsx:31
+#: src/routes/posts.$postId.tsx:35
 msgid "Deep View"
 msgstr "Deep View"
 
 #: src/routes/__root.tsx:138
 msgid "Deferred"
 msgstr "Deferred"
 
-#: src/routes/users.$userId.tsx:16
-msgid "Failed to fetch user"
-msgstr "Failed to fetch user"
-
-#: src/routes/users.route.tsx:14
-msgid "Failed to fetch users"
-msgstr "Failed to fetch users"
-
-#: src/components/NotFound.tsx:15
+#: src/components/NotFound.tsx:19
 msgid "Go back"
 msgstr "Go back"
 
 #: src/components/DefaultCatchBoundary.tsx:48
 msgid "Go Back"
 msgstr "Go Back"
 
-#: src/routes/_pathlessLayout/_nested-layout.tsx:19
+#: src/routes/_pathlessLayout/_nested-layout.tsx:21
 msgid "Go to route A"
 msgstr "Go to route A"
 
-#: src/routes/_pathlessLayout/_nested-layout.tsx:27
+#: src/routes/_pathlessLayout/_nested-layout.tsx:29
 msgid "Go to route B"
 msgstr "Go to route B"
 
@@ -58,67 +65,67 @@ msgstr "Go to route B"
 msgid "Home"
 msgstr "Home"
 
-#: src/routes/_pathlessLayout.tsx:11
+#: src/routes/_pathlessLayout.tsx:12
 msgid "I'm a layout"
 msgstr "I'm a layout"
 
-#: src/routes/_pathlessLayout/_nested-layout.tsx:11
+#: src/routes/_pathlessLayout/_nested-layout.tsx:12
 msgid "I'm a nested layout"
 msgstr "I'm a nested layout"
 
-#: src/routes/_pathlessLayout/_nested-layout/route-a.tsx:11
+#: src/routes/_pathlessLayout/_nested-layout/route-a.tsx:13
 msgid "I'm A!"
 msgstr "I'm A!"
 
-#: src/routes/_pathlessLayout/_nested-layout/route-b.tsx:11
+#: src/routes/_pathlessLayout/_nested-layout/route-b.tsx:13
 msgid "I'm B!"
 msgstr "I'm B!"
 
-#: src/routes/deferred.tsx:59
+#: src/routes/deferred.tsx:74
 msgid "Increment"
 msgstr "Increment"
 
-#: src/routes/deferred.tsx:41
+#: src/routes/deferred.tsx:44
 msgid "Loading person..."
 msgstr "Loading person..."
 
-#: src/routes/deferred.tsx:51
+#: src/routes/deferred.tsx:60
 msgid "Loading stuff..."
 msgstr "Loading stuff..."
 
 #: src/routes/posts.route.tsx:17
 msgid "Non-existent Post"
 msgstr "Non-existent Post"
 
-#: src/routes/users.route.tsx:29
+#: src/routes/users.route.tsx:33
 msgid "Non-existent User"
 msgstr "Non-existent User"
 
 #: src/routes/__root.tsx:130
 msgid "Pathless Layout"
 msgstr "Pathless Layout"
 
-#: src/routes/posts.$postId.tsx:12
+#: src/routes/posts.$postId.tsx:14
 msgid "Post not found"
 msgstr "Post not found"
 
 #: src/routes/__root.tsx:114
 msgid "Posts"
 msgstr "Posts"
 
-#: src/routes/posts.index.tsx:9
+#: src/routes/posts.index.tsx:11
 msgid "Select a post."
 msgstr "Select a post."
 
-#: src/routes/users.index.tsx:9
+#: src/routes/users.index.tsx:11
 msgid "Select a user."
 msgstr "Select a user."
 
-#: src/components/NotFound.tsx:21
+#: src/components/NotFound.tsx:25
 msgid "Start Over"
 msgstr "Start Over"
 
-#: src/components/NotFound.tsx:8
+#: src/components/NotFound.tsx:10
 msgid "The page you are looking for does not exist."
 msgstr "The page you are looking for does not exist."
 
@@ -130,14 +137,14 @@ msgstr "This Route Does Not Exist"
 msgid "Try Again"
 msgstr "Try Again"
 
-#: src/routes/users.$userId.tsx:22
+#: src/routes/users.$userId.tsx:26
 msgid "User not found"
 msgstr "User not found"
 
 #: src/routes/__root.tsx:122
 msgid "Users"
 msgstr "Users"
 
-#: src/routes/index.tsx:11
+#: src/routes/index.tsx:12
 msgid "Welcome Home!!!"
 msgstr "Welcome Home!!!"

examples/tanstack-start/src/locales/fr/messages.po

@@ -13,43 +13,50 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: Poedit 3.5\n"
 
+#. js-lingui-explicit-id
+#: src/routes/users.$userId.tsx:18
+msgid "Failed to fetch user"
+msgstr "Échec du chargement de l'utilisateur"
+
+#. js-lingui-explicit-id
+#: src/routes/users.route.tsx:18
+msgid "Failed to fetch users"
+msgstr "Échec du chargement des utilisateurs"
+
+#. js-lingui-explicit-id
+#: src/routes/api/users.$id.ts:22
+msgid "User not found"
+msgstr "Utilisateur non trouvé"
+
 #: src/routes/posts_.$postId.deep.tsx:24
 msgid "← All Posts"
 msgstr "← Tous les articles"
 
-#: src/routes/deferred.tsx:57
+#: src/routes/deferred.tsx:70
 msgid "Count: {count}"
 msgstr "Compte: {count}"
 
-#: src/routes/posts.$postId.tsx:31
+#: src/routes/posts.$postId.tsx:35
 msgid "Deep View"
 msgstr "Vue détaillée"
 
 #: src/routes/__root.tsx:138
 msgid "Deferred"
 msgstr "Différé"
 
-#: src/routes/users.$userId.tsx:16
-msgid "Failed to fetch user"
-msgstr "Échec du chargement de l'utilisateur"
-
-#: src/routes/users.route.tsx:14
-msgid "Failed to fetch users"
-msgstr "Échec du chargement des utilisateurs"
-
-#: src/components/NotFound.tsx:15
+#: src/components/NotFound.tsx:19
 msgid "Go back"
 msgstr "Retour"
 
 #: src/components/DefaultCatchBoundary.tsx:48
 msgid "Go Back"
 msgstr "Retour"
 
-#: src/routes/_pathlessLayout/_nested-layout.tsx:19
+#: src/routes/_pathlessLayout/_nested-layout.tsx:21
 msgid "Go to route A"
 msgstr "Aller à la route A"
 
-#: src/routes/_pathlessLayout/_nested-layout.tsx:27
+#: src/routes/_pathlessLayout/_nested-layout.tsx:29
 msgid "Go to route B"
 msgstr "Aller à la route B"
 
@@ -58,67 +65,67 @@ msgstr "Aller à la route B"
 msgid "Home"
 msgstr "Accueil"
 
-#: src/routes/_pathlessLayout.tsx:11
+#: src/routes/_pathlessLayout.tsx:12
 msgid "I'm a layout"
 msgstr "Je suis un layout"
 
-#: src/routes/_pathlessLayout/_nested-layout.tsx:11
+#: src/routes/_pathlessLayout/_nested-layout.tsx:12
 msgid "I'm a nested layout"
 msgstr "Je suis un layout imbriqué"
 
-#: src/routes/_pathlessLayout/_nested-layout/route-a.tsx:11
+#: src/routes/_pathlessLayout/_nested-layout/route-a.tsx:13
 msgid "I'm A!"
 msgstr "Je suis A !"
 
-#: src/routes/_pathlessLayout/_nested-layout/route-b.tsx:11
+#: src/routes/_pathlessLayout/_nested-layout/route-b.tsx:13
 msgid "I'm B!"
 msgstr "Je suis B !"
 
-#: src/routes/deferred.tsx:59
+#: src/routes/deferred.tsx:74
 msgid "Increment"
 msgstr "Incrémenter"
 
-#: src/routes/deferred.tsx:41
+#: src/routes/deferred.tsx:44
 msgid "Loading person..."
 msgstr "Chargement de la personne..."
 
-#: src/routes/deferred.tsx:51
+#: src/routes/deferred.tsx:60
 msgid "Loading stuff..."
 msgstr "Chargement de choses..."
 
 #: src/routes/posts.route.tsx:17
 msgid "Non-existent Post"
 msgstr "Article non-existant"
 
-#: src/routes/users.route.tsx:29
+#: src/routes/users.route.tsx:33
 msgid "Non-existent User"
 msgstr "Utilisateur non-existant"
 
 #: src/routes/__root.tsx:130
 msgid "Pathless Layout"
 msgstr "Layout sans chemin"
 
-#: src/routes/posts.$postId.tsx:12
+#: src/routes/posts.$postId.tsx:14
 msgid "Post not found"
 msgstr "Article non trouvé"
 
 #: src/routes/__root.tsx:114
 msgid "Posts"
 msgstr "Articles"
 
-#: src/routes/posts.index.tsx:9
+#: src/routes/posts.index.tsx:11
 msgid "Select a post."
 msgstr "Sélectionnez un article."
 
-#: src/routes/users.index.tsx:9
+#: src/routes/users.index.tsx:11
 msgid "Select a user."
 msgstr "Sélectionnez un utilisateur."
 
-#: src/components/NotFound.tsx:21
+#: src/components/NotFound.tsx:25
 msgid "Start Over"
 msgstr "Recommencer"
 
-#: src/components/NotFound.tsx:8
+#: src/components/NotFound.tsx:10
 msgid "The page you are looking for does not exist."
 msgstr "La page que vous cherchez n'existe pas."
 
@@ -130,14 +137,14 @@ msgstr "Cette route n'existe pas"
 msgid "Try Again"
 msgstr "Réessayer"
 
-#: src/routes/users.$userId.tsx:22
+#: src/routes/users.$userId.tsx:26
 msgid "User not found"
 msgstr "Utilisateur non trouvé"
 
 #: src/routes/__root.tsx:122
 msgid "Users"
 msgstr "Utilisateurs"
 
-#: src/routes/index.tsx:11
+#: src/routes/index.tsx:12
 msgid "Welcome Home!!!"
 msgstr "Bienvenue à la maison !!!"

examples/tanstack-start/src/modules/lingui/i18n.server.ts

@@ -0,0 +1,49 @@
+import {
+  getHeaders,
+  getWebRequest,
+  setHeader,
+} from "@tanstack/react-start/server"
+import { parse, serialize } from "cookie-es"
+
+import { defaultLocale, dynamicActivate, isLocaleValid } from "./i18n"
+
+function getLocaleFromRequest() {
+  const request = getWebRequest()
+  const headers = getHeaders()
+  const cookie = parse(headers.cookie ?? "")
+
+  if (request) {
+    const url = new URL(request.url)
+    const queryLocale = url.searchParams.get("locale") ?? ""
+
+    if (isLocaleValid(queryLocale)) {
+      setHeader(
+        "Set-Cookie",
+        serialize("locale", queryLocale, {
+          maxAge: 30 * 24 * 60 * 60,
+          path: "/",
+        })
+      )
+
+      return queryLocale
+    }
+  }
+
+  if (cookie.locale && isLocaleValid(cookie.locale)) {
+    return cookie.locale
+  }
+
+  setHeader(
+    "Set-Cookie",
+    serialize("locale", defaultLocale, {
+      maxAge: 30 * 24 * 60 * 60,
+      path: "/",
+    })
+  )
+
+  return defaultLocale
+}
+
+export async function setupLocaleFromRequest() {
+  await dynamicActivate(getLocaleFromRequest())
+}