add i18n add-on (paraglide js) (#252)

samuelstroschein · web-flow · commit 3b4321199758 · 2026-01-11T05:10:28.000-08:00
* add paraglide add commands

* fix redirect loop

* remove gitignore
diff --git a/frameworks/react-cra/add-ons/paraglide/README.md b/frameworks/react-cra/add-ons/paraglide/README.md
@@ -0,0 +1,7 @@
+# Paraglide i18n
+
+This add-on wires up ParaglideJS for localized routing and message formatting.
+
+- Messages live in `project.inlang/messages`.
+- URLs are localized through the Paraglide Vite plugin and router `rewrite` hooks.
+- Run the dev server or build to regenerate the `src/paraglide` outputs.
diff --git a/frameworks/react-cra/add-ons/paraglide/assets/messages/de.json b/frameworks/react-cra/add-ons/paraglide/assets/messages/de.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "home_page": "Startseite",
+  "about_page": "Über uns",
+  "example_message": "Willkommen in deiner i18n-App.",
+  "language_label": "Sprache",
+  "current_locale": "Aktuelle Sprache: {locale}",
+  "learn_router": "Paraglide JS lernen"
+}
diff --git a/frameworks/react-cra/add-ons/paraglide/assets/messages/en.json b/frameworks/react-cra/add-ons/paraglide/assets/messages/en.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "home_page": "Home page",
+  "about_page": "About page",
+  "example_message": "Welcome to your i18n app.",
+  "language_label": "Language",
+  "current_locale": "Current locale: {locale}",
+  "learn_router": "Learn Paraglide JS"
+}
diff --git a/frameworks/react-cra/add-ons/paraglide/assets/project.inlang/settings.json b/frameworks/react-cra/add-ons/paraglide/assets/project.inlang/settings.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "baseLocale": "en",
+  "locales": ["en", "de"],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./messages/{locale}.json"
+  }
+}
diff --git a/frameworks/react-cra/add-ons/paraglide/assets/src/components/LocaleSwitcher.tsx.ejs b/frameworks/react-cra/add-ons/paraglide/assets/src/components/LocaleSwitcher.tsx.ejs
@@ -0,0 +1,44 @@
+// Locale switcher refs:
+// - Paraglide docs: https://inlang.com/m/gerre34r/library-inlang-paraglideJs
+// - Router example: https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#switching-locale
+import { getLocale, locales, setLocale } from '@/paraglide/runtime'
+import { m } from '@/paraglide/messages'
+
+export default function ParaglideLocaleSwitcher() {
+  const currentLocale = getLocale()
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '0.5rem',
+        alignItems: 'center',
+        color: 'inherit',
+      }}
+      aria-label={m.language_label()}
+    >
+      <span style={{ opacity: 0.85 }}>{m.current_locale({ locale: currentLocale })}</span>
+      <div style={{ display: 'flex', gap: '0.25rem' }}>
+        {locales.map((locale) => (
+          <button
+            key={locale}
+            onClick={() => setLocale(locale)}
+            aria-pressed={locale === currentLocale}
+            style={{
+              cursor: 'pointer',
+              padding: '0.35rem 0.75rem',
+              borderRadius: '999px',
+              border: '1px solid #d1d5db',
+              background: locale === currentLocale ? '#0f172a' : 'transparent',
+              color: locale === currentLocale ? '#f8fafc' : 'inherit',
+              fontWeight: locale === currentLocale ? 700 : 500,
+              letterSpacing: '0.01em',
+            }}
+          >
+            {locale.toUpperCase()}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/frameworks/react-cra/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs b/frameworks/react-cra/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs
@@ -0,0 +1,34 @@
+import { createFileRoute } from "@tanstack/react-router";
+import logo from "../logo.svg";
+import { m } from "@/paraglide/messages";
+import LocaleSwitcher from "../components/LocaleSwitcher";
+
+export const Route = createFileRoute("/demo/i18n")({
+  component: App,
+});
+
+function App() {
+  return (
+    <div className="text-center">
+      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] gap-4">
+        <img
+          src={logo}
+          className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
+          alt="logo"
+        />
+        <p>{m.example_message({ username: "TanStack Router" })}</p>
+        <a
+          className="text-[#61dafb] hover:underline"
+          href="https://inlang.com/m/gerre34r/library-inlang-paraglideJs"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {m.learn_router()}
+        </a>
+        <div className="mt-3">
+          <LocaleSwitcher />
+        </div>
+      </header>
+    </div>
+  );
+}
diff --git a/frameworks/react-cra/add-ons/paraglide/info.json b/frameworks/react-cra/add-ons/paraglide/info.json
@@ -0,0 +1,25 @@
+{
+  "name": "Paraglide (i18n)",
+  "description": "i18n with localized routing",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "priority": 30,
+  "link": "https://github.com/paraglidejs/paraglide-js",
+  "routes": [
+    {
+      "icon": "Languages",
+      "url": "/demo/i18n",
+      "name": "I18n example",
+      "path": "src/routes/demo.i18n.tsx",
+      "jsName": "I18nDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "header-user",
+      "path": "src/components/LocaleSwitcher.tsx",
+      "jsName": "ParaglideLocaleSwitcher"
+    }
+  ]
+}
diff --git a/frameworks/react-cra/add-ons/paraglide/package.json b/frameworks/react-cra/add-ons/paraglide/package.json
@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@inlang/paraglide-js": "^2.8.0"
+  }
+}
diff --git a/frameworks/react-cra/add-ons/paraglide/small-logo.svg b/frameworks/react-cra/add-ons/paraglide/small-logo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Paraglide">
+  <rect width="64" height="64" rx="14" fill="#0f172a"/>
+  <text x="50%" y="55%" text-anchor="middle" dominant-baseline="central" font-size="36">🪂</text>
+</svg>
diff --git a/frameworks/react-cra/add-ons/start/assets/src/router.tsx.ejs b/frameworks/react-cra/add-ons/start/assets/src/router.tsx.ejs
@@ -11,6 +11,8 @@ import { HttpLink } from "@apollo/client";
 <% } %>
 <% if (addOnEnabled.sentry) { %>
 import * as Sentry from "@sentry/tanstackstart-react";
+<% } %><% if (addOnEnabled.paraglide) { %>
+import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime";
 <% } %>
 
 // Import the generated route tree
