add developer settings with pseudolocalization

This is currently broken due to https://github.com/Shopify/quilt/pull/1725

src/components/SettingsDrawer.tsx

@@ -19,6 +19,7 @@ import { Action, Dispatch } from '../actions';
 import { closeSettings, openAboutDialog } from '../actions/app';
 import { setBoolean } from '../actions/settings';
 import { RootState } from '../reducers';
+import { pseudolocalize } from '../settings/i18n';
 import {
     pybricksBugReportsUrl,
     pybricksGitterUrl,
@@ -206,6 +207,15 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                 <AboutDialog />
                             </ButtonGroup>
                         </FormGroup>
+                        {process.env.NODE_ENV === 'development' && (
+                            <FormGroup label="Developer">
+                                <Switch
+                                    checked={i18n.pseudolocalize !== false}
+                                    onClick={() => pseudolocalize(!i18n.pseudolocalize)}
+                                    label="Pseudolocalize"
+                                />
+                            </FormGroup>
+                        )}
                     </div>
                 </div>
             </Drawer>

src/index.tsx

@@ -2,7 +2,7 @@
 // Copyright (c) 2020-2021 The Pybricks Authors
 
 import { Classes, ResizeSensor } from '@blueprintjs/core';
-import { I18nContext, I18nManager } from '@shopify/react-i18n';
+import { I18nContext } from '@shopify/react-i18n';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
@@ -17,13 +17,9 @@ import rootReducer from './reducers';
 import reportWebVitals from './reportWebVitals';
 import rootSaga from './sagas';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import { i18nManager } from './settings/i18n';
 
-const i18n = new I18nManager({
-    locale: 'en',
-    onError: (err): void => console.error(err),
-});
-
-const toaster = I18nToaster.create(i18n);
+const toaster = I18nToaster.create(i18nManager);
 
 const sagaMiddleware = createSagaMiddleware({ context: { notification: { toaster } } });
 // TODO: add runtime option or filter - logger affects firmware flash performance
@@ -58,7 +54,7 @@ sagaMiddleware.run(rootSaga);
 ReactDOM.render(
     <React.StrictMode>
         <Provider store={store}>
-            <I18nContext.Provider value={i18n}>
+            <I18nContext.Provider value={i18nManager}>
                 {/* This is a hack for correctly sizing to view height on mobile when not running in fullscreen mode. */}
                 {/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */}
                 <ResizeSensor

src/settings/i18n.ts

@@ -0,0 +1,17 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2020-2021 The Pybricks Authors
+
+import { I18nManager } from '@shopify/react-i18n';
+
+// TODO: add locale setting and use browser preferred language as default
+
+/** The global i18n manager. */
+export const i18nManager = new I18nManager({
+    locale: 'en',
+    onError: (err): void => console.error(err),
+});
+
+/** Enables or disables pseudolocalization for development. */
+export function pseudolocalize(pseudolocalize: boolean): void {
+    i18nManager.update({ ...i18nManager.details, pseudolocalize });
+}