@i18n-micro/astro 1.3.24 → 2.0.0

package/src/client/preact.tsx

@@ -1,127 +1,12 @@
-// Preact может использовать React Context API, так как Preact совместим с React
-
-import { defaultPlural, FormatService } from '@i18n-micro/core'
-import type { CleanTranslation, Params, TranslationKey } from '@i18n-micro/types'
-import type { ComponentChildren } from 'preact'
-import { createContext, createElement } from 'preact'
-import { useContext, useMemo, useState } from 'preact/hooks'
-import type { I18nClientProps } from '../utils'
-import { hasTranslation, type I18nState, translate } from './core'
-
-const formatter = new FormatService()
-
-const I18nContext = createContext<I18nState | null>(null)
-
-/**
- * Провайдер для i18n в Preact островах
- */
-export const I18nProvider = ({ children, value }: { children: ComponentChildren; value: I18nClientProps }) => {
-  const [state] = useState<I18nState>(() => ({
-    locale: value.locale,
-    fallbackLocale: value.fallbackLocale,
-    translations: value.translations,
-    currentRoute: value.currentRoute,
-  }))
-
-  return createElement(I18nContext.Provider, { value: state }, children)
-}
-
-/**
- * Хук для использования i18n в Preact компонентах
- */
-export function useAstroI18n() {
-  const state = useContext(I18nContext)
-  if (!state) {
-    throw new Error('useAstroI18n must be used within an I18nProvider')
-  }
-
-  const t = useMemo(
-    () =>
-      (key: TranslationKey, params?: Params, defaultValue?: string | null, routeName?: string): CleanTranslation => {
-        return translate(state, key as string, params, defaultValue, routeName)
-      },
-    [state],
-  )
-
-  const ts = useMemo(
-    () =>
-      (key: TranslationKey, params?: Params, defaultValue?: string, routeName?: string): string => {
-        const value = t(key, params, defaultValue, routeName)
-        return value?.toString() ?? defaultValue ?? (key as string)
-      },
-    [t],
-  )
-
-  const tc = useMemo(
-    () =>
-      (key: TranslationKey, count: number | Params, defaultValue?: string): string => {
-        const { count: countValue, ...params } = typeof count === 'number' ? { count } : count
-
-        if (countValue === undefined) {
-          return defaultValue ?? (key as string)
-        }
-
-        const getter = (k: TranslationKey, p?: Params, dv?: string) => {
-          return t(k, p, dv)
-        }
-
-        const result = defaultPlural(key, Number.parseInt(countValue.toString(), 10), params, state.locale, getter)
-
-        return result ?? defaultValue ?? (key as string)
-      },
-    [t, state],
-  )
-
-  const tn = useMemo(
-    () =>
-      (value: number, options?: Intl.NumberFormatOptions): string => {
-        return formatter.formatNumber(value, state.locale, options)
-      },
-    [state.locale],
-  )
-
-  const td = useMemo(
-    () =>
-      (value: Date | number | string, options?: Intl.DateTimeFormatOptions): string => {
-        return formatter.formatDate(value, state.locale, options)
-      },
-    [state.locale],
-  )
-
-  const tdr = useMemo(
-    () =>
-      (value: Date | number | string, options?: Intl.RelativeTimeFormatOptions): string => {
-        return formatter.formatRelativeTime(value, state.locale, options)
-      },
-    [state.locale],
-  )
-
-  const has = useMemo(
-    () =>
-      (key: TranslationKey, routeName?: string): boolean => {
-        return hasTranslation(state, key as string, routeName)
-      },
-    [state],
-  )
-
-  return {
-    // Translation methods
-    t,
-    ts,
-    tc,
-    tn,
-    td,
-    tdr,
-    has,
-
-    // Locale state
-    locale: state.locale,
-    fallbackLocale: state.fallbackLocale,
-    currentRoute: state.currentRoute,
-
-    // Route management (read-only в клиентских островах)
-    getRoute: (): string => {
-      return state.currentRoute
-    },
-  }
-}
+import { type ComponentChildren, createContext, createElement, type PreactContext, type VNode } from 'preact'
+import { useCallback, useContext, useMemo, useState } from 'preact/hooks'
+import { createIslandBinding, type I18nContextValue } from './core'
+
+export const { I18nProvider, useAstroI18n } = /*#__PURE__*/ createIslandBinding<ComponentChildren, VNode, PreactContext<I18nContextValue | null>>({
+  createContext,
+  createElement,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+})

