From accc0284aaf171257e01b26cf5bee7de18180ece Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 25 Jul 2023 13:40:17 +0200 Subject: [PATCH] move registry to localization-api and provide from backoffice-element --- .../src/apps/backoffice/backoffice.element.ts | 13 ++------- .../src/libs/element-api/element.mixin.ts | 7 +++++ .../src/libs/localization-api/index.ts | 1 + .../localization-api}/localization.context.ts | 22 +++++++++++++-- .../registry/translation.registry.ts | 11 +++++--- .../src/packages/core/index.ts | 2 -- .../src/packages/core/localization/index.ts | 2 -- .../core/localization/localize.element.ts | 28 +++++-------------- 8 files changed, 44 insertions(+), 42 deletions(-) rename src/Umbraco.Web.UI.Client/src/{packages/core/localization => libs/localization-api}/localization.context.ts (59%) diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts index 26c98c29da..89b841f194 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts @@ -1,4 +1,4 @@ -import { umbTranslationRegistry } from '@umbraco-cms/backoffice/localization-api'; +import { UMB_LOCALIZATION_CONTEXT, UmbLocalizationContext } from '@umbraco-cms/backoffice/localization-api'; import { UmbExtensionInitializer } from './extension.controller.js'; import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context.js'; import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; @@ -8,7 +8,6 @@ import { UmbBundleExtensionInitializer, UmbEntryPointExtensionInitializer, } from '@umbraco-cms/backoffice/extension-api'; -import { UMB_AUTH } from '@umbraco-cms/backoffice/auth'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import './components/index.js'; @@ -40,15 +39,7 @@ export class UmbBackofficeElement extends UmbLitElement { new UmbEntryPointExtensionInitializer(this, umbExtensionsRegistry); this.#extensionInitializer = new UmbExtensionInitializer(this, umbExtensionsRegistry); this.#extensionInitializer.setLocalPackages(CORE_PACKAGES); - - this.consumeContext(UMB_AUTH, (auth) => { - this.observe(auth.currentUser, (user) => { - if (user) { - const languageIsoCode = user.languageIsoCode ?? 'en'; - umbTranslationRegistry.register(languageIsoCode); - } - }); - }); + this.provideContext(UMB_LOCALIZATION_CONTEXT, new UmbLocalizationContext(this, umbExtensionsRegistry)); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/libs/element-api/element.mixin.ts b/src/Umbraco.Web.UI.Client/src/libs/element-api/element.mixin.ts index 79f5328fb9..0edad0f539 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/element-api/element.mixin.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/element-api/element.mixin.ts @@ -11,6 +11,13 @@ import { import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; export declare class UmbElement extends UmbControllerHostElement { + /** + * @description Observe a RxJS source of choice. + * @param {Observable} source RxJS source + * @param {method} callback Callback method called when data is changed. + * @return {UmbObserverController} Reference to a Observer Controller instance + * @memberof UmbElementMixin + */ observe( source: Observable | { asObservable: () => Observable }, callback: (_value: T) => void, diff --git a/src/Umbraco.Web.UI.Client/src/libs/localization-api/index.ts b/src/Umbraco.Web.UI.Client/src/libs/localization-api/index.ts index adc93acd1a..b89708c78d 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/localization-api/index.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/localization-api/index.ts @@ -1 +1,2 @@ export * from './registry/translation.registry.js'; +export * from './localization.context.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/localization/localization.context.ts b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.context.ts similarity index 59% rename from src/Umbraco.Web.UI.Client/src/packages/core/localization/localization.context.ts rename to src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.context.ts index 60f8f78b47..da9854e58a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/localization/localization.context.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.context.ts @@ -1,10 +1,28 @@ -import { umbTranslationRegistry } from '@umbraco-cms/backoffice/localization-api'; +import { UmbTranslationRegistry } from './registry/translation.registry.js'; +import { UMB_AUTH } from '@umbraco-cms/backoffice/auth'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; +import { UmbElement } from '@umbraco-cms/backoffice/element-api'; +import { UmbBackofficeExtensionRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { map, of, switchMap, type Observable } from '@umbraco-cms/backoffice/external/rxjs'; export class UmbLocalizationContext { + #translationRegistry; + + constructor(host: UmbElement, umbExtensionRegistry: UmbBackofficeExtensionRegistry) { + this.#translationRegistry = new UmbTranslationRegistry(umbExtensionRegistry); + + host.consumeContext(UMB_AUTH, (auth) => { + host.observe(auth.currentUser, (user) => { + if (user) { + const languageIsoCode = user.languageIsoCode ?? 'en'; + this.#translationRegistry.register(languageIsoCode); + } + }); + }); + } + get translations() { - return umbTranslationRegistry.translations; + return this.#translationRegistry.translations; } /** 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 aa3b91720a..5f170f458e 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 @@ -1,12 +1,17 @@ -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbBackofficeExtensionRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { ReplaySubject } from '@umbraco-cms/backoffice/external/rxjs'; export type UmbTranslationDictionary = Map; export class UmbTranslationRegistry { + #extensionRegistry; #innerDictionary = new ReplaySubject(1); #innerDictionaryValue: UmbTranslationDictionary = new Map(); + constructor(umbExtensionRegistry: UmbBackofficeExtensionRegistry) { + this.#extensionRegistry = umbExtensionRegistry; + } + get translations() { return this.#innerDictionary.asObservable(); } @@ -16,7 +21,7 @@ export class UmbTranslationRegistry { this.#innerDictionaryValue = new Map(); // Load new translations - umbExtensionsRegistry.extensionsOfType('translations').subscribe(async (extensions) => { + this.#extensionRegistry.extensionsOfType('translations').subscribe(async (extensions) => { console.log( '🚀 ~ file: translation.registry.ts:13 ~ UmbTranslationRegistry ~ this.#umbExtensionRegistry.extensionsOfType ~ extension:', extensions, @@ -72,5 +77,3 @@ export class UmbTranslationRegistry { } } } - -export const umbTranslationRegistry = new UmbTranslationRegistry(); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/index.ts index c282da14d7..564780c541 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/index.ts @@ -8,7 +8,6 @@ import { manifests as workspaceManifests } from './workspace/manifests.js'; import { manifests as modalManifests } from './modal/common/manifests.js'; import { manifests as themeManifests } from './themes/manifests.js'; -import { UMB_LOCALIZATION_CONTEXT, UmbLocalizationContext } from './localization/localization.context.js'; import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification'; import { UmbModalManagerContext, UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal'; import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api'; @@ -65,7 +64,6 @@ export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => { const modalContainerElement = new UmbBackofficeModalContainerElement(); host.appendChild(modalContainerElement); - new UmbContextProviderController(host, UMB_LOCALIZATION_CONTEXT, new UmbLocalizationContext()); new UmbContextProviderController(host, UMB_NOTIFICATION_CONTEXT_TOKEN, new UmbNotificationContext()); new UmbContextProviderController(host, UMB_MODAL_MANAGER_CONTEXT_TOKEN, new UmbModalManagerContext(host)); }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/localization/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/localization/index.ts index ce27b7a269..2526dc55bf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/localization/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/localization/index.ts @@ -1,3 +1 @@ -export * from './localization.context.js'; - import './localize.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.ts index 36f958e482..323e7ce1da 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.ts @@ -1,7 +1,7 @@ -import { UMB_LOCALIZATION_CONTEXT } from './localization.context.js'; +import { UMB_LOCALIZATION_CONTEXT } from '@umbraco-cms/backoffice/localization-api'; import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { Subscription } from '@umbraco-cms/backoffice/external/rxjs'; +import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api'; /** * This element allows you to localize a string with optional interpolation values. @@ -24,36 +24,22 @@ export class UmbLocalizeElement extends UmbLitElement { } #value: string = ''; - #localizationContext?: typeof UMB_LOCALIZATION_CONTEXT.TYPE; - #subscription?: Subscription; + #subscription?: UmbObserverController; constructor() { super(); this.consumeContext(UMB_LOCALIZATION_CONTEXT, (instance) => { - this.#localizationContext = instance; - this.#load(); + this.#load(instance); }); } - connectedCallback() { - super.connectedCallback(); - this.#load(); - } - - disconnectedCallback(): void { - super.disconnectedCallback(); - if (this.#subscription) { - this.#subscription.unsubscribe(); - } - } - - async #load() { + async #load(localizationContext: typeof UMB_LOCALIZATION_CONTEXT.TYPE) { try { if (this.#subscription) { - this.#subscription.unsubscribe(); + this.#subscription.destroy(); } - this.#subscription = this.#localizationContext!.localize(this.key).subscribe((value) => { + this.#subscription = this.observe(localizationContext!.localize(this.key), (value) => { this.value = value; }); } catch (error: any) {