@i18n-micro/solid 1.2.15 → 2.0.0

package/src/components/I18nLink.tsx

@@ -0,0 +1,71 @@
+import { externalLinkHref, isActiveLink, isPlainClick } from '@i18n-micro/core'
+import { type Component, createMemo, type JSX, mergeProps, splitProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import { useI18nContextValue } from '../injection'
+import type { RouteTarget } from '../router/types'
+import { routePath, useI18n } from '../use-i18n'
+import { mergeStyles } from './merge-styles'
+
+export interface I18nLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  to: RouteTarget
+  localeRoute?: (to: RouteTarget, locale?: string) => RouteTarget
+  activeStyle?: JSX.CSSProperties
+}
+
+/** Solid's two handler shapes: a function, or `[function, data]`. */
+function callHandler(handler: I18nLinkProps['onClick'], event: Parameters<ClickHandler>[0]): void {
+  if (typeof handler === 'function') handler(event)
+  else if (handler) handler[0](handler[1], event)
+}
+
+type ClickHandler = JSX.EventHandler<HTMLAnchorElement, MouseEvent>
+
+export const I18nLink: Component<I18nLinkProps> = (props): JSX.Element => {
+  // the provider's props are reactive: `context.router` is read where it is used
+  const context = useI18nContextValue()
+  const i18n = context.i18n
+  const api = useI18n()
+  const [local, others] = splitProps(props, ['to', 'localeRoute', 'activeStyle', 'style', 'onClick'])
+
+  const externalHref = createMemo(() => externalLinkHref(local.to))
+  const target = createMemo(() => routePath((local.localeRoute ?? api.localeRoute)(local.to, i18n.locale)))
+
+  const isActive = createMemo(() => {
+    const router = context.router
+    if (!router || !local.activeStyle || externalHref() !== undefined) return false
+    // The current, default and fallback locale count too, so a provider without `locales` still knows its own root.
+    const codes = [i18n.locale, api.defaultLocale(), i18n.fallbackLocale, ...api.getLocales().map((l) => l.code)]
+    return isActiveLink(router.getCurrentPath(), target(), codes)
+  })
+
+  const handleClick: ClickHandler = (event) => {
+    callHandler(local.onClick, event)
+    const router = context.router
+    if (!router || externalHref() !== undefined || !isPlainClick(event)) return
+    event.preventDefault()
+    router.push({ path: target() })
+  }
+
+  const usesRouterLink = () => externalHref() === undefined && context.router?.linkComponent !== undefined
+
+  const merged = mergeProps(others, {
+    get href() {
+      return externalHref() ?? target()
+    },
+    get style() {
+      return isActive() ? mergeStyles(local.style, local.activeStyle) : local.style
+    },
+    // a router link handles its own clicks
+    get onClick() {
+      return usesRouterLink() ? local.onClick : handleClick
+    },
+    get target() {
+      return externalHref() === undefined ? undefined : (others.target ?? '_blank')
+    },
+    get rel() {
+      return externalHref() === undefined ? undefined : (others.rel ?? 'noopener noreferrer')
+    },
+  })
+
+  return <Dynamic component={usesRouterLink() ? context.router!.linkComponent! : 'a'} {...merged} />
+}

package/src/components/I18nSwitcher.tsx