package/src/client/react.tsx

@@ -1,123 +1,11 @@
-import { defaultPlural, FormatService } from '@i18n-micro/core'
-import type { CleanTranslation, Params, TranslationKey } from '@i18n-micro/types'
-import React, { createContext, useContext, useMemo, useState } from 'react'
-import type { I18nClientProps } from '../utils'
-import { hasTranslation, type I18nState, translate } from './core'
-
-const formatter = new FormatService()
-
-const I18nContext = createContext<I18nState | null>(null)
-
-/**
- * Провайдер для i18n в React островах
- */
-export function I18nProvider({ children, value }: { children: React.ReactNode; value: I18nClientProps }): React.ReactElement {
-  const [state] = useState<I18nState>(() => ({
-    locale: value.locale,
-    fallbackLocale: value.fallbackLocale,
-    translations: value.translations,
-    currentRoute: value.currentRoute,
-  }))
-
-  return React.createElement(I18nContext.Provider, { value: state }, children)
-}
-
-/**
- * Хук для использования i18n в React компонентах
- */
-export function useAstroI18n() {
-  const state = useContext(I18nContext)
-  if (!state) {
-    throw new Error('useAstroI18n must be used within an I18nProvider')
-  }
-
-  const t = useMemo(
-    () =>
-      (key: TranslationKey, params?: Params, defaultValue?: string | null, routeName?: string): CleanTranslation => {
-        return translate(state, key as string, params, defaultValue, routeName)
-      },
-    [state],
-  )
-
-  const ts = useMemo(
-    () =>
-      (key: TranslationKey, params?: Params, defaultValue?: string, routeName?: string): string => {
-        const value = t(key, params, defaultValue, routeName)
-        return value?.toString() ?? defaultValue ?? (key as string)
-      },
-    [t],
-  )
-
-  const tc = useMemo(
-    () =>
-      (key: TranslationKey, count: number | Params, defaultValue?: string): string => {
-        const { count: countValue, ...params } = typeof count === 'number' ? { count } : count
-
-        if (countValue === undefined) {
-          return defaultValue ?? (key as string)
-        }
-
-        const getter = (k: TranslationKey, p?: Params, dv?: string) => {
-          return t(k, p, dv)
-        }
-
-        const result = defaultPlural(key, Number.parseInt(countValue.toString(), 10), params, state.locale, getter)
-
-        return result ?? defaultValue ?? (key as string)
-      },
-    [t, state],
-  )
-
-  const tn = useMemo(
-    () =>
-      (value: number, options?: Intl.NumberFormatOptions): string => {
-        return formatter.formatNumber(value, state.locale, options)
-      },
-    [state.locale],
-  )
-
-  const td = useMemo(
-    () =>
-      (value: Date | number | string, options?: Intl.DateTimeFormatOptions): string => {
-        return formatter.formatDate(value, state.locale, options)
-      },
-    [state.locale],
-  )
-
-  const tdr = useMemo(
-    () =>
-      (value: Date | number | string, options?: Intl.RelativeTimeFormatOptions): string => {
-        return formatter.formatRelativeTime(value, state.locale, options)
-      },
-    [state.locale],
-  )
-
-  const has = useMemo(
-    () =>
-      (key: TranslationKey, routeName?: string): boolean => {
-        return hasTranslation(state, key as string, routeName)
-      },
-    [state],
-  )
-
-  return {
-    // Translation methods
-    t,
-    ts,
-    tc,
-    tn,
-    td,
-    tdr,
-    has,
-
-    // Locale state
-    locale: state.locale,
-    fallbackLocale: state.fallbackLocale,
-    currentRoute: state.currentRoute,
-
-    // Route management (read-only в клиентских островах)
-    getRoute: (): string => {
-      return state.currentRoute
-    },
-  }
-}
+import { type Context, createContext, createElement, type ReactElement, type ReactNode, useCallback, useContext, useMemo, useState } from 'react'
+import { createIslandBinding, type I18nContextValue } from './core'
+
+export const { I18nProvider, useAstroI18n } = /*#__PURE__*/ createIslandBinding<ReactNode, ReactElement, Context<I18nContextValue | null>>({
+  createContext,
+  createElement,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+})

