i18n: use automatic type inference of translation keys

src/about/AboutDialog.tsx

@@ -16,7 +16,7 @@ import {
 } from '../app/constants';
 import LicenseDialog from '../licenses/LicenseDialog';
 import ExternalLinkIcon from '../utils/ExternalLinkIcon';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 import './about.scss';
 
@@ -32,7 +32,7 @@ const AboutDialog: React.VoidFunctionComponent<AboutDialogProps> = ({
 
     return (
         <Dialog
-            title={i18n.translate(I18nId.Title, { appName })}
+            title={i18n.translate('title', { appName })}
             isOpen={isOpen}
             onClose={onClose}
         >
@@ -41,7 +41,7 @@ const AboutDialog: React.VoidFunctionComponent<AboutDialogProps> = ({
                     <img src="favicon.ico" />
                 </div>
                 <p>
-                    <strong>{i18n.translate(I18nId.Description)}</strong>
+                    <strong>{i18n.translate('description')}</strong>
                 </p>
                 <p>{`v${firmwareVersion} (${appName} v${appVersion})`}</p>
                 <p>{pybricksCopyright}</p>
@@ -52,14 +52,14 @@ const AboutDialog: React.VoidFunctionComponent<AboutDialogProps> = ({
                 </p>
                 <div className={Classes.DIALOG_FOOTER_ACTIONS}>
                     <Button onClick={() => setIsLicenseDialogOpen(true)}>
-                        {i18n.translate(I18nId.LicenseButtonLabel)}
+                        {i18n.translate('licenseButton.label')}
                     </Button>
                     <AnchorButton href={changelogUrl} target="blank_">
-                        {i18n.translate(I18nId.ChangelogButtonLabel)}
+                        {i18n.translate('changelogButton.label')}
                         <ExternalLinkIcon />
                     </AnchorButton>
                     <AnchorButton href={pybricksWebsiteUrl} target="blank_">
-                        {i18n.translate(I18nId.WebsiteButtonLabel)}
+                        {i18n.translate('websiteButton.label')}
                         <ExternalLinkIcon />
                     </AnchorButton>
                 </div>

src/about/i18n.ts

@@ -1,20 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2022 The Pybricks Authors
 
-// About dialog translation keys.
+import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import type { TypedI18n } from '../i18n';
+import type translations from './translations/en.json';
 
-import { I18n, useI18n as useShopifyI18n } from '@shopify/react-i18n';
-
-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 {
-    Title = 'title',
-    Description = 'description',
-    LicenseButtonLabel = 'licenseButton.label',
-    ChangelogButtonLabel = 'changelogButton.label',
-    WebsiteButtonLabel = 'websiteButton.label',
-}

src/activities/Activities.tsx

@@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { useLocalStorage } from 'usehooks-ts';
 import Explorer from '../explorer/Explorer';
 import Settings from '../settings/Settings';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 /** Indicates the selected activity. */
 export enum Activity {
@@ -101,7 +101,7 @@ const Activities: React.VoidFunctionComponent = () => {
 
     return (
         <Tabs
-            aria-label={i18n.translate(I18nId.Title)}
+            aria-label={i18n.translate('title')}
             vertical={true}
             className="pb-activities"
             selectedTabId={selectedActivity}
@@ -110,12 +110,12 @@ const Activities: React.VoidFunctionComponent = () => {
             ref={tabsRef}
         >
             <Tab
-                aria-label={i18n.translate(I18nId.Explorer)}
+                aria-label={i18n.translate('explorer')}
                 className="pb-activities-tablist-tab"
                 id={Activity.Explorer}
                 title={
                     <Icon
-                        htmlTitle={i18n.translate(I18nId.Explorer)}
+                        htmlTitle={i18n.translate('explorer')}
                         size={35}
                         icon="document"
                     />
@@ -125,15 +125,11 @@ const Activities: React.VoidFunctionComponent = () => {
                 onMouseDown={(e) => e.stopPropagation()}
             />
             <Tab
-                aria-label={i18n.translate(I18nId.Settings)}
+                aria-label={i18n.translate('settings')}
                 className="pb-activities-tablist-tab"
                 id={Activity.Settings}
                 title={
-                    <Icon
-                        htmlTitle={i18n.translate(I18nId.Settings)}
-                        size={35}
-                        icon="cog"
-                    />
+                    <Icon htmlTitle={i18n.translate('settings')} size={35} icon="cog" />
                 }
                 panel={<Settings />}
                 panelClassName="pb-activities-tabview"

src/activities/i18n.ts

@@ -1,18 +1,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
-//
-// Explorer translation keys.
 
-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 {
-    Title = 'title',
-    Explorer = 'explorer',
-    Settings = 'settings',
-}

src/alerts/UnexpectedErrorAlert.tsx

@@ -6,7 +6,7 @@ import { AnchorButton, Button, ButtonGroup, Collapse, Intent } from '@blueprintj
 import React, { useState } from 'react';
 import { useId } from 'react-aria';
 import { CreateToast } from '../i18nToaster';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 type UnexpectedErrorAlertProps = {
     error: Error;
@@ -21,7 +21,7 @@ const UnexpectedErrorAlert: React.VoidFunctionComponent<UnexpectedErrorAlertProp
 
     return (
         <>
-            <p>{i18n.translate(I18nId.Message, { errorMessage: error.message })}</p>
+            <p>{i18n.translate('message', { errorMessage: error.message })}</p>
             <span>
                 <Button
                     aria-labelledby={labelId}
@@ -30,7 +30,7 @@ const UnexpectedErrorAlert: React.VoidFunctionComponent<UnexpectedErrorAlertProp
                     icon={isExpanded ? 'chevron-down' : 'chevron-right'}
                     onClick={() => setIsExpanded((v) => !v)}
                 />
-                <span id={labelId}>{i18n.translate(I18nId.TechnicalInfo)}</span>
+                <span id={labelId}>{i18n.translate('technicalInfo')}</span>
             </span>
             <Collapse isOpen={isExpanded}>
                 <pre className="pb-alerts-stack-trace">{error.stack}</pre>
@@ -46,7 +46,7 @@ const UnexpectedErrorAlert: React.VoidFunctionComponent<UnexpectedErrorAlertProp
                             )
                         }
                     >
-                        {i18n.translate(I18nId.CopyErrorMessage)}
+                        {i18n.translate('copyErrorMessage')}
                     </Button>
                     <AnchorButton
                         intent={Intent.DANGER}
@@ -56,7 +56,7 @@ const UnexpectedErrorAlert: React.VoidFunctionComponent<UnexpectedErrorAlertProp
                         )}+${encodeURIComponent(error.message)}`}
                         target="_blank"
                     >
-                        {i18n.translate(I18nId.ReportBug)}
+                        {i18n.translate('reportBug')}
                     </AnchorButton>
                 </ButtonGroup>
             </div>

src/alerts/i18n.ts

@@ -1,17 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// 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 {
-    Message = 'message',
-    TechnicalInfo = 'technicalInfo',
-    CopyErrorMessage = 'copyErrorMessage',
-    ReportBug = 'reportBug',
-}

src/ble/alerts/BluetoothNotAvailable.tsx

@@ -4,14 +4,14 @@
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import { CreateToast } from '../../i18nToaster';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 const BluetoothNotAvailable: React.VoidFunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>
-            <p>{i18n.translate(I18nId.BluetoothNotAvailableMessage)}</p>
-            <p>{i18n.translate(I18nId.BluetoothNotAvailableSuggestion)}</p>
+            <p>{i18n.translate('bluetoothNotAvailable.message')}</p>
+            <p>{i18n.translate('bluetoothNotAvailable.suggestion')}</p>
         </>
     );
 };

src/ble/alerts/MissingService.tsx

@@ -4,7 +4,7 @@
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import { CreateToast } from '../../i18nToaster';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 type MissingServiceProps = {
     serviceName: string;
@@ -18,9 +18,9 @@ const MissingService: React.VoidFunctionComponent<MissingServiceProps> = ({
     const i18n = useI18n();
     return (
         <>
-            <p>{i18n.translate(I18nId.MissingServiceMessage, { serviceName })}</p>
-            <p>{i18n.translate(I18nId.MissingServiceSuggestion1)}</p>
-            <p>{i18n.translate(I18nId.MissingServiceSuggestion2, { hubName })}</p>
+            <p>{i18n.translate('missingService.message', { serviceName })}</p>
+            <p>{i18n.translate('missingService.suggestion1')}</p>
+            <p>{i18n.translate('missingService.suggestion2', { hubName })}</p>
         </>
     );
 };

src/ble/alerts/NoGatt.tsx

@@ -4,11 +4,11 @@
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import { CreateToast } from '../../i18nToaster';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 const NoGatt: React.VoidFunctionComponent = () => {
     const i18n = useI18n();
-    return <p>{i18n.translate(I18nId.NoGattMessage)}</p>;
+    return <p>{i18n.translate('noGatt.message')}</p>;
 };
 
 export const noGatt: CreateToast = (onAction) => {

src/ble/alerts/NoHub.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { appName, pybricksBluetoothTroubleshootingUrl } from '../../app/constants';
 import { CreateToast } from '../../i18nToaster';
 import ExternalLinkIcon from '../../utils/ExternalLinkIcon';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 type NoHubProps = {
     onFlashFirmware: () => void;
@@ -18,28 +18,26 @@ const NoHub: React.VoidFunctionComponent<NoHubProps> = ({ onFlashFirmware }) =>
 
     return (
         <>
-            <p>{i18n.translate(I18nId.NoHubMessage)}</p>
+            <p>{i18n.translate('noHub.message')}</p>
             <p>
-                {i18n.translate(I18nId.NoHubSuggestion1, {
+                {i18n.translate('noHub.suggestion1', {
                     appName,
                     buttonName: (
-                        <strong>
-                            {i18n.translate(I18nId.NoHubFlashFirmwareButton)}
-                        </strong>
+                        <strong>{i18n.translate('noHub.flashFirmwareButton')}</strong>
                     ),
                 })}
             </p>
-            <p>{i18n.translate(I18nId.NoHubSuggestion2)}</p>
+            <p>{i18n.translate('noHub.suggestion2')}</p>
             <div className="pb-ble-alerts-buttons">
                 <Button icon="download" onClick={onFlashFirmware}>
-                    {i18n.translate(I18nId.NoHubFlashFirmwareButton)}
+                    {i18n.translate('noHub.flashFirmwareButton')}
                 </Button>
                 <AnchorButton
                     icon="help"
                     href={pybricksBluetoothTroubleshootingUrl}
                     target="_blank"
                 >
-                    {i18n.translate(I18nId.NoHubTroubleshootButton)}
+                    {i18n.translate('noHub.troubleshootButton')}
                     <ExternalLinkIcon />
                 </AnchorButton>
             </div>

src/ble/alerts/NoWebBluetooth.tsx

@@ -5,19 +5,19 @@ import { Button, Intent } from '@blueprintjs/core';
 import React from 'react';
 import { CreateToast } from '../../i18nToaster';
 import { isIOS, isLinux } from '../../utils/os';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 const NoWebBluetooth: React.VoidFunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>
-            <p>{i18n.translate(I18nId.NoWebBluetoothMessage)}</p>
+            <p>{i18n.translate('noWebBluetooth.message')}</p>
             {!isLinux() && !isIOS() && (
-                <p>{i18n.translate(I18nId.NoWebBluetoothSuggestion)}</p>
+                <p>{i18n.translate('noWebBluetooth.suggestion')}</p>
             )}
             {isLinux() && (
                 <>
-                    <p>{i18n.translate(I18nId.NoWebBluetoothLinux)}</p>
+                    <p>{i18n.translate('noWebBluetooth.linux')}</p>
                     <p>
                         <code>
                             chrome://flags/#enable-experimental-web-platform-features

src/ble/alerts/OldFirmware.tsx

@@ -5,7 +5,7 @@ import './index.scss';
 import { Button, Intent } from '@blueprintjs/core';
 import React from 'react';
 import { CreateToast } from '../../i18nToaster';
-import { I18nId, useI18n } from './i18n';
+import { useI18n } from './i18n';
 
 type OldFirmwareProps = {
     onFlashFirmware: () => void;
@@ -18,10 +18,10 @@ const OldFirmware: React.VoidFunctionComponent<OldFirmwareProps> = ({
 
     return (
         <>
-            <p>{i18n.translate(I18nId.OldFirmwareMessage)}</p>
+            <p>{i18n.translate('oldFirmware.message')}</p>
             <div className="pb-ble-alerts-buttons">
                 <Button icon="download" onClick={onFlashFirmware}>
-                    {i18n.translate(I18nId.OldFirmwareFlashFirmwareLabel)}
+                    {i18n.translate('oldFirmware.flashFirmware.label')}
                 </Button>
             </div>
         </>