@inlang/paraglide-js-adapter-solidstart
v0.0.2
Published
Downloads
4
Readme
Attention: This package is in pre-release. It is not yet ready for production use.
SolidStart Adapter for Paraglide JS
Example project
Before setting up the adapter in your own project, you can take a look at the example project to see how it works.
Getting started
1. Initialize paraglide-js
If you haven't already, initialize paraglide-js in your project. To do so, follow the getting started guide to get familiar with the basic paraglide concepts.
Then come back here to learn how the adapter helps you to integrate paraglide-js into your SolidStart project.
2. Install the adapter
npm install @inlang/paraglide-js-adapter-solidstart
# or
pnpm add @inlang/paraglide-js-adapter-solidstart
# or
yarn add @inlang/paraglide-js-adapter-solidstart3. Use the adapter to wrap paraglide
Pass the runtime generated by paraglide to the adapter to create SolidStart-bound functions.
// i18n.tsx (or where you want to use the adapter)
import * as paraglide from "./paraglide/runtime.js" // generated by paraglide
import { createI18n } from "@inlang/paraglide-js-adapter-solidstart"
const { LanguageTagProvider, languageTag, setLanguageTag } = createI18n(paraglide)Take a look at example/src/i18n/index.tsx to see how the adapter is used in a example project. With an addition to some convenience functions.
4. Provide language tag to your app, and Solid Router.
// entry-server.tsx
import { createHandler, StartServer } from "@solidjs/start/server"
import { useLocationLanguageTag } from "./i18n.js"
export default createHandler(() => {
const language_tag = useLocationLanguageTag() ?? i18n.sourceLanguageTag
return (
<StartServer
document={(props) => (
<html lang={language_tag}>
<head>
{props.assets}
</head>
<body>
<div id="app">{props.children}</div>
{props.scripts}
</body>
</html>
)}
/>
)
})
// app.tsx
import { Router } from "@solidjs/router"
import { FileRoutes } from "@solidjs/start"
import { Suspense } from "solid-js"
import { LanguageTagProvider, useLocationLanguageTag, sourceLanguageTag } from "./i18n.js"
export default function App() {
// get language tag from URL, or use source language tag as fallback
const url_language_tag = useLocationLanguageTag()
const language_tag = url_language_tag ?? sourceLanguageTag
// 1. provide language tag to your app
// 2. set html lang attribute
// 3. make sure the routing doesn't treat the language tag as part of the path
return (
<main>
<Router
base={url_language_tag}
root={(props) => (
<LanguageTagProvider value={language_tag}>
<Suspense>{props.children}</Suspense>
</LanguageTagProvider>
)}
>
<FileRoutes />
</Router>
</main>
)
}Take a look at example/src/app.tsx to see how it is used in a example project.
5. Use message functions
The language tag of current request is provided by the adapter via a context. All the messgee functions used with this context will be translated to the current language.
// uses the context's language tag to translate the message
<h1>{m.greeting({ name: "Loris" })}</h1>
// pass language tag explicitly when used outside of the available context
const language_tag = languageTag() // in component body
<button onClick={e => {
e.preventDefault()
alert(
m.greeting({ name: "Loris" }, { languageTag: language_tag })
)
}}>
{m.show_greeting()}
</button>6. Switch language
You can switch languages by calling the setLanguageTag function provided by the adapter. This will navigate to the translated variant of the current route.
<select onChange={(e) => setLanguageTag(e.target.value)}>
{availableLanguageTags.map((tag) => (
<option value={tag} selected={tag === languageTag()}>
{tag}
</option>
))}
</select>If you want to navigate to a different route in a specific language, you can use the translateHref function provided by the adapter to generate the correct href.
<A href={translateHref("/about", "en")}>{m.about()}</A>⚠️ Don't use the
translateHreffunction on links that point to external websites. It will break the link.
7. Alternate links
If you want to provide alternate links to the same page in different languages.
const language_tag = languageTag()
<head>
{availableLanguageTags
.filter((tag) => tag !== language_tag)
.map((tag) => (
<link
rel="alternate"
href={translateHref("/", tag)}
hreflang={tag}
/>
))
}
</head>