react-autolocale 0.1.0 → 0.3.0-beta.0

package/dist/config-CYHyGpdX.js

@@ -0,0 +1,21 @@
+//#region src/core/config.ts
+/** Typed helper for auto-locale.config.ts. */
+function defineConfig(config) {
+	return config;
+}
+const PROVIDER_NAMES = [
+	"local",
+	"ollama",
+	"openai",
+	"anthropic"
+];
+const DEFAULT_MODELS = {
+	openai: "gpt-6-astra",
+	anthropic: "claude-opus-5-5"
+};
+const DEFAULT_KEY_ENV = {
+	openai: "OPENAI_API_KEY",
+	anthropic: "ANTHROPIC_API_KEY"
+};
+//#endregion
+export { defineConfig as i, DEFAULT_MODELS as n, PROVIDER_NAMES as r, DEFAULT_KEY_ENV as t };

package/dist/config.d.ts

@@ -0,0 +1,56 @@
+import { n as Translator, t as TranslateFn } from "./translate-COrJX1KS.js";
+//#region src/core/config.d.ts
+/** The free local models (OPUS-MT / NLLB-200 through Transformers.js). Downloads happen only on `translate`. */
+interface LocalProvider {
+  name: "local";
+}
+/** A local LLM served by Ollama. */
+interface OllamaProvider {
+  name: "ollama";
+  model: string;
+  url?: string;
+}
+/** OpenAI through the official `openai` package (install it in your project). */
+interface OpenAIProvider {
+  name: "openai";
+  /** Defaults to "gpt-6-astra". */
+  model?: string;
+  /** Environment variable holding the key. Defaults to OPENAI_API_KEY. */
+  apiKeyEnv?: string;
+  /** Custom endpoint, e.g. an Azure or self-hosted OpenAI-compatible gateway. */
+  baseURL?: string;
+}
+/** Anthropic Claude through the official `@anthropic-ai/sdk` package (install it in your project). */
+interface AnthropicProvider {
+  name: "anthropic";
+  /** Defaults to "claude-opus-5-5". */
+  model?: string;
+  /** Environment variable holding the key. Defaults to ANTHROPIC_API_KEY. */
+  apiKeyEnv?: string;
+  /** How much the model thinks per request. Short UI strings rarely need more than "low" (the default). */
+  effort?: "low" | "medium" | "high" | "xhigh" | "max";
+}
+type ProviderConfig = LocalProvider | OllamaProvider | OpenAIProvider | AnthropicProvider;
+interface AutoLocaleConfig {
+  /** Language the source code is written in, e.g. "en". */
+  sourceLocale?: string;
+  /** Every language the site ships in. The source language may be listed too. */
+  locales?: string[];
+  /**
+   * Where catalogs are written, relative to the project root. Defaults to `src/generated/auto-locale` when the
+   * project has a root-level `src/`, otherwise `generated/auto-locale`.
+   */
+  output?: string;
+  /** Folders scanned for JSX. Defaults to "src" (or the project root when there is no src/). */
+  include?: string[];
+  /** Phrases never translated (brand and product names). Adds to `<AutoScale exclude>`. */
+  exclude?: string[];
+  /** Terms that must always translate a given way: { fr: { Roadmap: "Feuille de route" } }. */
+  glossary?: Record<string, Record<string, string>>;
+  /** Translation engine used by `react-autolocale translate`. Defaults to the local models. */
+  provider?: ProviderConfig | Translator | TranslateFn;
+}
+/** Typed helper for auto-locale.config.ts. */
+export declare function defineConfig(config: AutoLocaleConfig): AutoLocaleConfig;
+//#endregion
+export type { AnthropicProvider, AutoLocaleConfig, LocalProvider, OllamaProvider, OpenAIProvider, ProviderConfig, TranslateFn, Translator };

package/dist/config.js

@@ -0,0 +1 @@
+export { i as defineConfig } from "./config-CYHyGpdX.js";

package/dist/index.d.ts

