@umbraco-cms/backoffice 17.4.0-rc → 17.4.0-rc2

package/custom-elements.json

@@ -382,7 +382,7 @@
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tmin-width: 920px;\\n\\t\\t}\\n\\n\\t\\t:host,\\n\\t\\t#router-slot {\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100vh;\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tmin-width: 920px;\\n\\t\\t}\\n\\n\\t\\t:host,\\n\\t\\t#router-slot {\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100vh;\\n\\t\\t}\\n\\n\\t\\t#loader {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\talign-items: center;\\n\\t\\t\\topacity: 0;\\n\\t\\t\\tanimation: fadeIn 240ms forwards;\\n\\t\\t}\\n\\t\\t@keyframes fadeIn {\\n\\t\\t\\tto {\\n\\t\\t\\t\\topacity: 1;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
         }
       ]
     },

package/dist-cms/apps/app/app.element.js

@@ -18,17 +18,59 @@ import { UmbLitElement } from '../../packages/core/lit-element/index.js';
 import { pathWithoutBasePath } from '../../packages/core/router/index.js';
 import { RuntimeLevelModel } from '../../packages/core/backend-api/index.js';
 import { UmbContextDebugController } from '../../packages/core/debug/index.js';
-import { UmbBundleExtensionInitializer, UmbServerExtensionRegistrator } from '../../libs/extension-api/index.js';
+import { UmbBundleExtensionInitializer, UmbServerExtensionRegistrator, } from '../../libs/extension-api/index.js';
 import { UmbAppEntryPointExtensionInitializer, umbExtensionsRegistry, } from '../../packages/core/extension-registry/index.js';
-import { firstValueFrom } from '../../external/rxjs/index.js';
 import { redirectToStoredPath } from '../../packages/core/utils/index.js';
 import { umbHttpClient } from '../../packages/core/http-client/index.js';
 import { UmbViewContext } from '../../packages/core/view/index.js';
 import './app-logo.element.js';
