Require to explciitly provide default translation bundle to DefaultTranslation: (#165)

* Export default (fallback) bundle for `en` language: `DefaultTranslationBundle`.

Author: AlexeyMz

CHANGELOG.md

@@ -34,6 +34,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
   * Auto-collapse items after resize if the final size is less than `minSize` for that item;
   * Prevent toggle buttons on `WorkspaceLayoutRow` children from being partially hidden when corresponding item is collapsed.
 - Export `TranslationProvider` and `DefaultTranslation` to be able to use `useTranslation()` outside the workspace component:
+  * Export default (fallback) bundle for `en` language: `DefaultTranslationBundle`.
   * Remove deprecated `Translation.formatIri()` method (use `DataLocaleProvider.formatIri()` instead).
 - Extend `CommandBatch.discard()` to accept `revert` option to be able to revert the batch without storing it first.
 - Always display ungroup buttons on `StandardGroup` when the element is single-selected.

examples/i18n.tsx

@@ -38,7 +38,8 @@ function I18nExample() {
                     'toolbar_action': {
                         'layout.label': 'Layout the graph',
                     },
-                }
+                },
+                Reactodia.DefaultTranslationBundle,
             ],
         }),
         defaultLayout,

src/diagram/locale.tsx

@@ -8,52 +8,47 @@ import {
 
 import * as Rdf from '../data/rdf/rdfModel';
 
+/**
+ * Default (fallback) translation bundle `en` language.
+ *
+ * @category Constants
+ */
 export const DefaultTranslationBundle: TranslationBundle = DefaultBundle;
 
 /**
  * Default built-in implementation for i18n strings interpolation and other
  * methods from {@link Translation} interface.
+ *
+ * @category Core
  */
-export class DefaultTranslation implements Translation {
+export class DefaultTranslation<K extends string = TranslationKey> implements Translation<K> {
     protected readonly bundles: ReadonlyArray<Partial<TranslationBundle>>;
 
     private readonly _selectLabel: LabelLanguageSelector;
 
     constructor(options?: {
         /**
-         * Additional translation bundles for UI text strings in the workspace
+         * Translation bundles for UI text strings in the workspace
          * in order from higher to lower priority.
          *
          * @default []
-         * @see {@link useDefaultTranslation}
+         * @see {@link DefaultTranslationBundle}
          */
         bundles?: ReadonlyArray<Partial<TranslationBundle>>;
-        /**
-         * If set, disables translation fallback which (with default `en` language).
-         *
-         * @default true
-         * @see {@link translations}
-         */
-        useDefaultBundle?: boolean;
         /**
          * Overrides how a single label gets selected from multiple of them based on target language.
          */
         selectLabel?: LabelLanguageSelector;
     }) {
         const {
             bundles = [],
-            useDefaultBundle = true,
             selectLabel = defaultSelectLabel,
         } = options ?? {};
-        const translationBundles: Partial<TranslationBundle>[] = [...bundles];
-        if (useDefaultBundle) {
-            translationBundles.push(DefaultTranslationBundle);
-        }
-        this.bundles = translationBundles;
+        this.bundles = bundles;
         this._selectLabel = selectLabel;
     }
 
-    private getString(key: TranslationKey): string | undefined {
+    private getString(key: K): string | undefined {
         const dotIndex = key.indexOf('.');
         if (!(dotIndex > 0 && dotIndex < key.length)) {
             throw new Error(`Reactodia: Invalid translation key: ${key}`);
@@ -69,12 +64,12 @@ export class DefaultTranslation implements Translation {
         return undefined;
     }
 
-    text(key: TranslationKey, placeholders?: Record<string, string | number | boolean>): string {
+    text(key: K, placeholders?: Record<string, string | number | boolean>): string {
         return this.textOptional(key, placeholders) ?? key;
     }
 
     textOptional(
-        key: TranslationKey,
+        key: K,
         placeholders?: Record<string, string | number | boolean>
     ): string | undefined {
         const template = this.getString(key);
@@ -84,7 +79,7 @@ export class DefaultTranslation implements Translation {
         return formatPlaceholders(template, placeholders);
     }
 
-    template(key: TranslationKey, parts: Record<string, React.ReactNode>): React.ReactNode {
+    template(key: K, parts: Record<string, React.ReactNode>): React.ReactNode {
         const template = this.getString(key) ?? key;
         return templatePlaceholders(template, parts);
     }

src/workspace.ts

@@ -102,7 +102,7 @@ export {
     LinkVertices, type LinkVerticesProps,
 } from './diagram/linkLayer';
 export { DefaultLinkRouter, type DefaultLinkRouterOptions } from './diagram/linkRouter';
-export { DefaultTranslation } from './diagram/locale';
+export { DefaultTranslation, DefaultTranslationBundle } from './diagram/locale';
 export { type DiagramModel, type DiagramModelEvents, type GraphStructure } from './diagram/model';
 export { CanvasPlaceAt, type CanvasPlaceAtLayer } from './diagram/placeLayer';
 export {

src/workspace/workspaceProvider.tsx

@@ -18,7 +18,7 @@ import { CommandHistory, InMemoryHistory } from '../diagram/history';
 import {
     CalculatedLayout, LayoutFunction, LayoutTypeProvider, calculateLayout, applyLayout,
 } from '../diagram/layout';
-import { DefaultTranslation } from '../diagram/locale';
+import { DefaultTranslation, DefaultTranslationBundle } from '../diagram/locale';
 import { RenameLinkToLinkStateProvider, SharedCanvasState } from '../diagram/sharedCanvasState';
 
 import { AnnotationElement, AnnotationLink } from '../editor/annotationCells';
@@ -52,7 +52,8 @@ export interface CreateWorkspaceParams {
     /**
      * Overrides default i18n (translation) implementation.
      *
-     * By default, {@link DefaultTranslation} instance is used.
+     * By default, {@link DefaultTranslation} instance with a single
+     * {@link DefaultTranslationBundle} is used.
      */
     translation?: Translation;
     /**
@@ -224,7 +225,9 @@ class RefCountedWorkspaceContext implements WorkspaceContext {
 
     constructor(params: CreateWorkspaceParams) {
         const {
-            translation = new DefaultTranslation(),
+            translation = new DefaultTranslation({
+                bundles: [DefaultTranslationBundle],
+            }),
             history = new InMemoryHistory(),
             dialogSettingsProvider = new DefaultDialogSettingsProvider(),
             metadataProvider,

src/workspace/workspaceWrapper.tsx

@@ -12,7 +12,7 @@ import { TypeStyleResolver, RenameLinkProvider } from '../diagram/customization'
 import { Element } from '../diagram/elements';
 import { CommandHistory, InMemoryHistory } from '../diagram/history';
 import { LayoutFunction } from '../diagram/layout';
-import { DefaultTranslation } from '../diagram/locale';
+import { DefaultTranslation, DefaultTranslationBundle } from '../diagram/locale';
 
 import { EntityElement } from '../editor/dataElements';
 import {
@@ -151,10 +151,13 @@ export class Workspace extends React.Component<WorkspaceProps> {
             onWorkspaceEvent,
         } = this.props;
 
+        let bundles = translations;
+        if (useDefaultTranslation) {
+            bundles = [...translations, DefaultTranslationBundle];
+        }
         this._workspace = createWorkspace({
             translation: this.context ?? new DefaultTranslation({
-                bundles: translations,
-                useDefaultBundle: useDefaultTranslation,
+                bundles,
                 selectLabel: selectLabelLanguage,
             }),
             history,