From 5c2236fe409c71ef905b2e6757e0637c57d67a94 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 14 Feb 2023 14:12:51 +0000 Subject: [PATCH] Some work witrh help of pairing with Mads to get the contexts collected and then passed to callback on original firing event --- .../consume/context-request.event.ts | 8 +++ .../context-api/provide/context-provider.ts | 24 ++++---- src/Umbraco.Web.UI.Client/src/app.ts | 11 ++++ .../shared/components/debug/debug.element.ts | 57 ++++++++++++++----- 4 files changed, 75 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-request.event.ts b/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-request.event.ts index 9d8fa86dec..ab96c5bd51 100644 --- a/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-request.event.ts +++ b/src/Umbraco.Web.UI.Client/libs/context-api/consume/context-request.event.ts @@ -1,6 +1,7 @@ import { UmbContextToken } from '../context-token'; export const umbContextRequestEventType = 'umb:context-request'; +export const umbDebugContextEventType = 'umb:debug-contexts'; export type UmbContextCallback = (instance: T) => void; @@ -31,3 +32,10 @@ export class UmbContextRequestEventImplementation extends Event imp export const isUmbContextRequestEvent = (event: Event): event is UmbContextRequestEventImplementation => { return event.type === umbContextRequestEventType; }; + + +export class UmbContextDebugRequest extends Event { + public constructor(public readonly callback:any) { + super(umbDebugContextEventType, { bubbles: true, composed: true, cancelable: false }); + } +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts b/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts index 3f32cc247b..afeb0b50cb 100644 --- a/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts +++ b/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts @@ -1,4 +1,5 @@ -import { umbContextRequestEventType, isUmbContextRequestEvent } from '../consume/context-request.event'; +import { map } from 'rxjs'; +import { umbContextRequestEventType, isUmbContextRequestEvent, umbDebugContextEventType } from '../consume/context-request.event'; import { UmbContextToken } from '../context-token'; import { UmbContextProvideEventImplementation } from './context-provide.event'; @@ -33,7 +34,7 @@ export class UmbContextProvider { this.host.dispatchEvent(new UmbContextProvideEventImplementation(this._contextAlias)); // Listen to our debug event 'umb:debug-contexts' - this.host.addEventListener('umb:debug-contexts', this._handleDebugContextRequest); + this.host.addEventListener(umbDebugContextEventType, this._handleDebugContextRequest); } /** @@ -57,15 +58,18 @@ export class UmbContextProvider { event.callback(this.#instance); }; - private _handleDebugContextRequest = (event: Event) => { + private _handleDebugContextRequest = (event: any) => { + // If the event doesn't have an instances property, create it. + if(!event.instances){ + event.instances = new Map(); + } - - console.log('Context Alias:', this._contextAlias); - console.log('Context Instance:', this.#instance); - - // Do I update an array on the event which - // The Debug element can then render in UI?! - console.log('Event:', event); + // If the event doesn't have an instance for this context, add it. + // Nearest to the DOM element of will be added first + // as contexts can change/override deeper in the DOM + if(!event.instances.has(this._contextAlias)){ + event.instances.set(this._contextAlias, this.#instance); + } }; diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts index 22ab81b634..18d11ccbf2 100644 --- a/src/Umbraco.Web.UI.Client/src/app.ts +++ b/src/Umbraco.Web.UI.Client/src/app.ts @@ -19,6 +19,7 @@ import { UmbLitElement } from '@umbraco-cms/element'; import { tryExecuteAndNotify } from '@umbraco-cms/resources'; import { OpenAPI, RuntimeLevelModel, ServerResource } from '@umbraco-cms/backend-api'; import { UmbIconStore } from '@umbraco-cms/store'; +import { UmbContextDebugRequest, umbDebugContextEventType } from '@umbraco-cms/context-api'; @customElement('umb-app') export class UmbApp extends UmbLitElement { @@ -83,6 +84,16 @@ export class UmbApp extends UmbLitElement { await this._setInitStatus(); await this._registerExtensionManifestsFromServer(); this._redirect(); + + // Listen for the debug event from the component + this.addEventListener(umbDebugContextEventType, (event: any) => { + // Once we got to the outter most component + // we can send the event containing all the contexts + // we have collected whilst coming up through the DOM + // and pass it back down to the callback in + // the component that originally fired the event + event.callback(event.instances); + }); } private async _setup() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts index c3792acc7d..9afe71faab 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts @@ -1,7 +1,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { UmbContextRequestEventImplementation, umbContextRequestEventType } from '@umbraco-cms/context-api'; +import { UmbContextDebugRequest, UmbContextRequestEventImplementation, umbContextRequestEventType } from '@umbraco-cms/context-api'; @customElement('umb-debug') @@ -27,7 +27,7 @@ export class UmbDebug extends LitElement { } .events.open { - height:200px; + height:auto; } .events > div { @@ -43,8 +43,8 @@ export class UmbDebug extends LitElement { @property({reflect: true, type: Boolean}) enabled = false; - @property({type: Array}) - contextAliases = ['UmbTemplateDetailStore', 'umbLanguageStore']; + @property() + contextAliases = new Map(); @state() private _debugPaneOpen = false; @@ -55,15 +55,13 @@ export class UmbDebug extends LitElement { connectedCallback(): void { super.connectedCallback(); - - // Create event that bubbles up through the DOM - const event = new CustomEvent('umb:debug-contexts', { - bubbles: true, - composed: true - }); - + // Dispatch it - this.dispatchEvent(event); + this.dispatchEvent(new UmbContextDebugRequest((instances)=> { + console.log('I have contexts now', instances); + + this.contextAliases = instances; + })); } render() { @@ -80,9 +78,7 @@ export class UmbDebug extends LitElement {

Context Aliases to consume

    - ${this.contextAliases.map((ctxAlias) => - html`
  • ${ctxAlias}
    • ` - )} + ${this._renderContextAliases()}
@@ -92,6 +88,37 @@ export class UmbDebug extends LitElement { return nothing; } + + private _renderContextAliases() { + const aliases = []; + + for (const [alias, instance] of this.contextAliases) { + aliases.push( + html` +
  • + ${alias} +
      + ${this._renderInstance(instance)} +
    +
    • ` + ); + } + + return aliases; + } + + private _renderInstance(instance: any) { + const instanceKeys = []; + + for(const key in instance) { + // Goes KABOOM - if try to loop over the class/object + // instanceKeys.push(html`
  • ${key} = ${instance[key]}
    • `); + + instanceKeys.push(html`
  • ${key}
    • `); + } + + return instanceKeys; + } } declare global {