@messagevisor/vue 0.0.1 → 0.1.0

package/lib/richText.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveRecord = resolveRecord;
+exports.createRichTextTools = createRichTextTools;
+var vue_1 = require("vue");
+var RICH_TAG_NAME_PATTERN = /<([A-Za-z][A-Za-z0-9_-]*)\b[^>]*>/g;
+function getRichTagNames(message) {
+    var tags = new Set();
+    var match;
+    while ((match = RICH_TAG_NAME_PATTERN.exec(message))) {
+        tags.add(match[1]);
+    }
+    return tags;
+}
+function maybeResolveRecordEntry(value) {
+    if ((0, vue_1.isRef)(value)) {
+        return value.value;
+    }
+    if (typeof value === "function" && value.length === 0) {
+        return value();
+    }
+    return value;
+}
+function resolveRecord(value) {
+    var record = typeof value === "function" ? value() : value;
+    if (!record) {
+        return record;
+    }
+    return Object.fromEntries(Object.entries(record).map(function (_a) {
+        var key = _a[0], entry = _a[1];
+        return [key, maybeResolveRecordEntry(entry)];
+    }));
+}
+function createRichTextTools(context) {
+    function mergeValues(values, message) {
+        var defaults = context.defaultRichTextElements;
+        var defaultKeys = Object.keys(defaults);
+        if (!message || defaultKeys.length === 0) {
+            return values;
+        }
+        var tagNames = getRichTagNames(message);
+        var matchingDefaults = Object.fromEntries(defaultKeys.filter(function (key) { return tagNames.has(key); }).map(function (key) { return [key, defaults[key]]; }));
+        if (Object.keys(matchingDefaults).length === 0) {
+            return values;
+        }
+        return __assign(__assign({}, matchingDefaults), (values || {}));
+    }
+    function wrapResult(result) {
+        if (!context.wrapRichTextChunksInFragment || !Array.isArray(result)) {
+            return result;
+        }
+        return (0, vue_1.h)(vue_1.Fragment, null, result.map(function (chunk, index) { return (0, vue_1.h)(vue_1.Fragment, { key: index }, [chunk]); }));
+    }
+    function runModules(translation, payload) {
+        var _a;
+        var currentTranslation = translation;
+        var locale = context.instance.getLocale();
+        if (!locale) {
+            return translation;
+        }
+        for (var _i = 0, _b = context.modules; _i < _b.length; _i++) {
+            var module_1 = _b[_i];
+            var nextTranslation = (_a = module_1.transform) === null || _a === void 0 ? void 0 : _a.call(module_1, __assign({ translation: currentTranslation, locale: locale }, payload));
+            if (typeof nextTranslation !== "undefined") {
+                currentTranslation = nextTranslation;
+            }
+        }
+        return currentTranslation;
+    }
+    return {
+        mergeValues: mergeValues,
+        runModules: runModules,
+        wrapResult: wrapResult,
+    };
+}
+//# sourceMappingURL=richText.js.map

package/lib/richText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"richText.js","sourceRoot":"","sources":["../src/richText.ts"],"names":[],"mappings":"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"}

package/lib/useMessagevisor.d.ts

@@ -0,0 +1 @@
+export declare function useMessagevisor(): import("./api").MessagevisorApi;

package/lib/useMessagevisor.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessagevisor = useMessagevisor;
+var vue_1 = require("vue");
+var api_1 = require("./api");
+var useSdk_1 = require("./useSdk");
+function useMessagevisor() {
+    var context = (0, useSdk_1.useMessagevisorContextValue)();
+    return (0, vue_1.computed)(function () { return (0, api_1.createMessagevisorApi)(context); }).value;
+}
+//# sourceMappingURL=useMessagevisor.js.map

