@inlang/paraglide-solidstart NPM

Paraglide JS header image

Currently Unmaintained

Paraglide-SolidStart

Example project

Before setting up Paraglide-SolidStart 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 Paraglide-SolidStart helps you to integrate ParaglideJS into your SolidStart project.

2. Install Paraglide-SolidStart

npm install @inlang/paraglide-solidstart
# or
pnpm add @inlang/paraglide-solidstart
# or
yarn add @inlang/paraglide-solidstart

3. Use Paraglide-SolidStart to wrap paraglide

Pass the runtime generated by paraglide to paraglide-solidstart to create SolidStart-bound functions.

// i18n.tsx
import * as paraglide from "./paraglide/runtime.js" // generated by paraglide
import { createI18n } from "@inlang/paraglide-solidstart"

const { LanguageTagProvider, languageTag, setLanguageTag } = createI18n(paraglide)

Take a look at example/src/i18n/index.tsx to see how paraglide-solidstart is used in an example project. With an addition to some convenience functions.

4. Provide a language tag to your app and the 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 the current request is provided by Paraglide-SolidStart via a context. All the message functions used in this context will be renderd with the it's 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 Paraglide-Solidstart. 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 Paraglide-SolidStart 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.

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>

@solidjs/router @solidjs/start solid-js

0.0.2

21 days ago