useAtom

deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsoul/fresh-i18n",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "A simple and flexible internationalization (i18n) plugin for Deno's Fresh framework.",
   "runtimes": ["deno", "browser"],
   "exports": "./mod.ts",

src/Link.tsx

@@ -1,6 +1,6 @@
 import type { h } from 'preact'
-import { currentLocale } from '@/src/store.ts'
 import type { JSX } from 'preact'
+import { useLocale } from '@/src/useLocale.ts'
 
 /**
  * Props for the Link component.
@@ -19,9 +19,8 @@ type LinkProps = JSX.IntrinsicElements['a'] & {
  * @returns A link component with the current locale prefixed to the href.
  */
 export function Link({ href, children, ...props }: LinkProps): h.JSX.Element {
-  const localizedHref = `/${currentLocale.get()}${
-    href.startsWith('/') ? href : `/${href}`
-  }`
+  const { locale } = useLocale()
+  const localizedHref = `/${locale}${href.startsWith('/') ? href : `/${href}`}`
 
   return (
     <a href={localizedHref} {...props}>

src/useLocale.ts

@@ -1,4 +1,5 @@
 import { currentLocale } from '@/src/store.ts'
+import { useAtom } from 'fresh-atom'
 
 /**
  * Provides access to the current locale and a function to change the locale.
@@ -9,8 +10,9 @@ export function useLocale(): {
   locale: string
   changeLanguage: (newLocale: string) => void
 } {
+  const [currentLocaleFromAtom] = useAtom(currentLocale)
   const changeLanguage = (newLocale: string) => {
-    if (newLocale === currentLocale.get()) return
+    if (newLocale === currentLocaleFromAtom) return
 
     currentLocale.set(newLocale)
     const currentPath = globalThis.location.pathname.split('/').filter(Boolean)
@@ -20,5 +22,5 @@ export function useLocale(): {
       `${globalThis.location.origin}${updatedPath}${globalThis.location.search}`
   }
 
-  return { locale: currentLocale.get(), changeLanguage }
+  return { locale: currentLocaleFromAtom, changeLanguage }
 }

src/usePathname.ts

@@ -1,10 +1,12 @@
 import { pathname } from '@/src/store.ts'
+import { useAtom } from 'fresh-atom'
 
 /**
  * Hook to access the root path of the current URL without the language prefix.
  *
  * @returns The current pathname without the locale prefix.
  */
 export function usePathname(): string {
-  return pathname.get()
+  const [currentPath] = useAtom(pathname)
+  return currentPath
 }

src/useTranslation.ts

@@ -1,16 +1,16 @@
 import { translationData } from '@/src/store.ts'
+import { useAtom } from 'fresh-atom'
 
 /**
  * Provides access to translation strings with support for deeply nested keys.
  *
  * @returns An object containing a function to fetch translations by deeply nested key.
  */
 export function useTranslation(): { t: (key: string) => string } {
+  const [data] = useAtom(translationData)
   const translate = (key: string): string => {
     const keys = key.split('.') // Split the key by dot
-    let value: unknown = translationData.get() // Get the value from translationData
-
-    console.log('Translation Data:', translationData.get()) // Check translation data
+    let value: unknown = data // Get the value from translationData
 
     for (const k of keys) {
       if (value && typeof value === 'object' && k in value) {