package/lib/useMessagevisor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessagevisor.js","sourceRoot":"","sources":["../src/useMessagevisor.ts"],"names":[],"mappings":";;AAKA,0CAIC;AATD,2BAA+B;AAE/B,6BAA8C;AAC9C,mCAAuD;AAEvD,SAAgB,eAAe;IAC7B,IAAM,OAAO,GAAG,IAAA,oCAA2B,GAAE,CAAC;IAE9C,OAAO,IAAA,cAAQ,EAAC,cAAM,OAAA,IAAA,2BAAqB,EAAC,OAAO,CAAC,EAA9B,CAA8B,CAAC,CAAC,KAAK,CAAC;AAC9D,CAAC"}

package/lib/useMessagevisorSnapshot.d.ts

@@ -0,0 +1,3 @@
+import type { MessagevisorSnapshot } from "@messagevisor/sdk";
+import { type ComputedRef } from "vue";
+export declare function useMessagevisorSnapshot(): ComputedRef<MessagevisorSnapshot>;

package/lib/useMessagevisorSnapshot.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessagevisorSnapshot = useMessagevisorSnapshot;
+var vue_1 = require("vue");
+var useSdk_1 = require("./useSdk");
+function useMessagevisorSnapshot() {
+    var sdk = (0, useSdk_1.useSdk)();
+    var snapshot = (0, vue_1.shallowRef)(sdk.getSnapshot());
+    var unsubscribe = sdk.subscribe(function () {
+        snapshot.value = sdk.getSnapshot();
+    });
+    snapshot.value = sdk.getSnapshot();
+    if ((0, vue_1.getCurrentScope)()) {
+        (0, vue_1.onScopeDispose)(unsubscribe);
+    }
+    return (0, vue_1.computed)(function () { return snapshot.value; });
+}
+//# sourceMappingURL=useMessagevisorSnapshot.js.map

package/lib/useMessagevisorSnapshot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessagevisorSnapshot.js","sourceRoot":"","sources":["../src/useMessagevisorSnapshot.ts"],"names":[],"mappings":";;AAKA,0DAcC;AAlBD,2BAA8F;AAE9F,mCAAkC;AAElC,SAAgB,uBAAuB;IACrC,IAAM,GAAG,GAAG,IAAA,eAAM,GAAE,CAAC;IACrB,IAAM,QAAQ,GAAG,IAAA,gBAAU,EAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;IAC/C,IAAM,WAAW,GAAG,GAAG,CAAC,SAAS,CAAC;QAChC,QAAQ,CAAC,KAAK,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,KAAK,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC;IAEnC,IAAI,IAAA,qBAAe,GAAE,EAAE,CAAC;QACtB,IAAA,oBAAc,EAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IAED,OAAO,IAAA,cAAQ,EAAC,cAAM,OAAA,QAAQ,CAAC,KAAK,EAAd,CAAc,CAAC,CAAC;AACxC,CAAC"}

package/lib/useReactiveMessagevisor.d.ts

