V16: Adds server context to store information about paths

src/Umbraco.Web.UI.Client/devops/circular/index.js

@@ -52,7 +52,8 @@ if (circular.length) {
 	*/
 
 	// TODO: Remove this check and set an exit with argument 1 when we have fixed all circular dependencies.
-	const MAX_CIRCULAR_DEPENDENCIES = 6;
+	// The current threshold for circular dependencies is set to 5. Adjust this number as needed.
+	const MAX_CIRCULAR_DEPENDENCIES = 5;
 	if (circular.length > MAX_CIRCULAR_DEPENDENCIES) {
 		process.exit(1);
 	} else if (circular.length < MAX_CIRCULAR_DEPENDENCIES) {

src/Umbraco.Web.UI.Client/package.json

@@ -88,6 +88,7 @@
 		"./script": "./dist-cms/packages/templating/scripts/index.js",
 		"./search": "./dist-cms/packages/search/index.js",
 		"./section": "./dist-cms/packages/core/section/index.js",
+		"./server": "./dist-cms/packages/core/server/index.js",
 		"./server-file-system": "./dist-cms/packages/core/server-file-system/index.js",
 		"./settings": "./dist-cms/packages/settings/index.js",
 		"./sorter": "./dist-cms/packages/core/sorter/index.js",
@@ -292,4 +293,4 @@
 		"access": "public",
 		"registry": "https://registry.npmjs.org/"
 	}
-}
+}

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