@@ -31,12 +31,73 @@ export interface AutoScaleProps {
  * The props are read at build time by the Vite plugin.
  */
 export declare function AutoScale({ children }: AutoScaleProps): ReactElement;
-/** @internal Inserted by the Vite plugin in place of static JSX text. */
-export declare function __T({ s }: {
+/** @internal Inserted by the Vite plugin in place of static JSX text: message id and source text (the fallback). */
+export declare function __T({ i, s }: {
+  i: string;
   s: string;
 }): ReactElement;
 /** @internal Inserted by the Vite plugin for translated attributes (placeholder, alt, ...). */
-export declare function __useT(): (s: string) => string;
+export declare function __useT(): (i: string, s: string) => string;
+/** @internal Inserted by the Vite plugin for text with variables, e.g. `Hello {name}`. */
+export declare function __TD({ i, s, v }: {
+  i: string;
+  s: string;
+  v: Record<string, unknown>;
+}): ReactElement;
+/**
+ * Pick a value by language: `useLocalized({ en: "/pricing", fr: "/tarifs", default: "/pricing" })`.
+ * Falls back to `default`, then to the original language's value.
+ */
+export declare function useLocalized<T>(values: Record<string, T | undefined> & {
+  default?: T;
+}): T;
+/** Component form of `useLocalized`: `<Localized en={<A />} fr={<B />} default={<A />} />`. */
+export declare function Localized(props: Record<string, ReactNode>): ReactElement;
+export interface ForLanguagesProps {
+  /** Show only for these languages. */
+  only?: string[];
+  /** Show for every language except these. */
+  except?: string[];
+  children?: ReactNode;
+}
+/** Content that appears for some languages only, such as a local offer or legal notice. */
+export declare function ForLanguages({ only, except, children }: ForLanguagesProps): ReactElement | null;
+export interface Format {
+  language: string;
+  number: (value: number, options?: Intl.NumberFormatOptions) => string;
+  currency: (value: number, currency: string, options?: Intl.NumberFormatOptions) => string;
+  percent: (value: number, options?: Intl.NumberFormatOptions) => string;
+  date: (value: Date | number | string, options?: Intl.DateTimeFormatOptions) => string;
+}
+/** Numbers, prices and dates formatted for the current language: `format.currency(19.99, "EUR")`. */
+export declare function useFormat(): Format;
+export interface LanguageSuggestion {
+  /** Code of the suggested language, e.g. "fr". */
+  language: string;
+  /** The suggested language's own name, e.g. "Français". */
+  native: string;
+  /** Full sentence in the visitor's language, e.g. "This page is also available in Français. Switch?" */
+  text: string;
+  switchLabel: string;
+  dismissLabel: string;
+  /** Go to this page in the suggested language. */
+  accept: () => void;
+  /** Hide the suggestion and don't offer this language again. */
+  dismiss: () => void;
+}
+/**
+ * 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.
+ */
+export declare function useLanguageSuggestion(): LanguageSuggestion | null;
+export interface LanguageBannerProps {
+  className?: string;
+  style?: CSSProperties;
+  /** Replace the markup entirely: `{(s) => <MyBar>{s.text}</MyBar>}`. */
+  children?: (suggestion: LanguageSuggestion) => ReactNode;
+}
+/** A ready-made suggestion bar. Style it with `className`/`style`, or pass a render function to build your own. */
+export declare function LanguageBanner({ className, style, children }: LanguageBannerProps): ReactElement | null;
 export interface LanguageApi {
   language: string;
   /** Switches language and updates the URL; resolves once translations are loaded. */

package/dist/index.js

@@ -1,6 +1,7 @@
-import { r as redirectTarget, t as STORAGE_KEY } from "./redirect-CKNY4ru5.js";
+import { r as redirectTarget, t as STORAGE_KEY } from "./redirect-pDFblLdm.js";
+import { n as DISMISSED_KEY, r as suggestLanguage, t as BANNER_EN } from "./suggestion-CkZQqMvZ.js";
 import { Fragment, createContext, createElement, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { languages, loaders, original, originalNative, seo } from "virtual:react-autolocale";
+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)]);
@@ -32,8 +33,27 @@ function initialState() {
 		dict: {}
 	};
 	const boot = window.__AUTOSCALE__;
-	const language = boot?.lang ?? prefixOf(window.location.pathname) ?? original;
 	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) ?? {}
@@ -68,22 +88,6 @@ function AutoScale({ children }) {
 		document.documentElement.lang = state.language;
 		document.documentElement.dir = languages.find((l) => l.code === state.language)?.rtl ? "rtl" : "ltr";
 	}, [state.language]);
-	useEffect(() => {
-		let saved = null;
-		try {
-			saved = window.localStorage.getItem(STORAGE_KEY);
-		} catch {}
-		const to = redirectTarget({
-			pathname: window.location.pathname,
-			search: window.location.search,
-			hash: window.location.hash,
-			saved,
-			browser: window.navigator.languages?.length ? window.navigator.languages : [window.navigator.language],
-			codes: [...codes],
-			original
-		});
-		if (to) window.location.replace(to);
-	}, []);
 	useEffect(() => {
 		if (state.language !== original && !cache.has(state.language)) apply(state.language, false);
 		const onPop = () => void apply(prefixOf(window.location.pathname) ?? original, false);
@@ -96,15 +100,141 @@ function AutoScale({ children }) {
 	}), [state, setLanguage]);
 	return createElement(Context.Provider, { value }, children);
 }
-/** @internal Inserted by the Vite plugin in place of static JSX text. */
-function __T({ s }) {
+/** @internal Inserted by the Vite plugin in place of static JSX text: message id and source text (the fallback). */
+function __T({ i, s }) {
 	const { dict } = useContext(Context);
-	return createElement(Fragment, null, dict[s] ?? s);
+	return createElement(Fragment, null, dict[i] || 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]);
+	return useCallback((i, s) => dict[i] || s, [dict]);
+}
+/** @internal Inserted by the Vite plugin for text with variables, e.g. `Hello {name}`. */
+function __TD({ i, s, v }) {
+	const { dict } = useContext(Context);
+	const parts = (dict[i] || 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);
@@ -133,4 +263,4 @@ function LanguageSwitcher({ className, style, label = "Language" }) {
 	}, l.native)));
 }
 //#endregion
-export { AutoScale, LanguageSwitcher, __T, __useT, useLanguage };
+export { AutoScale, ForLanguages, LanguageBanner, LanguageSwitcher, Localized, __T, __TD, __useT, useFormat, useLanguage, useLanguageSuggestion, useLocalized };