Paraglide JS Adapter SolidStart

Paraglide JS Adapter SolidStart

A SolidStart integration for ParaglideJS, providing you with everything you need to take your solid app global.

Paraglide JS header image

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-solidstart

#3. 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 translateHref function on links that point to external websites. It will break the link.

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>

Publisher

inlang

inlang

License

Apache-2.0

Pricing

free

Recommended to use with: