V16: Context Api can unprovide Contexts

src/Umbraco.Web.UI.Client/examples/custom-validation-workspace-context/custom-validation-validator.ts

@@ -40,7 +40,7 @@ export class CustomValidationValidator extends UmbControllerBase implements UmbV
 		this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, async (context) => {
 			this.#workspaceContext = context;
 			this.observe(
-				await context.propertyValueByAlias<UmbPropertyEditorRteValueType>(propertyAlias, this.#variantId),
+				await context?.propertyValueByAlias<UmbPropertyEditorRteValueType>(propertyAlias, this.#variantId),
 				(value) => {
 					this.#value = value;
 					this.#checkValidation();

src/Umbraco.Web.UI.Client/examples/custom-validation-workspace-context/custom-validation-workspace-context.ts

@@ -8,10 +8,7 @@
 const EXAMPLE_CUSTOM_VALIDATION_PROPERTY_ALIAS = 'tiptap';
 
 // The Example Workspace Context Controller:
-export class CustomValidationWorkspaceContext extends UmbContextBase<
-	CustomValidationWorkspaceContext,
-	typeof EXAMPLE_CUSTOM_VALIDATION_CONTEXT
-> {
+export class CustomValidationWorkspaceContext extends UmbContextBase {
 	#validators?: Array<CustomValidationValidator>;
 
 	constructor(host: UmbControllerHost) {
@@ -30,12 +27,12 @@
 					if (propertyType.variesByCulture) {
 						// Because this property exists in multiple cultures we should observe cultures an create a custom validator for each culture value:
 						this.observe(
-							context.variantOptions,
+							context?.variantOptions,
 							(variantOptions) => {
 								// clean up old validators:
 								this.#validators?.forEach((x) => x.destroy());
 
-								this.#validators = variantOptions.map((option) => {
+								this.#validators = variantOptions?.map((option) => {
 									return new CustomValidationValidator(
 										this,
 										EXAMPLE_CUSTOM_VALIDATION_PROPERTY_ALIAS,

src/Umbraco.Web.UI.Client/examples/validation-context/validation-context-dashboard.ts

@@ -39,7 +39,7 @@ export class UmbExampleValidationContextDashboardElement extends UmbLitElement {
 
 		this.consumeContext(UMB_VALIDATION_CONTEXT, (validationContext) => {
 			this.observe(
-				validationContext.messages.messages,
+				validationContext?.messages.messages,
 				(messages) => {
 					this.messages = messages;
 				},

src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-context.ts

@@ -4,10 +4,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbNumberState } from '@umbraco-cms/backoffice/observable-api';
 
 // The Example Workspace Context Controller:
-export class WorkspaceContextCounterElement extends UmbContextBase<
-	WorkspaceContextCounterElement,
-	typeof EXAMPLE_COUNTER_CONTEXT
-> {
+export class WorkspaceContextCounterElement extends UmbContextBase {
 	// We always keep our states private, and expose the values as observables:
 	#counter = new UmbNumberState(0);
 	readonly counter = this.#counter.asObservable();

src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-view.ts

@@ -1,7 +1,7 @@
+import { EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state, LitElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
-import { EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context';
 
 @customElement('example-counter-workspace-view')
 export class ExampleCounterWorkspaceView extends UmbElementMixin(LitElement) {

src/Umbraco.Web.UI.Client/src/apps/app/app-auth.controller.ts

@@ -19,7 +19,7 @@ export class UmbAppAuthController extends UmbControllerBase {
 
 			// Observe the user's authorization state and start the authorization flow if the user is not authorized
 			this.observe(
-				context.timeoutSignal,
+				context?.timeoutSignal,
 				() => {
 					this.makeAuthorizationRequest('timedOut');
 				},

src/Umbraco.Web.UI.Client/src/apps/app/app-logo.element.ts

@@ -43,12 +43,12 @@ export class UmbAppLogoElement extends UmbLitElement {
 		super();
 
 		this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
-			this._serverUrl = instance.getServerUrl();
+			this._serverUrl = instance?.getServerUrl();
 		});
 
 		this.consumeContext(UMB_THEME_CONTEXT, (context) => {
 			this.observe(
-				context.theme,
+				context?.theme,
 				(theme) => {
 					this._theme = theme;
 				},

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.context.ts

@@ -12,7 +12,7 @@ import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
 import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
 import { UmbSysinfoRepository } from '@umbraco-cms/backoffice/sysinfo';
 
-export class UmbBackofficeContext extends UmbContextBase<UmbBackofficeContext> {
+export class UmbBackofficeContext extends UmbContextBase {
 	#activeSectionAlias = new UmbStringState(undefined);
 	public readonly activeSectionAlias = this.#activeSectionAlias.asObservable();
 
@@ -28,15 +28,15 @@ export class UmbBackofficeContext extends UmbContextBase<UmbBackofficeContext> {
 
 		// TODO: We need to ensure this request is called every time the user logs in, but this should be done somewhere across the app and not here [JOV]
 		this.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {
-			this.observe(authContext.isAuthorized, (isAuthorized) => {
+			this.observe(authContext?.isAuthorized, (isAuthorized) => {
 				if (!isAuthorized) return;
 				this.#getVersion();
 			});
 		});
 
 		this.consumeContext(UMB_CURRENT_USER_CONTEXT, (userContext) => {
 			this.observe(
-				userContext.allowedSections,
+				userContext?.allowedSections,
 				(allowedSections) => {
 					if (!allowedSections) return;
 					// TODO: Please be aware that we re-initialize this initializer based on user permissions. I suggest we should solve this specific case should be improved by the ability to change the filter [NL]

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts

@@ -77,7 +77,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 
 		// TODO: We need to ensure this request is called every time the user logs in, but this should be done somewhere across the app and not here [JOV]
 		this.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {
-			this.observe(authContext.isAuthorized, (isAuthorized) => {
+			this.observe(authContext?.isAuthorized, (isAuthorized) => {
 				if (!isAuthorized) return;
 				serverExtensions.registerPrivateExtensions();
 			});

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-logo.element.ts

@@ -35,7 +35,7 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
 
 		this.consumeContext(UMB_BACKOFFICE_CONTEXT, (context) => {
 			this.observe(
-				context.version,
+				context?.version,
 				(version) => {
 					if (!version) return;
 					this._version = version;

src/Umbraco.Web.UI.Client/src/apps/installer/installer.context.ts

@@ -14,7 +14,7 @@ import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
  * Context API for the installer
  * @class UmbInstallerContext
  */
-export class UmbInstallerContext extends UmbContextBase<UmbInstallerContext, typeof UMB_INSTALLER_CONTEXT> {
+export class UmbInstallerContext extends UmbContextBase {
 	private _data = new UmbObjectState<InstallRequestModelReadable>({
 		user: { name: '', email: '', password: '', subscribeToNewsletter: false },
 		database: { id: '', providerName: '', useIntegratedAuthentication: false, trustServerCertificate: false },

src/Umbraco.Web.UI.Client/src/apps/preview/preview.context.ts

@@ -8,7 +8,7 @@ import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 const UMB_LOCALSTORAGE_SESSION_KEY = 'umb:previewSessions';
 
-export class UmbPreviewContext extends UmbContextBase<UmbPreviewContext> {
+export class UmbPreviewContext extends UmbContextBase {
 	#culture?: string | null;
 	#serverUrl: string = '';
 	#webSocket?: WebSocket;
@@ -26,7 +26,7 @@ export class UmbPreviewContext extends UmbContextBase<UmbPreviewContext> {
 		super(host, UMB_PREVIEW_CONTEXT);
 
 		this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
-			this.#serverUrl = instance.getServerUrl();
+			this.#serverUrl = instance?.getServerUrl() ?? '';
 
 			const params = new URLSearchParams(window.location.search);
 

src/Umbraco.Web.UI.Client/src/libs/class-api/class.interface.ts

@@ -2,6 +2,7 @@ import type {
 	UmbContextCallback,
 	UmbContextConsumerAsPromiseOptionsType,
 	UmbContextConsumerController,
+	UmbContextMinimal,
 	UmbContextProviderController,
 	UmbContextToken,
 } from '@umbraco-cms/backoffice/context-api';
@@ -48,7 +49,10 @@ export interface UmbClassInterface extends UmbControllerHost {
 	 * @returns {UmbContextProviderController} Reference to the created Context Provider Controller instance
 	 * @memberof UmbClassInterface
 	 */
-	provideContext<R = unknown>(alias: string | UmbContextToken<R>, instance: R): UmbContextProviderController<R>;
+	provideContext<R extends UmbContextMinimal = UmbContextMinimal>(
+		alias: string | UmbContextToken<R>,
+		instance: R,
+	): UmbContextProviderController<R>;
 
 	/**
 	 * @description Setup a subscription for a context. The callback is called when the context is resolved.
@@ -57,7 +61,7 @@ export interface UmbClassInterface extends UmbControllerHost {
 	 * @returns {UmbContextConsumerController} Reference to the created Context Consumer Controller instance
 	 * @memberof UmbClassInterface
 	 */
-	consumeContext<BaseType = unknown, ResultType extends BaseType = BaseType>(
+	consumeContext<BaseType extends UmbContextMinimal = UmbContextMinimal, ResultType extends BaseType = BaseType>(
 		alias: string | UmbContextToken<BaseType, ResultType>,
 		callback: UmbContextCallback<ResultType>,
 	): UmbContextConsumerController<BaseType, ResultType>;
@@ -68,7 +72,7 @@ export interface UmbClassInterface extends UmbControllerHost {
 	 * @returns {Promise<unknown>} A Promise with the reference to the Context Api Instance
 	 * @memberof UmbClassInterface
 	 */
-	getContext<BaseType = unknown, ResultType extends BaseType = BaseType>(
+	getContext<BaseType extends UmbContextMinimal = UmbContextMinimal, ResultType extends BaseType = BaseType>(
 		alias: string | UmbContextToken<BaseType, ResultType>,
 		options?: UmbClassGetContextOptions,
 	): Promise<ResultType | undefined>;

src/Umbraco.Web.UI.Client/src/libs/class-api/class.mixin.ts

@@ -12,6 +12,7 @@
 	type UmbContextCallback,
 	UmbContextConsumerController,
 	UmbContextProviderController,
+	type UmbContextMinimal,
 } from '@umbraco-cms/backoffice/context-api';
 import { type ObserverCallback, UmbObserverController, simpleHashCode } from '@umbraco-cms/backoffice/observable-api';
 
@@ -80,45 +81,47 @@
 		}
 
 		provideContext<
-			BaseType = unknown,
+			BaseType extends UmbContextMinimal = UmbContextMinimal,
 			ResultType extends BaseType = BaseType,
 			InstanceType extends ResultType = ResultType,
 		>(
 			contextAlias: string | UmbContextToken<BaseType, ResultType>,
 			instance: InstanceType,
 		): UmbContextProviderController<BaseType, ResultType, InstanceType> {
 			return new UmbContextProviderController<BaseType, ResultType, InstanceType>(this, contextAlias, instance);
 		}
 
-		consumeContext<BaseType = unknown, ResultType extends BaseType = BaseType>(
+		consumeContext<BaseType extends UmbContextMinimal = UmbContextMinimal, ResultType extends BaseType = BaseType>(
 			contextAlias: string | UmbContextToken<BaseType, ResultType>,
 			callback: UmbContextCallback<ResultType>,
 		): UmbContextConsumerController<BaseType, ResultType> {
 			return new UmbContextConsumerController(this, contextAlias, callback);
 		}
 
-		async getContext<BaseType = unknown, ResultType extends BaseType = BaseType>(
+		async getContext<BaseType extends UmbContextMinimal = UmbContextMinimal, ResultType extends BaseType = BaseType>(
 			contextAlias: string | UmbContextToken<BaseType, ResultType>,
 			options?: UmbClassGetContextOptions,
 		): Promise<ResultType | undefined> {
 			const controller = new UmbContextConsumerController(this, contextAlias);
 			if (options) {
 				if (options.passContextAliasMatches) {
 					controller.passContextAliasMatches();
 				}
 				if (options.skipHost) {
 					controller.skipHost();
 				}
 			}
 			return controller.asPromise(options);
 		}
 
 		public override destroy(): void {
 			if (this._host) {
 				this._host.removeUmbController(this);
-				this._host = undefined as never;
 			}
 			super.destroy();
+			if (this._host) {
+				this._host = undefined as never;
+			}
 		}
 	}
 

src/Umbraco.Web.UI.Client/src/libs/class-api/context-base.class.ts

@@ -7,15 +7,9 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
  * This base provides the necessary for a class to become a context-api controller.
  *
  */
-export abstract class UmbContextBase<
-		ContextType,
-		GivenContextToken extends UmbContextToken<ContextType, ContextType> = UmbContextToken<ContextType, ContextType>,
-	>
-	extends UmbControllerBase
-	implements UmbContext
-{
-	constructor(host: UmbControllerHost, contextToken: GivenContextToken | string) {
+export abstract class UmbContextBase extends UmbControllerBase implements UmbContext {
+	constructor(host: UmbControllerHost, contextToken: UmbContextToken<any> | string) {
 		super(host, contextToken.toString());
-		this.provideContext(contextToken, this as unknown as ContextType);
+		this.provideContext(contextToken, this as any);
 	}
 }

src/Umbraco.Web.UI.Client/src/libs/class-api/context.interface.ts

@@ -1,4 +1,6 @@
 import type { UmbController } from '@umbraco-cms/backoffice/controller-api';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface UmbContext extends UmbController {}
+export interface UmbContext extends UmbController {
+	getHostElement(): Element;
+}

src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.controller.ts

@@ -1,9 +1,13 @@
 import type { UmbContextToken } from '../token/context-token.js';
+import type { UmbContextMinimal } from '../types.js';
 import { UmbContextConsumer } from './context-consumer.js';
 import type { UmbContextCallback } from './context-request.event.js';
 import type { UmbControllerHost, UmbController } from '@umbraco-cms/backoffice/controller-api';
 
-export class UmbContextConsumerController<BaseType = unknown, ResultType extends BaseType = BaseType>
+export class UmbContextConsumerController<
+		BaseType extends UmbContextMinimal = UmbContextMinimal,
+		ResultType extends BaseType = BaseType,
+	>
 	extends UmbContextConsumer<BaseType, ResultType>
 	implements UmbController
 {