@@ -1,6 +1,6 @@
-import { UMB_APP_CONTEXT } from './app.context.js';
 import { customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes';
 
 @customElement('umb-app-logo')
@@ -42,7 +42,7 @@ export class UmbAppLogoElement extends UmbLitElement {
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_APP_CONTEXT, (instance) => {
+		this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
 			this._serverUrl = instance.getServerUrl();
 		});
 

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

@@ -1,11 +1,10 @@
 import { onInit } from '../../packages/core/entry-point.js';
 import type { UmbAppErrorElement } from './app-error.element.js';
-import { UmbAppContext } from './app.context.js';
-import { UmbServerConnection } from './server-connection.js';
 import { UmbAppAuthController } from './app-auth.controller.js';
 import type { UmbAppOauthElement } from './app-oauth.element.js';
 import type { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
 import { UmbAuthContext } from '@umbraco-cms/backoffice/auth';
+import { UmbServerConnection, UmbServerContext } from '@umbraco-cms/backoffice/server';
 import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UUIIconRegistryEssential } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -164,7 +163,7 @@ export class UmbAppElement extends UmbLitElement {
 		this.#serverConnection = await new UmbServerConnection(this, this.serverUrl).connect();
 
 		this.#authContext = new UmbAuthContext(this, this.serverUrl, this.backofficePath, this.bypassAuth);
-		new UmbAppContext(this, {
+		new UmbServerContext(this, {
 			backofficePath: this.backofficePath,
 			serverUrl: this.serverUrl,
 			serverConnection: this.#serverConnection,

src/Umbraco.Web.UI.Client/src/apps/app/index.ts

@@ -1,4 +1,2 @@
-export type * from './app-context-config.interface.js';
 export * from './app-logo.element.js';
 export * from './app.element.js';
-export * from './app.context.js';

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

@@ -1,10 +1,10 @@
-import { UMB_APP_CONTEXT } from '../app/app.context.js';
 import { UmbBooleanState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbDocumentPreviewRepository } from '@umbraco-cms/backoffice/document';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 const UMB_LOCALSTORAGE_SESSION_KEY = 'umb:previewSessions';
 
@@ -25,8 +25,8 @@ export class UmbPreviewContext extends UmbContextBase<UmbPreviewContext> {
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_PREVIEW_CONTEXT);
 
-		this.consumeContext(UMB_APP_CONTEXT, (appContext) => {
-			this.#serverUrl = appContext.getServerUrl();
+		this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
+			this.#serverUrl = instance.getServerUrl();
 
 			const params = new URLSearchParams(window.location.search);
 

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/block-grid-manager/block-grid-manager.context.ts

@@ -9,12 +9,12 @@ import {
 } from '@umbraco-cms/backoffice/observable-api';
 import { transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import type { UmbBlockDataModel } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 /**
  * A implementation of the Block Manager specifically for the Block Grid Editor.
@@ -87,8 +87,8 @@ export class UmbBlockGridManagerContext<
 	constructor(host: UmbControllerHost) {
 		super(host);
 
-		this.#initAppUrl = this.consumeContext(UMB_APP_CONTEXT, (appContext) => {
-			this.#serverUrl = appContext.getServerUrl();
+		this.#initAppUrl = this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
+			this.#serverUrl = instance.getServerUrl();
 		}).asPromise({ preventTimeout: true });
 	}
 	/**

src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts

@@ -5,9 +5,9 @@ import {
 import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import { transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 import { UUICardEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 @customElement('umb-block-type-card')
 export class UmbBlockTypeCardElement extends UmbLitElement {
@@ -76,8 +76,8 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 	constructor() {
 		super();
 
-		this.#init = this.consumeContext(UMB_APP_CONTEXT, (appContext) => {
-			this.#serverUrl = appContext.getServerUrl();
+		this.#init = this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
+			this.#serverUrl = instance.getServerUrl();
 		}).asPromise({ preventTimeout: true });
 
 		this.observe(this.#itemManager.statuses, async (statuses) => {

src/Umbraco.Web.UI.Client/src/packages/core/auth/modals/umb-app-auth-modal.element.ts

@@ -5,7 +5,7 @@ import { UMB_AUTH_CONTEXT } from '../auth.context.token.js';
 import type { UmbAuthProviderDefaultProps } from '../types.js';
 import type { UmbModalAppAuthConfig, UmbModalAppAuthValue } from './umb-app-auth-modal.token.js';
 import { css, customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 @customElement('umb-app-auth-modal')
 export class UmbAppAuthModalElement extends UmbModalBaseElement<UmbModalAppAuthConfig, UmbModalAppAuthValue> {
@@ -45,7 +45,7 @@ export class UmbAppAuthModalElement extends UmbModalBaseElement<UmbModalAppAuthC
 	}
 
 	override firstUpdated(): void {
-		this.consumeContext(UMB_APP_CONTEXT, (context) => {
+		this.consumeContext(UMB_SERVER_CONTEXT, (context) => {
 			this._serverUrl = context.getServerUrl();
 			this.style.setProperty(
 				'--image',

src/Umbraco.Web.UI.Client/src/packages/core/server/index.ts

@@ -0,0 +1,6 @@
+export * from './network-connection-status.manager.js';
+export * from './server-connection.js';
+export * from './server.context-token.js';
+export * from './server.context.js';
+
+export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/core/server/server.context-token.ts

@@ -0,0 +1,4 @@
+import type { UmbServerContext } from './server.context.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_SERVER_CONTEXT = new UmbContextToken<UmbServerContext>('UmbServerContext');

src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts → src/Umbraco.Web.UI.Client/src/packages/core/server/server.context.ts

@@ -1,16 +1,16 @@
-import type { UmbAppContextConfig } from './app-context-config.interface.js';
+import { UMB_SERVER_CONTEXT } from './server.context-token.js';
 import { UmbNetworkConnectionStatusManager } from './network-connection-status.manager.js';
+import type { UmbServerContextConfig } from './types.js';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
-export class UmbAppContext extends UmbContextBase<UmbAppContext> {
+export class UmbServerContext extends UmbContextBase<UmbServerContext> {
 	#serverUrl: string;
 	#backofficePath: string;
 	#serverConnection;
 
-	constructor(host: UmbControllerHost, config: UmbAppContextConfig) {
-		super(host, UMB_APP_CONTEXT);
+	constructor(host: UmbControllerHost, config: UmbServerContextConfig) {
+		super(host, UMB_SERVER_CONTEXT.toString());
 		this.#serverUrl = config.serverUrl;
 		this.#backofficePath = config.backofficePath;
 		this.#serverConnection = config.serverConnection;
@@ -30,5 +30,3 @@ export class UmbAppContext extends UmbContextBase<UmbAppContext> {
 		return this.#serverConnection;
 	}
 }
-
-export const UMB_APP_CONTEXT = new UmbContextToken<UmbAppContext>('UmbAppContext');

src/Umbraco.Web.UI.Client/src/packages/core/server/types.ts

@@ -0,0 +1,16 @@
+import type { UmbServerConnection } from './server-connection.js';
+
+export interface UmbServerContextConfig {
+	/**
+	 * The server URL to use for the context.
+	 */
+	serverUrl: string;
+	/**
+	 * The backoffice path to use for the context.
+	 */
+	backofficePath: string;
+	/**
+	 * The server connection to use for the context.
+	 */
+	serverConnection: UmbServerConnection;
+}

src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts

@@ -50,6 +50,7 @@ export default defineConfig({
 			'resources/index': './resources/index.ts',
 			'router/index': './router/index.ts',
 			'section/index': './section/index.ts',
+			'server/index': './server/index.ts',
 			'server-file-system/index': './server-file-system/index.ts',
 			'sorter/index': './sorter/index.ts',
 			'store/index': './store/index.ts',

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts

@@ -34,9 +34,9 @@ import {
 } from '@umbraco-cms/backoffice/content';
 import type { UmbDocumentTypeDetailModel } from '@umbraco-cms/backoffice/document-type';
 import { UmbIsTrashedEntityContext } from '@umbraco-cms/backoffice/recycle-bin';
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import { ensurePathEndsWithSlash, UmbDeprecation } from '@umbraco-cms/backoffice/utils';
 import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 type ContentModel = UmbDocumentDetailModel;
 type ContentTypeModel = UmbDocumentTypeDetailModel;
@@ -287,13 +287,13 @@ export class UmbDocumentWorkspaceContext
 		// Tell the server that we're entering preview mode.
 		await new UmbDocumentPreviewRepository(this).enter();
 
-		const appContext = await this.getContext(UMB_APP_CONTEXT);
-		if (!appContext) {
-			throw new Error('App context is missing');
+		const serverContext = await this.getContext(UMB_SERVER_CONTEXT);
+		if (!serverContext) {
+			throw new Error('Server context is missing');
 		}
 
-		const backofficePath = appContext.getBackofficePath();
-		const previewUrl = new URL(ensurePathEndsWithSlash(backofficePath) + 'preview', appContext.getServerUrl());
+		const backofficePath = serverContext.getBackofficePath();
+		const previewUrl = new URL(ensurePathEndsWithSlash(backofficePath) + 'preview', serverContext.getServerUrl());
 		previewUrl.searchParams.set('id', unique);
 
 		if (culture && culture !== UMB_INVARIANT_CULTURE) {

src/Umbraco.Web.UI.Client/src/packages/media/media/components/index.ts

@@ -1,6 +1,4 @@
-import './input-media/index.js';
-
-export * from './input-rich-media/index.js';
-export * from './input-media/index.js';
 export * from './input-image-cropper/index.js';
+export * from './input-media/index.js';
+export * from './input-rich-media/index.js';
 export * from './input-upload-field/index.js';

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts

@@ -10,11 +10,7 @@ import type {
 import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
-
-import './image-cropper-focus-setter.element.js';
-import './image-cropper-preview.element.js';
-import './image-cropper.element.js';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 @customElement('umb-image-cropper-field')
 export class UmbInputImageCropperFieldElement extends UmbLitElement {
@@ -87,7 +83,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_APP_CONTEXT, (context) => {
+		this.consumeContext(UMB_SERVER_CONTEXT, (context) => {
 			this._serverUrl = context.getServerUrl();
 		});
 	}

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/index.ts

@@ -1,4 +1,8 @@
-export * from './input-image-cropper.element.js';
 export * from './crop-change.event.js';
 export * from './focalpoint-change.event.js';
+export * from './image-cropper-field.element.js';
+export * from './image-cropper-focus-setter.element.js';
+export * from './image-cropper-preview.element.js';
+export * from './image-cropper.element.js';
+export * from './input-image-cropper.element.js';
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/index.ts

@@ -1,3 +1,4 @@
+export * from './utils.js';
 export type * from './preview/index.js';
 export * from './input-upload-field.element.js';
 export type * from './file-upload-preview.extension.js';

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts

@@ -9,13 +9,13 @@ import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registr
 import { UmbFileDropzoneItemStatus, UmbInputDropzoneDashedStyles } from '@umbraco-cms/backoffice/dropzone';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import type {
 	UmbDropzoneChangeEvent,
 	UmbInputDropzoneElement,
 	UmbUploadableFile,
 } from '@umbraco-cms/backoffice/dropzone';
 import type { UmbTemporaryFileModel } from '@umbraco-cms/backoffice/temporary-file';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 @customElement('umb-input-upload-field')
 export class UmbInputUploadFieldElement extends UmbLitElement {
@@ -66,7 +66,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_APP_CONTEXT, (context) => {
+		this.consumeContext(UMB_SERVER_CONTEXT, (context) => {
 			this._serverUrl = context.getServerUrl();
 		});
 	}

src/Umbraco.Web.UI.Client/src/packages/sysinfo/repository/sysinfo.repository.ts

@@ -3,7 +3,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository';
 import { tryExecute } from '@umbraco-cms/backoffice/resources';
 import { ServerService } from '@umbraco-cms/backoffice/external/backend-api';
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 
 export class UmbSysinfoRepository extends UmbRepositoryBase {
 	constructor(host: UmbControllerHost) {
@@ -29,12 +29,12 @@ export class UmbSysinfoRepository extends UmbRepositoryBase {
 	 */
 	async serverUpgradeCheck(currentVersion: string): Promise<UmbServerUpgradeCheck | null> {
 		// Check if we are allowed to check again
-		const appContext = await this.getContext(UMB_APP_CONTEXT);
-		if (!appContext) {
-			throw new Error('Could not get the app context.');
+		const serverContext = await this.getContext(UMB_SERVER_CONTEXT);
+		if (!serverContext) {
+			throw new Error('Could not get the server context.');
 		}
 		// TODO: Provide a get method, so we do not need to observe in this case:
-		const versionCheckPeriod = await this.observe(appContext.getServerConnection().versionCheckPeriod).asPromise();
+		const versionCheckPeriod = await this.observe(serverContext.getServerConnection().versionCheckPeriod).asPromise();
 
 		if (versionCheckPeriod <= 0) {
 			// We do not need to check the server for an upgrade