From f4a0ce73a70151c61636d78f9780f4b60b5345df Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 1 Aug 2023 11:46:25 +0200
Subject: [PATCH] add support for functions in translation values

---
 .../src/libs/extension-api/types.ts           |  2 --
 .../registry/translation.registry.ts          |  4 +--
 .../models/translations.model.ts              |  2 +-
 .../stories/extending/localization.mdx        | 28 +++++++++++++++----
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/types.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/types.ts
index f546cfefcf..c140a46eda 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/types.ts
+++ b/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;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/libs/localization-api/registry/translation.registry.ts b/src/Umbraco.Web.UI.Client/src/libs/localization-api/registry/translation.registry.ts
index adda5ebd3e..bb9d8550e1 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/localization-api/registry/translation.registry.ts
+++ b/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;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/translations.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/translations.model.ts
index 3e5b21b84c..78dbfac203 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/translations.model.ts
+++ b/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;
 }
diff --git a/src/Umbraco.Web.UI.Client/storybook/stories/extending/localization.mdx b/src/Umbraco.Web.UI.Client/storybook/stories/extending/localization.mdx
index 1fef40fad8..96244ea219 100644
--- a/src/Umbraco.Web.UI.Client/storybook/stories/extending/localization.mdx
+++ b/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