@messagevisor/react 0.0.1 → 0.2.0

package/src/useReactiveMessagevisor.ts

@@ -0,0 +1,223 @@
+import * as React from "react";
+
+import type {
+  EvaluationOptions,
+  TranslateOptions,
+  MessagePrimitiveValue,
+  Messagevisor,
+} from "@messagevisor/sdk";
+import type {
+  Context,
+  FormatDateTimePresetOptions,
+  FormatNumberPresetOptions,
+  FormatRelativeTimePresetOptions,
+  LocaleDirection,
+  LocaleKey,
+  MessageKey,
+} from "@messagevisor/types";
+
+import { useMessagevisorSnapshot } from "./useMessagevisorSnapshot";
+import { useRichText, type ReactMessageValues, type ReactRichMessageValues } from "./useRichText";
+import { useSdk } from "./useSdk";
+
+export interface LocaleInfo {
+  locale: LocaleKey | null;
+  direction: LocaleDirection | undefined;
+}
+
+function useReactiveSdk() {
+  const sdk = useSdk();
+  useMessagevisorSnapshot();
+
+  return sdk;
+}
+
+export function useLocale(): LocaleKey | null {
+  return useMessagevisorSnapshot().locale;
+}
+
+export function useDirection(): LocaleDirection | undefined {
+  return useMessagevisorSnapshot().direction;
+}
+
+export function useLocaleInfo(): LocaleInfo {
+  const snapshot = useMessagevisorSnapshot();
+
+  return React.useMemo(
+    () => ({
+      locale: snapshot.locale,
+      direction: snapshot.direction,
+    }),
+    [snapshot.locale, snapshot.direction],
+  );
+}
+
+export function useMessagevisorContext(): Context {
+  return useMessagevisorSnapshot().context;
+}
+
+export function useCurrency(): string | undefined {
+  return useMessagevisorSnapshot().currency;
+}
+
+export function useTimeZone(): string | undefined {
+  return useMessagevisorSnapshot().timeZone;
+}
+
+export function useTranslation(
+  messageKey: MessageKey,
+  values?: Record<string, MessagePrimitiveValue>,
+  options?: TranslateOptions,
+): string;
+export function useTranslation(
+  messageKey: MessageKey,
+  values: ReactRichMessageValues,
+  options?: TranslateOptions,
+): React.ReactNode;
+export function useTranslation(
+  messageKey: MessageKey,
+  values?: ReactMessageValues,
+  options?: TranslateOptions,
+): string | React.ReactNode {
+  const sdk = useReactiveSdk();
+  const richText = useRichText();
+  const message = sdk.getRawTranslation(messageKey, options);
+  const translation = sdk.translate<React.ReactNode>(
+    messageKey,
+    richText.mergeValues(values, message),
+    options,
+  );
+
+  return richText.wrapResult(
+    richText.runModules(translation, {
+      source: "translation",
+      messageKey,
+    }),
+  ) as React.ReactNode;
+}
+
+export function useFormatMessage(
+  message: string,
+  values?: Record<string, MessagePrimitiveValue>,
+  options?: EvaluationOptions,
+): string;
+export function useFormatMessage(
+  message: string,
+  values: ReactRichMessageValues,
+  options?: EvaluationOptions,
+): React.ReactNode;
+export function useFormatMessage(
+  message: string,
+  values?: ReactMessageValues,
+  options?: EvaluationOptions,
+): string | React.ReactNode {
+  const sdk = useReactiveSdk();
+  const richText = useRichText();
+  const translation = sdk.formatMessage(message, richText.mergeValues(values, message), options);
+
+  return richText.wrapResult(
+    richText.runModules(translation, {
+      source: "formatMessage",
+    }),
+  ) as React.ReactNode;
+}
+
+export function useFormatNumber(
+  value: number,
+  presetOrOptions?: string | FormatNumberPresetOptions,
+  options?: EvaluationOptions,
+) {
+  return useReactiveSdk().formatNumber(value, presetOrOptions, options);
+}
+
+export function useFormatNumberToParts(
+  value: number,
+  presetOrOptions?: string | FormatNumberPresetOptions,
+  options?: EvaluationOptions,
+) {
+  return useReactiveSdk().formatNumberToParts(value, presetOrOptions, options);
+}
+
+export function useFormatDate(
+  value: Date | number | string,
+  presetOrOptions?: string | FormatDateTimePresetOptions,
+  options?: EvaluationOptions,
+) {
+  return useReactiveSdk().formatDate(value, presetOrOptions, options);
+}
+
+export function useFormatDateToParts(
+  value: Date | number | string,
+  presetOrOptions?: string | FormatDateTimePresetOptions,
+  options?: EvaluationOptions,
+) {
+  return useReactiveSdk().formatDateToParts(value, presetOrOptions, options);
+}
+
+export function useFormatTime(
+  value: Date | number | string,
+  presetOrOptions?: string | FormatDateTimePresetOptions,
+  options?: EvaluationOptions,
+) {
+  return useReactiveSdk().formatTime(value, presetOrOptions, options);
+}
+
+export function useFormatTimeToParts(
+  value: Date | number | string,
+  presetOrOptions?: string | FormatDateTimePresetOptions,
+  options?: EvaluationOptions,
+) {
+  return useReactiveSdk().formatTimeToParts(value, presetOrOptions, options);
+}
+
+export function useFormatDateTimeRange(
+  start: Date | number | string,
+  end: Date | number | string,
+  presetOrOptions?: string | FormatDateTimePresetOptions,
+  options?: EvaluationOptions,
+) {
+  return useReactiveSdk().formatDateTimeRange(start, end, presetOrOptions, options);
+}
+
+export function useFormatRelativeTime(
+  value: number,
+  unit: Intl.RelativeTimeFormatUnit,
+  presetOrOptions?: string | FormatRelativeTimePresetOptions,
+  options?: EvaluationOptions,
+) {
+  return useReactiveSdk().formatRelativeTime(value, unit, presetOrOptions, options);
+}
+
+export function useFormatPlural(value: number, options?: Intl.PluralRulesOptions) {
+  return useReactiveSdk().formatPlural(value, options);
+}
+
+export function useFormatList(values: string[], options?: any) {
+  return useReactiveSdk().formatList(values, options);
+}
+
+export function useFormatListToParts(values: string[], options?: any) {
+  return useReactiveSdk().formatListToParts(values, options);
+}
+
+export function useFormatDisplayName(value: string, options?: any) {
+  return useReactiveSdk().formatDisplayName(value, options);
+}
+
+export type ReactiveMessagevisorApi = Pick<
+  Messagevisor,
+  | "translate"
+  | "formatMessage"
+  | "formatNumber"
+  | "formatNumberToParts"
+  | "formatDate"
+  | "formatDateToParts"
+  | "formatTime"
+  | "formatTimeToParts"
+  | "formatDateTimeRange"
+  | "formatRelativeTime"
+  | "formatPlural"
+  | "formatList"
+  | "formatListToParts"
+  | "formatDisplayName"
+>;