@@ -0,0 +1,175 @@
+import { isPlainClick, ownValue } from '@i18n-micro/core'
+import { SWITCHER_STYLES } from '@i18n-micro/core/render'
+import type { Locale } from '@i18n-micro/types'
+import { type Component, createMemo, createSignal, For, type JSX, onCleanup, onMount, Show, splitProps } from 'solid-js'
+import { useI18nContextValue } from '../injection'
+import type { RouteTarget } from '../router/types'
+import { routePath, useI18n } from '../use-i18n'
+import { mergeStyles } from './merge-styles'
+
+export interface I18nSwitcherProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  locales?: Locale[]
+  currentLocale?: string | (() => string)
+  getLocaleName?: () => string | null
+  switchLocale?: (locale: string) => void
+  localeRoute?: (to: RouteTarget, locale?: string) => RouteTarget
+  customLabels?: Record<string, string>
+  customWrapperStyle?: JSX.CSSProperties
+  customButtonStyle?: JSX.CSSProperties
+  customDropdownStyle?: JSX.CSSProperties
+  customItemStyle?: JSX.CSSProperties
+  customLinkStyle?: JSX.CSSProperties
+  customActiveLinkStyle?: JSX.CSSProperties
+  /**
+   * Inline style applied to the main switcher button when the current locale is
+   * marked as `disabled: true` in locale config.
+   *
+   * Disabled locales are omitted from dropdown items.
+   */
+  customDisabledLinkStyle?: JSX.CSSProperties
+  customIconStyle?: JSX.CSSProperties
+}
+
+/** Core's look with Solid's property names: `style` here takes CSS names. */
+const css = (style: object): JSX.CSSProperties =>
+  Object.fromEntries(
+    Object.entries(style).map(([name, value]) => [name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`), value]),
+  ) as JSX.CSSProperties
+
+const WRAPPER_STYLE = /*#__PURE__*/ css(SWITCHER_STYLES.wrapper)
+const BUTTON_STYLE = /*#__PURE__*/ css(SWITCHER_STYLES.button)
+const DROPDOWN_STYLE = /*#__PURE__*/ css(SWITCHER_STYLES.dropdown)
+const ITEM_STYLE = /*#__PURE__*/ css(SWITCHER_STYLES.item)
+const LINK_STYLE = /*#__PURE__*/ css(SWITCHER_STYLES.link)
+const ACTIVE_LINK_STYLE = /*#__PURE__*/ css(SWITCHER_STYLES.activeLink)
+const ICON_STYLE = /*#__PURE__*/ css(SWITCHER_STYLES.icon)
+const OPEN_ICON_STYLE = /*#__PURE__*/ css(SWITCHER_STYLES.openIcon)
+
+export const I18nSwitcher: Component<I18nSwitcherProps> = (props): JSX.Element => {
+  const i18n = useI18n()
+  // the provider's props are reactive: its values are read where they are used
+  const context = useI18nContextValue()
+
+  const [local, others] = splitProps(props, [
+    'locales',
+    'currentLocale',
+    'getLocaleName',
+    'switchLocale',
+    'localeRoute',
+    'customLabels',
+    'customWrapperStyle',
+    'customButtonStyle',
+    'customDropdownStyle',
+    'customItemStyle',
+    'customLinkStyle',
+    'customActiveLinkStyle',
+    'customDisabledLinkStyle',
+    'customIconStyle',
+    'class',
+    'style',
+  ])
+
+  const [open, setOpen] = createSignal(false)
+  let wrapper: HTMLDivElement | undefined
+
+  const allLocales = createMemo(() => local.locales ?? context.locales ?? [])
+  const current = createMemo(() => {
+    const prop = local.currentLocale
+    return typeof prop === 'function' ? prop() : (prop ?? i18n.locale())
+  })
+  const currentItem = createMemo(() => allLocales().find((l) => l.code === current()))
+
+  const label = (locale: Locale): string =>
+    (local.customLabels && (ownValue(local.customLabels, locale.code) as string)) || locale.displayName || locale.code
+
+  const href = (code: string): string => {
+    const router = context.router
+    const path =
+      router?.getCurrentPath() ?? (typeof window === 'undefined' ? '/' : window.location.pathname + window.location.search + window.location.hash)
+    if (local.localeRoute) return routePath(local.localeRoute(path, code))
+    if (!router) return '#'
+    return routePath(router.resolvePath ? router.resolvePath(path, code) : path)
+  }
+
+  const select = (event: MouseEvent, code: string): void => {
+    if (!isPlainClick(event)) return
+    // a custom `localeRoute` with nothing to navigate: `href` is a real page, the browser's to follow
+    if (local.switchLocale || context.router || !local.localeRoute) event.preventDefault()
+    setOpen(false)
+    if (local.switchLocale) return local.switchLocale(code)
+    if (!local.localeRoute) return i18n.switchLocale(code)
+    i18n.instance.locale = code
+    context.router?.push({ path: href(code) })
+  }
+
+  const onDocumentClick = (event: MouseEvent) => {
+    if (open() && !wrapper?.contains(event.target as Node)) setOpen(false)
+  }
+  const onKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') setOpen(false)
+  }
+
+  // inside onMount: a cleanup registered at setup also runs on the server, where document is missing
+  onMount(() => {
+    document.addEventListener('click', onDocumentClick)
+    document.addEventListener('keydown', onKeydown)
+    onCleanup(() => {
+      document.removeEventListener('click', onDocumentClick)
+      document.removeEventListener('keydown', onKeydown)
+    })
+  })
+
+  return (
+    <div
+      {...others}
+      ref={(element) => {
+        wrapper = element
+      }}
+      class={['i18n-switcher-wrapper', local.class].filter(Boolean).join(' ')}
+      style={mergeStyles(WRAPPER_STYLE, local.customWrapperStyle, local.style)}
+    >
+      <button
+        type="button"
+        class="i18n-switcher-button language-switcher"
+        style={{ ...BUTTON_STYLE, ...local.customButtonStyle, ...(currentItem()?.disabled ? local.customDisabledLinkStyle : undefined) }}
+        aria-expanded={open()}
+        onClick={() => setOpen(!open())}
+      >
+        <span>{local.getLocaleName?.() || label(currentItem() ?? { code: current() })}</span>{' '}
+        <span style={{ ...ICON_STYLE, ...(open() ? OPEN_ICON_STYLE : undefined), ...local.customIconStyle }}>▾</span>
+      </button>
+
+      <Show when={open()}>
+        <ul class="i18n-switcher-dropdown" style={{ ...DROPDOWN_STYLE, ...local.customDropdownStyle }}>
+          <For each={allLocales().filter((locale) => !locale.disabled)}>
+            {(locale) => {
+              const active = () => locale.code === current()
+              const language = locale.iso || locale.code
+              return (
+                <li style={{ ...ITEM_STYLE, ...local.customItemStyle }}>
+                  <a
+                    class={`switcher-locale-${locale.code}`}
+                    href={href(locale.code)}
+                    hreflang={language}
+                    lang={language}
+                    dir={locale.dir}
+                    aria-current={active() ? 'page' : undefined}
+                    style={{
+                      ...LINK_STYLE,
+                      ...(active() ? ACTIVE_LINK_STYLE : undefined),
+                      ...local.customLinkStyle,
+                      ...(active() ? local.customActiveLinkStyle : undefined),
+                    }}
+                    onClick={(event) => select(event, locale.code)}
+                  >
+                    {label(locale)}
+                  </a>
+                </li>
+              )
+            }}
+          </For>
+        </ul>
+      </Show>
+    </div>
+  )
+}

package/src/components/I18nT.tsx

@@ -0,0 +1,126 @@
+import { foldTemplate, type RenderSlot, type RenderSlots } from '@i18n-micro/core/render'
+import { interpolate, resolveText, type ResolveTextOptions } from '@i18n-micro/core'
+import { type Component, createMemo, createRoot, getOwner, type JSX, mergeProps, onCleanup, splitProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import { useI18nContext } from '../injection'
+
+/** What fills a `{name}` placeholder. A function may run per occurrence; one node can only stand in one place. */
+export type I18nTComponent = JSX.Element | (() => JSX.Element)
+
+export interface I18nTProps extends Omit<JSX.HTMLAttributes<HTMLElement>, 'children'>, ResolveTextOptions {
+  tag?: string
+  /** Elements for `{name}` placeholders. Beats a param of the same name. */
+  components?: Record<string, I18nTComponent>
+  /** Replaces the text. As a function it gets the translation, like Vue's default slot. */
+  children?: JSX.Element | ((props: { translation: string }) => JSX.Element)
+}
+
+const OWN_PROPS = [
+  'keypath',
+  'params',
+  'tag',
+  'plural',
+  'defaultValue',
+  'html',
+  'hideIfEmpty',
+  'customPluralRule',
+  'number',
+  'date',
+  'relativeDate',
+  'components',
+  'children',
+] as const
+
+/** Attributes that would set the content, and with it get past the `html` prop. */
+const CONTENT_ATTRS = ['innerHTML', 'textContent', 'dangerouslySetInnerHTML', 'prop:innerHTML', 'prop:textContent'] as const
+
+/** What JSX itself draws as nothing: no children, not empty ones. */
+const isUnset = (children: unknown): boolean => children === undefined || children === null || typeof children === 'boolean'
+
+function toSlots(components: I18nTProps['components']): RenderSlots {
+  const slots: Record<string, RenderSlot> = Object.create(null)
+  for (const name of Object.keys(components ?? {})) {
+    const value = components![name]
+    if (value !== undefined) slots[name] = typeof value === 'function' ? (value as RenderSlot) : () => value
+  }
+  return slots
+}
+
+export const I18nT: Component<I18nTProps> = (props): JSX.Element => {
+  const i18n = useI18nContext()
+  const [local, , attrs] = splitProps(props, OWN_PROPS, CONTENT_ATTRS as never)
+
+  const resolved = createMemo(() => {
+    // a custom rule may read only its `locale` argument, which core takes untracked
+    i18n.localeAccessor()
+    return resolveText(i18n, local)
+  })
+  const text = (): string => {
+    const { template, params } = resolved()!
+    return interpolate(template, params)
+  }
+
+  // A locale that reorders placeholders moves these nodes: each is built once, in a root of its own,
+  // and disposed when the template drops it or new `components` replace the slots.
+  const slotScope = createMemo(() => {
+    const nodes = new Map<string, { node: unknown; dispose: () => void }>()
+    onCleanup(() => {
+      for (const built of nodes.values()) built.dispose()
+    })
+    return { slots: toSlots(local.components), nodes, owner: getOwner() }
+  })
+  const renderSlot = (slot: RenderSlot, key: string): unknown => {
+    const { nodes, owner } = slotScope()
+    if (!nodes.has(key))
+      nodes.set(
+        key,
+        createRoot((dispose) => ({ node: slot({}), dispose }), owner),
+      )
+    return nodes.get(key)!.node
+  }
+  const foldSlots = (): unknown => {
+    const { template, params } = resolved()!
+    const { slots, nodes } = slotScope()
+    const used = new Set<string>()
+    const folded = foldTemplate(
+      (slot, key) => {
+        used.add(key)
+        return renderSlot(slot, key)
+      },
+      template,
+      params,
+      slots,
+    )
+    for (const [key, built] of nodes) {
+      if (used.has(key)) continue
+      built.dispose()
+      nodes.delete(key)
+    }
+    return folded
+  }
+
+  const content = (): JSX.Element => {
+    const children = local.children
+    if (typeof children === 'function') return children({ translation: text() })
+    if (!isUnset(children)) return children
+    return foldSlots() as JSX.Element
+  }
+
+  // a static tag skips `Dynamic`: one memo per element less
+  const element = (body: object): JSX.Element => {
+    const merged = mergeProps(attrs, body)
+    return local.tag ? <Dynamic component={local.tag} {...merged} /> : <span {...(merged as JSX.HTMLAttributes<HTMLSpanElement>)} />
+  }
+  const markup = {
+    get innerHTML() {
+      return text()
+    },
+  }
+  const body = {
+    get children() {
+      return content()
+    },
+  }
+
+  return <>{resolved() === null ? local.defaultValue : local.html ? element(markup) : element(body)}</>
+}

package/src/components/merge-styles.ts

@@ -0,0 +1,16 @@
+import type { JSX } from 'solid-js'
+
+type Style = JSX.CSSProperties | string | undefined
+
+const cssText = (style: Style): string =>
+  typeof style === 'string'
+    ? style
+    : Object.entries(style ?? {})
+        .map(([name, value]) => `${name}:${value}`)
+        .join(';')
+
+/** Later wins. Solid's `style` takes an object or a CSS string; a string among them makes the result one too. */
+export function mergeStyles(...styles: Style[]): JSX.CSSProperties | string {
+  if (styles.some((style) => typeof style === 'string')) return styles.map(cssText).filter(Boolean).join(';')
+  return Object.assign({}, ...styles)
+}

package/src/context.tsx

@@ -0,0 +1,41 @@
+import { localeIsoMap } from '@i18n-micro/core'
+import type { Locale } from '@i18n-micro/types'
+import { createComputed, type JSX, type ParentComponent, useContext } from 'solid-js'
+import type { SolidI18n } from './i18n'
+import { I18nContext } from './injection'
+import type { I18nRoutingStrategy } from './router/types'
+
+export interface I18nProviderProps {
+  /** Without it, the outer provider's instance. */
+  i18n?: SolidI18n
+  locales?: Locale[]
+  defaultLocale?: string
+  routingStrategy?: I18nRoutingStrategy
+}
+
+// An omitted prop keeps the value of an outer provider.
+export const I18nProvider: ParentComponent<I18nProviderProps> = (props): JSX.Element => {
+  const outer = useContext(I18nContext)
+  const value = {
+    get i18n() {
+      const i18n = props.i18n ?? outer?.i18n
+      if (!i18n) throw new Error('[i18n-micro] I18nProvider needs an `i18n` instance or an outer provider.')
+      return i18n
+    },
+    get locales() {
+      return props.locales ?? outer?.locales
+    },
+    get defaultLocale() {
+      return props.defaultLocale ?? outer?.defaultLocale
+    },
+    get router() {
+      return props.routingStrategy ?? outer?.router
+    },
+  }
+  createComputed(() => {
+    if (props.locales) value.i18n.addLocaleIso(localeIsoMap(props.locales))
+  })
+  return <I18nContext.Provider value={value}>{props.children}</I18nContext.Provider>
+}
+
+export { useI18nContext } from './injection'

package/src/i18n.ts

@@ -0,0 +1,68 @@
+import { I18n, type I18nOptions } from '@i18n-micro/runtime'
+import { type Accessor, batch, createSignal } from 'solid-js'
+
+export type SolidI18nOptions = I18nOptions
+
+/**
+ * The runtime instance with signals over its store. A translation read tracks the revision, which
+ * every change bumps. Reading the locale tracks the locale alone, so `createEffect(() => load(locale()))`
+ * does not wake itself. `getLocale()` and `getRoute()` stay plain, as a write reads them too: track
+ * with `locale` and `currentRoute`.
+ */
+export class SolidI18n extends I18n {
+  private readonly revision: Accessor<number>
+  private readonly localeSignal: Accessor<string>
+  private readonly fallbackSignal: Accessor<string>
+  private readonly routeSignal: Accessor<string>
+
+  public readonly localeAccessor: Accessor<string> = () => this.locale
+  public readonly routeAccessor: Accessor<string> = () => this.currentRoute
+
+  constructor(options: SolidI18nOptions) {
+    super(options)
+    const [revision, setRevision] = createSignal(0)
+    const [locale, setLocale] = createSignal(this.getLocale())
+    const [fallback, setFallback] = createSignal(this.getFallbackLocale())
+    const [route, setRoute] = createSignal(this.getRoute())
+    this.revision = revision
+    this.localeSignal = locale
+    this.fallbackSignal = fallback
+    this.routeSignal = route
+    this.subscribe(() => {
+      batch(() => {
+        setLocale(this.getLocale())
+        setFallback(this.getFallbackLocale())
+        setRoute(this.getRoute())
+        setRevision((n) => n + 1)
+      })
+    })
+  }
+
+  protected override touch(): void {
+    this.revision()
+  }
+
+  override get locale(): string {
+    return this.localeSignal()
+  }
+
+  override set locale(value: string) {
+    super.locale = value
+  }
+
+  override get fallbackLocale(): string {
+    return this.fallbackSignal()
+  }
+
+  override set fallbackLocale(value: string) {
+    super.fallbackLocale = value
+  }
+
+  override get currentRoute(): string {
+    return this.routeSignal()
+  }
+}
+
+export function createI18n(options: SolidI18nOptions): SolidI18n {
+  return new SolidI18n(options)
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+// Main exports
+
+// Re-export utilities from core
+export { defaultPlural, FormatService, interpolate } from '@i18n-micro/core'
+// Re-export types from @i18n-micro/types
+export type { CleanTranslation, Getter, Locale, LocaleCode, ModuleOptions, Params, PluralFunc, TranslationKey, Translations } from '@i18n-micro/types'
+export type { I18nGroupProps } from './components/I18nGroup'
+export { I18nGroup } from './components/I18nGroup'
+export type { I18nLinkProps } from './components/I18nLink'
+export { I18nLink } from './components/I18nLink'
+export type { I18nSwitcherProps } from './components/I18nSwitcher'
+export { I18nSwitcher } from './components/I18nSwitcher'
+export type { I18nTComponent, I18nTProps } from './components/I18nT'
+export { I18nT } from './components/I18nT'
+export type { I18nProviderProps } from './context'
+export { I18nProvider } from './context'
+export type { SolidI18nOptions } from './i18n'
+export { createI18n, SolidI18n } from './i18n'
+// Injection helpers
+export type { I18nContextValue } from './injection'
+export { I18nContext, useI18nContext, useI18nDefaultLocale, useI18nLocales, useI18nRouter } from './injection'
+// Router adapter: `@i18n-micro/solid/router` (keeps the optional router peer out of this entry)
+// Router abstraction
+export type { I18nRoutingStrategy, RouteTarget } from './router/types'
+export type { UseI18nOptions, UseI18nReturn } from './use-i18n'
+export { useI18n } from './use-i18n'

package/src/injection.ts

@@ -0,0 +1,31 @@
+import type { Locale } from '@i18n-micro/types'
+import { createContext, useContext } from 'solid-js'
+import type { SolidI18n } from './i18n'
+import type { I18nRoutingStrategy } from './router/types'
+import type { UseI18nReturn } from './use-i18n'
+
+/** Everything a provider hands down: getters over its props, so they stay reactive. */
+export interface I18nContextValue {
+  readonly i18n: SolidI18n
+  readonly locales: Locale[] | undefined
+  readonly defaultLocale: string | undefined
+  readonly router: I18nRoutingStrategy | undefined
+  /** The `useI18n()` object: one per provider, signals do the rest. */
+  api?: UseI18nReturn
+}
+
+export const I18nContext = createContext<I18nContextValue>()
+
+export const useI18nContextValue = (): I18nContextValue => {
+  const context = useContext(I18nContext)
+  if (!context) {
+    throw new Error('[i18n-micro] I18nContext not found. Make sure I18nProvider is used.')
+  }
+  return context
+}
+
+export const useI18nContext = (): SolidI18n => useI18nContextValue().i18n
+// One read at setup. A component that follows a provider's changes reads `useI18n().getLocales()`, or the context, inside a memo.
+export const useI18nLocales = (): Locale[] | undefined => useContext(I18nContext)?.locales
+export const useI18nDefaultLocale = (): string | undefined => useContext(I18nContext)?.defaultLocale
+export const useI18nRouter = (): I18nRoutingStrategy | undefined => useContext(I18nContext)?.router

package/src/router/adapter.tsx

@@ -0,0 +1,54 @@
+import { localizedPath, routeQuery } from '@i18n-micro/core'
+import type { Locale } from '@i18n-micro/types'
+import { A, type Location, type useNavigate } from '@solidjs/router'
+import type { ComponentProps, JSX } from 'solid-js'
+import type { I18nRoutingStrategy } from './types'
+
+type NavigateFunction = ReturnType<typeof useNavigate>
+
+const RouterLink = (props: { href: string; [key: string]: unknown }): JSX.Element => <A {...(props as ComponentProps<typeof A>)} />
+
+/**
+ * Factory for Solid Router adapter
+ *
+ * `location` is the router's reactive object, so reading the path inside a memo or JSX follows
+ * navigation without a signal of its own.
+ *
+ * @example
+ * ```tsx
+ * const RouterRoot: Component = () => {
+ *   const navigate = useNavigate()
+ *   const location = useLocation()
+ *   const routingStrategy = createSolidRouterAdapter(locales, defaultLocale, navigate, location)
+ *   // ...
+ * }
+ * ```
+ *
+ * @param locales - Array of locale configurations
+ * @param defaultLocale - Default locale code
+ * @param navigate - Navigation function from @solidjs/router's useNavigate hook
+ * @param location - Location object from @solidjs/router's useLocation hook
+ * @returns I18nRoutingStrategy
+ */
+export function createSolidRouterAdapter(
+  locales: Locale[],
+  defaultLocale: string,
+  navigate: NavigateFunction,
+  location: Location,
+): I18nRoutingStrategy {
+  const codes = locales.map((locale) => locale.code)
+  const fullPath = () => `${location.pathname}${location.search}${location.hash}`
+
+  return {
+    linkComponent: RouterLink,
+    getCurrentPath: fullPath,
+    push: (target) => {
+      navigate(target.path)
+    },
+    replace: (target) => {
+      navigate(target.path, { replace: true })
+    },
+    resolvePath: (to, locale) => localizedPath(to, locale, codes, defaultLocale),
+    getRoute: () => ({ fullPath: fullPath(), query: routeQuery(location.search) }),
+  }
+}

package/src/router/index.ts

@@ -0,0 +1,3 @@
+// `@solidjs/router` is an optional peer: only this entry imports it, never the main one.
+export { createSolidRouterAdapter } from './adapter'
+export type { I18nRoutingStrategy } from './types'

package/src/router/types.ts

@@ -0,0 +1,53 @@
+import type { Component, JSX } from 'solid-js'
+
+/** Where a link or a switch goes. */
+export type RouteTarget = string | { path?: string }
+
+/**
+ * Routing strategy interface for i18n
+ * Implement this interface to integrate with any router library
+ * Matches Vue package interface for consistency
+ */
+export interface I18nRoutingStrategy {
+  /**
+   * Returns the current path with its query and hash, so a locale switch keeps them. Links compare
+   * it by page. Read a signal or a reactive location here and links and the switcher follow it.
+   */
+  getCurrentPath: () => string
+
+  /**
+   * Component to use for rendering links (e.g., RouterLink)
+   */
+  linkComponent?:
+    | string
+    | Component<{
+        href: string
+        children?: JSX.Element
+        style?: JSX.CSSProperties | string
+        class?: string
+        [key: string]: unknown
+      }>
+
+  /**
+   * Function to navigate to another route/locale
+   */
+  push: (target: { path: string }) => void
+
+  /**
+   * Function to replace current route
+   */
+  replace: (target: { path: string }) => void
+
+  /**
+   * Generate path for specific locale
+   */
+  resolvePath?: (to: RouteTarget, locale: string) => RouteTarget
+
+  /**
+   * (Optional) Get current route object for SEO/Meta tags
+   */
+  getRoute?: () => {
+    fullPath: string
+    query: Record<string, unknown>
+  }
+}