@linguanahq/solid 0.1.0

package/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@linguanahq/solid",
+	"version": "0.1.0",
+	"publishConfig": {
+		"access": "public"
+	},
+	"type": "module",
+	"exports": {
+		".": "./src/index.tsx",
+		"./compiler-runtime": "./src/compiler-runtime.tsx",
+		"./styles.css": "./src/styles.css"
+	},
+	"scripts": {
+		"check-types": "tsc --noEmit",
+		"test": "bun test"
+	},
+	"dependencies": {
+		"@linguanahq/core": "0.1.0"
+	},
+	"devDependencies": {
+		"@linguana/config": "0.0.0",
+		"@linguanahq/catalog": "0.1.0",
+		"typescript": "^6",
+		"solid-js": "^1.9.10"
+	},
+	"peerDependencies": {
+		"solid-js": ">=1.9"
+	}
+}

package/src/compiler-runtime.tsx

@@ -0,0 +1,19 @@
+export { T as LinguanaMessage, T as default } from ".";
+
+import type { JSX } from "solid-js";
+import { useTranslation } from ".";
+
+export function LinguanaAttributes(props: {
+	descriptors: Array<{ name: string; id: string; defaultMessage: string }>;
+	children: (values: Record<string, string>) => JSX.Element;
+}) {
+	const runtime = useTranslation();
+	return props.children(
+		Object.fromEntries(
+			props.descriptors.map((item) => [
+				item.name,
+				String(runtime.translate(item.id, item.defaultMessage)),
+			]),
+		),
+	);
+}

package/src/index.tsx

@@ -0,0 +1,112 @@
+import {
+	createLinguanaClient,
+	type LinguanaClient,
+	type LinguanaClientOptions,
+} from "@linguanahq/core";
+import {
+	createContext,
+	createMemo,
+	createSignal,
+	For,
+	type JSX,
+	onCleanup,
+	onMount,
+	type ParentProps,
+	useContext,
+} from "solid-js";
+
+const LinguanaContext = createContext<LinguanaClient>();
+
+export function LinguanaProvider(props: ParentProps<LinguanaClientOptions>) {
+	const client = createLinguanaClient(props);
+	onMount(() => void client.loadRuntimeConfig());
+	onCleanup(() => client.dispose());
+	return (
+		<LinguanaContext.Provider value={client}>
+			{props.children}
+		</LinguanaContext.Provider>
+	);
+}
+
+export function useTranslation() {
+	const client = useContext(LinguanaContext);
+	if (!client)
+		throw new Error("useTranslation must be used within LinguanaProvider");
+	const [snapshot, setSnapshot] = createSignal(client.getSnapshot());
+	const unsubscribe = client.subscribe(() => setSnapshot(client.getSnapshot()));
+	onCleanup(unsubscribe);
+	return {
+		snapshot,
+		locale: () => snapshot().locale,
+		ready: () => snapshot().ready,
+		availableLocales: () => snapshot().availableLocales,
+		setLocale: client.setLocale,
+		t: client.t,
+		translate: client.translate,
+	};
+}
+
+export function useLocaleOptions(query = () => "") {
+	const runtime = useTranslation();
+	const options = createMemo(() => {
+		const normalized = query().trim().toLocaleLowerCase();
+		return runtime
+			.availableLocales()
+			.filter(
+				(item) =>
+					!normalized ||
+					`${item.code} ${item.displayName} ${item.nativeName}`
+						.toLocaleLowerCase()
+						.includes(normalized),
+			)
+			.sort((a, b) => a.displayName.localeCompare(b.displayName));
+	});
+	return { ...runtime, options };
+}
+
+export function T(props: {
+	id: string;
+	defaultMessage: string;
+	values?: Record<string, unknown>;
+}) {
+	return useTranslation().translate(
+		props.id,
+		props.defaultMessage,
+		props.values,
+	) as JSX.Element;
+}
+
+export function LanguageSelector(props: { label?: string; class?: string }) {
+	const [query, setQuery] = createSignal("");
+	const runtime = useLocaleOptions(query);
+	return (
+		<div class={props.class} data-linguana-language-selector="">
+			<label>
+				<span>{props.label ?? "Language"}</span>
+				<input
+					type="search"
+					value={query()}
+					onInput={(event) => setQuery(event.currentTarget.value)}
+					placeholder="Search languages"
+				/>
+			</label>
+			<select
+				aria-label={props.label ?? "Language"}
+				value={runtime.locale()}
+				disabled={!runtime.ready()}
+				onChange={(event) => void runtime.setLocale(event.currentTarget.value)}
+			>
+				<For each={runtime.options()}>
+					{(item) => (
+						<option value={item.code}>
+							{item.nativeName} — {item.displayName}
+							{item.tier === "PREVIEW" ? " (Preview)" : ""}
+						</option>
+					)}
+				</For>
+			</select>
+		</div>
+	);
+}
+
+export type { LinguanaClient, LinguanaClientOptions } from "@linguanahq/core";

package/src/styles.css

@@ -0,0 +1 @@
+@import "@linguanahq/core/styles.css";