@@ -41,6 +43,13 @@ export const getRouter = () => {
       ...rqContext,
 <% } %>
     },
+<% if (addOnEnabled.paraglide) { %>
+    // Paraglide URL rewrite docs: https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#rewrite-url
+    rewrite: {
+      input: ({ url }) => deLocalizeUrl(url),
+      output: ({ url }) => localizeUrl(url),
+    },
+<% } %>
 <% if (addOnEnabled['tanstack-query'] || addOnEnabled['apollo-client']) { %>
     defaultPreload: "intent",
 <% } else { %>
diff --git a/frameworks/react-cra/add-ons/start/assets/src/server.ts.ejs b/frameworks/react-cra/add-ons/start/assets/src/server.ts.ejs
@@ -0,0 +1,9 @@
+<% if (!addOnEnabled.paraglide) { ignoreFile() } %>import { paraglideMiddleware } from './paraglide/server'
+import handler from '@tanstack/react-start/server-entry'
+
+// Server-side URL localization/redirects for Paraglide
+export default {
+  fetch(req: Request): Promise<Response> {
+    return paraglideMiddleware(req, () => handler.fetch(req))
+  },
+}
diff --git a/frameworks/react-cra/add-ons/start/assets/vite.config.ts.ejs b/frameworks/react-cra/add-ons/start/assets/vite.config.ts.ejs
@@ -1,5 +1,8 @@
 import { defineConfig } from 'vite'
 import { devtools } from '@tanstack/devtools-vite'
+<% if (addOnEnabled.paraglide) { -%>
+import { paraglideVitePlugin } from "@inlang/paraglide-js"
+<% } -%>
 import { tanstackStart } from '@tanstack/react-start/plugin/vite';
 import viteReact from '@vitejs/plugin-react'
 import viteTsConfigPaths from 'vite-tsconfig-paths'<% if (tailwind) { %>
@@ -8,7 +11,11 @@ import tailwindcss from "@tailwindcss/vite"
 <% } %>
 
 const config = defineConfig({
-  plugins: [devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
+  plugins: [devtools(), <% if (addOnEnabled.paraglide) { %>paraglideVitePlugin({
+    project: './project.inlang',
+    outdir: './src/paraglide',
+    strategy: ['url'],
+  }), <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
     // this is the plugin that enables path aliases
     viteTsConfigPaths({
       projects: ['./tsconfig.json'],
diff --git a/frameworks/react-cra/project/base/src/main.tsx.ejs b/frameworks/react-cra/project/base/src/main.tsx.ejs
@@ -105,6 +105,8 @@ import ReactDOM from "react-dom/client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
 import * as <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
+<% } %><% if (addOnEnabled.paraglide) { %>
+import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime";
 <% } %>
 
 // Import the generated route tree
@@ -122,7 +124,12 @@ const <%= integration.jsName %>Context = <%= integration.jsName %>.getContext();
     <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
       ...<%= integration.jsName %>Context,
     <% } %>
-  },
+  },<% if (addOnEnabled.paraglide) { %>
+  // Paraglide URL rewrite docs: https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#rewrite-url
+  rewrite: {
+    input: ({ url }) => deLocalizeUrl(url),
+    output: ({ url }) => localizeUrl(url),
+  },<% } %>
   defaultPreload: "intent",
   scrollRestoration: true,
   defaultStructuralSharing: true,
@@ -156,4 +163,4 @@ if (rootElement && !rootElement.innerHTML) {
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();<% } %>
+reportWebVitals();<% } %>
diff --git a/frameworks/react-cra/project/base/src/routes/__root.tsx.ejs b/frameworks/react-cra/project/base/src/routes/__root.tsx.ejs
@@ -1,12 +1,14 @@
 <% let hasContext = addOnEnabled["apollo-client"] || addOnEnabled["tanstack-query"]; %>
 <% if (!fileRouter) { ignoreFile() } %>import { <% if (addOnEnabled.start) { %>
-  HeadContent<% } else { %>Outlet<% } %><% if (addOnEnabled.start) { %>, Scripts<% } %>, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
+  HeadContent<% } else { %>Outlet<% } %><% if (addOnEnabled.start) { %>, Scripts<% } %>, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %><% if (addOnEnabled.paraglide) { %>, redirect<% } %> } from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
 import { TanStackDevtools } from '@tanstack/react-devtools'
 <% if (addOns.length) { %>
 import Header from '../components/Header'
 <% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
 import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
+<% } %><% if (addOnEnabled.paraglide) { %>
+import { getLocale, shouldRedirect } from '@/paraglide/runtime'
 <% } %>
 <% if (addOnEnabled.start) { %>
 import appCss from '../styles.css?url'
@@ -32,6 +34,25 @@ interface MyRouterContext <% if (addOnEnabled["apollo-client"]) {%> extends Apol
 }<% } %>
 
 export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({
+<% if (addOnEnabled.paraglide) { %>
+  beforeLoad: async () => {
+    // Other redirect strategies are possible; see
+    // https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('lang', getLocale())
+    }
+
+    <% if (!addOnEnabled.start) { %>// Client-side fallback redirect for SPA/file-router builds. Start apps should
+    // prefer server-side paraglideMiddleware (see start template server.ts).
+    if (typeof window !== 'undefined') {
+      const decision = await shouldRedirect({ url: window.location.href })
+
+      if (decision.redirectUrl) {
+        throw redirect({ href: decision.redirectUrl.href })
+      }
+    }<% } %>
+  },
+<% } %>
 <% if (addOnEnabled.start) { %>
     head: () => ({
     meta: [
@@ -84,7 +105,7 @@ export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterC
 <% if (addOnEnabled.start) { %>
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <% if (addOnEnabled.paraglide) { %><html lang={getLocale()}><% } else { %><html lang="en"><% } %>
       <head>
         <HeadContent />
       </head>
diff --git a/frameworks/react-cra/project/base/tsconfig.json.ejs b/frameworks/react-cra/project/base/tsconfig.json.ejs
@@ -10,7 +10,8 @@
 
     /* Bundler mode */
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+    "allowImportingTsExtensions": true,<% if (addOnEnabled.paraglide) { %>
+    "allowJs": true,<% } %>
     "verbatimModuleSyntax": <%= addOnEnabled['start'] ? 'false' : 'true' %>,
     "noEmit": true,
 
diff --git a/frameworks/react-cra/project/base/vite.config.ts.ejs b/frameworks/react-cra/project/base/vite.config.ts.ejs
@@ -1,5 +1,6 @@
 <% if (addOnEnabled.start) { ignoreFile() } %>import { defineConfig } from "vite";
-import { devtools } from '@tanstack/devtools-vite'
+import { devtools } from '@tanstack/devtools-vite'<% if (addOnEnabled.paraglide) { %>
+import { paraglideVitePlugin } from "@inlang/paraglide-js"<% } %>
 import viteReact from "@vitejs/plugin-react";<% if (tailwind) { %>
 import tailwindcss from "@tailwindcss/vite";
 <% } %><%if (fileRouter) { %>
@@ -11,7 +12,11 @@ import federationConfig from "./module-federation.config.js";<% } %><% for(const
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %> <% if(fileRouter) { %>tanstackRouter({
+  plugins: [devtools(), <% if (addOnEnabled.paraglide) { %>paraglideVitePlugin({
+    project: './project.inlang',
+    outdir: './src/paraglide',
+    strategy: ['url'],
+  }), <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %> <% if(fileRouter) { %>tanstackRouter({
     target: "react",
     autoCodeSplitting: true,
   }), <% } %>viteReact(<% if (addOnEnabled.compiler) { %>{

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "devDependencies": {
 +    "@inlang/paraglide-js": "^2.8.0"
 +  }
 +}