umbraco-context-api

Umbraco Context API

これは何ですか？

Context API は Umbraco の通信システムであり、拡張機能がコンポーネント階層を通じて密結合なしにデータと機能を共有できるようにします。これはプロバイダー・コンシューマーパターンを使用しており、親要素が提供するコンテキストに子孫コンポーネントがアクセスできます。コンテキストは DOM ツリーを下方向にカスケードし、通知、ワークスペース、ユーザー情報などのサービスに型安全にアクセスするためのトークンを使用します。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください：

• メインドキュメント: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/context-api
• コンテキストの消費: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/context-api/consume-a-context
• コンテキストの提供: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/context-api/provide-a-context
• 基盤: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - 消費または提供のどちらが必要ですか？どのコンテキストですか？一度きりですか、それともサブスクリプションですか？
3. コードを生成 - 最新のドキュメントに基づいて、コンテキストの消費または提供を実装します
4. 説明 - 何が作成されたか、コンテキストがどのように流れるかを示します

最小限の例

コンテキストの消費（サブスクリプションパターン）

import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';

export class MyElement extends UmbLitElement {
  #notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;

  constructor() {
    super();

    // Subscribe to context - callback runs when context is available
    this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
      this.#notificationContext = context;
    });
  }

  showMessage() {
    this.#notificationContext?.peek('positive', {
      data: { message: 'Hello from Context API!' }
    });
  }
}

コンテキストの消費（一度きりのパターン）

import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';

export class MyService extends UmbControllerBase {
  async showNotification(text: string) {
    // Get context once, use it, then release
    const context = await this.getContext(UMB_NOTIFICATION_CONTEXT);
    context?.peek('positive', { data: { message: text } });
  }
}

コンテキストの提供

import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';

// Define a context token
export const MY_CUSTOM_CONTEXT = new UmbContextToken<MyCustomContext>(
  'MyCustomContext'
);

export class MyCustomContext {
  getData() {
    return { message: 'Hello from custom context!' };
  }
}

export class MyProviderElement extends UmbLitElement {
  constructor() {
    super();

    // Provide context to all descendants
    this.provideContext(MY_CUSTOM_CONTEXT, new MyCustomContext());
  }
}

一般的な組み込みコンテキスト

// Notifications
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';

// Current User
import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';

// Modal Manager
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';

// Workspace (varies by type)
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document';

// Block Entry (for block editors)
import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';

// Property Dataset (for property editors)
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';

主要な概念

コンテキストトークン: コンテキストの型安全な識別子

const MY_TOKEN = new UmbContextToken<MyType>('UniqueName');

プロバイダー: provideContext() を介して子孫にコンテキストを提供する要素

コンシューマー: consumeContext() または getContext() を介してコンテキストにアクセスする要素

サブスクリプションと一度きり:

• 初期化中にコンテキストが必要な場合は consumeContext() を使用します
• ユーザー操作によってトリガーされるアクションには getContext() を使用します

階層: コンテキストはプロバイダーからコンシューマーへ DOM ツリーを下方向に流れます

以上です！常に最新のドキュメントを取得し、例は最小限に保ち、完全に動作するコードを生成してください。