@palamedes/solid

Use this package when your app wants Solid-native translation components such as Trans, Plural, Select, and SelectOrdinal, plus a small headless frontend helper layer for locale-aware UI.

Palamedes keeps the runtime model provider-free. Transformed code resolves the active i18n instance through getI18n() from @palamedes/runtime, so your Solid app only needs to register the active client or server instance before translated code runs.

This package is part of the verified SolidStart story in the example matrix. It shares the same catalog model, runtime semantics, and Vite plugin path as the React integrations while swapping only the thin JSX adapter layer.

Install

pnpm add @palamedes/core @palamedes/solid @palamedes/runtime
pnpm add -D @palamedes/vite-plugin @palamedes/cli @palamedes/config vite-plugin-solid

Example

import { Trans } from "@palamedes/solid/macro"

export function Footer() {
  return (
    <footer>
      <Trans>Powered by Palamedes</Trans>
    </footer>
  )
}

When the Palamedes transform runs, macro imports are rewritten to runtime imports from @palamedes/solid.

Headless Frontend Helpers

This package also exposes small Solid-native helpers that stay deliberately headless:

• createClientLocaleEffect(localeAccessor, sync) from @palamedes/solid/client
• buildLocaleSwitchItems({ locales, currentLocale, labels, testIdPrefix? })
• LocaleSwitchItem<TLocale>

They do not own routing, styling, cookie policy, or server decisions. They only cover the stable frontend primitives that repeat across apps:

• synchronizing the active client locale
• building render-ready locale switch models for links, buttons, or forms

import { buildLocaleSwitchItems } from "@palamedes/solid"
import { createClientLocaleEffect } from "@palamedes/solid/client"

function LocaleToolbar(props: { locale: "en" | "de"; sync: (locale: "en" | "de") => void | Promise<void> }) {
  createClientLocaleEffect(() => props.locale, props.sync)

  const items = () =>
    buildLocaleSwitchItems({
      locales: ["en", "de"] as const,
      currentLocale: props.locale,
      labels: { en: "English", de: "Deutsch" },
    })

  return (
    <nav>
      {items().map((item) => (
        <button data-testid={item.testId}>{item.label}</button>
      ))}
    </nav>
  )
}

Related Docs

• First working translation in 5 minutes
• Example matrix
• Proof and benchmarks