@@ -0,0 +1,36 @@
+import type { EvaluationOptions, MessageFormatResult, MessagePrimitiveValue, TranslateOptions } from "@messagevisor/sdk";
+import type { Context, FormatDateTimePresetOptions, FormatNumberPresetOptions, FormatRelativeTimePresetOptions, LocaleDirection, LocaleKey, MessageKey } from "@messagevisor/types";
+import { type ComputedRef, type MaybeRefOrGetter } from "vue";
+import type { VueMessageChunk } from "./MessagevisorContext";
+import { type VueRichMessageValues } from "./richText";
+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]>;
+export declare function useLocale(): ComputedRef<LocaleKey | null>;
+export declare function useDirection(): ComputedRef<LocaleDirection | undefined>;
+export declare function useLocaleInfo(): ComputedRef<LocaleInfo>;
+export declare function useMessagevisorContext(): ComputedRef<Context>;
+export declare function useCurrency(): ComputedRef<string | undefined>;
+export declare function useTimeZone(): ComputedRef<string | undefined>;
+export declare function useTranslation(messageKey: MaybeRefOrGetter<MessageKey>, values?: MaybeRecord<MaybePrimitiveValues>, options?: MaybeRecord<TranslateOptions>): ComputedRef<string>;
+export declare function useTranslation(messageKey: MaybeRefOrGetter<MessageKey>, values: MaybeRecord<MaybeRichValues>, options?: MaybeRecord<TranslateOptions>): ComputedRef<MessageFormatResult<VueMessageChunk>>;
+export declare function useFormatMessage(message: MaybeRefOrGetter<string>, values?: MaybeRecord<MaybePrimitiveValues>, options?: MaybeRecord<EvaluationOptions>): ComputedRef<string>;
+export declare function useFormatMessage(message: MaybeRefOrGetter<string>, values: MaybeRecord<MaybeRichValues>, options?: MaybeRecord<EvaluationOptions>): ComputedRef<MessageFormatResult<VueMessageChunk>>;
+export declare function useFormatNumber(value: MaybeRefOrGetter<number>, presetOrOptions?: MaybeRefOrGetter<string | FormatNumberPresetOptions | undefined>, options?: MaybeRecord<EvaluationOptions>): ComputedRef<string>;
+export declare function useFormatNumberToParts(value: MaybeRefOrGetter<number>, presetOrOptions?: MaybeRefOrGetter<string | FormatNumberPresetOptions | undefined>, options?: MaybeRecord<EvaluationOptions>): ComputedRef<Intl.NumberFormatPart[]>;
+export declare function useFormatDate(value: MaybeRefOrGetter<Date | number | string>, presetOrOptions?: MaybeRefOrGetter<string | FormatDateTimePresetOptions | undefined>, options?: MaybeRecord<EvaluationOptions>): ComputedRef<string>;
+export declare function useFormatDateToParts(value: MaybeRefOrGetter<Date | number | string>, presetOrOptions?: MaybeRefOrGetter<string | FormatDateTimePresetOptions | undefined>, options?: MaybeRecord<EvaluationOptions>): ComputedRef<Intl.DateTimeFormatPart[]>;
+export declare function useFormatTime(value: MaybeRefOrGetter<Date | number | string>, presetOrOptions?: MaybeRefOrGetter<string | FormatDateTimePresetOptions | undefined>, options?: MaybeRecord<EvaluationOptions>): ComputedRef<string>;
+export declare function useFormatTimeToParts(value: MaybeRefOrGetter<Date | number | string>, presetOrOptions?: MaybeRefOrGetter<string | FormatDateTimePresetOptions | undefined>, options?: MaybeRecord<EvaluationOptions>): ComputedRef<Intl.DateTimeFormatPart[]>;
+export declare function useFormatDateTimeRange(start: MaybeRefOrGetter<Date | number | string>, end: MaybeRefOrGetter<Date | number | string>, presetOrOptions?: MaybeRefOrGetter<string | FormatDateTimePresetOptions | undefined>, options?: MaybeRecord<EvaluationOptions>): ComputedRef<string>;
+export declare function useFormatRelativeTime(value: MaybeRefOrGetter<number>, unit: MaybeRefOrGetter<Intl.RelativeTimeFormatUnit>, presetOrOptions?: MaybeRefOrGetter<string | FormatRelativeTimePresetOptions | undefined>, options?: MaybeRecord<EvaluationOptions>): ComputedRef<string>;
+export declare function useFormatPlural(value: MaybeRefOrGetter<number>, options?: MaybeRecord<Intl.PluralRulesOptions>): ComputedRef<Intl.LDMLPluralRule>;
+export declare function useFormatList(values: MaybeRefOrGetter<string[]>, options?: MaybeRecord<Record<string, unknown>>): ComputedRef<any>;
+export declare function useFormatListToParts(values: MaybeRefOrGetter<string[]>, options?: MaybeRecord<Record<string, unknown>>): ComputedRef<any>;
+export declare function useFormatDisplayName(value: MaybeRefOrGetter<string>, options?: MaybeRecord<Record<string, unknown>>): ComputedRef<any>;
+export {};

