@havelaer/msgs 0.0.2

package/README.md

@@ -0,0 +1,51 @@
+# Msgs
+
+**Under development.**
+
+Component based i18n messages for React. 
+
+- Uses [MessageFormat 2 (MF2)](https://messageformat.unicode.org) for formatting.
+- Optional Vite plugin for precompilation.
+- React hook for using the messages.
+- Typesafe messages.
+
+## Example
+
+```ts
+// Greeting.msgs.ts
+import msgs from "./msgs.config";
+
+export default msgs.parse({
+  greeting: {
+    "en-US": "Hello {$name}",
+    "nl-NL": "Hallo {$name}",
+    "fr-FR": "Bonjour {$name}",
+  },
+});
+```
+
+```tsx
+// Greeting.tsx
+import { useTranslator } from "@havelaer/msgs/react";
+import msgs from "./Greeting.msgs";
+
+export function Greeting() {
+  const t = useTranslator();
+
+  return <h1>{t(msgs.greeting, { name: "John" })}</h1>;
+}
+```
+
+```tsx
+// App.tsx
+import { MsgsProvider } from "@havelaer/msgs/react";
+import msgsConfig from "./msgs.config";
+import { Greeting } from "./Greeting";
+
+export default function App() {
+  return (
+    <MsgsProvider config={msgsConfig} locale={msgsConfig.resolveLocale(navigator.languages)}>
+      <Greeting />
+    </MsgsProvider>
+  );
+}

package/dist/functions.d.ts

@@ -0,0 +1,7 @@
+import { MessageFunction } from "messageformat/functions";
+
+//#region src/functions/index.d.ts
+declare const currency: MessageFunction<any, any>, date: MessageFunction<any, any>, datetime: MessageFunction<any, any>, percent: MessageFunction<any, any>, time: MessageFunction<any, any>, unit: MessageFunction<any, any>;
+declare const integer: MessageFunction<any, any>, number: MessageFunction<any, any>, offset: MessageFunction<any, any>, string: MessageFunction<any, any>;
+//#endregion
+export { currency, date, datetime, integer, number, offset, percent, string, time, unit };

package/dist/functions.js

@@ -0,0 +1,8 @@
+import { DefaultFunctions, DraftFunctions } from "messageformat/functions";
+
+//#region src/functions/index.ts
+const { currency, date, datetime, percent, time, unit } = DraftFunctions;
+const { integer, number, offset, string } = DefaultFunctions;
+
+//#endregion
+export { currency, date, datetime, integer, number, offset, percent, string, time, unit };

package/dist/index-CrRmYrrh.d.ts

@@ -0,0 +1,22 @@
+import { MessageFormatOptions, MessagePart, Model } from "messageformat";
+
+//#region src/index.d.ts
+type Messages<TLocales extends string> = {
+  [key: string]: Messages<TLocales>;
+} | { [P in TLocales]: string };
+type Config = {
+  messageFormatOptions?: MessageFormatOptions<any, any>;
+};
+type MsgsConfig<TLocales extends string> = {
+  parse: <T extends string = TLocales, const U extends Messages<T> = Messages<T>>(messages: U) => U;
+  format: (locale: TLocales, msgs: Record<TLocales, Model.Message | string>, args?: Record<string, unknown>) => string;
+  formatToParts: (locale: TLocales, msgs: Record<TLocales, Model.Message | string>, args?: Record<string, unknown>) => MessagePart<any>[];
+  resolveLocale: (userLocales: string[] | readonly string[]) => TLocales;
+};
+declare function defineConfig<TLocales extends string, TDefaultLocale extends TLocales>(config: {
+  defaultLocale: TDefaultLocale;
+  locales: Record<TLocales, MessageFormatOptions<any, any>>;
+  options?: MessageFormatOptions<any, any>;
+}): MsgsConfig<TLocales>;
+//#endregion
+export { Config, Messages, MsgsConfig, defineConfig };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { Config, Messages, MsgsConfig, defineConfig } from "./index-CrRmYrrh.js";
+export { Config, Messages, MsgsConfig, defineConfig };

package/dist/index.js

@@ -0,0 +1,75 @@
+import { MessageFormat, parseMessage } from "messageformat";
+
+//#region src/resolveLocale.ts
+function resolveLocale(userLocales, supportedLocales, localeMatcher = "best fit") {
+	if (!Array.isArray(userLocales) || userLocales.length === 0) throw new Error("userLocales must be a non-empty array");
+	if (!Array.isArray(supportedLocales) || supportedLocales.length === 0) throw new Error("supportedLocales must be a non-empty array");
+	const supportedCanon = Intl.getCanonicalLocales(supportedLocales);
+	const runtimeSupported = new Set(Intl.NumberFormat.supportedLocalesOf(supportedCanon, { localeMatcher }));
+	if (runtimeSupported.size === 0) return supportedCanon[0];
+	for (const raw of userLocales) {
+		const base = stripExtensions(raw);
+		const [canonical] = Intl.getCanonicalLocales(base);
+		const chain = fallbackChain(canonical);
+		for (const candidate of chain) if (runtimeSupported.has(candidate)) return candidate;
+	}
+	return runtimeSupported.values().next().value;
+}
+/** Remove Unicode (‘-u-…’) and transform (‘-t-…’) extensions from a BCP 47 tag */
+function stripExtensions(tag) {
+	return tag.split(/-(?:u|t)-/i)[0];
+}
+/** Build multi-level fallback chain from most specific → least specific */
+function fallbackChain(canonicalTag) {
+	const parts = canonicalTag.split("-");
+	const chain = [];
+	for (let i = parts.length; i >= 1; i--) chain.push(parts.slice(0, i).join("-"));
+	return chain;
+}
+
+//#endregion
+//#region src/index.ts
+function walkAndParse(node, target) {
+	for (const key in node) {
+		const value = node[key];
+		if (typeof value === "object" && value !== null) {
+			target[key] = {};
+			walkAndParse(value, target[key]);
+		} else if (typeof value === "string") target[key] = parseMessage(value);
+	}
+}
+function defineConfig(config) {
+	function parse(messages) {
+		const parsed = {};
+		walkAndParse(messages, parsed);
+		return parsed;
+	}
+	function createMessageFormat(locale, msgs) {
+		if (!config.locales[locale]) throw new Error(`${locale} not found in config`);
+		const mfOptions = {
+			...config.options,
+			...config.locales[locale]
+		};
+		const msg = msgs[locale];
+		return new MessageFormat(locale, msg, mfOptions);
+	}
+	function resolveLocale$1(userLocales) {
+		const supportedLocales = new Set([config.defaultLocale, ...Object.keys(config.locales)]);
+		return resolveLocale(userLocales, Array.from(supportedLocales)) ?? config.defaultLocale;
+	}
+	function format(locale, msgs, args) {
+		return createMessageFormat(locale, msgs).format(args);
+	}
+	function formatToParts(locale, msgs, args) {
+		return createMessageFormat(locale, msgs).formatToParts(args);
+	}
+	return {
+		parse,
+		format,
+		formatToParts,
+		resolveLocale: resolveLocale$1
+	};
+}
+
+//#endregion
+export { defineConfig };

package/dist/react.d.ts

@@ -0,0 +1,32 @@
+import { MsgsConfig } from "./index-CrRmYrrh.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/react/index.d.ts
+type ArgValue = string | number | boolean | null | undefined;
+type Translator = {
+  (msg: any, args?: Record<string, ArgValue>): string;
+  jsx(msg: any, args?: Record<string, ArgValue>): ReactNode;
+  locale: string;
+};
+declare function useTranslator(): Translator;
+interface MsgsProviderProps<TLocales extends string> {
+  config: MsgsConfig<TLocales>;
+  locale: TLocales;
+  children: ReactNode;
+}
+declare function MsgsProvider<TLocales extends string>({
+  config,
+  locale,
+  children
+}: MsgsProviderProps<TLocales>): react_jsx_runtime0.JSX.Element;
+interface LocaleProviderProps<TLocales extends string> {
+  locale: TLocales;
+  children: ReactNode;
+}
+declare function LocaleProvider<TLocales extends string>({
+  locale,
+  children
+}: LocaleProviderProps<TLocales>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { LocaleProvider, MsgsProvider, useTranslator };