feat: Warn for invalid namespace keys (#106)

packages/use-intl/src/IntlError.tsx

@@ -3,6 +3,7 @@ export enum IntlErrorCode {
   MISSING_FORMAT = 'MISSING_FORMAT',
   INSUFFICIENT_PATH = 'INSUFFICIENT_PATH',
   INVALID_MESSAGE = 'INVALID_MESSAGE',
+  INVALID_KEY = 'INVALID_KEY',
   FORMATTING_ERROR = 'FORMATTING_ERROR'
 }
 

packages/use-intl/src/IntlProvider.tsx

@@ -1,8 +1,9 @@
-import React, {ReactNode} from 'react';
+import React, {ReactNode, useEffect} from 'react';
 import AbstractIntlMessages from './AbstractIntlMessages';
 import Formats from './Formats';
 import IntlContext from './IntlContext';
 import {RichTranslationValues} from './TranslationValues';
+import validateMessages from './validateMessages';
 import {IntlError} from '.';
 
 type Props = {
@@ -64,11 +65,21 @@ export default function IntlProvider({
   children,
   onError = defaultOnError,
   getMessageFallback = defaultGetMessageFallback,
+  messages,
   ...contextValues
 }: Props) {
+  if (__DEV__) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (messages) {
+        validateMessages(messages, onError);
+      }
+    }, [messages, onError]);
+  }
+
   return (
     <IntlContext.Provider
-      value={{...contextValues, onError, getMessageFallback}}
+      value={{...contextValues, messages, onError, getMessageFallback}}
     >
       {children}
     </IntlContext.Provider>

packages/use-intl/src/validateMessages.tsx

@@ -0,0 +1,42 @@
+import AbstractIntlMessages from './AbstractIntlMessages';
+import IntlError, {IntlErrorCode} from './IntlError';
+
+function validateMessagesSegment(
+  messages: AbstractIntlMessages,
+  invalidKeyLabels: Array<string>,
+  parentPath?: string
+) {
+  Object.entries(messages).forEach(([key, messageOrMessages]) => {
+    if (key.includes('.')) {
+      let keyLabel = key;
+      if (parentPath) keyLabel += ` (at ${parentPath})`;
+      invalidKeyLabels.push(keyLabel);
+    }
+    if (typeof messageOrMessages === 'object') {
+      validateMessagesSegment(
+        messageOrMessages,
+        invalidKeyLabels,
+        [parentPath, key].filter((part) => part != null).join('.')
+      );
+    }
+  });
+}
+
+export default function validateMessages(
+  messages: AbstractIntlMessages,
+  onError: (error: IntlError) => void
+) {
+  const invalidKeyLabels: Array<string> = [];
+  validateMessagesSegment(messages, invalidKeyLabels);
+
+  if (invalidKeyLabels.length > 0) {
+    onError(
+      new IntlError(
+        IntlErrorCode.INVALID_KEY,
+        `Namespace keys can not contain the character "." as this is used to express nesting. Please remove it or replace it with another character.\n\nInvalid ${
+          invalidKeyLabels.length === 1 ? 'key' : 'keys'
+        }: ${invalidKeyLabels.join(', ')}`
+      )
+    );
+  }
+}

packages/use-intl/test/useLocale.test.tsx

@@ -2,6 +2,8 @@ import {render, screen} from '@testing-library/react';
 import React from 'react';
 import {IntlProvider, useLocale} from '../src';
 
+(global as any).__DEV__ = true;
+
 it('returns the current locale', () => {
   function Component() {
     return <>{useLocale()}</>;

packages/use-intl/test/useTimeZone.test.tsx

@@ -2,6 +2,8 @@ import {render, screen} from '@testing-library/react';
 import React from 'react';
 import {IntlProvider, useTimeZone} from '../src';
 
+(global as any).__DEV__ = true;
+
 it('returns the time zone when it is configured', () => {
   function Component() {
     return <>{useTimeZone()}</>;

packages/use-intl/test/useTranslations.test.tsx

@@ -545,6 +545,26 @@ describe('error handling', () => {
     expect(error.code).toBe(IntlErrorCode.INVALID_MESSAGE);
     screen.getByText('rich');
   });
+
+  it('warns for invalid namespace keys', () => {
+    const onError = jest.fn();
+
+    render(
+      <IntlProvider
+        locale="en"
+        messages={{'a.b': {'c.d': 'ABCD', e: 'E'}, f: {g: {'h.j': 'FGHJ'}}}}
+        onError={onError}
+      >
+        <span />
+      </IntlProvider>
+    );
+
+    const error: IntlError = onError.mock.calls[0][0];
+    expect(error.message).toBe(
+      'INVALID_KEY: Namespace keys can not contain the character "." as this is used to express nesting. Please remove it or replace it with another character.\n\nInvalid keys: a.b, c.d (at a.b), h.j (at f.g)'
+    );
+    expect(error.code).toBe(IntlErrorCode.INVALID_KEY);
+  });
 });
 
 describe('global formats', () => {