package/lib/useReactiveMessagevisor.js

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocale = useLocale;
+exports.useDirection = useDirection;
+exports.useLocaleInfo = useLocaleInfo;
+exports.useMessagevisorContext = useMessagevisorContext;
+exports.useCurrency = useCurrency;
+exports.useTimeZone = useTimeZone;
+exports.useTranslation = useTranslation;
+exports.useFormatMessage = useFormatMessage;
+exports.useFormatNumber = useFormatNumber;
+exports.useFormatNumberToParts = useFormatNumberToParts;
+exports.useFormatDate = useFormatDate;
+exports.useFormatDateToParts = useFormatDateToParts;
+exports.useFormatTime = useFormatTime;
+exports.useFormatTimeToParts = useFormatTimeToParts;
+exports.useFormatDateTimeRange = useFormatDateTimeRange;
+exports.useFormatRelativeTime = useFormatRelativeTime;
+exports.useFormatPlural = useFormatPlural;
+exports.useFormatList = useFormatList;
+exports.useFormatListToParts = useFormatListToParts;
+exports.useFormatDisplayName = useFormatDisplayName;
+var vue_1 = require("vue");
+var richText_1 = require("./richText");
+var useMessagevisorSnapshot_1 = require("./useMessagevisorSnapshot");
+var useSdk_1 = require("./useSdk");
+function useReactiveContext() {
+    var context = (0, useSdk_1.useMessagevisorContextValue)();
+    (0, useMessagevisorSnapshot_1.useMessagevisorSnapshot)();
+    return context;
+}
+function resolveMaybeRecord(record) {
+    var resolved = typeof record === "undefined" ? undefined : (0, vue_1.toValue)(record);
+    if (!resolved) {
+        return resolved;
+    }
+    return Object.fromEntries(Object.entries(resolved).map(function (_a) {
+        var key = _a[0], value = _a[1];
+        if ((0, vue_1.isRef)(value)) {
+            return [key, value.value];
+        }
+        if (typeof value === "function" && value.length === 0) {
+            return [key, value()];
+        }
+        return [key, value];
+    }));
+}
+function useLocale() {
+    var snapshot = (0, useMessagevisorSnapshot_1.useMessagevisorSnapshot)();
+    return (0, vue_1.computed)(function () { return snapshot.value.locale; });
+}
+function useDirection() {
+    var snapshot = (0, useMessagevisorSnapshot_1.useMessagevisorSnapshot)();
+    return (0, vue_1.computed)(function () { return snapshot.value.direction; });
+}
+function useLocaleInfo() {
+    var snapshot = (0, useMessagevisorSnapshot_1.useMessagevisorSnapshot)();
+    return (0, vue_1.computed)(function () { return ({
+        locale: snapshot.value.locale,
+        direction: snapshot.value.direction,
+    }); });
+}
+function useMessagevisorContext() {
+    var snapshot = (0, useMessagevisorSnapshot_1.useMessagevisorSnapshot)();
+    return (0, vue_1.computed)(function () { return snapshot.value.context; });
+}
+function useCurrency() {
+    var snapshot = (0, useMessagevisorSnapshot_1.useMessagevisorSnapshot)();
+    return (0, vue_1.computed)(function () { return snapshot.value.currency; });
+}
+function useTimeZone() {
+    var snapshot = (0, useMessagevisorSnapshot_1.useMessagevisorSnapshot)();
+    return (0, vue_1.computed)(function () { return snapshot.value.timeZone; });
+}
+function useTranslation(messageKey, values, options) {
+    var context = useReactiveContext();
+    var richText = (0, richText_1.createRichTextTools)(context);
+    return (0, vue_1.computed)(function () {
+        var key = (0, vue_1.toValue)(messageKey);
+        var resolvedValues = resolveMaybeRecord(values);
+        var resolvedOptions = resolveMaybeRecord(options);
+        var message = context.instance.getRawTranslation(key, resolvedOptions);
+        var translation = context.instance.translate(key, richText.mergeValues(resolvedValues, message), resolvedOptions);
+        return richText.wrapResult(richText.runModules(translation, {
+            source: "translation",
+            messageKey: key,
+        }));
+    });
+}
+function useFormatMessage(message, values, options) {
+    var context = useReactiveContext();
+    var richText = (0, richText_1.createRichTextTools)(context);
+    return (0, vue_1.computed)(function () {
+        var resolvedMessage = (0, vue_1.toValue)(message);
+        var translation = context.instance.formatMessage(resolvedMessage, richText.mergeValues(resolveMaybeRecord(values), resolvedMessage), resolveMaybeRecord(options));
+        return richText.wrapResult(richText.runModules(translation, {
+            source: "formatMessage",
+        }));
+    });
+}
+function useFormatNumber(value, presetOrOptions, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () {
+        return context.instance.formatNumber((0, vue_1.toValue)(value), (0, vue_1.toValue)(presetOrOptions), resolveMaybeRecord(options));
+    });
+}
+function useFormatNumberToParts(value, presetOrOptions, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () {
+        return context.instance.formatNumberToParts((0, vue_1.toValue)(value), (0, vue_1.toValue)(presetOrOptions), resolveMaybeRecord(options));
+    });
+}
+function useFormatDate(value, presetOrOptions, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () {
+        return context.instance.formatDate((0, vue_1.toValue)(value), (0, vue_1.toValue)(presetOrOptions), resolveMaybeRecord(options));
+    });
+}
+function useFormatDateToParts(value, presetOrOptions, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () {
+        return context.instance.formatDateToParts((0, vue_1.toValue)(value), (0, vue_1.toValue)(presetOrOptions), resolveMaybeRecord(options));
+    });
+}
+function useFormatTime(value, presetOrOptions, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () {
+        return context.instance.formatTime((0, vue_1.toValue)(value), (0, vue_1.toValue)(presetOrOptions), resolveMaybeRecord(options));
+    });
+}
+function useFormatTimeToParts(value, presetOrOptions, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () {
+        return context.instance.formatTimeToParts((0, vue_1.toValue)(value), (0, vue_1.toValue)(presetOrOptions), resolveMaybeRecord(options));
+    });
+}
+function useFormatDateTimeRange(start, end, presetOrOptions, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () {
+        return context.instance.formatDateTimeRange((0, vue_1.toValue)(start), (0, vue_1.toValue)(end), (0, vue_1.toValue)(presetOrOptions), resolveMaybeRecord(options));
+    });
+}
+function useFormatRelativeTime(value, unit, presetOrOptions, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () {
+        return context.instance.formatRelativeTime((0, vue_1.toValue)(value), (0, vue_1.toValue)(unit), (0, vue_1.toValue)(presetOrOptions), resolveMaybeRecord(options));
+    });
+}
+function useFormatPlural(value, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () { return context.instance.formatPlural((0, vue_1.toValue)(value), resolveMaybeRecord(options)); });
+}
+function useFormatList(values, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () { return context.instance.formatList((0, vue_1.toValue)(values), resolveMaybeRecord(options)); });
+}
+function useFormatListToParts(values, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () {
+        return context.instance.formatListToParts((0, vue_1.toValue)(values), resolveMaybeRecord(options));
+    });
+}
+function useFormatDisplayName(value, options) {
+    var context = useReactiveContext();
+    return (0, vue_1.computed)(function () {
+        return context.instance.formatDisplayName((0, vue_1.toValue)(value), resolveMaybeRecord(options));
+    });
+}
+//# sourceMappingURL=useReactiveMessagevisor.js.map

