react-autolocale 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,265 @@
+import { i as STORAGE_KEY, n as DISMISSED_KEY, o as redirectTarget, r as suggestLanguage, t as BANNER_EN } from "./suggestion-UZQ8ngd0.js";
+import { Fragment, createContext, createElement, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { banner, languages, loaders, original, originalNative, seo } from "virtual:react-autolocale";
+//#region src/runtime/index.ts
+const hasDom = typeof window !== "undefined" && typeof document !== "undefined";
+const codes = /* @__PURE__ */ new Set([original, ...languages.map((l) => l.code)]);
+const cache = /* @__PURE__ */ new Map();
+const PREFIX = /^\/([a-z]{2,3})(?=\/|$)/i;
+function prefixOf(pathname) {
+	const code = PREFIX.exec(pathname)?.[1]?.toLowerCase();
+	return code && codes.has(code) ? code : null;
+}
+function pathFor(code) {
+	const { pathname, search, hash } = window.location;
+	return `/${code}${prefixOf(pathname) ? pathname.replace(PREFIX, "") || "/" : pathname}${search}${hash}`;
+}
+function load(code) {
+	const hit = cache.get(code);
+	if (hit) return Promise.resolve(hit);
+	const loader = loaders[code];
+	if (!loader) return Promise.resolve({});
+	return loader().then((m) => m.default).catch(() => ({})).then((dict) => (cache.set(code, dict), dict));
+}
+const Context = createContext({
+	language: original,
+	dict: {},
+	setLanguage: async () => {}
+});
+function initialState() {
+	if (!hasDom) return {
+		language: original,
+		dict: {}
+	};
+	const boot = window.__AUTOSCALE__;
+	if (boot) cache.set(boot.lang, boot.dict);
+	const { pathname, search, hash } = window.location;
+	const fromUrl = prefixOf(pathname);
+	if (fromUrl === null) {
+		let saved = null;
+		try {
+			saved = window.localStorage.getItem(STORAGE_KEY);
+		} catch {}
+		const to = redirectTarget({
+			pathname,
+			search,
+			hash,
+			saved,
+			browser: window.navigator.languages?.length ? window.navigator.languages : [window.navigator.language],
+			codes: [...codes],
+			original
+		});
+		if (to) window.location.replace(to);
+		else window.history.replaceState(window.history.state, "", `/${original}${pathname}${search}${hash}`);
+	}
+	const language = fromUrl ?? original;
+	return {
+		language,
+		dict: language === original ? {} : cache.get(language) ?? {}
+	};
+}
+/**
+* Wrap your app once. Language comes from the URL (/fr/...), so every language is a real, static page.
+* The props are read at build time by the Vite plugin.
+*/
+function AutoScale({ children }) {
+	const [state, setState] = useState(initialState);
+	const apply = useCallback(async (code, push) => {
+		if (!codes.has(code)) return;
+		if (push && hasDom) {
+			try {
+				window.localStorage.setItem(STORAGE_KEY, code);
+			} catch {}
+			if (seo) {
+				window.location.assign(pathFor(code));
+				return;
+			}
+		}
+		const dict = code === original ? {} : await load(code);
+		setState({
+			language: code,
+			dict
+		});
+		if (push && hasDom) window.history.pushState(null, "", pathFor(code));
+	}, []);
+	const setLanguage = useCallback((code) => apply(code, true), [apply]);
+	useEffect(() => {
+		document.documentElement.lang = state.language;
+		document.documentElement.dir = languages.find((l) => l.code === state.language)?.rtl ? "rtl" : "ltr";
+	}, [state.language]);
+	useEffect(() => {
+		if (state.language !== original && !cache.has(state.language)) apply(state.language, false);
+		const onPop = () => void apply(prefixOf(window.location.pathname) ?? original, false);
+		window.addEventListener("popstate", onPop);
+		return () => window.removeEventListener("popstate", onPop);
+	}, [apply]);
+	const value = useMemo(() => ({
+		...state,
+		setLanguage
+	}), [state, setLanguage]);
+	return createElement(Context.Provider, { value }, children);
+}
+/** @internal Inserted by the Vite plugin in place of static JSX text. */
+function __T({ s }) {
+	const { dict } = useContext(Context);
+	return createElement(Fragment, null, dict[s] ?? s);
+}
+/** @internal Inserted by the Vite plugin for translated attributes (placeholder, alt, ...). */
+function __useT() {
+	const { dict } = useContext(Context);
+	return useCallback((s) => dict[s] ?? s, [dict]);
+}
+/** @internal Inserted by the Vite plugin for text with variables, e.g. `Hello {name}`. */
+function __TD({ s, v }) {
+	const { dict } = useContext(Context);
+	const parts = (dict[s] ?? s).split(/\{(\w+)\}/g).map((part, i) => i % 2 ? v[part] : part);
+	return createElement(Fragment, null, ...parts.map((p, i) => createElement(Fragment, { key: i }, p)));
+}
+/**
+* Pick a value by language: `useLocalized({ en: "/pricing", fr: "/tarifs", default: "/pricing" })`.
+* Falls back to `default`, then to the original language's value.
+*/
+function useLocalized(values) {
+	const { language } = useContext(Context);
+	return values[language] ?? values.default ?? values[original];
+}
+/** Component form of `useLocalized`: `<Localized en={<A />} fr={<B />} default={<A />} />`. */
+function Localized(props) {
+	return createElement(Fragment, null, useLocalized(props));
+}
+/** Content that appears for some languages only, such as a local offer or legal notice. */
+function ForLanguages({ only, except, children }) {
+	const { language } = useContext(Context);
+	if (only && !only.includes(language)) return null;
+	if (except?.includes(language)) return null;
+	return createElement(Fragment, null, children);
+}
+/** Numbers, prices and dates formatted for the current language: `format.currency(19.99, "EUR")`. */
+function useFormat() {
+	const { language } = useContext(Context);
+	return useMemo(() => ({
+		language,
+		number: (value, options) => new Intl.NumberFormat(language, options).format(value),
+		currency: (value, currency, options) => new Intl.NumberFormat(language, {
+			style: "currency",
+			currency,
+			...options
+		}).format(value),
+		percent: (value, options) => new Intl.NumberFormat(language, {
+			style: "percent",
+			...options
+		}).format(value),
+		date: (value, options) => new Intl.DateTimeFormat(language, options ?? { dateStyle: "medium" }).format(new Date(value))
+	}), [language]);
+}
+function readDismissed() {
+	try {
+		const v = JSON.parse(window.localStorage.getItem("react-autolocale:banner-dismissed") ?? "[]");
+		return Array.isArray(v) ? v : [];
+	} catch {
+		return [];
+	}
+}
+/**
+* For building your own banner. Returns null when there is nothing to suggest: the visitor's browser language
+* is the page's language, is not supported, was dismissed, or they already picked a language.
+*/
+function useLanguageSuggestion() {
+	const { language, setLanguage } = useContext(Context);
+	const [code, setCode] = useState(null);
+	useEffect(() => {
+		let chosen = false;
+		try {
+			chosen = window.localStorage.getItem(STORAGE_KEY) !== null;
+		} catch {}
+		setCode(suggestLanguage({
+			browser: window.navigator.languages?.length ? window.navigator.languages : [window.navigator.language],
+			codes: [...codes],
+			current: language,
+			dismissed: readDismissed(),
+			chosen
+		}));
+	}, [language]);
+	if (!code) return null;
+	const text = banner[code] ?? BANNER_EN;
+	const native = code === original ? originalNative : languages.find((l) => l.code === code)?.native ?? code;
+	return {
+		language: code,
+		native,
+		text: text.prompt.split("{language}").join(native),
+		switchLabel: text.switch.split("{language}").join(native),
+		dismissLabel: text.dismiss.split("{language}").join(native),
+		accept: () => void setLanguage(code),
+		dismiss: () => {
+			try {
+				window.localStorage.setItem(DISMISSED_KEY, JSON.stringify([...readDismissed(), code]));
+			} catch {}
+			setCode(null);
+		}
+	};
+}
+const BAR = {
+	position: "fixed",
+	left: 0,
+	right: 0,
+	bottom: 0,
+	display: "flex",
+	gap: 12,
+	alignItems: "center",
+	justifyContent: "center",
+	padding: "10px 16px",
+	background: "#111",
+	color: "#fff",
+	font: "14px system-ui, sans-serif",
+	zIndex: 2147483e3
+};
+/** A ready-made suggestion bar. Style it with `className`/`style`, or pass a render function to build your own. */
+function LanguageBanner({ className, style, children }) {
+	const s = useLanguageSuggestion();
+	if (!s) return null;
+	if (children) return createElement(Fragment, null, children(s));
+	return createElement("div", {
+		role: "region",
+		"aria-label": s.native,
+		className,
+		style: className ? style : {
+			...BAR,
+			...style
+		}
+	}, createElement("span", null, s.text), createElement("button", {
+		type: "button",
+		onClick: s.accept,
+		lang: s.language
+	}, s.switchLabel), createElement("button", {
+		type: "button",
+		onClick: s.dismiss
+	}, s.dismissLabel));
+}
+function useLanguage() {
+	const { language, setLanguage } = useContext(Context);
+	return useMemo(() => ({
+		language,
+		setLanguage,
+		languages: [{
+			code: original,
+			native: originalNative
+		}, ...languages],
+		basePath: `/${language}`
+	}), [language, setLanguage]);
+}
+/** A dropdown that switches the whole app's language instantly, without a reload. */
+function LanguageSwitcher({ className, style, label = "Language" }) {
+	const { language, languages: all, setLanguage } = useLanguage();
+	return createElement("select", {
+		className,
+		style,
+		value: language,
+		"aria-label": label,
+		onChange: (e) => void setLanguage(e.target.value)
+	}, all.map((l) => createElement("option", {
+		key: l.code,
+		value: l.code
+	}, l.native)));
+}
+//#endregion
+export { AutoScale, ForLanguages, LanguageBanner, LanguageSwitcher, Localized, __T, __TD, __useT, useFormat, useLanguage, useLanguageSuggestion, useLocalized };