@transglot/solid

A thin SolidJS runtime i18n adapter over @transglot/runtime. It gives you a <TransglotProvider>, a useTranslations() primitive returning reactive { t, locale, setLocale }, and a reactive <T> component. Switching the locale recomputes every t(...) call site. solid-js is a peer dependency; it is never bundled.

Install

npm install @transglot/solid @transglot/runtime solid-js

Quickstart

Wrap your app with the provider, passing the runtime CDN options:

import { render } from 'solid-js/web';
import { TransglotProvider } from '@transglot/solid';
import { App } from './App';

render(
  () => (
    <TransglotProvider
      options={{
        baseUrl: 'https://app.example.com',
        project: 42,
        cdnKey: 'taicdn_…',
        locale: 'en',
      }}
    >
      <App />
    </TransglotProvider>
  ),
  document.getElementById('root')!,
);

Translate anywhere with the primitive:

import { T, useTranslations } from '@transglot/solid';

function Header() {
  const { t, locale, setLocale } = useTranslations();

  return (
    <header>
      <h1>{t('home.title')}</h1>
      <p>{t('cart.items', { count: 3 })}</p>

      {/* The <T> component renders a translation as text */}
      <T keypath="home.greeting" params={{ name: 'Ada' }} />

      <button onClick={() => void setLocale(locale() === 'en' ? 'fr' : 'en')}>{locale()}</button>
    </header>
  );
}

locale is a Solid signal accessor and t reads a revision signal, so any JSX / memo / effect that calls them recomputes on setLocale (and on a background bundle refresh).

Already have a runtime client? Adopt it instead of options:

import { createClient } from '@transglot/runtime';
import { TransglotProvider } from '@transglot/solid';

const client = createClient({ baseUrl, project, cdnKey, locale: 'en' });

<TransglotProvider client={client}>
  <App />
</TransglotProvider>;

API

• <TransglotProvider client|options>: pass EITHER a pre-built runtime client or the runtime ClientOptions as options (the provider builds the client). It warms the initial locale and provides the reactive surface to the tree. The client is created once.
• useTranslations() → { t, locale, setLocale, client }. t(key, params?) recomputes on a locale switch or background refresh; locale is a signal accessor; setLocale(locale) loads then switches. Throws if used outside the provider.
• createTranslation(client): the underlying reactive-surface factory, if you want to wire the client to context yourself.
• <T keypath params>: renders a translation as text.

Missing keys return the key (never throw); network/HTTP errors surface as the runtime's typed RuntimeError.