@messagevisor/vue 0.0.1 → 0.1.0

package/src/useMessagevisor.spec.ts

@@ -0,0 +1,70 @@
+import { mount } from "@vue/test-utils";
+import { defineComponent, h } from "vue";
+
+import { MessagevisorProvider } from "./MessagevisorProvider";
+import { useMessagevisor } from "./useMessagevisor";
+import { createTestInstance } from "./testUtils";
+
+describe("useMessagevisor", function () {
+  it("returns imperative translation, formatting, and state APIs", function () {
+    const m = createTestInstance();
+    const calls: string[] = [];
+    const Child = defineComponent({
+      setup() {
+        const api = useMessagevisor();
+
+        calls.push(api.t("greeting", { name: "Ada" }));
+        calls.push(api.translate("greeting", { name: "Grace" }));
+        calls.push(api.formatMessage("Raw {name}", { name: "Lin" }));
+        calls.push(api.formatNumber(12, { style: "currency", currency: "EUR" }));
+        api.setContext({ plan: "pro" });
+        calls.push(api.t("greeting", { name: "Ada" }));
+
+        return () => h("p", calls.join("|"));
+      },
+    });
+
+    mount(MessagevisorProvider, {
+      props: { instance: m },
+      slots: { default: () => h(Child) },
+    });
+
+    expect(calls[0]).toEqual("Hello Ada");
+    expect(calls[1]).toEqual("Hello Grace");
+    expect(calls[2]).toEqual("Raw Lin");
+    expect(calls[3]).toContain("€");
+    expect(calls[4]).toEqual("Welcome back, pro Ada");
+  });
+
+  it("runs provider modules after SDK formatting", function () {
+    const m = createTestInstance();
+    const Child = defineComponent({
+      setup() {
+        const { t, formatMessage } = useMessagevisor();
+
+        return () =>
+          h("p", [
+            h("span", { class: "t" }, t("greeting", { name: "Ada" })),
+            h("span", { class: "format" }, formatMessage("Hi {name}", { name: "Ada" })),
+          ]);
+      },
+    });
+
+    const wrapper = mount(MessagevisorProvider, {
+      props: {
+        instance: m,
+        modules: [
+          {
+            transform({ translation, source }) {
+              return typeof translation === "string" ? `${source}:${translation}` : undefined;
+            },
+          },
+        ],
+      },
+      slots: { default: () => h(Child) },
+    });
+
+    expect(wrapper.find(".t").text()).toEqual("translation:Hello Ada");
+    expect(wrapper.find(".format").text()).toEqual("formatMessage:Hi Ada");
+  });
+});

package/src/useMessagevisor.ts

@@ -0,0 +1,10 @@
+import { computed } from "vue";
+
+import { createMessagevisorApi } from "./api";
+import { useMessagevisorContextValue } from "./useSdk";
+
+export function useMessagevisor() {
+  const context = useMessagevisorContextValue();
+
+  return computed(() => createMessagevisorApi(context)).value;
+}

package/src/useMessagevisorSnapshot.ts

@@ -0,0 +1,20 @@
+import type { MessagevisorSnapshot } from "@messagevisor/sdk";
+import { computed, getCurrentScope, onScopeDispose, shallowRef, type ComputedRef } from "vue";
+
+import { useSdk } from "./useSdk";
+
+export function useMessagevisorSnapshot(): ComputedRef<MessagevisorSnapshot> {
+  const sdk = useSdk();
+  const snapshot = shallowRef(sdk.getSnapshot());
+  const unsubscribe = sdk.subscribe(() => {
+    snapshot.value = sdk.getSnapshot();
+  });
+
+  snapshot.value = sdk.getSnapshot();
+
+  if (getCurrentScope()) {
+    onScopeDispose(unsubscribe);
+  }
+
+  return computed(() => snapshot.value);
+}

package/src/useReactiveMessagevisor.spec.ts

