use atom

deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsoul/fresh-i18n",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "A simple and flexible internationalization (i18n) plugin for Deno's Fresh framework.",
   "runtimes": ["deno", "browser"],
   "exports": "./mod.ts",
@@ -12,6 +12,7 @@
   "imports": {
     "@/": "./",
     "fresh": "jsr:@fresh/[email protected]",
+    "fresh-atom": "jsr:@elsoul/[email protected]",
     "preact": "npm:[email protected]",
     "preact/hooks": "npm:[email protected]/hooks",
     "@preact/signals": "npm:@preact/[email protected]",

src/Link.tsx

@@ -19,7 +19,7 @@ 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.value}${
+  const localizedHref = `/${currentLocale.get()}${
     href.startsWith('/') ? href : `/${href}`
   }`
 

src/i18nPlugin.ts

@@ -1,5 +1,5 @@
 import { join } from '@std/path'
-import { pathname, translationData } from '@/src/store.ts'
+import { currentLocale, pathname, translationData } from '@/src/store.ts'
 import type { MiddlewareFn, TranslationState } from '@/src/types.ts'
 
 /**
@@ -56,7 +56,8 @@ export const i18nPlugin = (
     ctx.state.path = rootPath
     ctx.state.locale = lang
 
-    pathname.value = rootPath
+    pathname.set(rootPath)
+    currentLocale.set(lang)
 
     const translationDataSSR: Record<string, Record<string, string>> = {}
 
@@ -84,7 +85,7 @@ export const i18nPlugin = (
     }
 
     ctx.state.t = translationDataSSR
-    translationData.value = translationDataSSR
+    translationData.set(translationDataSSR)
 
     const response = await ctx.next() as Response
     return response ?? new Response(null, { status: 204 })

src/store.ts

@@ -1,21 +1,19 @@
-import { signal } from '@preact/signals'
+import { atom } from 'fresh-atom'
 
 /**
  * Signal to hold translation data globally across the app.
  * Updated by the i18n plugin during SSR and accessible on the client-side.
  */
-export const translationData = signal<Record<string, Record<string, string>>>(
-  {},
-)
+export const translationData = atom<Record<string, Record<string, string>>>({})
 
 /**
  * Signal to hold the pathname without language prefix.
  * Set by the i18n plugin during SSR and accessible on the client-side.
  */
-export const pathname = signal<string>('')
+export const pathname = atom<string>('')
 
 /**
  * Signal to hold the current locale across the app.
  * This should be updated by the plugin during SSR and by the user for client-side changes.
  */
-export const currentLocale = signal<string>('') // Added currentLocale signal
+export const currentLocale = atom<string>('')

src/useLocale.ts

@@ -10,15 +10,15 @@ export function useLocale(): {
   changeLanguage: (newLocale: string) => void
 } {
   const changeLanguage = (newLocale: string) => {
-    if (newLocale === currentLocale.value) return
+    if (newLocale === currentLocale.get()) return
 
-    currentLocale.value = newLocale
+    currentLocale.set(newLocale)
     const currentPath = globalThis.location.pathname.split('/').filter(Boolean)
     const updatedPath = `/${newLocale}/${currentPath.slice(1).join('/')}`
 
     globalThis.location.href =
       `${globalThis.location.origin}${updatedPath}${globalThis.location.search}`
   }
 
-  return { locale: currentLocale.value, changeLanguage }
+  return { locale: currentLocale.get(), changeLanguage }
 }

src/usePathname.ts

@@ -6,5 +6,5 @@ import { pathname } from '@/src/store.ts'
  * @returns The current pathname without the locale prefix.
  */
 export function usePathname(): string {
-  return pathname.value
+  return pathname.get()
 }

src/useTranslation.ts

@@ -8,9 +8,9 @@ import { translationData } from '@/src/store.ts'
 export function useTranslation(): { t: (key: string) => string } {
   const translate = (key: string): string => {
     const keys = key.split('.') // Split the key by dot
-    let value: unknown = translationData.value // Get the value from translationData
+    let value: unknown = translationData.get() // Get the value from translationData
 
-    console.log('Translation Data:', translationData.value) // Check translation data
+    console.log('Translation Data:', translationData.get()) // Check translation data
 
     for (const k of keys) {
       if (value && typeof value === 'object' && k in value) {