refactor: react-intl to locale provider

Author: canerakdas

components/Layout/index.jsx

@@ -7,7 +7,7 @@ import NavBar from '../Navigation';
 import MetaBar from '../Metabar';
 import SideBar from '../Sidebar';
 import Footer from '../Footer';
-import LocaleProvider from '../../providers/LocaleProvider';
+import LocaleProvider from '../providers/LocaleProvider';
 
 /**
  * @typedef {Object} Props

components/Navigation/index.jsx

@@ -5,30 +5,22 @@ import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 import SearchBox from '@node-core/doc-kit/src/generators/web/ui/components/SearchBox';
 import { useTheme } from '@node-core/doc-kit/src/generators/web/ui/hooks/useTheme.mjs';
 
-import { useEffect, useState } from 'preact/hooks';
-import { useIntl } from 'react-intl';
-
-import { localizeLink } from '../../util/link';
 import { navigation } from '../../site.json' with { type: 'json' };
-
 import Logo from '#theme/Logo';
+import { useLocale } from '../providers/LocaleProvider';
+import { useMemo } from 'preact/hooks';
 
 /**
  * NavBar component that displays the headings, search, etc.
  */
 export default ({ metadata }) => {
   const [themePreference, setThemePreference] = useTheme();
-  const [navigationItems, setNavigationItems] = useState(navigation);
-  const { locale } = useIntl();
+  const { localizeLink } = useLocale();
 
-  useEffect(() => {
-    const items = navigation.map(item => ({
-      ...item,
-      link: localizeLink(item.link, locale),
-    }));
-
-    setNavigationItems(items);
-  }, [locale]);
+  const navigationItems = useMemo(
+    () => navigation.map(item => ({ ...item, link: localizeLink(item.link) })),
+    [localizeLink]
+  );
 
   return (
     <NavBar

components/providers/LocaleProvider.jsx

@@ -0,0 +1,66 @@
+import { createContext } from 'preact';
+import { useContext, useState, useEffect } from 'preact/hooks';
+
+import { defaultLocale } from '../../site.json' with { type: 'json' };
+
+const LOCALE_COOKIE = 'NEXT_LOCALE';
+
+/**
+ * Replaces the default locale prefix in a link with the given locale.
+ *
+ * @param {string} link
+ * @param {string} locale
+ * @returns {string}
+ */
+const localizeLink = (link, locale) =>
+  link.replace(new RegExp(`^/${defaultLocale}(?=/|$)`), `/${locale}`);
+
+/**
+ * Detects the locale from the NEXT_LOCALE cookie.
+ * Falls back to the default locale when the cookie is missing.
+ *
+ * @returns {string}
+ */
+export const detectLocaleFromCookies = () => {
+  if (typeof document === 'undefined') {
+    return defaultLocale;
+  }
+
+  const match = document.cookie
+    .split(';')
+    .map(cookie => cookie.trim())
+    .find(cookie => cookie.startsWith(`${LOCALE_COOKIE}=`));
+
+  return match
+    ? decodeURIComponent(match.slice(LOCALE_COOKIE.length + 1))
+    : defaultLocale;
+};
+
+const LocaleContext = createContext({
+  locale: defaultLocale,
+  localizeLink: link => link,
+});
+
+export const useLocale = () => useContext(LocaleContext);
+
+/**
+ * Provides locale and a pre-bound localizeLink fn to the component tree.
+ *
+ * @param {{ locale?: string, children: import('preact').ComponentChildren }} props
+ */
+export default function LocaleProvider({ locale, children }) {
+  const [detectedLocale, setDetectedLocale] = useState(defaultLocale);
+
+  useEffect(() => {
+    setDetectedLocale(locale ?? detectLocaleFromCookies());
+  }, [locale]);
+
+  const value = {
+    locale: detectedLocale,
+    localizeLink: link => localizeLink(link, detectedLocale),
+  };
+
+  return (
+    <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
+  );
+}

package-lock.json

@@ -23,8 +23,7 @@
   "dependencies": {
     "@node-core/ui-components": "^1.6.3",
     "@vercel/analytics": "^2.0.1",
-    "@vercel/speed-insights": "^2.0.0",
-    "react-intl": "^10.1.2"
+    "@vercel/speed-insights": "^2.0.0"
   },
   "engines": {
     "node": "24.x"

package.json

@@ -1,11 +1,22 @@
-import { IntlProvider } from 'react-intl';
+import { createContext } from 'preact';
+import { useContext } from 'preact/hooks';
 
-import { defaultLocale } from '../site.json' with { type: 'json' };
+import { defaultLocale } from '../../site.json' with { type: 'json' };
 
 const LOCALE_COOKIE = 'NEXT_LOCALE';
 
 /**
- * Detects the locale from the cookie.
+ * Replaces the default locale prefix in a link with the given locale.
+ *
+ * @param {string} link
+ * @param {string} locale
+ * @returns {string}
+ */
+const localizeLink = (link, locale) =>
+  link.replace(new RegExp(`^/${defaultLocale}(?=/|$)`), `/${locale}`);
+
+/**
+ * Detects the locale from the NEXT_LOCALE cookie.
  * Falls back to the default locale when the cookie is missing.
  *
  * @returns {string}
@@ -15,29 +26,37 @@ export const detectLocaleFromCookies = () => {
     return defaultLocale;
   }
 
-  const localeCookie = document.cookie
+  const match = document.cookie
     .split(';')
     .map(cookie => cookie.trim())
     .find(cookie => cookie.startsWith(`${LOCALE_COOKIE}=`));
 
-  if (!localeCookie) {
-    return defaultLocale;
-  }
-
-  return decodeURIComponent(localeCookie.slice(LOCALE_COOKIE.length + 1));
+  return match
+    ? decodeURIComponent(match.slice(LOCALE_COOKIE.length + 1))
+    : defaultLocale;
 };
 
+const LocaleContext = createContext({
+  locale: defaultLocale,
+  localizeLink: link => link,
+});
+
+export const useLocale = () => useContext(LocaleContext);
+
 /**
- * LocaleProvider component that provides the locale context to its children.
+ * Provides locale and a pre-bound localizeLink fn to the component tree.
  *
  * @param {{ locale?: string, children: import('preact').ComponentChildren }} props
  */
 export default function LocaleProvider({ locale, children }) {
   const detectedLocale = locale ?? detectLocaleFromCookies();
 
+  const value = {
+    locale: detectedLocale,
+    localizeLink: link => localizeLink(link, detectedLocale),
+  };
+
   return (
-    <IntlProvider locale={detectedLocale} messages={{}}>
-      {children}
-    </IntlProvider>
+    <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
   );
 }