add support for functions in translation values

src/Umbraco.Web.UI.Client/src/libs/extension-api/types.ts

@@ -103,8 +103,6 @@ export interface ManifestClassWithClassConstructor<T = unknown> extends Manifest
 export interface ManifestDefaultExport<T = unknown> extends ManifestWithLoader<{ default: T }> {
 	/**
 	 * The file location of the javascript file to load
-	 *
-	 * @TJS-require
 	 */
 	js?: string;
 }

src/Umbraco.Web.UI.Client/src/libs/localization-api/registry/translation.registry.ts

@@ -3,7 +3,7 @@ import { hasDefaultExport, loadExtension } from '@umbraco-cms/backoffice/extensi
 import { UmbBackofficeExtensionRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { Subject, combineLatest } from '@umbraco-cms/backoffice/external/rxjs';
 
-export type UmbTranslationDictionary = Record<string, string>;
+export type UmbTranslationDictionary = Record<string, unknown>;
 
 export class UmbTranslationRegistry {
 	#registry;
@@ -60,7 +60,7 @@ export class UmbTranslationRegistry {
 	#addOrUpdateDictionary(
 		innerDictionary: UmbTranslationDictionary,
 		dictionaryName: string,
-		dictionary: Record<string, string>
+		dictionary: UmbTranslationDictionary
 	) {
 		for (const [key, value] of Object.entries(dictionary)) {
 			innerDictionary[`${dictionaryName}_${key}`] = value;

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/translations.model.ts

@@ -1,6 +1,6 @@
 import type { ManifestDefaultExport } from '@umbraco-cms/backoffice/extension-api';
 
-export interface ManifestTranslations extends ManifestDefaultExport<Record<string, Record<string, string>>> {
+export interface ManifestTranslations extends ManifestDefaultExport<Record<string, Record<string, unknown>>> {
 	type: 'translations';
 	meta: MetaTranslations;
 }

src/Umbraco.Web.UI.Client/storybook/stories/extending/localization.mdx

@@ -50,19 +50,35 @@ If you do not have many translations, you can also choose to include them direct
 
 The language file is a simple JS module with a default export containing a key-value structure organised in sections.
 
-```json
+```js
 export default {
-	"section": {
-		"key1": "value1",
-		"key2": "value2"
-	}
-}
+	section: {
+		key1: 'value1',
+		key2: 'value2',
+	},
+};
 ```
 
 The sections and keys will be formatted into a map in Umbraco
 with the format `section_key1` and `section_key2` which forms the unique key
 of which they are requested by.
 
+The values can be either a string or a function that returns a string:
+
+```js
+export default {
+	section: {
+		key1: 'value1',
+		key2: (count) => {
+			count = parseInt(count, 10);
+			if (count === 0) return 'Nothing';
+			if (count === 1) return 'One thing';
+			return 'Many things';
+		},
+	},
+};
+```
+
 ## Using the translations
 
 ### umb-localize