@havelaer/msgs 0.0.6 → 0.0.8

package/README.md

@@ -1,22 +1,38 @@
 # Msgs
 
-**Under development.**
+Msgs is a library for internationalization of TypeScript/JavaScript applications. It is built on top of [MessageFormat 2 (MF2)](https://messageformat.unicode.org) and provides a set of functions to format numbers (currency, percentage, unit, etc.), date and time, and other types.
 
-Component based i18n messages for React. 
+- Uses [MessageFormat 2 (MF2)](https://messageformat.unicode.org) for message formatting.
+- TypeScript support.
+- Formatting functions for [numbers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat), [date and time](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat), [relative time](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat), [list](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat), and more.
+- Optional React hook for React applications.
 
-- Uses [MessageFormat 2 (MF2)](https://messageformat.unicode.org) for formatting.
-- Optional Vite plugin for precompilation.
-- React hook for using the messages.
-- Typesafe messages.
+## React Example
 
-## Example
+```ts
+// formatter.ts
+import { createFormatter } from "@havelaer/msgs";
+import * as functions from "@havelaer/msgs/functions";
+
+export default createFormatter({
+  locales: {
+    "en-US": {},
+    "nl-NL": {},
+    "fr-FR": {},
+  },
+  defaultLocale: "en-US",
+  options: {
+    functions, // several Intl formatters
+  },
+});
+```
 
 ```ts
 // Greeting.msgs.ts
-import msgs from "./msgs.config";
+import formatter from "~/formatter";
 
-export default msgs.parse({
-  greeting: {
+export default formatter.parse({
+  hello: {
     "en-US": "Hello {$name}",
     "nl-NL": "Hallo {$name}",
     "fr-FR": "Bonjour {$name}",
@@ -32,20 +48,86 @@ import msgs from "./Greeting.msgs";
 export function Greeting() {
   const t = useTranslator();
 
-  return <h1>{t(msgs.greeting, { name: "John" })}</h1>;
+  return <h1>{t(msgs.hello, { name: "John" })}</h1>;
 }
 ```
 
 ```tsx
 // App.tsx
 import { MsgsProvider } from "@havelaer/msgs/react";
-import msgsConfig from "./msgs.config";
-import { Greeting } from "./Greeting";
+import formatter from "~/formatter";
+import { Greeting } from "~/components/Greeting";
 
 export default function App() {
+  const locale = formatter.resolveLocale(navigator.languages);
+
   return (
-    <MsgsProvider config={msgsConfig} locale={msgsConfig.resolveLocale(navigator.languages)}>
+    <MsgsProvider formatter={formatter} locale={locale}>
       <Greeting />
     </MsgsProvider>
   );
 }
+```
+
+## Formatters
+
+### `:number`
+
+See [NumberFormat documentation (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for more details.
+
+```ts
+import formatter from "~/formatter";
+
+export default formatter.parse({
+  decimalExample: {
+    "en-US": "Decimal: {$amount :number style=decimal}", // decimal is the default
+    // Example output: "Decimal: 1,234.56"
+  },
+  currencyExample: {
+    "en-US": "Currency: {$amount :number style=currency currency=USD}",
+    // Example output: "Currency: $1,234.56"
+  },
+  percentExample: {
+    "en-US": "Percentage: {$amount :number style=percent}",
+    // Example output: "Percentage: 12%"
+  },
+  unitExample: {
+    "en-US": "Unit: {$amount :number style=unit unit=liter}",
+    // Example output: "Unit: 1.2L"
+  },
+});
+```
+
+### `:datetime`
+
+See [DateTimeFormat documentation (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) for more details.
+
+```ts
+import formatter from "~/formatter";
+
+export default formatter.parse({
+  dateExample: {
+    "en-US": "Date: {$eventDate :datetime dateStyle=long}",
+    // Example output: "Date: January 15, 2024"
+  },
+  timeExample: {
+    "en-US": "Date: {$eventDate :datetime timeStyle=long}",
+    // Example output: "Date: 2:30:00 PM"
+  },
+});
+```
+
+### `:relativeTime`
+
+See [RelativeTimeFormat documentation (MDN)](https://developer.mozilla.org/en-US/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat) for more details.
+
+```ts
+import formatter from "~/formatter";
+
+export default formatter.parse({
+  relativeTimeExample: {
+    "en-US": "Relative Time: {$days :relativeTime unit=day}",
+    // Example output: "Relative Time: 1 day ago"
+  },
+});
+```

package/dist/functions.d.ts

@@ -3,116 +3,81 @@ import { MessageFunction } from "messageformat/functions";
 //#region src/functions/index.d.ts
 
 /**
- * Currency formatting function for MessageFormat.
- * Formats numbers as currency values.
+ * Date and/or time formatting function for MessageFormat.
+ * It's a wrapper around the `Intl.DateTimeFormat` API.
  *
- * @beta
+ * @param options - The Intl.DateTimeFormatOptions object.
+ * @param arg - Date string
  *
- * @example
- * ```ts
- * "Price: {$price :currency currency=USD}"
- * ```
- */
-declare const currency: MessageFunction<any, any>;
-/**
- * Date formatting function for MessageFormat.
- * Formats dates according to locale conventions.
- *
- * @beta
+ * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
  *
  * @example
  * ```ts
- * "Today is {$date :date dateStyle=medium}"
+ * "{$date :datetime dateStyle=short timeStyle=short}" { date: new Date("2024-01-15T14:30:00") };
+ * // Expected output: "Jan 15, 2024, 2:30 PM"
  * ```
  */
-declare const date: MessageFunction<any, any>;
+declare const datetime: MessageFunction<any, any>;
 /**
- * Date and time formatting function for MessageFormat.
- * Formats both date and time components.
+ * Number formatting function for MessageFormat.
+ * It's a wrapper around the `Intl.NumberFormat` API.
  *
- * @beta
+ * @param options - The Intl.NumberFormatOptions object.
+ * @param arg - An number or a string that can be parsed as a number.
+ *
+ * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
  *
  * @example
  * ```ts
- * "Event at {$datetime :datetime dateStyle=short timeStyle=short}"
- * ```
- */
-declare const datetime: MessageFunction<any, any>;
-/**
- * Percentage formatting function for MessageFormat.
- * Formats numbers as percentages.
+ * "{$amount :number style=decimal}" { amount: 0.1234 };
+ * // Expected output: "0.1234"
  *
- * @beta
+ * "{$amount :number style=currency currency=USD}" { amount: 0.1234 };
+ * // Expected output: "$0.12"
  *
- * @example
- * ```ts
- * "Progress: {$progress :percent}"
- * ```
- */
-declare const percent: MessageFunction<any, any>;
-/**
- * Number formatting function for MessageFormat.
- * Formats numbers with locale-specific formatting.
+ * "{$amount :number style=percentage}" { amount: 0.1234 };
+ * // Expected output: "12%"
  *
- * @example
- * ```ts
- * "Count: {$count :number}"
+ * "{$amount :number style=unit unit=liter}" { amount: 0.1234 };
+ * // Expected output: "0.12L"
  * ```
  */
 declare const number: MessageFunction<any, any>;
 /**
- * Time formatting function for MessageFormat.
- * Formats time values according to locale conventions.
- *
- * @beta
+ * Relative time formatting function for MessageFormat.
+ * It's a wrapper around the `Intl.RelativeTimeFormat` API.
  *
- * @example
- * ```ts
- * "Time: {$time :time timeStyle=short}"
- * ```
- */
-declare const time: MessageFunction<any, any>;
-/**
- * Unit formatting function for MessageFormat.
- * Formats numbers with units (length, weight, etc.).
+ * @param options - The Intl.RelativeTimeFormatOptions object.
+ * @param arg - An number or a string that can be parsed as a number.
  *
- * @beta
+ * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
  *
  * @example
  * ```ts
- * "Distance: {$distance :unit unit=mile}"
+ * "{$days :relativeTime unit=day}" { days: -1 };
+ * // Expected output: "1 day ago"
  * ```
  */
-declare const unit: MessageFunction<any, any>;
+declare const relativeTime: MessageFunction<any, any>;
 /**
- * Integer formatting function for MessageFormat.
- * Formats numbers as integers.
+ * List formatting function for MessageFormat.
+ * It's a wrapper around the `Intl.ListFormat` API.
  *
- * @example
- * ```ts
- * "Items: {$count :integer}"
- * ```
- */
-declare const integer: MessageFunction<any, any>;
-/**
- * Offset formatting function for MessageFormat.
- * Formats timezone offsets.
+ * @remarks
+ * Needs tsconfig.json/compilerOptions.lib to include "ES2021" or higher.
  *
- * @example
- * ```ts
- * "Offset: {$offset :offset}"
- * ```
- */
-declare const offset: MessageFunction<any, any>;
-/**
- * String formatting function for MessageFormat.
- * Formats values as strings with optional transformations.
+ * @param options - The Intl.ListFormatOptions object.
+ * @param arg - An number
+ *
+ * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
  *
  * @example
  * ```ts
- * "Name: {$name :string}"
+ * "{$vehicles :list style=long type=conjunction}"
+ * { vehicles: ["Motorcycle", "Bus", "Car"] }
+ * // Expected output: "Motorcycle, Bus, and Car"
  * ```
  */
-declare const string: MessageFunction<any, any>;
+declare const list: MessageFunction<any, any>;
 //#endregion
-export { currency, date, datetime, integer, number, offset, percent, string, time, unit };
+export { datetime, list, number, relativeTime };

package/dist/functions.js

@@ -1,118 +1,114 @@
-import { DefaultFunctions, DraftFunctions } from "messageformat/functions";
-
 //#region src/functions/index.ts
 /**
-* Currency formatting function for MessageFormat.
-* Formats numbers as currency values.
-*
-* @beta
+* Date and/or time formatting function for MessageFormat.
+* It's a wrapper around the `Intl.DateTimeFormat` API.
 *
-* @example
-* ```ts
-* "Price: {$price :currency currency=USD}"
-* ```
-*/
-const currency = DraftFunctions.currency;
-/**
-* Date formatting function for MessageFormat.
-* Formats dates according to locale conventions.
+* @param options - The Intl.DateTimeFormatOptions object.
+* @param arg - Date string
 *
-* @beta
+* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
 *
 * @example
 * ```ts
-* "Today is {$date :date dateStyle=medium}"
+* "{$date :datetime dateStyle=short timeStyle=short}" { date: new Date("2024-01-15T14:30:00") };
+* // Expected output: "Jan 15, 2024, 2:30 PM"
 * ```
 */
-const date = DraftFunctions.date;
+const datetime = (ctx, options, arg) => {
+	const formatter = new Intl.DateTimeFormat(ctx.locales, options);
+	const date = new Date(arg);
+	return {
+		type: "datetime",
+		toString: () => formatter.format(date),
+		toParts: () => formatter.formatToParts(date)
+	};
+};
 /**
-* Date and time formatting function for MessageFormat.
-* Formats both date and time components.
+* Number formatting function for MessageFormat.
+* It's a wrapper around the `Intl.NumberFormat` API.
 *
-* @beta
+* @param options - The Intl.NumberFormatOptions object.
+* @param arg - An number or a string that can be parsed as a number.
 *
-* @example
-* ```ts
-* "Event at {$datetime :datetime dateStyle=short timeStyle=short}"
-* ```
-*/
-const datetime = DraftFunctions.datetime;
-/**
-* Percentage formatting function for MessageFormat.
-* Formats numbers as percentages.
-*
-* @beta
+* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
 *
 * @example
 * ```ts
-* "Progress: {$progress :percent}"
-* ```
-*/
-const percent = DraftFunctions.percent;
-/**
-* Number formatting function for MessageFormat.
-* Formats numbers with locale-specific formatting.
+* "{$amount :number style=decimal}" { amount: 0.1234 };
+* // Expected output: "0.1234"
 *
-* @example
-* ```ts
-* "Count: {$count :number}"
-* ```
-*/
-const number = DefaultFunctions.number;
-/**
-* Time formatting function for MessageFormat.
-* Formats time values according to locale conventions.
+* "{$amount :number style=currency currency=USD}" { amount: 0.1234 };
+* // Expected output: "$0.12"
 *
-* @beta
+* "{$amount :number style=percentage}" { amount: 0.1234 };
+* // Expected output: "12%"
 *
-* @example
-* ```ts
-* "Time: {$time :time timeStyle=short}"
+* "{$amount :number style=unit unit=liter}" { amount: 0.1234 };
+* // Expected output: "0.12L"
 * ```
 */
-const time = DraftFunctions.time;
+const number = (ctx, options, arg) => {
+	const formatter = new Intl.NumberFormat(ctx.locales, options);
+	const number$1 = Number.parseFloat(arg);
+	return {
+		type: "number",
+		toString: () => formatter.format(number$1),
+		toParts: () => formatter.formatToParts(number$1)
+	};
+};
 /**
-* Unit formatting function for MessageFormat.
-* Formats numbers with units (length, weight, etc.).
+* Relative time formatting function for MessageFormat.
+* It's a wrapper around the `Intl.RelativeTimeFormat` API.
 *
-* @beta
+* @param options - The Intl.RelativeTimeFormatOptions object.
+* @param arg - An number or a string that can be parsed as a number.
 *
-* @example
-* ```ts
-* "Distance: {$distance :unit unit=mile}"
-* ```
-*/
-const unit = DraftFunctions.unit;
-/**
-* Integer formatting function for MessageFormat.
-* Formats numbers as integers.
+* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
 *
 * @example
 * ```ts
-* "Items: {$count :integer}"
+* "{$days :relativeTime unit=day}" { days: -1 };
+* // Expected output: "1 day ago"
 * ```
 */
-const integer = DefaultFunctions.integer;
+const relativeTime = (ctx, options, arg) => {
+	const formatter = new Intl.RelativeTimeFormat(ctx.locales, options);
+	const number$1 = Number.parseInt(arg);
+	if (!options.unit) throw new Error(":relativeTime requires a unit parameter");
+	return {
+		type: "relativeTime",
+		toString: () => formatter.format(number$1, options.unit),
+		toParts: () => formatter.formatToParts(number$1, options.unit)
+	};
+};
 /**
-* Offset formatting function for MessageFormat.
-* Formats timezone offsets.
+* List formatting function for MessageFormat.
+* It's a wrapper around the `Intl.ListFormat` API.
 *
-* @example
-* ```ts
-* "Offset: {$offset :offset}"
-* ```
-*/
-const offset = DefaultFunctions.offset;
-/**
-* String formatting function for MessageFormat.
-* Formats values as strings with optional transformations.
+* @remarks
+* Needs tsconfig.json/compilerOptions.lib to include "ES2021" or higher.
+*
+* @param options - The Intl.ListFormatOptions object.
+* @param arg - An number
+*
+* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
 *
 * @example
 * ```ts
-* "Name: {$name :string}"
+* "{$vehicles :list style=long type=conjunction}"
+* { vehicles: ["Motorcycle", "Bus", "Car"] }
+* // Expected output: "Motorcycle, Bus, and Car"
 * ```
 */
-const string = DefaultFunctions.string;
+const list = (ctx, options, arg) => {
+	const formatter = new Intl.ListFormat(ctx.locales, options);
+	const list$1 = typeof arg === "string" ? arg.split(",") : Array.isArray(arg) ? arg : [];
+	return {
+		type: "list",
+		toString: () => formatter.format(list$1),
+		toParts: () => formatter.formatToParts(list$1)
+	};
+};
 
 //#endregion
-export { currency, date, datetime, integer, number, offset, percent, string, time, unit };
+export { datetime, list, number, relativeTime };

package/dist/{index-DqWXabHs.d.ts → index-ChgITPMW.d.ts}

@@ -2,6 +2,10 @@ import { MessageFormatOptions, MessagePart, Model } from "messageformat";
 
 //#region src/index.d.ts
 
+/**
+ * Valid argument values for message formatting.
+ */
+type ArgValue = string | number | boolean | null | undefined;
 /**
  * Represents a nested structure of messages for different locales.
  * Can be either a nested object with string keys or a flat object with locale keys.
@@ -40,7 +44,7 @@ type Messages<TLocales extends string> = {
  * const formatted = config.format("en-US", parsed.greeting, { name: "John" });
  * ```
  */
-type MsgsConfig<TLocales extends string> = {
+type Formatter<TLocales extends string> = {
   /** Parse message strings into MessageFormat objects */
   parse: <T extends string = TLocales, const U extends Messages<T> = Messages<T>>(messages: U) => U;
   /** Format a message to a string */
@@ -51,7 +55,7 @@ type MsgsConfig<TLocales extends string> = {
   resolveLocale: (userLocales: string[] | readonly string[]) => TLocales;
 };
 /**
- * Creates a message configuration object for internationalization.
+ * Creates a message formatter object for internationalization.
  *
  * @template TLocales - The supported locale strings
  * @template TDefaultLocale - The default locale (must be one of TLocales)
@@ -61,24 +65,24 @@ type MsgsConfig<TLocales extends string> = {
  * @param config.locales - Locale-specific MessageFormat options
  * @param config.options - Global MessageFormat options applied to all locales
  *
- * @returns A MsgsConfig object with parsing, formatting, and locale resolution methods
+ * @returns A Formatter object with parsing, formatting, and locale resolution methods
  *
  * @example
  * ```ts
- * const msgsConfig = defineConfig({
+ * const formatter = createFormatter({
  *   defaultLocale: "en-US",
  *   locales: {
- *     "en-US": { currency: "USD" },
- *     "nl-NL": { currency: "EUR" }
+ *     "en-US": { --locale specific MessageFormatOptions-- },
+ *     "nl-NL": { --locale specific MessageFormatOptions-- }
  *   },
- *   options: { date: { dateStyle: "medium" } }
+ *   options: { --global MessageFormatOptions-- }
  * });
  * ```
  */
-declare function defineConfig<TLocales extends string, TDefaultLocale extends TLocales>(config: {
+declare function createFormatter<TLocales extends string, TDefaultLocale extends TLocales>(config: {
   defaultLocale: TDefaultLocale;
   locales: Record<TLocales, MessageFormatOptions<any, any>>;
   options?: MessageFormatOptions<any, any>;
-}): MsgsConfig<TLocales>;
+}): Formatter<TLocales>;
 //#endregion
-export { Messages, MsgsConfig, defineConfig };
+export { ArgValue, Formatter, Messages, createFormatter };

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import { Messages, MsgsConfig, defineConfig } from "./index-DqWXabHs.js";
-export { Messages, MsgsConfig, defineConfig };
+import { ArgValue, Formatter, Messages, createFormatter } from "./index-ChgITPMW.js";
+export { ArgValue, Formatter, Messages, createFormatter };

package/dist/index.js

@@ -60,7 +60,7 @@ function walkAndParse(node, target) {
 	}
 }
 /**
-* Creates a message configuration object for internationalization.
+* Creates a message formatter object for internationalization.
 *
 * @template TLocales - The supported locale strings
 * @template TDefaultLocale - The default locale (must be one of TLocales)
@@ -70,21 +70,21 @@ function walkAndParse(node, target) {
 * @param config.locales - Locale-specific MessageFormat options
 * @param config.options - Global MessageFormat options applied to all locales
 *
-* @returns A MsgsConfig object with parsing, formatting, and locale resolution methods
+* @returns A Formatter object with parsing, formatting, and locale resolution methods
 *
 * @example
 * ```ts
-* const msgsConfig = defineConfig({
+* const formatter = createFormatter({
 *   defaultLocale: "en-US",
 *   locales: {
-*     "en-US": { currency: "USD" },
-*     "nl-NL": { currency: "EUR" }
+*     "en-US": { --locale specific MessageFormatOptions-- },
+*     "nl-NL": { --locale specific MessageFormatOptions-- }
 *   },
-*   options: { date: { dateStyle: "medium" } }
+*   options: { --global MessageFormatOptions-- }
 * });
 * ```
 */
-function defineConfig(config) {
+function createFormatter(config) {
 	function parse(messages) {
 		const parsed = {};
 		walkAndParse(messages, parsed);
@@ -118,4 +118,4 @@ function defineConfig(config) {
 }
 
 //#endregion
-export { defineConfig };
+export { createFormatter };

package/dist/react.d.ts

@@ -1,12 +1,9 @@
-import { MsgsConfig } from "./index-DqWXabHs.js";
+import { ArgValue, Formatter } from "./index-ChgITPMW.js";
 import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/react/index.d.ts
-/**
- * Valid argument values for message formatting.
- */
-type ArgValue = string | number | boolean | null | undefined;
+
 /**
  * Translator object returned by useTranslator hook.
  * Provides methods for formatting messages as strings or JSX.
@@ -49,20 +46,20 @@ declare function useTranslator(): Translator;
  * @template TLocales - The supported locale strings
  */
 interface MsgsProviderProps<TLocales extends string> {
-  /** The message configuration object */
-  config: MsgsConfig<TLocales>;
+  /** The message formatter object */
+  formatter: Formatter<TLocales>;
   /** The current locale */
   locale: TLocales;
   /** Child components */
   children: ReactNode;
 }
 /**
- * React provider component that makes message configuration available to child components.
+ * React provider component that makes message formatter and localeavailable to child components.
  *
  * @template TLocales - The supported locale strings
  *
  * @param props - Component props
- * @param props.config - The message configuration object
+ * @param props.formatter - The message formatter object
  * @param props.locale - The current locale
  * @param props.children - Child components
  *
@@ -70,7 +67,7 @@ interface MsgsProviderProps<TLocales extends string> {
  * ```tsx
  * function App() {
  *   return (
- *     <MsgsProvider config={msgsConfig} locale="en-US">
+ *     <MsgsProvider formatter={Formatter} locale="en-US">
  *       <MyComponent />
  *     </MsgsProvider>
  *   );
@@ -78,7 +75,7 @@ interface MsgsProviderProps<TLocales extends string> {
  * ```
  */
 declare function MsgsProvider<TLocales extends string>({
-  config,
+  formatter,
   locale,
   children
 }: MsgsProviderProps<TLocales>): react_jsx_runtime0.JSX.Element;

package/dist/react.js

@@ -1,10 +1,28 @@
 import { Fragment, createContext, useContext } from "react";
-import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/messageParts.ts
+function isTextPart(part) {
+	return part.type === "text";
+}
+function isStringPart(part) {
+	return part.type === "string";
+}
 function isMarkupPart(part) {
 	return part.type === "markup";
 }
+function isBiDiIsolationPart(part) {
+	return part.type === "bidiIsolation";
+}
+function isNumberPart(part) {
+	return part.type === "number";
+}
+function isDateTimePart(part) {
+	return part.type === "datetime";
+}
+function isFallbackPart(part) {
+	return part.type === "fallback";
+}
 
 //#endregion
 //#region src/react/partsToJSX.tsx
@@ -30,13 +48,20 @@ function partsToJSX(parts, args, start = 0, stop) {
 	let i = start;
 	while (i < (stop ?? parts.length)) {
 		const part = parts[i];
-		if (isMarkupPart(part) && part.kind === "open") {
+		if (isTextPart(part)) {
+			result.push(/* @__PURE__ */ jsx(Fragment, { children: part.value }, createKey(part, i)));
+			i++;
+		} else if (isBiDiIsolationPart(part)) i++;
+		else if (isStringPart(part)) {
+			result.push(/* @__PURE__ */ jsx(Fragment, { children: part.value }, createKey(part, i)));
+			i++;
+		} else if (isMarkupPart(part) && part.kind === "open") {
 			const tagName = part.name;
 			const Tag = args?.[tagName] ?? tagName;
 			const jsxProps = part.options ?? {};
 			let depth = 1;
 			let j = i + 1;
-			while (j < parts.length) {
+			while (j < (stop ?? parts.length)) {
 				const p = parts[j];
 				if (isMarkupPart(p) && p.name === tagName) {
 					if (p.kind === "open") depth++;
@@ -52,17 +77,27 @@ function partsToJSX(parts, args, start = 0, stop) {
 			}, createKey(part, i)));
 			i = j + 1;
 		} else if (isMarkupPart(part) && part.kind === "close") break;
-		else if ("type" in part && "parts" in part && Array.isArray(part.parts)) {
+		else if (isNumberPart(part) && part.parts) {
 			result.push(/* @__PURE__ */ jsx(Fragment, { children: partsToJSX(part.parts, args) }, createKey(part, i)));
 			i++;
-		} else if ("type" in part && "value" in part && typeof part.value === "string") {
-			result.push(/* @__PURE__ */ jsx(Fragment, { children: part.value }, createKey(part, i)));
+		} else if (isDateTimePart(part) && part.parts) {
+			result.push(/* @__PURE__ */ jsx(Fragment, { children: partsToJSX(part.parts, args) }, createKey(part, i)));
 			i++;
-		} else {
+		} else if (isFallbackPart(part)) {
 			console.warn("Unsupported MessagePart", part);
-			result.push(null);
+			result.push(/* @__PURE__ */ jsxs(Fragment, { children: [
+				"[",
+				part.source,
+				"]"
+			] }, createKey(part, i)));
+			i++;
+		} else if ("type" in part && "parts" in part && Array.isArray(part.parts)) {
+			result.push(/* @__PURE__ */ jsx(Fragment, { children: partsToJSX(part.parts, args) }, createKey(part, i)));
+			i++;
+		} else if ("type" in part && "value" in part && typeof part.value === "string") {
+			result.push(/* @__PURE__ */ jsx(Fragment, { children: part.value }, createKey(part, i)));
 			i++;
-		}
+		} else throw new Error(`Unhandled MessagePart ${JSON.stringify(part)}`);
 	}
 	return result;
 }
@@ -70,7 +105,7 @@ function partsToJSX(parts, args, start = 0, stop) {
 //#endregion
 //#region src/react/index.tsx
 const localeContext = createContext(null);
-const configContext = createContext(null);
+const formatterContext = createContext(null);
 /**
 * React hook for accessing the message translator.
 * Must be used within a MsgsProvider context.
@@ -95,10 +130,9 @@ const configContext = createContext(null);
 * ```
 */
 function useTranslator() {
-	const config = useContext(configContext);
+	const config = useContext(formatterContext);
 	const locale = useContext(localeContext);
-	if (!config) throw new Error("config not set by a MsgsProvider");
-	if (typeof locale !== "string") throw new Error("locale not set by a LocaleProvider");
+	if (!config) throw new Error("msgs config not set by a MsgsProvider");
 	const translator = function translate(msg, args) {
 		return config.format(locale, msg, args);
 	};
@@ -110,12 +144,12 @@ function useTranslator() {
 	return translator;
 }
 /**
-* React provider component that makes message configuration available to child components.
+* React provider component that makes message formatter and localeavailable to child components.
 *
 * @template TLocales - The supported locale strings
 *
 * @param props - Component props
-* @param props.config - The message configuration object
+* @param props.formatter - The message formatter object
 * @param props.locale - The current locale
 * @param props.children - Child components
 *
@@ -123,16 +157,16 @@ function useTranslator() {
 * ```tsx
 * function App() {
 *   return (
-*     <MsgsProvider config={msgsConfig} locale="en-US">
+*     <MsgsProvider formatter={Formatter} locale="en-US">
 *       <MyComponent />
 *     </MsgsProvider>
 *   );
 * }
 * ```
 */
-function MsgsProvider({ config, locale, children }) {
-	return /* @__PURE__ */ jsx(configContext.Provider, {
-		value: config,
+function MsgsProvider({ formatter, locale, children }) {
+	return /* @__PURE__ */ jsx(formatterContext.Provider, {
+		value: formatter,
 		children: /* @__PURE__ */ jsx(localeContext.Provider, {
 			value: locale,
 			children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@havelaer/msgs",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "exports": {
     ".": {
@@ -19,6 +19,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/havelaer/msgs.git"
+  },
   "keywords": [
     "messageformat",
     "MessageFormat2",
@@ -31,7 +35,9 @@
   "scripts": {
     "check": "biome check .",
     "prepublishOnly": "npm run check && npm run build && npm version patch -m 'chore: publishing version %s'",
-    "build": "tsdown"
+    "build": "tsdown",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "files": [
     "dist"
@@ -42,12 +48,18 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
     "@types/node": "^22.13.9",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "happy-dom": "^18.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "typescript": "~5.7.2"
+    "tsdown": "^0.15.0",
+    "typescript": "~5.7.2",
+    "vitest": "^3.2.4"
   },
   "workspaces": [
     ".",