Define gettext functions in an importable module

.eslintrc.js

@@ -60,13 +60,6 @@ module.exports = {
     jest: true,
     browser: true,
   },
-  globals: {
-    gettext: 'readonly',
-    ngettext: 'readonly',
-    get_format: 'readonly',
-    gettext_noop: 'readonly',
-    pluralidx: 'readonly',
-  },
   rules: {
     'no-underscore-dangle': [
       'error',

client/src/components/CommentApp/components/Comment/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import FocusTrap from 'focus-trap-react';
 
+import { gettext } from '../../../../utils/gettext';
 import Icon from '../../../Icon/Icon';
 import type { Store } from '../../state';
 import { Author, Comment, newCommentReply } from '../../state/comments';

client/src/components/CommentApp/components/CommentHeader/index.tsx

@@ -1,4 +1,6 @@
 import React, { FunctionComponent, useState, useEffect, useRef } from 'react';
+
+import { gettext } from '../../../../utils/gettext';
 import Icon from '../../../Icon/Icon';
 import type { Store } from '../../state';
 

client/src/components/CommentApp/components/CommentReply/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { gettext } from '../../../../utils/gettext';
 import type { Store } from '../../state';
 import type { Comment, CommentReply, Author } from '../../state/comments';
 import { updateReply, deleteReply } from '../../actions/comments';

client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx

@@ -1,3 +1,4 @@
+import { gettext } from '../../../utils/gettext';
 import type { CommentApp } from '../../CommentApp/main';
 import type { Annotation } from '../../CommentApp/utils/annotation';
 import type { Comment } from '../../CommentApp/state/comments';

client/src/components/Draftail/EditorFallback/EditorFallback.js

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import { convertFromRaw } from 'draft-js';
 
+import { gettext } from '../../../utils/gettext';
+
 const MAX_EDITOR_RELOADS = 3;
 
 class EditorFallback extends PureComponent {

client/src/components/Draftail/blocks/EmbedBlock.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { gettext } from '../../../utils/gettext';
 import MediaBlock from '../blocks/MediaBlock';
 
 /**

client/src/components/Draftail/blocks/ImageBlock.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { gettext } from '../../../utils/gettext';
 import MediaBlock from '../blocks/MediaBlock';
 
 /**

client/src/components/Draftail/decorators/Document.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { gettext } from '../../../utils/gettext';
 import Icon from '../../Icon/Icon';
 
 import TooltipEntity from '../decorators/TooltipEntity';

client/src/components/Draftail/decorators/Link.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { gettext } from '../../../utils/gettext';
 import Icon from '../../Icon/Icon';
 
 import TooltipEntity from '../decorators/TooltipEntity';

client/src/components/Draftail/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { DraftailEditor } from 'draftail';
 import { Provider } from 'react-redux';
 
+import { gettext } from '../../utils/gettext';
 import Icon from '../Icon/Icon';
 
 export { default as Link } from './decorators/Link';

client/src/components/Draftail/sources/ModalWorkflowSource.js

@@ -3,6 +3,7 @@ import { Component } from 'react';
 import { AtomicBlockUtils, Modifier, RichUtils, EditorState } from 'draft-js';
 import { ENTITY_TYPE, DraftUtils } from 'draftail';
 
+import { gettext } from '../../../utils/gettext';
 import { getSelectionText } from '../DraftUtils';
 
 const $ = global.jQuery;

client/src/components/Explorer/ExplorerHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ADMIN_URLS } from '../../config/wagtailConfig';
 
+import { gettext } from '../../utils/gettext';
 import Button from '../../components/Button/Button';
 import Icon from '../../components/Icon/Icon';
 import { PageState } from './reducers/nodes';

client/src/components/Explorer/ExplorerItem.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { gettext } from '../../utils/gettext';
 import { ADMIN_URLS, LOCALE_NAMES } from '../../config/wagtailConfig';
 import Icon from '../../components/Icon/Icon';
 import Button from '../../components/Button/Button';

client/src/components/Explorer/ExplorerPanel.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import FocusTrap from 'focus-trap-react';
 
+import { gettext } from '../../utils/gettext';
 import { MAX_EXPLORER_PAGES } from '../../config/wagtailConfig';
 
 import Button from '../Button/Button';

client/src/components/Explorer/PageCount.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { gettext } from '../../utils/gettext';
 import { ADMIN_URLS } from '../../config/wagtailConfig';
 import Icon from '../Icon/Icon';
 

client/src/components/LoadingSpinner/LoadingSpinner.js

@@ -1,4 +1,6 @@
 import React from 'react';
+
+import { gettext } from '../../utils/gettext';
 import Icon from '../../components/Icon/Icon';
 
 /**

client/src/components/PageExplorer/PageCount.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { gettext } from '../../utils/gettext';
 import { ADMIN_URLS } from '../../config/wagtailConfig';
 import Icon from '../Icon/Icon';
 

client/src/components/PageExplorer/PageExplorerHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ADMIN_URLS } from '../../config/wagtailConfig';
 
+import { gettext } from '../../utils/gettext';
 import Button from '../../components/Button/Button';
 import Icon from '../../components/Icon/Icon';
 import { PageState } from './reducers/nodes';

client/src/components/PageExplorer/PageExplorerItem.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { gettext } from '../../utils/gettext';
 import { ADMIN_URLS, LOCALE_NAMES } from '../../config/wagtailConfig';
 import Icon from '../../components/Icon/Icon';
 import Button from '../../components/Button/Button';

client/src/components/PageExplorer/PageExplorerPanel.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { gettext } from '../../utils/gettext';
 import { MAX_EXPLORER_PAGES } from '../../config/wagtailConfig';
 
 import LoadingSpinner from '../LoadingSpinner/LoadingSpinner';

client/src/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { gettext } from '../../utils/gettext';
 import Icon from '../Icon/Icon';
 
 // Please keep in sync with $menu-transition-duration variable in `client/scss/settings/_variables.scss`

client/src/components/Sidebar/modules/MainMenu.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+
+import { gettext } from '../../../utils/gettext';
 import Icon from '../../Icon/Icon';
 
 import { LinkMenuItemDefinition } from '../menu/LinkMenuItem';

client/src/components/Sidebar/modules/Search.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { gettext } from '../../../utils/gettext';
 import Icon from '../../Icon/Icon';
 import { ModuleDefinition, SIDEBAR_TRANSITION_DURATION } from '../Sidebar';
 

client/src/components/Sidebar/modules/WagtailBranding.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+
+import { gettext } from '../../../utils/gettext';
 import { ModuleDefinition } from '../Sidebar';
 import WagtailLogo from './WagtailLogo';
 

client/src/custom.d.ts

@@ -30,37 +30,4 @@ declare global {
     }[];
   }
   const wagtailConfig: WagtailConfig;
-
-  // Django i18n utilities
-
-  // https://docs.djangoproject.com/en/3.1/topics/i18n/translation/#gettext
-  function gettext(text: string): string;
-
-  // https://docs.djangoproject.com/en/3.1/topics/i18n/translation/#ngettext
-  function ngettext(singular: string, plural: string, count: number): string;
-
-  // https://docs.djangoproject.com/en/3.1/topics/i18n/translation/#get-format
-  type FormatType =
-    | 'DATE_FORMAT'
-    | 'DATE_INPUT_FORMATS'
-    | 'DATETIME_FORMAT'
-    | 'DATETIME_INPUT_FORMATS'
-    | 'DECIMAL_SEPARATOR'
-    | 'FIRST_DAY_OF_WEEK'
-    | 'MONTH_DAY_FORMAT'
-    | 'NUMBER_GROUPING'
-    | 'SHORT_DATE_FORMAT'
-    | 'SHORT_DATETIME_FORMAT'
-    | 'THOUSAND_SEPARATOR'
-    | 'TIME_FORMAT'
-    | 'TIME_INPUT_FORMATS'
-    | 'YEAR_MONTH_FORMAT';
-
-  function get_format(formatType: FormatType): string;
-
-  // https://docs.djangoproject.com/en/3.1/topics/i18n/translation/#gettext_noop
-  function gettext_noop(text: string): string;
-
-  // https://docs.djangoproject.com/en/3.1/topics/i18n/translation/#pluralidx
-  function pluralidx(count: number): boolean;
 }

client/src/entrypoints/admin/comments.js

@@ -1,3 +1,4 @@
+import { gettext } from '../../utils/gettext';
 import { initCommentApp } from '../../components/CommentApp/main';
 
 const KEYCODE_M = 77;

client/src/entrypoints/admin/modal-workflow.js

@@ -5,6 +5,8 @@ possibly after several navigation steps
 
 import $ from 'jquery';
 
+import { gettext } from '../../utils/gettext';
+
 /* eslint-disable */
 function ModalWorkflow(opts) {
   /* options passed in 'opts':

client/src/utils/gettext.ts

@@ -0,0 +1,70 @@
+// https://docs.djangoproject.com/en/3.1/topics/i18n/translation/#gettext
+export function gettext(text: string): string {
+  const djangoGettext = (window as any).django?.gettext;
+
+  if (djangoGettext) {
+    return djangoGettext(text);
+  }
+
+  return text;
+}
+
+// https://docs.djangoproject.com/en/3.1/topics/i18n/translation/#ngettext
+export function ngettext(text: string): string {
+  const djangoNgettext = (window as any).django?.ngettext;
+
+  if (djangoNgettext) {
+    return djangoNgettext(text);
+  }
+
+  return text;
+}
+
+// https://docs.djangoproject.com/en/3.1/topics/i18n/translation/#get-format
+export type FormatType =
+  | 'DATE_FORMAT'
+  | 'DATE_INPUT_FORMATS'
+  | 'DATETIME_FORMAT'
+  | 'DATETIME_INPUT_FORMATS'
+  | 'DECIMAL_SEPARATOR'
+  | 'FIRST_DAY_OF_WEEK'
+  | 'MONTH_DAY_FORMAT'
+  | 'NUMBER_GROUPING'
+  | 'SHORT_DATE_FORMAT'
+  | 'SHORT_DATETIME_FORMAT'
+  | 'THOUSAND_SEPARATOR'
+  | 'TIME_FORMAT'
+  | 'TIME_INPUT_FORMATS'
+  | 'YEAR_MONTH_FORMAT';
+
+export function getFormat(formatType: FormatType): string {
+  const djangoGetFormat = (window as any).django?.get_format;
+
+  if (djangoGetFormat) {
+    return djangoGetFormat(formatType);
+  }
+
+  return '';
+}
+
+// https://docs.djangoproject.com/en/3.1/topics/i18n/translation/#gettext_noop
+export function gettextNoop(text: string): string {
+  const djangoGettextNoop = (window as any).django?.gettext_noop;
+
+  if (djangoGettextNoop) {
+    return djangoGettextNoop(text);
+  }
+
+  return text;
+}
+
+// https://docs.djangoproject.com/en/3.1/topics/i18n/translation/#pluralidx
+export function pluralIdx(count: number): boolean {
+  const djangoPluralIdx = (window as any).django?.pluralidx;
+
+  if (djangoPluralIdx) {
+    return djangoPluralIdx(count);
+  }
+
+  return false;
+}

client/tests/stubs.js

@@ -51,7 +51,3 @@ global.IMAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = { type: 'image' };
 global.PAGE_CHOOSER_MODAL_ONLOAD_HANDLERS = { type: 'page' };
 global.EMBED_CHOOSER_MODAL_ONLOAD_HANDLERS = { type: 'embed' };
 global.DOCUMENT_CHOOSER_MODAL_ONLOAD_HANDLERS = { type: 'document' };
-
-global.gettext = (text) => text;
-global.ngettext = (text, ptext, count) => (count === 1 ? text : ptext);
-global.gettext_noop = (text) => text;