feat: getRawMessage option

jungpaeng · Oct 3, 2023 · 308e510 · 308e510
1 parent 51c2d4f
commit 308e510
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/packages/core/src/use-translation.ts b/packages/core/src/use-translation.ts
@@ -109,7 +109,11 @@ export function useTranslation(namespace?: string) {
   }, [allMessage, onError, namespace]);
 
   return React.useCallback(
-    (key: string, value?: TranslationValue, format?: Partial<Formats>) => {
+    (
+      key: string,
+      value?: TranslationValue & { __rawValue?: boolean },
+      format?: Partial<Formats>,
+    ) => {
       const cachedFormatByLocale = cachedFormatByLocaleRef.current;
 
       if (messageOrError instanceof IntlError) {
@@ -150,6 +154,10 @@ export function useTranslation(namespace?: string) {
           );
         }
 
+        if (value?.__rawValue === true) {
+          return message;
+        }
+
         try {
           // IntlMessageFormat을 실행시키며, 실패시 INVALID_MESSAGE를 반환합니다.
           messageFormat = new IntlMessageFormat(

diff --git a/packages/core/test/use-translation.test.tsx b/packages/core/test/use-translation.test.tsx
@@ -101,6 +101,23 @@ describe('use-translation', () => {
     screen.getByText("It's my cat's 1st birthday!");
   });
 
+  it('can return raw messages without processing them', () => {
+    function Component() {
+      const t = useTranslation();
+      return (
+        <span dangerouslySetInnerHTML={{ __html: String(t('message', { __rawValue: true })) }} />
+      );
+    }
+
+    const { container } = render(
+      <IntlProvider locale="en" message={{ message: '<a href="/test">Test</a><p>{hello}</p>' }}>
+        <Component />
+      </IntlProvider>,
+    );
+
+    expect(container.innerHTML).toBe('<span><a href="/test">Test</a><p>{hello}</p></span>');
+  });
+
   it('should be print rich text', () => {
     const { container } = renderMessage(
       'Our price is <boldThis>{price, number, ::currency/USD precision-integer}</boldThis> with <link>{pct, number, ::percent} discount</link>',