package/lib/useReactiveMessagevisor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReactiveMessagevisor.js","sourceRoot":"","sources":["../src/useReactiveMessagevisor.ts"],"names":[],"mappings":"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"}

package/lib/useSdk.d.ts

@@ -0,0 +1,2 @@
+export declare function useMessagevisorContextValue(): import("./MessagevisorContext").MessagevisorVueContextValue;
+export declare function useSdk(): import("@messagevisor/sdk").Messagevisor;

package/lib/useSdk.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessagevisorContextValue = useMessagevisorContextValue;
+exports.useSdk = useSdk;
+var vue_1 = require("vue");
+var MessagevisorContext_1 = require("./MessagevisorContext");
+function useMessagevisorContextValue() {
+    var context = (0, vue_1.inject)(MessagevisorContext_1.MessagevisorInjectionKey);
+    if (!context) {
+        throw new Error("useSdk must be used within MessagevisorProvider or createMessagevisorProvider().");
+    }
+    return context;
+}
+function useSdk() {
+    return useMessagevisorContextValue().instance;
+}
+//# sourceMappingURL=useSdk.js.map

package/lib/useSdk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSdk.js","sourceRoot":"","sources":["../src/useSdk.ts"],"names":[],"mappings":";;AAIA,kEAUC;AAED,wBAEC;AAlBD,2BAA6B;AAE7B,6DAAiE;AAEjE,SAAgB,2BAA2B;IACzC,IAAM,OAAO,GAAG,IAAA,YAAM,EAAC,8CAAwB,CAAC,CAAC;IAEjD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,kFAAkF,CACnF,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAgB,MAAM;IACpB,OAAO,2BAA2B,EAAE,CAAC,QAAQ,CAAC;AAChD,CAAC"}