package/src/client/svelte.ts

@@ -1,21 +1,13 @@
-import { defaultPlural, FormatService } from '@i18n-micro/core'
-import type { CleanTranslation, Params, TranslationKey } from '@i18n-micro/types'
 import { get, type Writable, writable } from 'svelte/store'
 import type { I18nClientProps } from '../utils'
-import { hasTranslation, type I18nState, translate } from './core'
-
-const formatter = new FormatService()
+import { createIslandApi, type I18nState, withLocale } from './core'
 
 /**
- * Creates a Svelte store for i18n state
+ * Creates a Svelte store for i18n state. An island kept by `transition:persist` follows its new
+ * props with `$: store.set(i18n)` (`$effect(() => store.set(i18n))` with runes).
  */
 export function createI18nStore(props: I18nClientProps): Writable<I18nState> {
-  return writable<I18nState>({
-    locale: props.locale,
-    fallbackLocale: props.fallbackLocale,
-    translations: props.translations,
-    currentRoute: props.currentRoute,
-  })
+  return writable<I18nState>(props)
 }
 
 /**
@@ -25,63 +17,11 @@ export function createI18nStore(props: I18nClientProps): Writable<I18nState> {
 export function useAstroI18n(store: Writable<I18nState>) {
   const getState = () => get(store)
 
-  const t = (key: TranslationKey, params?: Params, defaultValue?: string | null, routeName?: string): CleanTranslation => {
-    return translate(getState(), key as string, params, defaultValue, routeName)
-  }
-
-  const ts = (key: TranslationKey, params?: Params, defaultValue?: string, routeName?: string): string => {
-    const value = t(key, params, defaultValue, routeName)
-    return value?.toString() ?? defaultValue ?? (key as string)
-  }
-
-  const tc = (key: TranslationKey, count: number | Params, defaultValue?: string): string => {
-    const state = getState()
-    const { count: countValue, ...params } = typeof count === 'number' ? { count } : count
-
-    if (countValue === undefined) {
-      return defaultValue ?? (key as string)
-    }
-
-    const getter = (k: TranslationKey, p?: Params, dv?: string) => {
-      return t(k, p, dv)
-    }
-
-    const result = defaultPlural(key, Number.parseInt(countValue.toString(), 10), params, state.locale, getter)
-
-    return result ?? defaultValue ?? (key as string)
-  }
-
-  const tn = (value: number, options?: Intl.NumberFormatOptions): string => {
-    const state = getState()
-    return formatter.formatNumber(value, state.locale, options)
-  }
-
-  const td = (value: Date | number | string, options?: Intl.DateTimeFormatOptions): string => {
-    const state = getState()
-    return formatter.formatDate(value, state.locale, options)
-  }
-
-  const tdr = (value: Date | number | string, options?: Intl.RelativeTimeFormatOptions): string => {
-    const state = getState()
-    return formatter.formatRelativeTime(value, state.locale, options)
-  }
-
-  const has = (key: TranslationKey, routeName?: string): boolean => {
-    return hasTranslation(getState(), key as string, routeName)
-  }
-
   return {
     // Store for reactivity in templates (use $i18nStore in templates)
     store,
 
-    // Translation methods
-    t,
-    ts,
-    tc,
-    tn,
-    td,
-    tdr,
-    has,
+    ...createIslandApi(getState),
 
     // Getters for current state (for use in scripts)
     get locale() {
@@ -96,13 +36,10 @@ export function useAstroI18n(store: Writable<I18nState>) {
 
     // Route management
     setLocale: (locale: string) => {
-      store.update((state) => ({ ...state, locale }))
+      store.update((state) => withLocale(state, locale))
     },
     setRoute: (routeName: string) => {
       store.update((state) => ({ ...state, currentRoute: routeName }))
     },
-    getRoute: (): string => {
-      return getState().currentRoute
-    },
   }
 }

package/src/client/vue.ts

@@ -1,24 +1,22 @@
-import { defaultPlural, FormatService } from '@i18n-micro/core'
-import type { CleanTranslation, Params, TranslationKey } from '@i18n-micro/types'
-import { computed, type InjectionKey, inject, provide, type Ref, ref } from 'vue'
+import { computed, type InjectionKey, inject, type MaybeRefOrGetter, provide, type Ref, shallowRef, toValue, watch } from 'vue'
 import type { I18nClientProps } from '../utils'
-import { hasTranslation, type I18nState, translate } from './core'
-
-const formatter = new FormatService()
+import { createIslandApi, type I18nState, withLocale } from './core'
 
 const I18nSymbol = Symbol('i18n-astro') as InjectionKey<Ref<I18nState>>
 
 /**
- * Initializes the i18n provider for a Vue island
- * Call in the island's root component
+ * Initializes the i18n provider for a Vue island. Call in the island's root component, with a
+ * getter (`() => props.i18n`) so an island kept by `transition:persist` follows its new props.
+ * `shallowRef`: translations are never edited in place, and deep tracking costs 11× on every `t`.
  */