+import { UMB_CURRENT_USER_CONTEXT } from '../../packages/user/current-user/index.js';
+const CORE_PACKAGES = [
+    import('../../packages/block/umbraco-package.js'),
+    import('../../packages/clipboard/umbraco-package.js'),
+    import('../../packages/code-editor/umbraco-package.js'),
+    import('../../packages/content/umbraco-package.js'),
+    import('../../packages/data-type/umbraco-package.js'),
+    import('../../packages/dictionary/umbraco-package.js'),
+    import('../../packages/documents/umbraco-package.js'),
+    import('../../packages/embedded-media/umbraco-package.js'),
+    import('../../packages/extension-insights/umbraco-package.js'),
+    import('../../packages/health-check/umbraco-package.js'),
+    import('../../packages/help/umbraco-package.js'),
+    import('../../packages/language/umbraco-package.js'),
+    import('../../packages/log-viewer/umbraco-package.js'),
+    import('../../packages/management-api/umbraco-package.js'),
+    import('../../packages/markdown-editor/umbraco-package.js'),
+    import('../../packages/media/umbraco-package.js'),
+    import('../../packages/members/umbraco-package.js'),
+    import('../../packages/models-builder/umbraco-package.js'),
+    import('../../packages/multi-url-picker/umbraco-package.js'),
+    import('../../packages/packages/umbraco-package.js'),
+    import('../../packages/performance-profiling/umbraco-package.js'),
+    import('../../packages/property-editors/umbraco-package.js'),
+    import('../../packages/publish-cache/umbraco-package.js'),
+    import('../../packages/relations/umbraco-package.js'),
+    import('../../packages/rte/umbraco-package.js'),
+    import('../../packages/settings/umbraco-package.js'),
+    import('../../packages/static-file/umbraco-package.js'),
+    import('../../packages/sysinfo/umbraco-package.js'),
+    import('../../packages/tags/umbraco-package.js'),
+    import('../../packages/telemetry/umbraco-package.js'),
+    import('../../packages/templating/umbraco-package.js'),
+    import('../../packages/tiptap/umbraco-package.js'),
+    import('../../packages/translation/umbraco-package.js'),
+    import('../../packages/ufm/umbraco-package.js'),
+    import('../../packages/umbraco-news/umbraco-package.js'),
+    import('../../packages/user/umbraco-package.js'),
+    import('../../packages/webhook/umbraco-package.js'),
+];
 let UmbAppElement = class UmbAppElement extends UmbLitElement {
     #authContext;
     #serverConnection;
     #authController;
+    #bundleInitializer;
+    #currentUser;
+    #packageModules;
     constructor() {
         super();
         /**
@@ -120,15 +162,21 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
             {
                 path: '**',
                 component: () => import('../backoffice/backoffice.element.js'),
-                guards: [this.#isAuthorizedGuard()],
+                guards: [this.#isAuthorizedGuard(), this.#loadedGuard()],
             },
         ];
         this.#authController = new UmbAppAuthController(this);
-        new UmbBundleExtensionInitializer(this, umbExtensionsRegistry);
+        this.#bundleInitializer = new UmbBundleExtensionInitializer(this, umbExtensionsRegistry);
         new UUIIconRegistryEssential().attach(this);
         new UmbContextDebugController(this);
         new UmbNetworkConnectionStatusManager(this);
         new UmbViewContext(this, null);
+        this.consumeContext(UMB_CURRENT_USER_CONTEXT, (userContext) => {
+            this.#currentUser = userContext;
+            if (userContext) {
+                this.#loadCurrentUser();
+            }
+        });
     }
     connectedCallback() {
         super.connectedCallback();
@@ -137,6 +185,18 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
     async #setup() {
         this.#authContext = new UmbAuthContext(this, this.serverUrl, this.backofficePath, this.bypassAuth, this.keepUserLoggedIn);
         this.#authContext.configureClient(umbHttpClient);
+        this.observe(this.#authContext.isAuthorized, async (isAuthorized) => {
+            if (isAuthorized === undefined)
+                return;
+            if (isAuthorized) {
+                // TODO: Remove dependency on current user context from the app element in future [MR]
+                this.#loadCurrentUser();
+            }
+            else {
+                // TODO: Unregistering all extensions from v.18 [NL]
+                //void this.#unregisterExtensions();
+            }
+        }, null);
         this.#serverConnection = await new UmbServerConnection(this, this.serverUrl).connect();
         new UmbServerContext(this, {
             backofficePath: this.backofficePath,
@@ -147,8 +207,7 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
         onInit(this, umbExtensionsRegistry);
         // Register public extensions (login extensions)
         await new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPublicExtensions();
-        const initializer = new UmbAppEntryPointExtensionInitializer(this, umbExtensionsRegistry);
-        await firstValueFrom(initializer.loaded);
+        new UmbAppEntryPointExtensionInitializer(this, umbExtensionsRegistry);
         // Try to initialise the auth flow and get the runtime status
         try {
             // If the runtime level is "install" or ?status=false is set, we should clear any cached tokens
@@ -198,6 +257,30 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
         // Auth context configures umbHttpClient in its constructor, so we only need to set initial state
         await this.#authContext.setInitialState();
     }
+    async #registerExtensions() {
+        if (this.#packageModules === undefined) {
+            this.#packageModules = Promise.all(CORE_PACKAGES);
+            this.#packageModules.then(() => {
+                this.#loadCurrentUser();
+            });
+        }
+        umbExtensionsRegistry.registerMany((await this.#packageModules).flatMap((modules) => modules.extensions));
+    }
+    // TODO (V18): Unregister extensions on sign-out. [NL]
+    /*
+        async #unregisterExtensions() {
+            if (!this.#packageModules) return;
+            (await this.#packageModules).forEach((packageModule) => {
+                const aliases = packageModule.extensions.map((extension) => extension.alias);
+                umbExtensionsRegistry.unregisterMany(aliases);
+            });
+        }
+    */
+    #loadCurrentUser() {
+        if (!this.#currentUser || !this.#packageModules)
+            return;
+        this.#currentUser.load();
+    }
     #redirect() {
         const pathname = pathWithoutBasePath({ start: true, end: false });
         // If we are on the oauth_complete or error page, we should not redirect
@@ -238,6 +321,20 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
     #isAuthorizedGuard() {
         return () => this.#authController.isAuthorized() ?? false;
     }
+    #loadedGuard() {
+        return async () => {
+            const results = await Promise.allSettled([
+                this.observe(this.#bundleInitializer?.loaded).asPromise(),
+                this.#registerExtensions(),
+                new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPrivateExtensions(),
+            ]);
+            const result = results.reduce((acc, curr) => acc && curr.status === 'fulfilled', true);
+            if (result === false) {
+                this.#errorPage('Extensions failed loading, this might be due to a network issue or a server error. Check that extensions registered on the server are valid.', undefined, { headline: 'Failed to load extensions' });
+            }
+            return result;
+        };
+    }
     #errorPage(errorMsg, error, options) {
         // Redirect to the error page
         this._routes = [
@@ -258,7 +355,9 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
         this.requestUpdate();
     }
     render() {
-        return html `<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
+        return html `<umb-router-slot id="router-slot" .routes=${this._routes}
+			><div id="loader"><uui-loader data-mark="app-router-loader"></uui-loader></div
+		></umb-router-slot>`;
     }
     static { this.styles = css `
 		:host {
@@ -272,6 +371,20 @@ let UmbAppElement = class UmbAppElement extends UmbLitElement {
 			width: 100%;
 			height: 100vh;
 		}
+
+		#loader {
+			display: flex;
+			height: 100%;
+			justify-content: center;
+			align-items: center;
+			opacity: 0;
+			animation: fadeIn 240ms forwards;
+		}
+		@keyframes fadeIn {
+			to {
+				opacity: 1;
+			}
+		}
 	`; }
 };
 __decorate([

package/dist-cms/apps/backoffice/backoffice.context.js

@@ -6,7 +6,6 @@ import { UmbContextBase } from '../../libs/class-api/index.js';
 import { UmbContextToken } from '../../libs/context-api/index.js';
 import { UmbExtensionsManifestInitializer } from '../../libs/extension-api/index.js';
 import { UmbSysinfoRepository } from '../../packages/sysinfo/index.js';
-import { UMB_AUTH_CONTEXT } from '../../packages/core/auth/index.js';
 import { UMB_CURRENT_USER_CONTEXT } from '../../packages/user/current-user/index.js';
 export class UmbBackofficeContext extends UmbContextBase {
     #activeSectionAlias;
@@ -22,14 +21,7 @@ export class UmbBackofficeContext extends UmbContextBase {
         this.allowedSections = this.#allowedSections.asObservable();
         this.#version = new UmbStringState(undefined);
         this.version = this.#version.asObservable();
-        // 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) => {
-                if (!isAuthorized)
-                    return;
-                this.#getVersion();
-            });
-        });
+        this.#getVersion();
         this.consumeContext(UMB_CURRENT_USER_CONTEXT, (userContext) => {
             this.observe(userContext?.allowedSections, (allowedSections) => {
                 if (!allowedSections)

package/dist-cms/apps/backoffice/backoffice.element.d.ts

@@ -1,14 +1,12 @@
 import { UmbLitElement } from '../../packages/core/lit-element/index.js';
 import './components/index.js';
 export declare class UmbBackofficeElement extends UmbLitElement {
-    #private;
     /**
      * Backoffice extension registry.
      * This enables to register and unregister extensions via DevTools, or just via querying this element via the DOM.
      */
     extensionRegistry: import("../../packages/core/extension-registry/index.js").UmbBackofficeExtensionRegistry;
     constructor();
-    firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];
 }

package/dist-cms/apps/backoffice/backoffice.element.js

@@ -7,49 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbBackofficeContext } from './backoffice.context.js';
 import { css, html, customElement } from '../../external/lit/index.js';
 import { UmbBackofficeEntryPointExtensionInitializer, UmbEntryPointExtensionInitializer, umbExtensionsRegistry, } from '../../packages/core/extension-registry/index.js';
-import { UmbServerExtensionRegistrator } from '../../libs/extension-api/index.js';
 import { UmbLitElement } from '../../packages/core/lit-element/index.js';
-import { UMB_AUTH_CONTEXT } from '../../packages/core/auth/index.js';
 import './components/index.js';
-const CORE_PACKAGES = [
-    import('../../packages/block/umbraco-package.js'),
-    import('../../packages/clipboard/umbraco-package.js'),
-    import('../../packages/code-editor/umbraco-package.js'),
-    import('../../packages/content/umbraco-package.js'),
-    import('../../packages/data-type/umbraco-package.js'),
-    import('../../packages/dictionary/umbraco-package.js'),
-    import('../../packages/documents/umbraco-package.js'),
-    import('../../packages/embedded-media/umbraco-package.js'),
-    import('../../packages/extension-insights/umbraco-package.js'),
-    import('../../packages/health-check/umbraco-package.js'),
-    import('../../packages/help/umbraco-package.js'),
-    import('../../packages/language/umbraco-package.js'),
-    import('../../packages/log-viewer/umbraco-package.js'),
-    import('../../packages/management-api/umbraco-package.js'),
-    import('../../packages/markdown-editor/umbraco-package.js'),
-    import('../../packages/media/umbraco-package.js'),
-    import('../../packages/members/umbraco-package.js'),
-    import('../../packages/models-builder/umbraco-package.js'),
-    import('../../packages/multi-url-picker/umbraco-package.js'),
-    import('../../packages/packages/umbraco-package.js'),
-    import('../../packages/performance-profiling/umbraco-package.js'),
-    import('../../packages/property-editors/umbraco-package.js'),
-    import('../../packages/publish-cache/umbraco-package.js'),
-    import('../../packages/relations/umbraco-package.js'),
-    import('../../packages/rte/umbraco-package.js'),
-    import('../../packages/settings/umbraco-package.js'),
-    import('../../packages/static-file/umbraco-package.js'),
-    import('../../packages/sysinfo/umbraco-package.js'),
-    import('../../packages/tags/umbraco-package.js'),
-    import('../../packages/telemetry/umbraco-package.js'),
-    import('../../packages/templating/umbraco-package.js'),
-    import('../../packages/tiptap/umbraco-package.js'),
-    import('../../packages/translation/umbraco-package.js'),
-    import('../../packages/ufm/umbraco-package.js'),
-    import('../../packages/umbraco-news/umbraco-package.js'),
-    import('../../packages/user/umbraco-package.js'),
-    import('../../packages/webhook/umbraco-package.js'),
-];
 let UmbBackofficeElement = class UmbBackofficeElement extends UmbLitElement {
     constructor() {
         super();
@@ -62,23 +21,6 @@ let UmbBackofficeElement = class UmbBackofficeElement extends UmbLitElement {
         new UmbBackofficeEntryPointExtensionInitializer(this, umbExtensionsRegistry);
         new UmbEntryPointExtensionInitializer(this, umbExtensionsRegistry);
     }
-    async firstUpdated() {
-        // TODO: Move this logic into the Context? [NL]
-        await this.#extensionsAfterAuth();
-        // So far local packages are this simple to register, so no need for a manager to do that:
-        CORE_PACKAGES.forEach(async (packageImport) => {
-            const packageModule = await packageImport;
-            umbExtensionsRegistry.registerMany(packageModule.extensions);
-        });
-    }
-    async #extensionsAfterAuth() {
-        const authContext = await this.getContext(UMB_AUTH_CONTEXT, { preventTimeout: true });
-        if (!authContext) {
-            throw new Error('UmbBackofficeElement requires the UMB_AUTH_CONTEXT to be set.');
-        }
-        await this.observe(authContext.isAuthorized).asPromise();
-        await new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerPrivateExtensions();
-    }
     render() {
         return html `
 			<umb-backoffice-header></umb-backoffice-header>

package/dist-cms/apps/backoffice/components/backoffice-main.element.d.ts

@@ -1,11 +1,11 @@
 import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
 export declare class UmbBackofficeMainElement extends UmbLitElement {
     #private;
-    private _routes;
+    private _routes?;
     private _sections;
     constructor();
     private _observeBackoffice;
-    render(): import("lit-html").TemplateResult<1> | undefined;
+    render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/dist-cms/apps/backoffice/components/backoffice-main.element.js

@@ -13,7 +13,6 @@ let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElem
     #backofficeContext;
     constructor() {
         super();
-        this._routes = [];
         this._sections = [];
         this.consumeContext(UMB_BACKOFFICE_CONTEXT, (_instance) => {
             this.#backofficeContext = _instance;
@@ -64,8 +63,9 @@ let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElem
         this._routes = newRoutes;
     }
     render() {
-        if (!this._routes.length)
-            return;
+        if (!this._routes || !this._routes.length) {
+            return html `<div id="loader"><uui-loader></uui-loader></div>`;
+        }
         return html `<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
     }
     static { this.styles = [
@@ -78,6 +78,19 @@ let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElem
 					100% - 60px
 				); /* 60 => top header height, TODO: Make sure this comes from somewhere so it is maintainable and eventually responsive. */
 			}
+
+			#loader {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				opacity: 0;
+				animation: fadeIn 240ms forwards;
+			}
+			@keyframes fadeIn {
+				to {
+					opacity: 1;
+				}
+			}
 		`,
     ]; }
 };

package/dist-cms/libs/extension-api/controller/base-extension-initializer.controller.d.ts

@@ -20,7 +20,7 @@ export declare abstract class UmbBaseExtensionInitializer<ManifestType extends M
     constructor(host: UmbControllerHost, extensionRegistry: UmbExtensionRegistry<ManifestCondition>, controllerTypeName: string, alias: string, onPermissionChanged?: (isPermitted: boolean, controller: SubClassType) => void);
     protected _init(): void;
     asPromise(): Promise<void>;
-    protected abstract _conditionsAreGood(): Promise<boolean>;
+    protected abstract _conditionsAreGood(signal: AbortSignal): Promise<boolean>;
     protected abstract _conditionsAreBad(): Promise<void>;
     equal(otherClass: UmbBaseExtensionInitializer | undefined): boolean;
     destroy(): void;

package/dist-cms/libs/extension-api/controller/base-extension-initializer.controller.js

@@ -46,7 +46,7 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
             return (this.#manifest?.conditions ?? []).length > 0;
         };
         this.#gotConditions = (manifests) => {
-            manifests.forEach(this.#gotCondition);
+            manifests?.forEach(this.#gotCondition);
         };
         this.#gotCondition = async (conditionManifest) => {
             if (!this.#manifest)
@@ -88,34 +88,54 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
                 // When writing this the only plausible case is a call from the conditionController to the onChange callback.
                 return;
             }
+            // Find a condition that is not permitted (Notice how no conditions, means that this extension is permitted)
+            const isPositive = this.#checkConditionsAreGood();
+            if (this._isConditionsPositive === isPositive) {
+                // No change in the conditions, so we don't need to do anything, this is an optimization to prevent multiple calls to the callback when there is no change. [NL]
+                return;
+            }
             // We will collect old value here, but we need to re-collect it after a async method have been called, as it could have changed in the mean time. [NL]
             let oldValue = this.#isPermitted ?? false;
-            // Find a condition that is not permitted (Notice how no conditions, means that this extension is permitted)
-            const isPositive = this.#conditionsAreInitialized() &&
-                this.#conditionControllers.some((condition) => condition.permitted === false) === false;
             this._isConditionsPositive = isPositive;
             if (isPositive === true) {
                 if (this.#isPermitted !== true) {
-                    const newPermission = await this._conditionsAreGood();
-                    // Only set new permission if we are still positive, otherwise it means that we have been destroyed in the mean time. [NL]
-                    if (newPermission === false || this._isConditionsPositive === false) {
-                        // Then we need to revert the above work:
-                        this._conditionsAreBad();
+                    let newPermission;
+                    // check current pending _conditionsAreGood call: [NL]
+                    let entry = this.#pendingGoodCall;
+                    if (entry && entry.manifest === this.#manifest) {
+                        newPermission = await entry.promise;
+                    }
+                    else {
+                        // Since this is a new call, then lets abort the pending call. [NL]
+                        this.#abortPendingGoodCall();
+                        await this._conditionsAreBad();
+                        const abortController = new AbortController();
+                        const promise = this._conditionsAreGood(abortController.signal);
+                        entry = { manifest: this.#manifest, promise, abortController };
+                        this.#pendingGoodCall = entry;
+                        newPermission = await promise;
+                    }
+                    if (this.#pendingGoodCall !== entry) {
                         return;
                     }
+                    else {
+                        this.#pendingGoodCall = undefined;
+                    }
+                    // Only set new permission if we are still positive, otherwise it means that we have been destroyed in the mean time, or we got destroyed. [NL]
+                    if (newPermission === false || this._isConditionsPositive !== true) {
+                        // Then we need to revert the above work. Sync call — see the note in
+                        // the else-if branch on why we don't await. [NL]
+                        this._conditionsAreBad();
+                        newPermission = false;
+                    }
                     // We update the oldValue as this point, cause in this way we are sure its the value at this point, when doing async code someone else might have changed the state in the mean time. [NL]
                     oldValue = this.#isPermitted ?? false;
                     this.#isPermitted = newPermission;
                 }
             }
             else if (this.#isPermitted !== false) {
-                // Clean up:
-                await this._conditionsAreBad();
-                // Only continue if we are still negative, otherwise it means that something changed in the mean time. [NL]
-                if (this._isConditionsPositive === true) {
-                    return;
-                }
-                // We update the oldValue as this point, cause in this way we are sure its the value at this point, when doing async code someone else might have changed the state in the mean time. [NL]
+                // clean-up any current [NL]
+                this._conditionsAreBad();
                 oldValue = this.#isPermitted ?? false;
                 this.#isPermitted = false;
             }
@@ -146,6 +166,7 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
             }
             else {
                 this.#manifest = undefined;
+                this._isConditionsPositive = undefined;
                 this.#clearPermittedState();
                 this.#overwrites = [];
                 this.#cleanConditions();
@@ -240,10 +261,28 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
         }
         return undefined;
     }
-    #conditionsAreInitialized() {
+    #checkConditionsAreGood() {
         // Not good if we don't have a manifest.
+        if (this.#manifest === undefined)
+            return false;
         // Only good if conditions of manifest is equal to the amount of condition controllers (one for each condition). [NL]
-        return (this.#manifest !== undefined && this.#conditionControllers.length === (this.#manifest.conditions ?? []).length);
+        const hasAllConditions = (this.#manifest.conditions ?? []).length === this.#conditionControllers.length;
+        if (hasAllConditions === false)
+            return false;
+        // Compare all manifest conditions with the condition controllers configs to be sure we have the right ones, as we might end up in a state where we have the same amount of controllers as conditions, but they are not the right ones. [NL]
+        const allConditionsHaveControllers = (this.#manifest.conditions ?? []).every((condition) => this.#conditionControllers.some((controller) => controller.config === condition));
+        if (allConditionsHaveControllers === false)
+            return false;
+        // Only good if all the conditions are permitted:
+        return this.#conditionControllers.some((condition) => condition.permitted === false) === false;
+    }
+    // The currently-pending `_conditionsAreGood()` promise and manifest, to detect if we can reuse it.
+    #pendingGoodCall;
+    #abortPendingGoodCall() {
+        if (this.#pendingGoodCall) {
+            this.#pendingGoodCall.abortController.abort();
+            this.#pendingGoodCall = undefined;
+        }
     }
     #onConditionsChangedCallback;
     equal(otherClass) {
@@ -279,9 +318,12 @@ export class UmbBaseExtensionInitializer extends UmbControllerBase {
             return;
         this.#manifest = undefined;
         this.#promiseResolvers = [];
+        // Abort any pending good-call so its subclass run refuses to commit (sees
+        // `signal.aborted`) instead of trying to assign into a destroyed initializer. [NL]
+        this.#abortPendingGoodCall();
         this.#clearPermittedState(); // This fires the callback as not permitted, if it was permitted before. [NL]
         this.#isPermitted = undefined;
-        this._isConditionsPositive = false;
+        this._isConditionsPositive = undefined;
         this.#overwrites = [];
         this.#cleanConditions();
         this.#onPermissionChanged = undefined;

package/dist-cms/libs/extension-api/controller/extension-api-initializer.controller.d.ts

@@ -36,7 +36,7 @@ export declare class UmbExtensionApiInitializer<ManifestType extends ManifestApi
      * ```
      */
     constructor(host: UmbControllerHost, extensionRegistry: UmbExtensionRegistry<ManifestCondition>, alias: string, constructorArguments: Array<unknown> | UmbApiConstructorArgumentsMethodType<ManifestType> | undefined, onPermissionChanged?: (isPermitted: boolean, controller: ControllerType) => void);
-    protected _conditionsAreGood(): Promise<boolean>;
+    protected _conditionsAreGood(signal: AbortSignal): Promise<boolean>;
     protected _conditionsAreBad(): Promise<void>;
     destroy(): void;
 }

package/dist-cms/libs/extension-api/controller/extension-api-initializer.controller.js

@@ -60,13 +60,20 @@ export class UmbExtensionApiInitializer extends UmbBaseExtensionInitializer {
         });
     };
     */
-    async _conditionsAreGood() {
+    async _conditionsAreGood(signal) {
         const manifest = this.manifest; // In this case we are sure its not undefined.
         const newApi = await createExtensionApi(this._host, manifest, this.#constructorArguments);
-        if (!this._isConditionsPositive) {
-            // We are not positive anymore, so we will back out of this creation.
+        if (signal.aborted || !this._isConditionsPositive) {
+            newApi?.destroy?.();
             return false;
         }
+        // A previous _conditionsAreGood() on this same initializer may have already
+        // assigned this.#api and resolved before us. Without cleanup that instance would
+        // keep running until this._host is destroyed — not a hard leak, but any
+        // subscriptions / context consumers / async setup it started stay alive.
+        if (this.#api && this.#api !== newApi) {
+            this.#api.destroy?.();
+        }
         this.#api = newApi;
         if (this.#api) {
             this.#api.manifest = manifest;

package/dist-cms/libs/extension-api/controller/extension-element-and-api-initializer.controller.d.ts

@@ -32,7 +32,7 @@ export declare class UmbExtensionElementAndApiInitializer<ManifestType extends M
     get apiProps(): Record<string, unknown> | undefined;
     set apiProps(newVal: Record<string, unknown> | undefined);
     constructor(host: UmbControllerHost, extensionRegistry: UmbExtensionRegistry<ManifestCondition>, alias: string, constructorArguments: Array<unknown> | UmbApiConstructorArgumentsMethodType<ManifestType> | undefined, onPermissionChanged: (isPermitted: boolean, controller: ControllerType) => void, defaultElement?: string, defaultApi?: ApiLoaderProperty<ExtensionApiInterface>);
-    protected _conditionsAreGood(): Promise<boolean>;
+    protected _conditionsAreGood(signal: AbortSignal): Promise<boolean>;
     protected _conditionsAreBad(): Promise<void>;
     destroy(): void;
 }

package/dist-cms/libs/extension-api/controller/extension-element-and-api-initializer.controller.js

@@ -100,17 +100,26 @@ export class UmbExtensionElementAndApiInitializer extends UmbBaseExtensionInitia
             this.#api[key] = this.#apiProps[key];
         });
     };
-    async _conditionsAreGood() {
+    async _conditionsAreGood(signal) {
         const manifest = this.manifest; // In this case we are sure its not undefined.
         const { element: newComponent, api: newApi } = await createExtensionElementWithApi(manifest, this.#constructorArguments, this.#defaultElement, this.#defaultApi);
-        if (!this._isConditionsPositive) {
+        if (signal.aborted || !this._isConditionsPositive) {
             newApi?.destroy?.();
             if (newComponent && 'destroy' in newComponent) {
                 newComponent.destroy();
             }
-            // We are not positive anymore, so we will back out of this creation.
             return false;
         }
+        // A previous _conditionsAreGood() on this same initializer may have already
+        // assigned this.#api / this.#component and resolved before us. The API's host is
+        // the transient element (see createExtensionElementWithApi), not this initializer,
+        // so nothing else in the controller-host chain will clean an orphaned pair up.
+        if (this.#api && this.#api !== newApi) {
+            this.#api.destroy?.();
+        }
+        if (this.#component && this.#component !== newComponent && 'destroy' in this.#component) {
+            this.#component.destroy();
+        }
         this.#api = newApi;
         if (this.#api) {
             this.#assignApiProps();

package/dist-cms/libs/extension-api/controller/extension-element-initializer.controller.d.ts

@@ -22,7 +22,7 @@ export declare class UmbExtensionElementInitializer<ManifestType extends Manifes
     get properties(): Record<string, unknown> | undefined;
     set properties(newVal: Record<string, unknown> | undefined);
     constructor(host: UmbControllerHost, extensionRegistry: UmbExtensionRegistry<ManifestCondition>, alias: string, onPermissionChanged: (isPermitted: boolean, controller: ControllerType) => void, defaultElement?: string);
-    protected _conditionsAreGood(): Promise<boolean>;
+    protected _conditionsAreGood(signal: AbortSignal): Promise<boolean>;
     protected _conditionsAreBad(): Promise<void>;
     destroy(): void;
 }

package/dist-cms/libs/extension-api/controller/extension-element-initializer.controller.js

@@ -56,13 +56,21 @@ export class UmbExtensionElementInitializer extends UmbBaseExtensionInitializer
             this.#component[key] = this.#properties[key];
         });
     };
-    async _conditionsAreGood() {
+    async _conditionsAreGood(signal) {
         const manifest = this.manifest; // In this case we are sure its not undefined.
         const newComponent = await createExtensionElement(manifest, this.#defaultElement);
-        if (!this._isConditionsPositive) {
-            // We are not positive anymore, so we will back out of this creation.
+        if (signal.aborted || !this._isConditionsPositive) {
+            if (newComponent && 'destroy' in newComponent) {
+                newComponent.destroy();
+            }
             return false;
         }
+        if (this.#component && this.#component !== newComponent) {
+            if ('destroy' in this.#component) {
+                this.#component.destroy();
+            }
+            this.#component = undefined;
+        }
         this.#component = newComponent;
         if (this.#component) {
             this.#assignProperties();

package/dist-cms/libs/extension-api/controller/extension-manifest-initializer.controller.d.ts

@@ -13,6 +13,6 @@ import type { UmbControllerHost } from '../../controller-api/index.js';
  */
 export declare class UmbExtensionManifestInitializer<ManifestType extends ManifestWithDynamicConditions = ManifestWithDynamicConditions, ControllerType extends UmbBaseExtensionInitializer<ManifestType, any> = any> extends UmbBaseExtensionInitializer<ManifestType, ControllerType> {
     constructor(host: UmbControllerHost, extensionRegistry: UmbExtensionRegistry<ManifestCondition>, alias: string, onPermissionChanged: (isPermitted: boolean, controller: ControllerType) => void);
-    protected _conditionsAreGood(): Promise<boolean>;
+    protected _conditionsAreGood(_signal: AbortSignal): Promise<boolean>;
     protected _conditionsAreBad(): Promise<void>;
 }