@messagevisor/react-intl-compat 0.0.1 → 0.1.0

package/src/components.tsx

@@ -0,0 +1,249 @@
+import * as React from "react";
+
+import { MessagevisorContext } from "@messagevisor/react";
+
+import { useIntl } from "./IntlContext";
+import { mergeRichTextValues, type IntlMessageValues, type WithIntlProps } from "./intl";
+
+function useIntlContext() {
+  const context = React.useContext(MessagevisorContext);
+
+  if (!context) {
+    throw new Error("Formatted components must be used within MessagevisorProvider.");
+  }
+
+  return context;
+}
+
+function renderOutput(
+  output: React.ReactNode,
+  textComponent?: React.ElementType,
+  tagName?: React.ElementType,
+  wrapRichTextChunksInFragment?: boolean,
+) {
+  const Component = tagName || textComponent;
+  const content =
+    wrapRichTextChunksInFragment !== false && Array.isArray(output) ? (
+      <React.Fragment>
+        {output.map((chunk, index) => (
+          <React.Fragment key={index}>{chunk}</React.Fragment>
+        ))}
+      </React.Fragment>
+    ) : (
+      output
+    );
+
+  if (!Component) {
+    return content;
+  }
+
+  return <Component>{content}</Component>;
+}
+
+export function FormattedMessage(props: {
+  id?: string;
+  defaultMessage?: string;
+  description?: string;
+  values?: IntlMessageValues;
+  tagName?: React.ElementType;
+  children?: (nodes: React.ReactNode) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  const context = useIntlContext();
+  const values = mergeRichTextValues(
+    context.defaultRichTextElements,
+    props.values,
+    props.defaultMessage ||
+      (props.id
+        ? intl.messagevisor.getRawTranslation(props.id as any, {
+            defaultTranslation: props.defaultMessage,
+          })
+        : undefined),
+  );
+  const output = intl.formatMessage(
+    {
+      id: props.id as any,
+      defaultMessage: props.defaultMessage,
+      description: props.description,
+    },
+    values,
+  );
+
+  if (props.children) {
+    return <>{props.children(output as React.ReactNode)}</>;
+  }
+
+  return (
+    <>
+      {renderOutput(
+        output as React.ReactNode,
+        context.textComponent,
+        props.tagName,
+        context.wrapRichTextChunksInFragment,
+      )}
+    </>
+  );
+}
+
+export function FormattedDate(props: {
+  value: Date | number | string;
+  format?: any;
+  children?: (value: string) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  const context = useIntlContext();
+  const output = intl.formatDate(props.value, props.format);
+
+  if (props.children) return <>{props.children(output)}</>;
+
+  return <>{renderOutput(output, context.textComponent)}</>;
+}
+
+export function FormattedTime(props: {
+  value: Date | number | string;
+  format?: any;
+  children?: (value: string) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  const context = useIntlContext();
+  const output = intl.formatTime(props.value, props.format);
+
+  if (props.children) return <>{props.children(output)}</>;
+
+  return <>{renderOutput(output, context.textComponent)}</>;
+}
+
+export function FormattedNumber(props: {
+  value: number;
+  format?: any;
+  children?: (value: string) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  const context = useIntlContext();
+  const output = intl.formatNumber(props.value, props.format);
+
+  if (props.children) return <>{props.children(output)}</>;
+
+  return <>{renderOutput(output, context.textComponent)}</>;
+}
+
+export function FormattedRelativeTime(props: {
+  value: number;
+  unit: Intl.RelativeTimeFormatUnit;
+  format?: any;
+  children?: (value: string) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  const context = useIntlContext();
+  const output = intl.formatRelativeTime(props.value, props.unit, props.format);
+
+  if (props.children) return <>{props.children(output)}</>;
+
+  return <>{renderOutput(output, context.textComponent)}</>;
+}
+
+export function FormattedList(props: {
+  value: string[];
+  options?: any;
+  children?: (value: string) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  const context = useIntlContext();
+  const output = intl.formatList(props.value, props.options);
+
+  if (props.children) return <>{props.children(output)}</>;
+
+  return <>{renderOutput(output, context.textComponent)}</>;
+}
+
+export function FormattedDisplayName(props: {
+  value: string;
+  type: string;
+  style?: string;
+  fallback?: string;
+  children?: (value: string | undefined) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  const context = useIntlContext();
+  const output = intl.formatDisplayName(props.value, {
+    type: props.type,
+    style: props.style,
+    fallback: props.fallback,
+  });
+
+  if (props.children) return <>{props.children(output)}</>;
+
+  return <>{renderOutput(output || "", context.textComponent)}</>;
+}
+
+export function FormattedPlural(props: {
+  value: number;
+  zero?: React.ReactNode;
+  one?: React.ReactNode;
+  two?: React.ReactNode;
+  few?: React.ReactNode;
+  many?: React.ReactNode;
+  other: React.ReactNode;
+}) {
+  const intl = useIntl();
+  const context = useIntlContext();
+  const category = intl.formatPlural(props.value);
+  const byCategory: Record<string, React.ReactNode> = {
+    zero: props.zero,
+    one: props.one,
+    two: props.two,
+    few: props.few,
+    many: props.many,
+    other: props.other,
+  };
+
+  return <>{renderOutput(byCategory[category] || props.other, context.textComponent)}</>;
+}
+
+export function FormattedNumberParts(props: {
+  value: number;
+  format?: any;
+  children: (parts: Intl.NumberFormatPart[]) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  return <>{props.children(intl.formatNumberToParts(props.value, props.format))}</>;
+}
+
+export function FormattedDateParts(props: {
+  value: Date | number | string;
+  format?: any;
+  children: (parts: Intl.DateTimeFormatPart[]) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  return <>{props.children(intl.formatDateToParts(props.value, props.format))}</>;
+}
+
+export function FormattedTimeParts(props: {
+  value: Date | number | string;
+  format?: any;
+  children: (parts: Intl.DateTimeFormatPart[]) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  return <>{props.children(intl.formatTimeToParts(props.value, props.format))}</>;
+}
+
+export function FormattedListParts(props: {
+  value: string[];
+  options?: any;
+  children: (parts: any[]) => React.ReactNode;
+}) {
+  const intl = useIntl();
+  return <>{props.children(intl.formatListToParts(props.value, props.options))}</>;
+}
+
+export function injectIntl<P extends WithIntlProps>(Component: React.ComponentType<P>) {
+  function WrappedComponent(props: Omit<P, keyof WithIntlProps>) {
+    const intl = useIntl();
+
+    return <Component {...(props as P)} intl={intl} />;
+  }
+
+  WrappedComponent.displayName = `injectIntl(${Component.displayName || Component.name || "Component"})`;
+
+  return WrappedComponent;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./intl";
+export * from "./IntlContext";
+export * from "./components";

package/src/intl.ts

@@ -0,0 +1,199 @@
+import * as React from "react";
+
+import {
+  type EvaluationOptions,
+  type TranslateOptions,
+  type MessageFormatResult,
+  type MessagePrimitiveValue,
+  type MessageValue,
+  type MessageValues,
+  type Messagevisor,
+} from "@messagevisor/sdk";
+import type {
+  FormatDateTimePresetOptions,
+  FormatNumberPresetOptions,
+  FormatPresets,
+  FormatRelativeTimePresetOptions,
+  LocaleKey,
+  MessageKey,
+} from "@messagevisor/types";
+
+export type IntlMessageValues = MessageValues<React.ReactNode>;
+export type PrimitiveMessageValues = Record<string, MessagePrimitiveValue>;
+
+export interface MessageDescriptor {
+  id?: string;
+  defaultMessage?: string;
+  description?: string;
+}
+
+export function defineMessage<T extends MessageDescriptor>(message: T): T {
+  return message;
+}
+
+export function defineMessages<T extends Record<string, MessageDescriptor>>(messages: T): T {
+  return messages;
+}
+
+export interface IntlShape {
+  locale: LocaleKey;
+  messages?: Record<string, string>;
+  formats?: FormatPresets;
+  timeZone?: string;
+  messagevisor: Messagevisor;
+  formatMessage(
+    descriptor: MessageDescriptor,
+    values?: PrimitiveMessageValues,
+    options?: TranslateOptions,
+  ): string;
+  formatMessage(
+    descriptor: MessageDescriptor,
+    values: IntlMessageValues,
+    options?: TranslateOptions,
+  ): MessageFormatResult<React.ReactNode>;
+  formatDate(
+    value: Date | number | string,
+    format?: string | FormatDateTimePresetOptions,
+    options?: EvaluationOptions,
+  ): string;
+  formatDateToParts(
+    value: Date | number | string,
+    format?: string | FormatDateTimePresetOptions,
+    options?: EvaluationOptions,
+  ): Intl.DateTimeFormatPart[];
+  formatTime(
+    value: Date | number | string,
+    format?: string | FormatDateTimePresetOptions,
+    options?: EvaluationOptions,
+  ): string;
+  formatTimeToParts(
+    value: Date | number | string,
+    format?: string | FormatDateTimePresetOptions,
+    options?: EvaluationOptions,
+  ): Intl.DateTimeFormatPart[];
+  formatNumber(
+    value: number,
+    format?: string | FormatNumberPresetOptions,
+    options?: EvaluationOptions,
+  ): string;
+  formatNumberToParts(
+    value: number,
+    format?: string | FormatNumberPresetOptions,
+    options?: EvaluationOptions,
+  ): Intl.NumberFormatPart[];
+  formatRelativeTime(
+    value: number,
+    unit: Intl.RelativeTimeFormatUnit,
+    format?: string | FormatRelativeTimePresetOptions,
+    options?: EvaluationOptions,
+  ): string;
+  formatPlural(value: number, options?: Intl.PluralRulesOptions): string;
+  formatList(values: string[], options?: any): string;
+  formatListToParts(values: string[], options?: any): any[];
+  formatDisplayName(value: string, options?: any): string | undefined;
+}
+
+export function createIntlFromMessagevisor(
+  messagevisor: Messagevisor,
+  config: Partial<Pick<IntlShape, "locale" | "messages" | "formats" | "timeZone">> = {},
+): IntlShape {
+  const locale = messagevisor.getLocale() || config.locale || "";
+
+  const requireICUModule = (message: string, translation: MessageFormatResult<React.ReactNode>) => {
+    if (translation !== message) {
+      return translation;
+    }
+
+    if (!/[<{]/.test(message)) {
+      return translation;
+    }
+
+    throw new Error(
+      "Message formatting requires a Messagevisor instance configured with createICUModule().",
+    );
+  };
+
+  const formatDescriptorMessage = (
+    descriptor: MessageDescriptor,
+    values?: MessageValues<React.ReactNode>,
+    options?: TranslateOptions,
+  ) => {
+    const translationOptions =
+      typeof descriptor.defaultMessage !== "undefined" &&
+      typeof options?.defaultTranslation === "undefined"
+        ? { ...options, defaultTranslation: descriptor.defaultMessage }
+        : options;
+    const resolved = descriptor.id
+      ? messagevisor.getRawTranslation(descriptor.id as MessageKey, translationOptions)
+      : (descriptor.defaultMessage ?? "");
+    const message = resolved;
+
+    const translation = messagevisor.formatMessage(
+      message,
+      values as MessageValues<React.ReactNode>,
+      translationOptions,
+    );
+
+    return requireICUModule(message, translation);
+  };
+
+  return {
+    locale,
+    messages: messagevisor.getDefaultTranslations(locale) || config.messages,
+    formats: messagevisor.getDefaultFormats(locale) || config.formats,
+    timeZone: config.timeZone ?? messagevisor.getTimeZone(),
+    messagevisor,
+    formatMessage: formatDescriptorMessage as IntlShape["formatMessage"],
+    formatDate: (value, format, options) => messagevisor.formatDate(value, format as any, options),
+    formatDateToParts: (value, format, options) =>
+      messagevisor.formatDateToParts(value, format as any, options),
+    formatTime: (value, format, options) => messagevisor.formatTime(value, format as any, options),
+    formatTimeToParts: (value, format, options) =>
+      messagevisor.formatTimeToParts(value, format as any, options),
+    formatNumber: (value, format, options) =>
+      messagevisor.formatNumber(value, format as any, options),
+    formatNumberToParts: (value, format, options) =>
+      messagevisor.formatNumberToParts(value, format as any, options),
+    formatRelativeTime: (value, unit, format, options) =>
+      messagevisor.formatRelativeTime(value, unit, format as any, options),
+    formatPlural: (value, options) => messagevisor.formatPlural(value, options),
+    formatList: (values, options) => messagevisor.formatList(values, options),
+    formatListToParts: (values, options) => messagevisor.formatListToParts(values, options),
+    formatDisplayName: (value, options) => messagevisor.formatDisplayName(value, options),
+  };
+}
+
+export type WithIntlProps = {
+  intl: IntlShape;
+};
+
+export function mergeRichTextValues(
+  defaults: Record<string, (chunks: React.ReactNode[]) => React.ReactNode> | undefined,
+  values: Record<string, MessageValue<React.ReactNode>> | undefined,
+  message: string | undefined,
+) {
+  if (!defaults || !message) {
+    return values;
+  }
+
+  const tagPattern = /<([A-Za-z][A-Za-z0-9_-]*)\b[^>]*>/g;
+  const matchingDefaults: Record<string, (chunks: React.ReactNode[]) => React.ReactNode> = {};
+  let match: RegExpExecArray | null;
+
+  while ((match = tagPattern.exec(message))) {
+    if (defaults[match[1]]) {
+      matchingDefaults[match[1]] = defaults[match[1]];
+    }
+  }
+
+  const defaultKeys = Object.keys(matchingDefaults);
+
+  if (defaultKeys.length === 0) {
+    return values;
+  }
+
+  return {
+    ...matchingDefaults,
+    ...(values || {}),
+  };
+}

package/tsconfig.cjs.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.cjs.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./src",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "lib": ["es2015", "dom", "es2021.intl"]
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["./src/**/*.spec.ts", "./src/**/*.spec.tsx"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.cjs.json",
+  "exclude": []
+}