-export function provideI18n(props: I18nClientProps): Ref<I18nState> {
-  const state = ref<I18nState>({
-    locale: props.locale,
-    fallbackLocale: props.fallbackLocale,
-    translations: props.translations,
-    currentRoute: props.currentRoute,
-  })
+export function provideI18n(props: MaybeRefOrGetter<I18nClientProps>): Ref<I18nState> {
+  const state = shallowRef<I18nState>(toValue(props))
+  watch(
+    () => toValue(props),
+    (next) => {
+      state.value = next
+    },
+  )
   provide(I18nSymbol, state)
   return state
 }
@@ -31,82 +29,29 @@ export function useAstroI18n() {
   if (!state) {
     throw new Error('useAstroI18n must be used within a component that calls provideI18n')
   }
-
-  const t = (key: TranslationKey, params?: Params, defaultValue?: string | null, routeName?: string): CleanTranslation => {
-    return translate(state.value, key as string, params, defaultValue, routeName)
+  const setLocale = (locale: string) => {
+    state.value = withLocale(state.value, locale)
   }
-
-  const ts = (key: TranslationKey, params?: Params, defaultValue?: string, routeName?: string): string => {
-    const value = t(key, params, defaultValue, routeName)
-    return value?.toString() ?? defaultValue ?? (key as string)
-  }
-
-  const tc = (key: TranslationKey, count: number | Params, defaultValue?: string): string => {
-    const { count: countValue, ...params } = typeof count === 'number' ? { count } : count
-
-    if (countValue === undefined) {
-      return defaultValue ?? (key as string)
-    }
-
-    const getter = (k: TranslationKey, p?: Params, dv?: string) => {
-      return t(k, p, dv)
-    }
-
-    const result = defaultPlural(key, Number.parseInt(countValue.toString(), 10), params, state.value.locale, getter)
-
-    return result ?? defaultValue ?? (key as string)
-  }
-
-  const tn = (value: number, options?: Intl.NumberFormatOptions): string => {
-    return formatter.formatNumber(value, state.value.locale, options)
-  }
-
-  const td = (value: Date | number | string, options?: Intl.DateTimeFormatOptions): string => {
-    return formatter.formatDate(value, state.value.locale, options)
-  }
-
-  const tdr = (value: Date | number | string, options?: Intl.RelativeTimeFormatOptions): string => {
-    return formatter.formatRelativeTime(value, state.value.locale, options)
-  }
-
-  const has = (key: TranslationKey, routeName?: string): boolean => {
-    return hasTranslation(state.value, key as string, routeName)
+  const setRoute = (currentRoute: string) => {
+    state.value = { ...state.value, currentRoute }
   }
 
   return {
-    // Translation methods
-    t,
-    ts,
-    tc,
-    tn,
-    td,
-    tdr,
-    has,
+    ...createIslandApi(() => state.value),
 
     // Reactive locale state
     locale: computed({
       get: () => state.value.locale,
-      set: (val: string) => {
-        state.value = { ...state.value, locale: val }
-      },
+      set: setLocale,
     }),
     fallbackLocale: computed(() => state.value.fallbackLocale),
     currentRoute: computed({
       get: () => state.value.currentRoute,
-      set: (val: string) => {
-        state.value = { ...state.value, currentRoute: val }
-      },
+      set: setRoute,
     }),
 
     // Route management
-    setLocale: (locale: string) => {
-      state.value = { ...state.value, locale }
-    },
-    setRoute: (routeName: string) => {
-      state.value = { ...state.value, currentRoute: routeName }
-    },
-    getRoute: (): string => {
-      return state.value.currentRoute
-    },
+    setLocale,
+    setRoute,
   }
 }

package/src/components/i18n-link.astro

@@ -1,6 +1,5 @@
 ---
-import type { I18nRoutingStrategy } from '../router/types'
-import { useI18n } from '../utils'
+import { resolveLinkHref } from '../utils'
 
 interface Props {
   href: string
@@ -10,64 +9,8 @@ interface Props {
 }
 
 const { href, locale, class: className, ...attrs } = Astro.props
-const { locale: currentLocale, defaultLocale, locales } = useI18n(Astro)
-const localeCodes = locales.map((l) => l.code)
-const currentPath = Astro.url.pathname
-
-// Get routing strategy from locals
-// @ts-expect-error
-const routingStrategy: I18nRoutingStrategy | null = Astro.locals.routingStrategy || null
-
-// Get current locale from path or use detected locale
-const targetLocale = locale || currentLocale
-
-// Helper to remove locale from path
-const removeLocale = (path: string, codes: string[]): string => {
-  if (routingStrategy?.removeLocaleFromPath) {
-    return routingStrategy.removeLocaleFromPath(path, codes)
-  }
-  // Fallback
-  const segments = path.split('/').filter(Boolean)
-  const firstSegment = segments[0]
-  if (firstSegment && codes.includes(firstSegment)) {
-    segments.shift()
-  }
-  return `/${segments.join('/')}`
-}
-
-// Remove locale from current path to get base path
-const basePath = removeLocale(currentPath, localeCodes)
-
-// If href is relative, resolve it relative to current base path
-let resolvedHref = href
-if (href.startsWith('/')) {
-  // Absolute path - remove locale if present and use as base
-  resolvedHref = removeLocale(href, localeCodes)
-} else {
-  // Relative path - combine with current base path
-  resolvedHref = basePath === '/' ? `/${href}` : `${basePath}/${href}`
-}
-
-// Localize the href
-let localizedHref = resolvedHref
-if (routingStrategy?.localizePath) {
-  localizedHref = routingStrategy.localizePath(resolvedHref, targetLocale, localeCodes, defaultLocale)
-} else {
-  // Fallback: basic localization
-  const cleanPath = resolvedHref.replace(/^\//, '').replace(/\/$/, '') || ''
-  const segments = cleanPath.split('/').filter(Boolean)
-  const firstSegment = segments[0]
-  if (firstSegment && localeCodes.includes(firstSegment)) {
-    segments.shift()
-  }
-  if (targetLocale !== defaultLocale) {
-    segments.unshift(targetLocale)
-  }
-  localizedHref = `/${segments.join('/')}`
-}
 ---
 
-<a href={localizedHref} class={className} {...attrs}>
+<a href={resolveLinkHref(Astro, href, locale)} class={className} {...attrs}>
   <slot />
 </a>
-