package/src/useRichText.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+
+import type {
+  MessagePrimitiveValue,
+  MessageValue,
+  MessagevisorTranslationSource,
+} from "@messagevisor/sdk";
+import type { MessageKey } from "@messagevisor/types";
+
+import { MessagevisorContext } from "./MessagevisorContext";
+
+export type ReactMessageValues = Record<string, MessageValue<React.ReactNode>>;
+export type ReactRichMessageValues = Record<
+  string,
+  MessagePrimitiveValue | ((chunks: React.ReactNode[]) => React.ReactNode)
+>;
+
+const RICH_TAG_NAME_PATTERN = /<([A-Za-z][A-Za-z0-9_-]*)\b[^>]*>/g;
+
+function getRichTagNames(message: string) {
+  const tags = new Set<string>();
+  let match: RegExpExecArray | null;
+
+  while ((match = RICH_TAG_NAME_PATTERN.exec(message))) {
+    tags.add(match[1]);
+  }
+
+  return tags;
+}
+
+export function useRichText() {
+  const context = React.useContext(MessagevisorContext);
+
+  if (!context) {
+    throw new Error("useSdk must be used within MessagevisorProvider.");
+  }
+
+  return React.useMemo(() => {
+    function mergeValues(values?: ReactMessageValues, message?: string) {
+      const defaults = context.defaultRichTextElements;
+      const defaultKeys = Object.keys(defaults);
+
+      if (!message || defaultKeys.length === 0) {
+        return values;
+      }
+
+      const tagNames = getRichTagNames(message);
+      const matchingDefaults = Object.fromEntries(
+        defaultKeys.filter((key) => tagNames.has(key)).map((key) => [key, defaults[key]]),
+      );
+
+      if (Object.keys(matchingDefaults).length === 0) {
+        return values;
+      }
+
+      return {
+        ...matchingDefaults,
+        ...(values || {}),
+      };
+    }
+
+    function wrapResult<T>(result: T) {
+      if (!context.wrapRichTextChunksInFragment || !Array.isArray(result)) {
+        return result;
+      }
+
+      return (
+        <React.Fragment>
+          {result.map((chunk, index) => (
+            <React.Fragment key={index}>{chunk}</React.Fragment>
+          ))}
+        </React.Fragment>
+      );
+    }
+
+    function runModules<TTranslation>(
+      translation: TTranslation,
+      payload: {
+        source: MessagevisorTranslationSource;
+        messageKey?: MessageKey;
+      },
+    ) {
+      let currentTranslation = translation as React.ReactNode;
+      const locale = context.instance.getLocale();
+
+      if (!locale) {
+        return translation;
+      }
+
+      for (const module of context.modules) {
+        const nextTranslation = module.transform?.({
+          translation: currentTranslation,
+          locale,
+          ...payload,
+        });
+
+        if (typeof nextTranslation !== "undefined") {
+          currentTranslation = nextTranslation;
+        }
+      }
+
+      return currentTranslation;
+    }
+
+    return {
+      mergeValues,
+      wrapResult,
+      runModules,
+    };
+  }, [
+    context.modules,
+    context.instance,
+    context.defaultRichTextElements,
+    context.wrapRichTextChunksInFragment,
+  ]);
+}