package/package.json

@@ -1,15 +1,51 @@
 {
-	"name": "@messagevisor/vue",
-	"version": "0.0.1",
-	"description": "Messagevisor package",
-	"license": "ISC",
-	"author": "",
-	"type": "commonjs",
-	"main": "index.js",
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
-	}
+  "name": "@messagevisor/vue",
+  "version": "0.1.0",
+  "description": "Vue package for Messagevisor",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "require": "./lib/index.js",
+      "import": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "transpile": "rimraf lib && tsc --project tsconfig.cjs.json",
+    "dist": "echo 'Nothing to dist here'",
+    "build": "npm run transpile",
+    "test": "jest --config jest.config.js --verbose",
+    "typecheck": "tsc --noEmit --skipLibCheck -p tsconfig.typecheck.json"
+  },
+  "author": {
+    "name": "Fahad Heylaal",
+    "url": "https://fahad19.com"
+  },
+  "homepage": "https://messagevisor.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/messagevisor/messagevisor.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "bugs": {
+    "url": "https://github.com/messagevisor/messagevisor/issues"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@messagevisor/sdk": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.6",
+    "vue": "^3.5.13"
+  },
+  "gitHead": "555119ab05473127a658ed0cfb6a2743ea3a6db8"
 }

package/src/MessagevisorContext.ts

@@ -0,0 +1,28 @@
+import type { Messagevisor, MessagevisorTranslationSource } from "@messagevisor/sdk";
+import type { MessageKey } from "@messagevisor/types";
+import type { InjectionKey, VNodeChild } from "vue";
+
+export type VueMessageChunk = VNodeChild;
+export type VueRichTextElementHandler = (
+  chunks: Array<string | VueMessageChunk>,
+) => VueMessageChunk;
+
+export interface MessagevisorProviderModule {
+  name?: string;
+  transform?: (payload: {
+    translation: VueMessageChunk;
+    locale: string;
+    source: MessagevisorTranslationSource;
+    messageKey?: MessageKey;
+  }) => VueMessageChunk | void;
+}
+
+export interface MessagevisorVueContextValue {
+  instance: Messagevisor;
+  defaultRichTextElements: Record<string, VueRichTextElementHandler>;
+  wrapRichTextChunksInFragment: boolean;
+  modules: MessagevisorProviderModule[];
+}
+
+export const MessagevisorInjectionKey: InjectionKey<MessagevisorVueContextValue> =
+  Symbol("Messagevisor");

package/src/MessagevisorProvider.spec.ts

