Extensions: Adds @provideContext and @consumeContext decorators for a better developer experience

[iOvergaard]

Description

This pull request adds two new decorators to the Backoffice package: @provideContext and @consumeContext.

Changes

provideContext

import { provideContext } from '@umbraco-cms/backoffice/context-api'; // <-- Import the decorator

class MyContext extends UmbControllerBase {
  prop = 'some value';
}

const MY_TOKEN = new UmbContextToken<MyContext>('my-context')

@customElement('my-element')
export class UmbMyElement extends UmbLitElement {
  @provideContext({ context: MY_TOKEN }) // <-- This is the provide decorator
  private _context = new MyContext(this);
}

• Added a new provideContext property decorator in context-provide.decorator.ts, supporting both standard (Stage 3 TC39) and legacy TypeScript decorators. This makes it easier to provide a context instance downstream from an element or a controller.
• Exported the new provideContext decorator from the context API's main index for easy access.

consumeContext

import { consumeContext } from '@umbraco-cms/backoffice/context-api'; // <-- Import the decorator

@customElement('sub-element')
export class UmbSubElement extends UmbLitElement {

  // Use case 1: Store context for later rendering
  @consumeContext({ context: MY_TOKEN }) // <-- This is the consume decorator
  @state() // <-- Make sure to mark this property as reactive
  private _context: typeof MY_TOKEN.TYPE;

  // Use case 2: Act on a received context
  @consumeContext({ context: MY_TOKEN })
  private set _contextInitializer(value) {
    this.observe(value.someObservableProperty, (value) => {
      console.log('received observed value', value);
    })
  }

  // Use case 3: Add a side-effect (static calls) to a context
  @consumeContext({ 
    context: MY_TOKEN,
    callback: (value) => {
      MyStaticLogger.log('received value from context', value)
    }
  })
  private _contextSideeffect: typeof MY_TOKEN.TYPE;

  render() {
    return this._context?.prop ?? '';
  }
}

• Added a new consumeContext property decorator in context-consume.decorator.ts, supporting both standard (Stage 3 TC39) and legacy TypeScript decorators, with options for callbacks and subscription control. This greatly improves flexibility and type safety for consuming context in components and controllers.
• Exported the new consumeContext decorator from the context API's main index for easy access.

Test Coverage Improvements

• Added comprehensive tests for the consumeContext decorator, covering usage in components and controllers, callback invocation, context updates, and non-subscribing consumers.
• Added thorough tests for the provideContext decorator, verifying context provision, controller usage, immutability of provided values, and correct update behavior.

Context Consumer Reliability

• Improved reliability in UmbContextConsumer by adding a connection check before dispatching context requests, preventing requests on disconnected elements, and logging warnings for such cases.

Log Viewer

• replaced existing consumption of contexts with the @consumeContext decorator to demonstrate its usage.

[Copilot]

Pull Request Overview

Adds new @Providecontext and @consumeContext decorators to the Backoffice context API for simpler and more type-safe context provision/consumption, and migrates Log Viewer components to use them.

• Introduces provideContext and consumeContext decorators with support for both standard (Stage 3) and legacy TypeScript decorators.
• Refactors Log Viewer UI components to use @consumeContext and simplifies observers.
• Improves UmbContextConsumer reliability and extends tests to cover decorators.

Reviewed Changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/log-search-view.element.ts	Replaces manual context consumption with @consumeContext and simplifies observers.
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.ts	Migrates to @consumeContext and streamlines saved searches and query handling.
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-polling-button.element.ts	Migrates to @consumeContext and normalizes polling config default.
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-messages-list.element.ts	Migrates to @consumeContext and simplifies observers.
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-log-level-filter-menu.element.ts	Migrates to @consumeContext and simplifies observers.
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/log-overview-view.element.ts	Migrates to @consumeContext and triggers initial data fetch via decorator callback.
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts	Migrates to @consumeContext and centralizes initial data load.
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts	Migrates to @consumeContext and centralizes initial data load.
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts	Migrates to @consumeContext and simplifies observers.
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-log-level-overview.element.ts	Migrates to @consumeContext and simplifies observers.
src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/log-viewer-date-range-selector.element.ts	Migrates to @consumeContext and updates bindings for date boundaries.
src/Umbraco.Web.UI.Client/src/mocks/data/log-viewer.data.ts	Normalizes level strings to lowercase before counting.
src/Umbraco.Web.UI.Client/src/libs/context-api/provide/index.ts	Re-exports the provideContext decorator.
src/Umbraco.Web.UI.Client/src/libs/context-api/provide/context-provide.decorator.ts	Implements provideContext decorator (standard and legacy) with docs and typing.
src/Umbraco.Web.UI.Client/src/libs/context-api/provide/context-provide.decorator.test.ts	Adds provideContext tests for elements and controllers.
src/Umbraco.Web.UI.Client/src/libs/context-api/consume/index.ts	Re-exports the consumeContext decorator.
src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.ts	Adds connection check before dispatching context requests.
src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consume.decorator.ts	Implements consumeContext decorator (standard and legacy) with docs and typing.
src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consume.decorator.test.ts	Adds consumeContext tests including non-subscribing behavior.

[leekelleher]

LGTM! 😎