@messagevisor/react 0.0.1 → 0.1.0

package/lib/useRichText.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { MessagePrimitiveValue, MessageValue, MessagevisorTranslationSource } from "@messagevisor/sdk";
+import type { MessageKey } from "@messagevisor/types";
+export type ReactMessageValues = Record<string, MessageValue<React.ReactNode>>;
+export type ReactRichMessageValues = Record<string, MessagePrimitiveValue | ((chunks: React.ReactNode[]) => React.ReactNode)>;
+export declare function useRichText(): {
+    mergeValues: (values?: ReactMessageValues, message?: string) => ReactMessageValues;
+    wrapResult: <T>(result: T) => React.JSX.Element | T;
+    runModules: <TTranslation>(translation: TTranslation, payload: {
+        source: MessagevisorTranslationSource;
+        messageKey?: MessageKey;
+    }) => string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | Iterable<React.ReactNode>> | TTranslation;
+};

package/lib/useRichText.js

@@ -0,0 +1,112 @@
+"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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichText = useRichText;
+var React = __importStar(require("react"));
+var MessagevisorContext_1 = require("./MessagevisorContext");
+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 useRichText() {
+    var context = React.useContext(MessagevisorContext_1.MessagevisorContext);
+    if (!context) {
+        throw new Error("useSdk must be used within MessagevisorProvider.");
+    }
+    return React.useMemo(function () {
+        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 (React.createElement(React.Fragment, null, result.map(function (chunk, index) { return (React.createElement(React.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,
+            wrapResult: wrapResult,
+            runModules: runModules,
+        };
+    }, [
+        context.modules,
+        context.instance,
+        context.defaultRichTextElements,
+        context.wrapRichTextChunksInFragment,
+    ]);
+}
+//# sourceMappingURL=useRichText.js.map

package/lib/useRichText.js.map

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

package/lib/useSdk.d.ts

@@ -0,0 +1,2 @@
+import type { Messagevisor } from "@messagevisor/sdk";
+export declare function useSdk(): Messagevisor;

package/lib/useSdk.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSdk = useSdk;
+var React = __importStar(require("react"));
+var MessagevisorContext_1 = require("./MessagevisorContext");
+function useSdk() {
+    var context = React.useContext(MessagevisorContext_1.MessagevisorContext);
+    if (!context) {
+        throw new Error("useSdk must be used within MessagevisorProvider.");
+    }
+    return context.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQC;AAdD,2CAA+B;AAI/B,6DAA4D;AAE5D,SAAgB,MAAM;IACpB,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,yCAAmB,CAAC,CAAC;IAEtD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACtE,CAAC;IAED,OAAO,OAAO,CAAC,QAAQ,CAAC;AAC1B,CAAC"}

package/package.json

@@ -1,15 +1,53 @@
 {
-	"name": "@messagevisor/react",
-	"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/react",
+  "version": "0.1.0",
+  "description": "React 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": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "gitHead": "555119ab05473127a658ed0cfb6a2743ea3a6db8"
 }

package/src/MessagevisorContext.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import type { Messagevisor, MessagevisorTranslationSource } from "@messagevisor/sdk";
+import type { MessageKey } from "@messagevisor/types";
+
+export type RichTextElementHandler = (chunks: React.ReactNode[]) => React.ReactNode;
+
+export interface MessagevisorProviderModule {
+  name?: string;
+  transform?: (payload: {
+    translation: React.ReactNode;
+    locale: string;
+    source: MessagevisorTranslationSource;
+    messageKey?: MessageKey;
+  }) => React.ReactNode | void;
+}
+
+export interface MessagevisorReactContextValue {
+  instance: Messagevisor;
+  defaultRichTextElements: Record<string, RichTextElementHandler>;
+  wrapRichTextChunksInFragment: boolean;
+  modules: MessagevisorProviderModule[];
+  textComponent?: React.ElementType;
+}
+
+export const MessagevisorContext = React.createContext<MessagevisorReactContextValue | undefined>(
+  undefined,
+);

package/src/MessagevisorProvider.spec.tsx

@@ -0,0 +1,29 @@
+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("MessagevisorProvider", function () {
+  it("supplies the same instance to descendants", function () {
+    const instance = createTestInstance();
+    let seen: ReturnType<typeof useSdk> | undefined;
+
+    function TestComponent() {
+      seen = useSdk();
+
+      return <p>ready</p>;
+    }
+
+    render(
+      <MessagevisorProvider instance={instance}>
+        <TestComponent />
+      </MessagevisorProvider>,
+    );
+
+    expect(screen.getByText("ready")).toBeInTheDocument();
+    expect(seen).toBe(instance);
+  });
+});

package/src/MessagevisorProvider.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import type { Messagevisor } from "@messagevisor/sdk";
+
+import {
+  MessagevisorContext,
+  type MessagevisorProviderModule,
+  type RichTextElementHandler,
+} from "./MessagevisorContext";
+
+export interface MessagevisorProviderProps {
+  instance: Messagevisor;
+  children: React.ReactNode;
+  defaultRichTextElements?: Record<string, RichTextElementHandler>;
+  wrapRichTextChunksInFragment?: boolean;
+  modules?: MessagevisorProviderModule[];
+  textComponent?: React.ElementType;
+}
+
+export function MessagevisorProvider(props: MessagevisorProviderProps) {
+  const value = React.useMemo(
+    () => ({
+      instance: props.instance,
+      defaultRichTextElements: props.defaultRichTextElements || {},
+      wrapRichTextChunksInFragment: props.wrapRichTextChunksInFragment ?? true,
+      modules: props.modules || [],
+      textComponent: props.textComponent,
+    }),
+    [
+      props.instance,
+      props.defaultRichTextElements,
+      props.wrapRichTextChunksInFragment,
+      props.modules,
+      props.textComponent,
+    ],
+  );
+
+  return (
+    <MessagevisorContext.Provider value={value}>{props.children}</MessagevisorContext.Provider>
+  );
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./MessagevisorContext";
+export * from "./MessagevisorProvider";
+export * from "./useMessagevisor";
+export * from "./useMessagevisorSnapshot";
+export * from "./useReactiveMessagevisor";
+export * from "./useSdk";

package/src/testUtils.ts

@@ -0,0 +1,72 @@
+import type { DatafileContent } from "@messagevisor/types";
+import { createMessagevisor } from "@messagevisor/sdk";
+import { createICUModule } from "@messagevisor/module-icu";
+
+export const datafile: DatafileContent = {
+  schemaVersion: "1",
+  messagevisorVersion: "0.0.1",
+  revision: "1",
+  target: "web",
+  locale: "en-US",
+  direction: "ltr",
+  formats: {
+    number: {
+      money: { style: "currency", currency: "USD", currencyDisplay: "symbol" },
+    },
+    date: {
+      short: { year: "2-digit", month: "numeric", day: "numeric" },
+    },
+    time: {
+      short: { hour: "numeric", minute: "2-digit", timeZone: "UTC" },
+    },
+    dateTimeRange: {
+      short: { month: "short", day: "numeric", timeZone: "UTC" },
+    },
+    relative: {
+      short: { numeric: "auto", style: "short" },
+    },
+  },
+  segments: {
+    web: {
+      conditions: [{ attribute: "platform", operator: "equals", value: "web" }],
+    },
+  },
+  messages: {
+    greeting: {
+      overrides: [
+        {
+          key: "web",
+          segments: "web",
+          translation: "Hello web {name}",
+        },
+      ],
+    },
+    total: {},
+    richTerms: {},
+    richInline: {},
+    plainLink: {},
+  },
+  translations: {
+    greeting: "Hello {name}",
+    total: "Total: {amount, number, money}",
+    richTerms: "Read our <link>terms</link> for <strong>{product}</strong>.",
+    richInline: "Inline <strong>{name}</strong>.",
+    plainLink: "Use {link}",
+  },
+};
+
+export function createTestInstance() {
+  return createMessagevisor({
+    datafile,
+    timeZone: "UTC",
+    modules: [createICUModule()],
+  });
+}
+
+export function createRichTestInstance() {
+  return createMessagevisor({
+    datafile,
+    timeZone: "UTC",
+    modules: [createICUModule({ ignoreTags: false })],
+  });
+}