yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move registry to localization-api and provide from backoffice-element

Browse Source
This commit is contained in:
Jacob Overgaard
2023-07-25 13:40:17 +02:00
parent 418d8774e8
commit accc0284aa
8 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
View File

@@ -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() {

7
src/Umbraco.Web.UI.Client/src/libs/element-api/element.mixin.ts
View File

@@ -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<T>} source RxJS source
* @param {method} callback Callback method called when data is changed.
* @return {UmbObserverController} Reference to a Observer Controller instance
* @memberof UmbElementMixin
*/
observe<T>(
source: Observable<T> | { asObservable: () => Observable<T> },
callback: (_value: T) => void,

1
src/Umbraco.Web.UI.Client/src/libs/localization-api/index.ts
View File

@@ -1 +1,2 @@
export * from './registry/translation.registry.js';
export * from './localization.context.js';

22
src/Umbraco.Web.UI.Client/src/packages/core/localization/localization.context.ts → src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.context.ts
View File

@@ -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;
}
/**

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

@@ -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<string, string>;
export class UmbTranslationRegistry {
#extensionRegistry;
#innerDictionary = new ReplaySubject<UmbTranslationDictionary>(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();

2
src/Umbraco.Web.UI.Client/src/packages/core/index.ts
View File

@@ -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));
};

2
src/Umbraco.Web.UI.Client/src/packages/core/localization/index.ts
View File

@@ -1,3 +1 @@
export * from './localization.context.js';
import './localize.element.js';

28
src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.ts
View File

@@ -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<string>;
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) {