package/src/useSdk.spec.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { MessagevisorProvider } from "./MessagevisorProvider";
+import { createTestInstance } from "./testUtils";
+import { useSdk } from "./useSdk";
+
+describe("useSdk", function () {
+  it("returns the provided SDK instance", function () {
+    const instance = createTestInstance();
+    const seen: unknown[] = [];
+
+    function TestComponent() {
+      seen.push(useSdk());
+
+      return <p>ok</p>;
+    }
+
+    const { rerender } = render(
+      <MessagevisorProvider instance={instance}>
+        <TestComponent />
+      </MessagevisorProvider>,
+    );
+
+    rerender(
+      <MessagevisorProvider instance={instance}>
+        <TestComponent />
+      </MessagevisorProvider>,
+    );
+
+    expect(screen.getByText("ok")).toBeInTheDocument();
+    expect(seen).toEqual([instance, instance]);
+  });
+
+  it("throws a clear error outside MessagevisorProvider", function () {
+    function Orphan() {
+      useSdk();
+
+      return <p>orphan</p>;
+    }
+
+    expect(() => render(<Orphan />)).toThrow("useSdk must be used within MessagevisorProvider.");
+  });
+});

package/src/useSdk.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import type { Messagevisor } from "@messagevisor/sdk";
+
+import { MessagevisorContext } from "./MessagevisorContext";
+
+export function useSdk(): Messagevisor {
+  const context = React.useContext(MessagevisorContext);
+
+  if (!context) {
+    throw new Error("useSdk must be used within MessagevisorProvider.");
+  }
+
+  return context.instance;
+}

package/tsconfig.cjs.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.cjs.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./src",
+    "moduleResolution": "node",
+    "esModuleInterop": true
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["./src/**/*.spec.ts", "./src/**/*.spec.tsx", "./src/testUtils.ts"]
+}

package/tsconfig.typecheck.json

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