@@ -0,0 +1,185 @@
+import { mount } from "@vue/test-utils";
+import { computed, defineComponent, h, nextTick, ref } from "vue";
+
+import { MessagevisorProvider } from "./MessagevisorProvider";
+import {
+  useCurrency,
+  useDirection,
+  useFormatDate,
+  useFormatDateTimeRange,
+  useFormatMessage,
+  useFormatNumber,
+  useFormatNumberToParts,
+  useFormatPlural,
+  useFormatRelativeTime,
+  useFormatTime,
+  useLocale,
+  useLocaleInfo,
+  useMessagevisorContext,
+  useTimeZone,
+  useTranslation,
+} from "./useReactiveMessagevisor";
+import { useMessagevisorSnapshot } from "./useMessagevisorSnapshot";
+import { useSdk } from "./useSdk";
+import { createTestInstance, nlDatafile } from "./testUtils";
+
+describe("reactive composables", function () {
+  it("recomputes focused state when the SDK snapshot changes", async function () {
+    const m = createTestInstance();
+    const Child = defineComponent({
+      setup() {
+        const sdk = useSdk(); // eslint-disable-line @typescript-eslint/no-unused-vars
+        const snapshot = useMessagevisorSnapshot();
+        const locale = useLocale();
+        const direction = useDirection();
+        const info = useLocaleInfo();
+        const context = useMessagevisorContext();
+        const currency = useCurrency();
+        const timeZone = useTimeZone();
+
+        return () =>
+          h("div", [
+            h("span", { class: "locale" }, locale.value || ""),
+            h("span", { class: "direction" }, direction.value || ""),
+            h("span", { class: "info" }, info.value.locale || ""),
+            h("span", { class: "context" }, String(context.value.plan || "")),
+            h("span", { class: "currency" }, currency.value || ""),
+            h("span", { class: "timeZone" }, timeZone.value || ""),
+            h(
+              "span",
+              { class: "revision" },
+              snapshot.value.datafileRevisionsByLocale[locale.value || ""],
+            ),
+          ]);
+      },
+    });
+
+    const wrapper = mount(MessagevisorProvider, {
+      props: { instance: m },
+      slots: { default: () => h(Child) },
+    });
+
+    m.setContext({ plan: "pro" });
+    m.setCurrency("EUR");
+    m.setTimeZone("Europe/Amsterdam");
+    m.setDatafile(nlDatafile);
+    m.setLocale("nl-NL");
+    await nextTick();
+
+    expect(wrapper.find(".locale").text()).toEqual("nl-NL");
+    expect(wrapper.find(".direction").text()).toEqual("ltr");
+    expect(wrapper.find(".info").text()).toEqual("nl-NL");
+    expect(wrapper.find(".context").text()).toEqual("pro");
+    expect(wrapper.find(".currency").text()).toEqual("EUR");
+    expect(wrapper.find(".timeZone").text()).toEqual("Europe/Amsterdam");
+    expect(wrapper.find(".revision").text()).toEqual("1-nl");
+  });
+
+  it("accepts plain values, refs, computed refs, and getters", async function () {
+    const m = createTestInstance();
+    const key = ref("greeting");
+    const name = ref("Ada");
+    const plan = ref("free");
+    const amount = ref(12);
+    const Child = defineComponent({
+      setup() {
+        const preset = computed(() => "money");
+        const translation = useTranslation(
+          () => key.value,
+          { name },
+          () => ({ context: { plan: plan.value } }),
+        );
+        const total = useFormatMessage("Total: {amount, number, money}", { amount });
+        const money = useFormatNumber(amount, preset);
+
+        return () =>
+          h("div", [
+            h("span", { class: "translation" }, translation.value),
+            h("span", { class: "total" }, total.value),
+            h("span", { class: "money" }, money.value),
+          ]);
+      },
+    });
+
+    const wrapper = mount(MessagevisorProvider, {
+      props: { instance: m },
+      slots: { default: () => h(Child) },
+    });
+
+    expect(wrapper.find(".translation").text()).toEqual("Hello Ada");
+    expect(wrapper.find(".total").text()).toContain("$12.00");
+    expect(wrapper.find(".money").text()).toContain("$12.00");
+
+    name.value = "Grace";
+    plan.value = "pro";
+    amount.value = 18;
+    await nextTick();
+
+    expect(wrapper.find(".translation").text()).toEqual("Welcome back, pro Grace");
+    expect(wrapper.find(".total").text()).toContain("$18.00");
+    expect(wrapper.find(".money").text()).toContain("$18.00");
+  });
+
+  it("covers formatter composables", function () {
+    const m = createTestInstance();
+    const Child = defineComponent({
+      setup() {
+        const date = "2026-05-12T12:30:00Z";
+
+        const currency = useFormatNumber(12, "money", { currency: "EUR" });
+        const formattedDate = useFormatDate(date, "short");
+        const range = useFormatDateTimeRange(date, "2026-05-13T12:30:00Z", "short");
+        const numberParts = useFormatNumberToParts(12, "money");
+        const plural = useFormatPlural(1);
+        const relative = useFormatRelativeTime(-1, "day", "short");
+        const time = useFormatTime(date, "short");
+
+        return () =>
+          h("div", [
+            h("span", { class: "currency" }, currency.value),
+            h("span", { class: "date" }, formattedDate.value),
+            h("span", { class: "range" }, range.value),
+            h("span", { class: "parts" }, String(numberParts.value.length > 0)),
+            h("span", { class: "plural" }, plural.value),
+            h("span", { class: "relative" }, relative.value),
+            h("span", { class: "time" }, time.value),
+          ]);
+      },
+    });
+
+    const wrapper = mount(MessagevisorProvider, {
+      props: { instance: m },
+      slots: { default: () => h(Child) },
+    });
+
+    expect(wrapper.find(".currency").text()).toContain("€");
+    expect(wrapper.find(".date").text()).toContain("5/12/26");
+    expect(wrapper.find(".range").text()).toContain("May");
+    expect(wrapper.find(".parts").text()).toEqual("true");
+    expect(wrapper.find(".plural").text()).toEqual("one");
+    expect(wrapper.find(".relative").text()).toEqual("yesterday");
+    expect(wrapper.find(".time").text()).toContain("12:30");
+  });
+
+  it("unsubscribes from SDK changes on unmount", function () {
+    const m = createTestInstance();
+    const unsubscribe = jest.fn();
+    const subscribe = jest.spyOn(m, "subscribe").mockReturnValue(unsubscribe);
+    const Child = defineComponent({
+      setup() {
+        useLocale();
+
+        return () => h("p", "ok");
+      },
+    });
+
+    const wrapper = mount(MessagevisorProvider, {
+      props: { instance: m },
+      slots: { default: () => h(Child) },
+    });
+
+    expect(subscribe).toHaveBeenCalledTimes(1);
+    wrapper.unmount();
+    expect(unsubscribe).toHaveBeenCalledTimes(1);
+  });
+});

