@i18n-micro/astro 1.3.25 → 2.0.0

package/src/components/i18n-switcher.astro

@@ -1,7 +1,6 @@
 ---
 import type { Locale } from '@i18n-micro/types'
-import type { I18nRoutingStrategy } from '../router/types'
-import { useI18n } from '../utils'
+import { localeLabel, useI18n } from '../utils'
 
 interface Props {
   class?: string
@@ -12,90 +11,31 @@ interface Props {
 
 const { class: className, activeClass = 'active', customLabels = {}, ...attrs } = Astro.props
 
-const { locale: currentLocale, locales, defaultLocale, getBasePath } = useI18n(Astro)
-const localeCodes = locales.map((l: Locale) => l.code)
-
-// Get routing strategy from locals
-// @ts-expect-error
-const routingStrategy: I18nRoutingStrategy | null = Astro.locals.routingStrategy || null
-
-// Filter out disabled locales
-const availableLocales = locales.filter((loc: Locale) => !loc.disabled)
-
-// Find current locale object
-const currentLocaleObj = availableLocales.find((loc: Locale) => loc.code === currentLocale)
-const currentLocaleLabel = currentLocaleObj
-  ? customLabels[currentLocaleObj.code] || currentLocaleObj.displayName || currentLocaleObj.code
-  : currentLocale
-
-// Generate locale links
-const localeLinks = availableLocales.map((loc: Locale) => {
-  const isActive = loc.code === currentLocale
-  // Get base path without locale
-  const basePath = getBasePath()
-  // Generate path with locale
-  let switchPath = basePath
-  if (routingStrategy?.switchLocalePath) {
-    switchPath = routingStrategy.switchLocalePath(basePath, loc.code, localeCodes, defaultLocale)
-  } else {
-    // Fallback: basic locale switching
-    const segments = basePath.split('/').filter(Boolean)
-    const firstSegment = segments[0]
-    if (firstSegment && localeCodes.includes(firstSegment)) {
-      segments.shift()
-    }
-    if (loc.code !== defaultLocale) {
-      segments.unshift(loc.code)
-    }
-    switchPath = `/${segments.join('/')}`
-  }
-
-  const label = customLabels[loc.code] || loc.displayName || loc.code
-
-  return {
-    code: loc.code,
-    displayName: label,
-    path: switchPath,
-    isActive,
-  }
-})
-
-// Generate unique ID for this component instance
-const componentId = `i18n-switcher-${Math.random().toString(36).substring(2, 9)}`
+const { locale: currentLocale, locales, switchLocalePath } = useI18n(Astro)
+const { search } = Astro.locals.currentUrl ?? Astro.url
+
+const links = locales
+  .filter((locale: Locale) => !locale.disabled)
+  .map((locale: Locale) => ({
+    code: locale.code,
+    label: localeLabel(locale, customLabels),
+    href: switchLocalePath(locale.code) + search,
+    isActive: locale.code === currentLocale,
+  }))
 ---
 
-{localeLinks.length > 0 && (
-  <div
-    class={`i18n-switcher-wrapper ${className || ''}`}
-    data-switcher-id={componentId}
-    {...attrs}
-  >
-    <button
-      type="button"
-      class="i18n-switcher-button"
-      aria-haspopup="true"
-      aria-expanded="false"
-      data-switcher-button={componentId}
-    >
-      <span>{currentLocaleLabel}</span>
+{links.length > 0 && (
+  <div class={`i18n-switcher-wrapper ${className || ''}`} data-i18n-switcher {...attrs}>
+    <button type="button" class="i18n-switcher-button" aria-expanded="false">
+      <span>{links.find((link) => link.isActive)?.label ?? currentLocale}</span>
       <span class="i18n-switcher-icon">▼</span>
     </button>
 
-    <ul
-      class="i18n-switcher-dropdown"
-      data-switcher-dropdown={componentId}
-      style="display: none;"
-    >
-      {localeLinks.map((link) => (
+    <ul class="i18n-switcher-dropdown" hidden>
+      {links.map((link) => (
         <li>
-          <a
-            href={link.path}
-            class={link.isActive ? activeClass : ''}
-            aria-current={link.isActive ? 'page' : undefined}
-            data-locale={link.code}
-            data-switcher-link={componentId}
-          >
-            {link.displayName}
+          <a href={link.href} class={link.isActive ? activeClass : ''} aria-current={link.isActive ? 'page' : undefined} data-locale={link.code}>
+            {link.label}
           </a>
         </li>
       ))}
@@ -103,73 +43,27 @@ const componentId = `i18n-switcher-${Math.random().toString(36).substring(2, 9)}
   </div>
 )}
 
-<script define:vars={{ componentId, localeLinks }}>
-  (function() {
-    const wrapper = document.querySelector(`[data-switcher-id="${componentId}"]`)
-    if (!wrapper) return
-
-    const button = wrapper.querySelector(`[data-switcher-button="${componentId}"]`)
-    const dropdown = wrapper.querySelector(`[data-switcher-dropdown="${componentId}"]`)
-    const icon = wrapper.querySelector('.i18n-switcher-icon')
-
-    if (!button || !dropdown) return
-
-    let isOpen = false
-
-    const toggleDropdown = (event) => {
-      if (event) {
-        event.stopPropagation()
-        event.preventDefault()
-      }
-      isOpen = !isOpen
-      dropdown.style.display = isOpen ? 'block' : 'none'
-      button.setAttribute('aria-expanded', String(isOpen))
-      if (icon) {
-        icon.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
-      }
-    }
-
-    const closeDropdown = () => {
-      if (isOpen) {
-        isOpen = false
-        dropdown.style.display = 'none'
-        button.setAttribute('aria-expanded', 'false')
-        if (icon) {
-          icon.style.transform = 'rotate(0deg)'
-        }
-      }
-    }
-
-    button.addEventListener('click', toggleDropdown)
-
-    // Close on outside click
-    const handleClickOutside = (event) => {
-      const target = event.target
-      if (!target || !wrapper.contains(target)) {
-        closeDropdown()
-      }
-    }
-
-    document.addEventListener('click', handleClickOutside)
-
-    // Close on Escape key
-    const handleEscape = (event) => {
-      if (event.key === 'Escape' && isOpen) {
-        closeDropdown()
-      }
-    }
-
-    document.addEventListener('keydown', handleEscape)
-
-    // Handle locale link clicks
-    const links = wrapper.querySelectorAll(`[data-switcher-link="${componentId}"]`)
-    links.forEach((link) => {
-      link.addEventListener('click', () => {
-        // Let the link navigate naturally, but close dropdown
-        closeDropdown()
-      })
-    })
-  })()
+<script>
+  // One module for every switcher on every page: it runs once, also under <ClientRouter>, and the
+  // listeners on `document` reach the switchers a navigation swaps in.
+  const setOpen = (wrapper: Element, open: boolean) => {
+    wrapper.querySelector('button')?.setAttribute('aria-expanded', String(open))
+    wrapper.querySelector('ul')?.toggleAttribute('hidden', !open)
+  }
+  const closeAll = (except?: Element | null) => {
+    for (const wrapper of document.querySelectorAll('[data-i18n-switcher]')) if (wrapper !== except) setOpen(wrapper, false)
+  }
+
+  document.addEventListener('click', (event) => {
+    const target = event.target as Element
+    const wrapper = target.closest('[data-i18n-switcher]')
+    closeAll(wrapper)
+    if (wrapper && target.closest('button')) setOpen(wrapper, wrapper.querySelector('button')?.getAttribute('aria-expanded') !== 'true')
+    else if (wrapper && target.closest('a')) setOpen(wrapper, false)
+  })
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') closeAll()
+  })
 </script>
 
 <style>
@@ -203,6 +97,10 @@ const componentId = `i18n-switcher-${Math.random().toString(36).substring(2, 9)}
     font-size: 12px;
   }
 
+  .i18n-switcher-button[aria-expanded='true'] .i18n-switcher-icon {
+    transform: rotate(180deg);
+  }
+
   .i18n-switcher-dropdown {
     position: absolute;
     top: 100%;
@@ -214,7 +112,7 @@ const componentId = `i18n-switcher-${Math.random().toString(36).substring(2, 9)}
     padding: 0;
     margin: 4px 0 0 0;
     min-width: 150px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
 
   .i18n-switcher-dropdown li {
@@ -241,4 +139,3 @@ const componentId = `i18n-switcher-${Math.random().toString(36).substring(2, 9)}
     background-color: #f0f0f0;
   }
 </style>
-

package/src/components/i18n-t.astro

@@ -1,61 +1,13 @@
 ---
-import type { Params } from '@i18n-micro/types'
-import { useI18n } from '../utils'
+import { resolveI18nT, type I18nTProps } from '../utils'
 
-interface Props {
-  keypath: string
-  plural?: number | string
-  params?: Params
-  defaultValue?: string
+interface Props extends Omit<I18nTProps, 'customPluralRule'> {
   tag?: string
-  html?: boolean
-  number?: number | string
-  date?: Date | string | number
-  relativeDate?: Date | string | number
+  [key: string]: unknown
 }
 
-const { keypath, plural, params = {}, defaultValue = '', tag = 'span', html: renderHtml = false, number, date, relativeDate } = Astro.props
-
-const { t, tc, tn, td, tdr } = useI18n(Astro)
-
-let translation: string = ''
-
-// Handle number formatting
-if (number !== undefined) {
-  const numberValue = Number(number)
-  const formattedNumber = tn(numberValue)
-  translation = t(keypath, { number: formattedNumber, ...params }, defaultValue)?.toString() || defaultValue || keypath
-}
-// Handle date formatting
-else if (date !== undefined) {
-  const formattedDate = td(date)
-  translation = t(keypath, { date: formattedDate, ...params }, defaultValue)?.toString() || defaultValue || keypath
-}
-// Handle relative date formatting
-else if (relativeDate !== undefined) {
-  const formattedRelativeDate = tdr(relativeDate)
-  translation = t(keypath, { relativeDate: formattedRelativeDate, ...params }, defaultValue)?.toString() || defaultValue || keypath
-}
-// Handle pluralization
-else if (plural !== undefined) {
-  const count = Number.parseInt(plural.toString(), 10)
-  translation = tc(keypath, { count, ...params }, defaultValue)
-}
-// Regular translation
-else {
-  translation = t(keypath, params, defaultValue)?.toString() || defaultValue || keypath
-}
+const { keypath, plural, params, defaultValue, tag: Tag = 'span', html = false, hideIfEmpty, number, date, relativeDate, ...attrs } = Astro.props
+const text = resolveI18nT(Astro, { keypath, plural, params, defaultValue, html, hideIfEmpty, number, date, relativeDate })
 ---
 
-{renderHtml ? (
-  <Fragment set:html={`<${tag}>${translation}</${tag}>`} />
-) : tag === 'span' ? (
-  <span>{translation}</span>
-) : tag === 'div' ? (
-  <div>{translation}</div>
-) : tag === 'p' ? (
-  <p>{translation}</p>
-) : (
-  <span>{translation}</span>
-)}
-
+{text === null ? defaultValue : html ? <Tag {...attrs} set:html={text} /> : <Tag {...attrs}>{text}</Tag>}

package/src/composer.ts

@@ -1,135 +1,45 @@
-import { BaseI18n, type DateTimeFormatsConfig, type NumberFormatsConfig, type TranslationStorage } from '@i18n-micro/core'
-import type { PluralFunc, Translations } from '@i18n-micro/types'
+import { I18n, type I18nOptions } from '@i18n-micro/runtime'
+import type { Translations } from '@i18n-micro/types'
 
-export interface AstroI18nOptions {
-  locale: string
-  fallbackLocale?: string
-  messages?: Record<string, Translations>
-  plural?: PluralFunc
-  missingWarn?: boolean
-  missingHandler?: (locale: string, key: string, routeName: string) => void
-  numberFormats?: NumberFormatsConfig
-  datetimeFormats?: DateTimeFormatsConfig
-  _storage?: TranslationStorage
-}
-
-export class AstroI18n extends BaseI18n {
-  private _locale: string
-  private _fallbackLocale: string
-  private _currentRoute: string
+export type AstroI18nOptions = I18nOptions
 
-  public readonly storage: TranslationStorage
-
-  private initialMessages: Record<string, Translations> = {}
+/** The runtime instance, plus what Astro pages use on top: per-route reads and a reset that keeps `messages`. */
+export class AstroI18n extends I18n {
+  private initialMessages: Record<string, Translations>
+  private initialRouteMessages: Record<string, Record<string, Translations>>
 
   constructor(options: AstroI18nOptions) {
-    const storage: TranslationStorage = options._storage || {
-      translations: new Map<string, Translations>(),
-    }
-
-    super({
-      storage,
-      plural: options.plural,
-      missingWarn: options.missingWarn,
-      missingHandler: options.missingHandler,
-      numberFormats: options.numberFormats,
-      datetimeFormats: options.datetimeFormats,
-    })
-
-    this.storage = storage
-    this._locale = options.locale
-    this._fallbackLocale = options.fallbackLocale || options.locale
-    this._currentRoute = 'index'
-
-    if (options.messages) {
-      this.initialMessages = { ...options.messages }
-      for (const [lang, msgs] of Object.entries(options.messages)) {
-        this.helper.loadTranslations(lang, msgs)
-      }
-    }
-  }
-
-  private cloneStorage(source: TranslationStorage): TranslationStorage {
-    const translations = new Map<string, Translations>()
-    for (const [key, value] of source.translations) {
-      translations.set(key, { ...value })
-    }
-    return { translations }
-  }
-
-  public clone(newLocale?: string): AstroI18n {
-    const isolatedStorage = this.cloneStorage(this.storage)
-
-    return new AstroI18n({
-      locale: newLocale || this._locale,
-      fallbackLocale: this._fallbackLocale,
-      plural: this.pluralFunc,
-      missingWarn: this.missingWarn,
-      missingHandler: this.missingHandler,
-      numberFormats: this.formatter.getNumberFormats(),
-      datetimeFormats: this.formatter.getDateTimeFormats(),
-      _storage: isolatedStorage,
-    })
-  }
-
-  get locale(): string {
-    return this._locale
-  }
-
-  set locale(val: string) {
-    this._locale = val
+    super(options)
+    const parent = options.parent as AstroI18n | undefined
+    this.initialMessages = parent?.initialMessages ?? { ...options.messages }
+    this.initialRouteMessages =
+      parent?.initialRouteMessages ??
+      Object.fromEntries(Object.entries(options.routeMessages ?? {}).map(([route, locales]) => [route, { ...locales }]))
   }
 
-  get fallbackLocale(): string {
-    return this._fallbackLocale
+  /** Dictionaries loaded after the constructor that `clearCache` keeps too: a directory read at runtime. */
+  public keepMessages(messages: Record<string, Translations>, routeMessages: Record<string, Record<string, Translations>>): void {
+    this.initialMessages = { ...this.initialMessages, ...messages }
+    const routes = { ...this.initialRouteMessages }
+    for (const [route, locales] of Object.entries(routeMessages)) routes[route] = { ...routes[route], ...locales }
+    this.initialRouteMessages = routes
   }
 
-  set fallbackLocale(val: string) {
-    this._fallbackLocale = val
-  }
-
-  setRoute(routeName: string): void {
-    this._currentRoute = routeName
-  }
-
-  public getLocale(): string {
-    return this._locale
-  }
-
-  public getFallbackLocale(): string {
-    return this._fallbackLocale
-  }
-
-  public getRoute(): string {
-    return this._currentRoute
+  /** The `localeIso` option: what an island needs to plural in another locale. */
+  public getLocaleIso(): Record<string, string> {
+    return this.localeIso
   }
 
   public getRouteTranslations(locale: string, routeName: string): Translations | null {
-    const cacheKey = `${locale}:${routeName}`
-    return this.storage.translations.get(cacheKey) ?? null
-  }
-
-  public addTranslations(locale: string, translations: Translations, merge = true): void {
-    super.loadTranslationsCore(locale, translations, merge)
-  }
-
-  public addRouteTranslations(locale: string, routeName: string, translations: Translations, merge = true): void {
-    super.loadRouteTranslationsCore(locale, routeName, translations, merge)
+    return this.helper.getCache(locale, routeName) ?? null
   }
 
   public mergeTranslations(locale: string, routeName: string, translations: Translations): void {
-    this.helper.mergeTranslation(locale, routeName, translations, true)
+    this.addRouteTranslations(locale, routeName, translations)
   }
 
   public override clearCache(): void {
-    const initialMessages = { ...this.initialMessages }
-
     super.clearCache()
-
-    if (Object.keys(initialMessages).length > 0) {
-      for (const [lang, msgs] of Object.entries(initialMessages)) {
-        this.helper.loadTranslations(lang, msgs)
-      }
-    }
+    this.loadMessages(this.initialMessages, this.initialRouteMessages)
   }
 }

package/src/env.d.ts

@@ -1,7 +1,9 @@
+// It's loaded directly by Astro via entrypoint in integration config
 /// <reference types="astro/client" />
 
 import type { AstroI18n } from './composer'
 import type { Locale } from '@i18n-micro/types'
+import type { MiddlewareHandler } from 'astro'
 import type { I18nRoutingStrategy } from './router/types'
 
 declare global {
@@ -11,8 +13,13 @@ declare global {
       locale: string
       defaultLocale: string
       locales: Locale[]
+      /** The page's URL: the original one after `Astro.rewrite`, the page's one in a server island. */
       currentUrl: URL
       routingStrategy?: I18nRoutingStrategy
+      /** Astro's `base`, no trailing slash. */
+      i18nBase?: string
+      /** The middleware that handled this request. */
+      i18nHandler?: MiddlewareHandler
     }
   }
 }

package/src/index.ts

@@ -2,17 +2,13 @@
 import './env.d'
 
 // Re-export utilities from core
-export { defaultPlural, FormatService, interpolate } from '@i18n-micro/core'
+export { defaultPlural, FormatService, interpolate, localeIsoMap } from '@i18n-micro/core'
 // Re-export types from @i18n-micro/types
 export type { CleanTranslation, Getter, Locale, LocaleCode, Params, PluralFunc, Translations } from '@i18n-micro/types'
 export { AstroI18n, type AstroI18nOptions } from './composer'
 // Export integration options type
 export type { I18nIntegrationOptions } from './integration'
 export { createI18n, i18nIntegration } from './integration'
-export { getGlobalRoutingStrategy, runWithRoutingStrategy, setGlobalRoutingStrategy } from './routing-context'
-export type { LoadedTranslations, LoadTranslationsOptions } from './load-translations'
-// Export translation loading utilities
-export { loadTranslationsFromDir, loadTranslationsIntoI18n } from './load-translations'
 export type { I18nMiddlewareOptions } from './middleware'
 export { createI18nMiddleware, detectLocale } from './middleware'
 export { createAstroRouterAdapter } from './router/adapter'
@@ -31,4 +27,3 @@ export {
   useI18n,
   useLocaleHead,
 } from './utils'
-// It's loaded directly by Astro via entrypoint in integration config