@@ -0,0 +1,99 @@
+import { mount } from "@vue/test-utils";
+import { defineComponent, h } from "vue";
+
+import { MessagevisorProvider } from "./MessagevisorProvider";
+import { createMessagevisorProvider } from "./createMessagevisorProvider";
+import { useSdk } from "./useSdk";
+import { createTestInstance, nlDatafile } from "./testUtils";
+
+describe("MessagevisorProvider", function () {
+  it("provides the SDK instance to descendants", function () {
+    const m = createTestInstance();
+    const Child = defineComponent({
+      setup() {
+        const sdk = useSdk();
+
+        return () => h("p", sdk.translate("greeting", { name: "Ada" }));
+      },
+    });
+
+    const wrapper = mount(MessagevisorProvider, {
+      props: { instance: m },
+      slots: { default: () => h(Child) },
+    });
+
+    expect(wrapper.text()).toEqual("Hello Ada");
+  });
+
+  it("throws a clear error when used without a provider or plugin", function () {
+    const warn = jest.spyOn(console, "warn").mockImplementation(() => undefined);
+    const Child = defineComponent({
+      setup() {
+        useSdk();
+
+        return () => h("p", "never");
+      },
+    });
+
+    expect(() => mount(Child)).toThrow(
+      "useSdk must be used within MessagevisorProvider or createMessagevisorProvider().",
+    );
+    warn.mockRestore();
+  });
+
+  it("lets a subtree provider override the plugin instance", function () {
+    const pluginInstance = createTestInstance();
+    const providerInstance = createTestInstance();
+    providerInstance.setDatafile(nlDatafile);
+    providerInstance.setLocale("nl-NL");
+    const Child = defineComponent({
+      setup() {
+        const sdk = useSdk();
+
+        return () => h("p", sdk.translate("greeting", { name: "Ada" }));
+      },
+    });
+
+    const wrapper = mount(
+      defineComponent({
+        render() {
+          return h(MessagevisorProvider, { instance: providerInstance }, () => h(Child));
+        },
+      }),
+      {
+        global: {
+          plugins: [createMessagevisorProvider({ instance: pluginInstance })],
+        },
+      },
+    );
+
+    expect(wrapper.text()).toEqual("Hallo Ada");
+  });
+
+  it("installs $messagevisor, $m, and $t globals", function () {
+    const m = createTestInstance();
+    const App = defineComponent({
+      render() {
+        return h("div", [
+          h("p", { class: "long" }, this.$messagevisor.translate("greeting", { name: "Ada" })),
+          h(
+            "p",
+            { class: "short" },
+            this.$m.formatNumber(12, { style: "currency", currency: "EUR" }),
+          ),
+          h("p", { class: "t" }, this.$t("greeting", { name: "Grace" })),
+        ]);
+      },
+    });
+
+    const wrapper = mount(App, {
+      global: {
+        plugins: [createMessagevisorProvider({ instance: m })],
+      },
+    });
+
+    expect(wrapper.find(".long").text()).toEqual("Hello Ada");
+    expect(wrapper.find(".short").text()).toContain("€");
+    expect(wrapper.find(".t").text()).toEqual("Hello Grace");
+  });
+});

package/src/MessagevisorProvider.ts

@@ -0,0 +1,48 @@
+import type { Messagevisor } from "@messagevisor/sdk";
+import { defineComponent, Fragment, h, provide, type PropType } from "vue";
+
+import {
+  MessagevisorInjectionKey,
+  type MessagevisorProviderModule,
+  type VueRichTextElementHandler,
+} from "./MessagevisorContext";
+
+export const MessagevisorProvider = defineComponent({
+  name: "MessagevisorProvider",
+  props: {
+    instance: {
+      type: Object as PropType<Messagevisor>,
+      required: true,
+    },
+    defaultRichTextElements: {
+      type: Object as PropType<Record<string, VueRichTextElementHandler>>,
+      default: () => ({}),
+    },
+    wrapRichTextChunksInFragment: {
+      type: Boolean,
+      default: true,
+    },
+    modules: {
+      type: Array as PropType<MessagevisorProviderModule[]>,
+      default: () => [],
+    },
+  },
+  setup(props, { slots }) {
+    provide(MessagevisorInjectionKey, {
+      get instance() {
+        return props.instance;
+      },
+      get defaultRichTextElements() {
+        return props.defaultRichTextElements;
+      },
+      get wrapRichTextChunksInFragment() {
+        return props.wrapRichTextChunksInFragment;
+      },
+      get modules() {
+        return props.modules;
+      },
+    });
+
+    return () => h(Fragment, null, slots.default?.());
+  },
+});