i18n: use automatic type inference of translation keys

Finally figured out a way to make typescript strongly type translation
keys so we can avoid the tedium of creating enums of translation keys.
This commit is contained in:
David Lechner
2022-07-22 13:48:50 -05:00
parent 3e10096b6e
commit d6df128860
80 changed files with 402 additions and 875 deletions
@@ -6,7 +6,7 @@ import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { useSelector } from '../../reducers';
import { deleteFileAlertDidAccept, deleteFileAlertDidCancel } from './actions';
import { I18nId, useI18n } from './i18n';
import { useI18n } from './i18n';
const DeleteFileAlert: React.VoidFunctionComponent = () => {
const { isOpen, fileName } = useSelector((s) => s.explorer.deleteFileAlert);
@@ -37,13 +37,13 @@ const DeleteFileAlert: React.VoidFunctionComponent = () => {
isOpen={isOpen}
icon="trash"
intent={Intent.DANGER}
confirmButtonText={i18n.translate(I18nId.Accept)}
cancelButtonText={i18n.translate(I18nId.Cancel)}
confirmButtonText={i18n.translate('action.accept')}
cancelButtonText={i18n.translate('action.cancel')}
onConfirm={() => dispatch(deleteFileAlertDidAccept())}
onCancel={() => dispatch(deleteFileAlertDidCancel())}
onOpened={handleOpened}
>
{i18n.translate(I18nId.Message, { fileName })}
{i18n.translate('message', { fileName })}
</Alert>
);
};
-12
View File
@@ -1,12 +0,0 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
import { lookup } from '../../../test';
import { I18nId } from './i18n';
import en from './translations/en.json';
describe('Ensure .json file has matches for I18nId', () => {
test.each(Object.values(I18nId))('%s', (id) => {
expect(lookup(en, id)).toBeDefined();
});
});
+4 -8
View File
@@ -1,16 +1,12 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
import { I18n, useI18n as useShopifyI18n } from '@shopify/react-i18n';
import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
import type { TypedI18n } from '../../i18n';
import type translations from './translations/en.json';
export function useI18n(): I18n {
export function useI18n(): TypedI18n<typeof translations> {
// istanbul ignore next: babel-loader rewrites this line
const [i18n] = useShopifyI18n();
return i18n;
}
export enum I18nId {
Accept = 'action.accept',
Cancel = 'action.cancel',
Message = 'message',
}