SolidJS
ShipEasyI18n integration for SolidJS — useShipEasyI18n() signal, ShipEasyI18nProvider context, and createStore integration for reactive label state.
Package: @i18n/solid
Install
npm install @i18n/solidScript tag
Add the loader to index.html:
<!-- index.html -->
<head>
<script
src="https://cdn.i18n.shipeasy.ai/v1/loader.js"
data-key="i18n_pk_your_key_here"
data-profile="en:prod"
async
></script>
</head>ShipEasyI18nProvider
Wrap your app with ShipEasyI18nProvider in the entry file:
// src/index.tsx
import { render } from 'solid-js/web';
import { ShipEasyI18nProvider } from '@i18n/solid';
import App from './App';
render(
() => (
<ShipEasyI18nProvider>
<App />
</ShipEasyI18nProvider>
),
document.getElementById('root')!
);useShipEasyI18n() signal
Access the reactive label state inside any component:
// src/components/NavBar.tsx
import { useShipEasyI18n } from '@i18n/solid';
export function NavBar() {
const { t, ready, locale } = useShipEasyI18n();
return (
<nav>
<a href="/" data-label="nav.home">{t('nav.home')}</a>
<a href="/account" data-label="nav.account">{t('nav.account')}</a>
<Show when={!ready()}>
<span>Loading…</span>
</Show>
</nav>
);
}ready and locale are signals — call them as functions (ready(), locale()). t is a plain function that reads from the underlying signal.
createStore integration
If you manage app state with createStore, merge ShipEasyI18n into your store:
import { createStore } from 'solid-js/store';
import { useShipEasyI18n } from '@i18n/solid';
export function useAppStore() {
const i18n = useShipEasyI18n();
const [state, setState] = createStore({
user: null as User | null,
get pageTitle() {
return i18n.t('site.title');
},
});
return { state, setState, i18n };
}SolidJS signals are fine-grained — only the components that call t() re-render when labels change, not the whole tree.
For the full implementation spec including package source code and edge cases, see plans/frameworks/solidjs.md in the repository.
Remix
ShipEasyI18n integration for Remix — server-side label loading in loader(), useShipEasyI18n() hook in components, and inline data via root loader.
Svelte / SvelteKit
ShipEasyI18n integration for Svelte and SvelteKit — reactive i18n store, ShipEasyI18nString component, and server-side label loading via SvelteKit load().