package/src/useReactiveMessagevisor.ts

@@ -0,0 +1,353 @@
+import type {
+  EvaluationOptions,
+  MessageFormatResult,
+  MessagePrimitiveValue,
+  MessageValues,
+  TranslateOptions,
+} from "@messagevisor/sdk";
+import type {
+  Context,
+  FormatDateTimePresetOptions,
+  FormatNumberPresetOptions,
+  FormatRelativeTimePresetOptions,
+  LocaleDirection,
+  LocaleKey,
+  MessageKey,
+} from "@messagevisor/types";
+import { computed, isRef, type ComputedRef, type MaybeRefOrGetter, toValue } from "vue";
+
+import type { VueMessageChunk } from "./MessagevisorContext";
+import { createRichTextTools, type VueMessageValues, type VueRichMessageValues } from "./richText";
+import { useMessagevisorSnapshot } from "./useMessagevisorSnapshot";
+import { useMessagevisorContextValue } from "./useSdk";
+
+export interface LocaleInfo {
+  locale: LocaleKey | null;
+  direction: LocaleDirection | undefined;
+}
+
+type MaybeRecord<TRecord extends object> = MaybeRefOrGetter<TRecord | undefined>;
+type MaybeRecordValue<TValue> = TValue | MaybeRefOrGetter<TValue>;
+type MaybePrimitiveValues = Record<string, MaybeRecordValue<MessagePrimitiveValue>>;
+type MaybeRichValues = Record<
+  string,
+  MaybeRecordValue<MessagePrimitiveValue> | VueRichMessageValues[string]
+>;
+
+function useReactiveContext() {
+  const context = useMessagevisorContextValue();
+  useMessagevisorSnapshot();
+
+  return context;
+}
+
+function resolveMaybeRecord<TRecord extends object>(record?: MaybeRecord<TRecord>) {
+  const resolved = typeof record === "undefined" ? undefined : toValue(record);
+
+  if (!resolved) {
+    return resolved;
+  }
+
+  return Object.fromEntries(
+    Object.entries(resolved as Record<string, unknown>).map(([key, value]) => {
+      if (isRef(value)) {
+        return [key, value.value];
+      }
+
+      if (typeof value === "function" && value.length === 0) {
+        return [key, (value as () => unknown)()];
+      }
+
+      return [key, value];
+    }),
+  ) as TRecord;
+}
+
+export function useLocale(): ComputedRef<LocaleKey | null> {
+  const snapshot = useMessagevisorSnapshot();
+
+  return computed(() => snapshot.value.locale);
+}
+
+export function useDirection(): ComputedRef<LocaleDirection | undefined> {
+  const snapshot = useMessagevisorSnapshot();
+
+  return computed(() => snapshot.value.direction);
+}
+
+export function useLocaleInfo(): ComputedRef<LocaleInfo> {
+  const snapshot = useMessagevisorSnapshot();
+
+  return computed(() => ({
+    locale: snapshot.value.locale,
+    direction: snapshot.value.direction,
+  }));
+}
+
+export function useMessagevisorContext(): ComputedRef<Context> {
+  const snapshot = useMessagevisorSnapshot();
+
+  return computed(() => snapshot.value.context);
+}
+
+export function useCurrency(): ComputedRef<string | undefined> {
+  const snapshot = useMessagevisorSnapshot();
+
+  return computed(() => snapshot.value.currency);
+}
+
+export function useTimeZone(): ComputedRef<string | undefined> {
+  const snapshot = useMessagevisorSnapshot();
+
+  return computed(() => snapshot.value.timeZone);
+}
+
+export function useTranslation(
+  messageKey: MaybeRefOrGetter<MessageKey>,
+  values?: MaybeRecord<MaybePrimitiveValues>,
+  options?: MaybeRecord<TranslateOptions>,
+): ComputedRef<string>;
+export function useTranslation(
+  messageKey: MaybeRefOrGetter<MessageKey>,
+  values: MaybeRecord<MaybeRichValues>,
+  options?: MaybeRecord<TranslateOptions>,
+): ComputedRef<MessageFormatResult<VueMessageChunk>>;
+export function useTranslation(
+  messageKey: MaybeRefOrGetter<MessageKey>,
+  values?: MaybeRecord<Record<string, unknown>>,
+  options?: MaybeRecord<TranslateOptions>,
+) {
+  const context = useReactiveContext();
+  const richText = createRichTextTools(context);
+
+  return computed(() => {
+    const key = toValue(messageKey);
+    const resolvedValues = resolveMaybeRecord(values);
+    const resolvedOptions = resolveMaybeRecord(options);
+    const message = context.instance.getRawTranslation(key, resolvedOptions);
+    const translation = context.instance.translate<VueMessageChunk>(
+      key,
+      richText.mergeValues(
+        resolvedValues as VueMessageValues | undefined,
+        message,
+      ) as MessageValues<VueMessageChunk>,
+      resolvedOptions,
+    );
+
+    return richText.wrapResult(
+      richText.runModules(translation, {
+        source: "translation",
+        messageKey: key,
+      }),
+    );
+  });
+}
+
+export function useFormatMessage(
+  message: MaybeRefOrGetter<string>,
+  values?: MaybeRecord<MaybePrimitiveValues>,
+  options?: MaybeRecord<EvaluationOptions>,
+): ComputedRef<string>;
+export function useFormatMessage(
+  message: MaybeRefOrGetter<string>,
+  values: MaybeRecord<MaybeRichValues>,
+  options?: MaybeRecord<EvaluationOptions>,
+): ComputedRef<MessageFormatResult<VueMessageChunk>>;
+export function useFormatMessage(
+  message: MaybeRefOrGetter<string>,
+  values?: MaybeRecord<Record<string, unknown>>,
+  options?: MaybeRecord<EvaluationOptions>,
+) {
+  const context = useReactiveContext();
+  const richText = createRichTextTools(context);
+
+  return computed(() => {
+    const resolvedMessage = toValue(message);
+    const translation = context.instance.formatMessage<VueMessageChunk>(
+      resolvedMessage,
+      richText.mergeValues(
+        resolveMaybeRecord(values) as VueMessageValues | undefined,
+        resolvedMessage,
+      ) as MessageValues<VueMessageChunk>,
+      resolveMaybeRecord(options),
+    );
+
+    return richText.wrapResult(
+      richText.runModules(translation, {
+        source: "formatMessage",
+      }),
+    );
+  });
+}
+
+export function useFormatNumber(
+  value: MaybeRefOrGetter<number>,
+  presetOrOptions?: MaybeRefOrGetter<string | FormatNumberPresetOptions | undefined>,
+  options?: MaybeRecord<EvaluationOptions>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() =>
+    context.instance.formatNumber(
+      toValue(value),
+      toValue(presetOrOptions),
+      resolveMaybeRecord(options),
+    ),
+  );
+}
+
+export function useFormatNumberToParts(
+  value: MaybeRefOrGetter<number>,
+  presetOrOptions?: MaybeRefOrGetter<string | FormatNumberPresetOptions | undefined>,
+  options?: MaybeRecord<EvaluationOptions>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() =>
+    context.instance.formatNumberToParts(
+      toValue(value),
+      toValue(presetOrOptions),
+      resolveMaybeRecord(options),
+    ),
+  );
+}
+
+export function useFormatDate(
+  value: MaybeRefOrGetter<Date | number | string>,
+  presetOrOptions?: MaybeRefOrGetter<string | FormatDateTimePresetOptions | undefined>,
+  options?: MaybeRecord<EvaluationOptions>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() =>
+    context.instance.formatDate(
+      toValue(value),
+      toValue(presetOrOptions),
+      resolveMaybeRecord(options),
+    ),
+  );
+}
+
+export function useFormatDateToParts(
+  value: MaybeRefOrGetter<Date | number | string>,
+  presetOrOptions?: MaybeRefOrGetter<string | FormatDateTimePresetOptions | undefined>,
+  options?: MaybeRecord<EvaluationOptions>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() =>
+    context.instance.formatDateToParts(
+      toValue(value),
+      toValue(presetOrOptions),
+      resolveMaybeRecord(options),
+    ),
+  );
+}
+
+export function useFormatTime(
+  value: MaybeRefOrGetter<Date | number | string>,
+  presetOrOptions?: MaybeRefOrGetter<string | FormatDateTimePresetOptions | undefined>,
+  options?: MaybeRecord<EvaluationOptions>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() =>
+    context.instance.formatTime(
+      toValue(value),
+      toValue(presetOrOptions),
+      resolveMaybeRecord(options),
+    ),
+  );
+}
+
+export function useFormatTimeToParts(
+  value: MaybeRefOrGetter<Date | number | string>,
+  presetOrOptions?: MaybeRefOrGetter<string | FormatDateTimePresetOptions | undefined>,
+  options?: MaybeRecord<EvaluationOptions>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() =>
+    context.instance.formatTimeToParts(
+      toValue(value),
+      toValue(presetOrOptions),
+      resolveMaybeRecord(options),
+    ),
+  );
+}
+
+export function useFormatDateTimeRange(
+  start: MaybeRefOrGetter<Date | number | string>,
+  end: MaybeRefOrGetter<Date | number | string>,
+  presetOrOptions?: MaybeRefOrGetter<string | FormatDateTimePresetOptions | undefined>,
+  options?: MaybeRecord<EvaluationOptions>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() =>
+    context.instance.formatDateTimeRange(
+      toValue(start),
+      toValue(end),
+      toValue(presetOrOptions),
+      resolveMaybeRecord(options),
+    ),
+  );
+}
+
+export function useFormatRelativeTime(
+  value: MaybeRefOrGetter<number>,
+  unit: MaybeRefOrGetter<Intl.RelativeTimeFormatUnit>,
+  presetOrOptions?: MaybeRefOrGetter<string | FormatRelativeTimePresetOptions | undefined>,
+  options?: MaybeRecord<EvaluationOptions>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() =>
+    context.instance.formatRelativeTime(
+      toValue(value),
+      toValue(unit),
+      toValue(presetOrOptions),
+      resolveMaybeRecord(options),
+    ),
+  );
+}
+
+export function useFormatPlural(
+  value: MaybeRefOrGetter<number>,
+  options?: MaybeRecord<Intl.PluralRulesOptions>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() => context.instance.formatPlural(toValue(value), resolveMaybeRecord(options)));
+}
+
+export function useFormatList(
+  values: MaybeRefOrGetter<string[]>,
+  options?: MaybeRecord<Record<string, unknown>>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() => context.instance.formatList(toValue(values), resolveMaybeRecord(options)));
+}
+
+export function useFormatListToParts(
+  values: MaybeRefOrGetter<string[]>,
+  options?: MaybeRecord<Record<string, unknown>>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() =>
+    context.instance.formatListToParts(toValue(values), resolveMaybeRecord(options)),
+  );
+}
+
+export function useFormatDisplayName(
+  value: MaybeRefOrGetter<string>,
+  options?: MaybeRecord<Record<string, unknown>>,
+) {
+  const context = useReactiveContext();
+
+  return computed(() =>
+    context.instance.formatDisplayName(toValue(value), resolveMaybeRecord(options)),
+  );
+}

package/src/useSdk.ts

@@ -0,0 +1,19 @@
+import { inject } from "vue";
+
+import { MessagevisorInjectionKey } from "./MessagevisorContext";
+
+export function useMessagevisorContextValue() {
+  const context = inject(MessagevisorInjectionKey);
+
+  if (!context) {
+    throw new Error(
+      "useSdk must be used within MessagevisorProvider or createMessagevisorProvider().",
+    );
+  }
+
+  return context;
+}
+
+export function useSdk() {
+  return useMessagevisorContextValue().instance;
+}

package/tsconfig.cjs.json

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

package/tsconfig.typecheck.json

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