VariantContext

.vscode/settings.json

@@ -5,8 +5,10 @@
 		"Backoffice",
 		"combobox",
 		"Elementable",
+		"invariantable",
 		"Niels",
 		"pickable",
+		"Registrator",
 		"templating",
 		"tinymce",
 		"umbraco",

public-assets/App_Plugins/custom-bundle-package/index.js

@@ -0,0 +1,13 @@
+export const manifests = [
+	{
+		type: 'section',
+		alias: 'MyBundle.Section.Custom',
+		name: 'Custom Section',
+		js: '/App_Plugins/section.js',
+		weight: 1,
+		meta: {
+			label: 'My Bundle Section',
+			pathname: 'my-custom-bundle',
+		},
+	}
+];

public-assets/App_Plugins/custom-bundle-package/package-manifest.json

@@ -0,0 +1,12 @@
+{
+	"name": "My Package Name",
+	"version": "1.0.0",
+	"extensions": [
+		{
+			"type": "bundle",
+			"alias": "My.Package.Bundle",
+			"name": "My Package Bundle",
+			"js": "/App_Plugins/custom-bundle-package/index.js"
+		}
+	]
+}

public-assets/App_Plugins/custom-entrypoint.js

@@ -1,4 +1,4 @@
 console.log('Hello from the custom entrypoint file!');
-export default function () {
-	console.log('Hello from the custom entrypoint inside the default function!');
+export function onInit() {
+	console.log('Hello from the custom entrypoint inside the onInit function!');
 }

src/apps/backoffice/backoffice.element.ts

@@ -1,5 +1,5 @@
 import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context.js';
-import { UmbExtensionInitializer } from './extension-initializer.controller.js';
+import { UmbServerExtensionRegistrator } from './server-extension-registrator.controller.js';
 import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import {
@@ -28,14 +28,28 @@ const CORE_PACKAGES = [
 
 @customElement('umb-backoffice')
 export class UmbBackofficeElement extends UmbLitElement {
+
+	/**
+	 * Backoffice extension registry.
+	 * This enables to register and unregister extensions via DevTools, or just via querying this element via the DOM.
+	 * @type {UmbExtensionsRegistry}
+	 */
+	public extensionRegistry = umbExtensionsRegistry;
+
 	constructor() {
 		super();
+
 		this.provideContext(UMB_BACKOFFICE_CONTEXT_TOKEN, new UmbBackofficeContext(this));
 		new UmbBundleExtensionInitializer(this, umbExtensionsRegistry);
 		new UmbEntryPointExtensionInitializer(this, umbExtensionsRegistry);
+		new UmbServerExtensionRegistrator(this, umbExtensionsRegistry);
+
+		// So far local packages are this simple to registerer, so no need for a manager to do that:
+		CORE_PACKAGES.forEach(async (packageImport) => {
+			const packageModule = await packageImport;
+			umbExtensionsRegistry.registerMany(packageModule.extensions);
+		});
 
-		const extensionInitializer = new UmbExtensionInitializer(this, umbExtensionsRegistry);
-		extensionInitializer.setLocalPackages(CORE_PACKAGES);
 	}
 
 	render() {

src/apps/backoffice/extension-initializer.controller.ts → src/apps/backoffice/server-extension-registrator.controller.ts

@@ -1,44 +1,22 @@
-import { Subject } from '@umbraco-cms/backoffice/external/rxjs';
 import { PackageResource, OpenAPI } from '@umbraco-cms/backoffice/backend-api';
 import { UmbBaseController, UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbBackofficeExtensionRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 import { ManifestBase, isManifestJSType } from '@umbraco-cms/backoffice/extension-api';
 
-// TODO: consider if this can be replaced by the new extension controllers.
+// TODO: consider if this can be replaced by the new extension controllers
 // TODO: move local part out of this, and name something with server.
-export class UmbExtensionInitializer extends UmbBaseController {
+export class UmbServerExtensionRegistrator extends UmbBaseController {
 	#extensionRegistry: UmbBackofficeExtensionRegistry;
-	#unobserve = new Subject<void>();
-	#localPackages: Array<Promise<any>> = [];
 	#apiBaseUrl = OpenAPI.BASE;
 
 	constructor(host: UmbControllerHost, extensionRegistry: UmbBackofficeExtensionRegistry) {
-		super(host, UmbExtensionInitializer.name);
+		super(host, UmbServerExtensionRegistrator.name);
 		this.#extensionRegistry = extensionRegistry;
-	}
-
-	setLocalPackages(localPackages: Array<Promise<any>>) {
-		this.#localPackages = localPackages;
-		this.#loadLocalPackages();
-	}
-
-	hostConnected(): void {
+		// TODO: This was before in hostConnected(), but I don't see the reason to wait. lets just do it right away.
 		this.#loadServerPackages();
 	}
 
-	hostDisconnected(): void {
-		this.#unobserve.next();
-		this.#unobserve.complete();
-	}
-
-	async #loadLocalPackages() {
-		this.#localPackages.forEach(async (packageImport) => {
-			const packageModule = await packageImport;
-			this.#extensionRegistry.registerMany(packageModule.extensions);
-		});
-	}
-
 	async #loadServerPackages() {
 		/* TODO: we need a new endpoint here, to remove the dependency on the package repository, to get the modules available for the backoffice scope
 		/ we will need a similar endpoint for the login, installer etc at some point.

src/libs/extension-api/bundle-extension-initializer.ts

@@ -1,15 +1,16 @@
 import type { ManifestBase, ManifestBundle } from './types.js';
 import { loadExtension } from './load-extension.function.js';
 import { UmbExtensionRegistry } from './registry/extension.registry.js';
-import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { UmbBaseController, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 
-export class UmbBundleExtensionInitializer {
+export class UmbBundleExtensionInitializer extends UmbBaseController {
 	#extensionRegistry;
 	#bundleMap = new Map();
 
 	constructor(host: UmbControllerHostElement, extensionRegistry: UmbExtensionRegistry<ManifestBundle>) {
+		super(host);
 		this.#extensionRegistry = extensionRegistry;
-		extensionRegistry.extensionsOfType('bundle').subscribe((bundles) => {
+		this.observe(extensionRegistry.extensionsOfType('bundle'), (bundles) => {
 			// Unregister removed bundles:
 			this.#bundleMap.forEach((existingBundle) => {
 				if (!bundles.find((b) => b.alias === existingBundle.alias)) {

src/libs/extension-api/entry-point-extension-initializer.ts

@@ -1,18 +1,21 @@
+import { UmbBaseController } from '../controller-api/controller.class.js';
 import type { ManifestEntryPoint } from './types.js';
 import { hasInitExport } from './has-init-export.function.js';
 import { loadExtension } from './load-extension.function.js';
 import { UmbExtensionRegistry } from './registry/extension.registry.js';
 import { UmbElement } from '@umbraco-cms/backoffice/element-api';
 
-export class UmbEntryPointExtensionInitializer {
+export class UmbEntryPointExtensionInitializer extends UmbBaseController {
+
 	#host;
 	#extensionRegistry;
 	#entryPointMap = new Map();
 
 	constructor(host: UmbElement, extensionRegistry: UmbExtensionRegistry<ManifestEntryPoint>) {
+		super(host);
 		this.#host = host;
 		this.#extensionRegistry = extensionRegistry;
-		extensionRegistry.extensionsOfType('entryPoint').subscribe((entryPoints) => {
+		this.observe(extensionRegistry.extensionsOfType('entryPoint'), (entryPoints) => {
 			entryPoints.forEach((entryPoint) => {
 				if (this.#entryPointMap.has(entryPoint.alias)) return;
 				this.#entryPointMap.set(entryPoint.alias, entryPoint);

src/mocks/handlers/manifests.handlers.ts

@@ -8,6 +8,18 @@ export const manifestDevelopmentHandler = rest.get(umbracoPath('/package/manifes
 		// Respond with a 200 status code
 		ctx.status(200),
 		ctx.json<PackageManifestResponse>([
+			{
+				name: 'My Package Name',
+				version: '1.0.0',
+				extensions: [
+					{
+						type: 'bundle',
+						alias: 'My.Package.Bundle',
+						name: 'My Package Bundle',
+						js: '/App_Plugins/custom-bundle-package/index.js',
+					},
+				],
+			},
 			{
 				name: 'Named Package',
 				version: '1.0.0',

src/packages/core/collection/collection-selection-actions.element.ts

@@ -51,12 +51,12 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement {
 		// TODO: Make sure it only updates on length change.
 		this.observe(this._collectionContext.items, (mediaItems) => {
 			this._nodesLength = mediaItems.length;
-		});
+		}, 'observeItem');
 
 		this.observe(this._collectionContext.selection, (selection) => {
 			this._selectionLength = selection.length;
 			this._selection = selection;
-		});
+		}, 'observeSelection');
 	}
 
 	private _renderSelectionCount() {
@@ -74,6 +74,7 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement {
 			(bulkActions) => {
 				this._entityBulkActions = bulkActions;
 			}
+			, 'observeEntityBulkActions'
 		);
 	}
 

src/packages/core/components/property-editor-config/property-editor-config.element.ts

@@ -1,37 +1,22 @@
 import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
 import {
-	PropertyEditorConfigDefaultData,
 	PropertyEditorConfigProperty,
-	umbExtensionsRegistry,
 } from '@umbraco-cms/backoffice/extension-registry';
 
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UMB_PROPERTY_EDITOR_SCHEMA_ALIAS_DEFAULT } from '@umbraco-cms/backoffice/property-editor';
+import { UMB_DATA_TYPE_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/data-type';
 
 /**
- *  @element umb-property-editor-config
- *  @description - Element for displaying the configuration for a Property Editor based on a Property Editor UI Alias and a Property Editor Model alias.
+ * @element umb-property-editor-config
+ * @description - Element for displaying the configuration for a Property Editor based on a Property Editor UI Alias and a Property Editor Model alias.
+ * This element requires a UMB_DATA_TYPE_WORKSPACE_CONTEXT to be present.
  */
 @customElement('umb-property-editor-config')
 export class UmbPropertyEditorConfigElement extends UmbLitElement {
-	/**
-	 * Property Editor UI Alias. The element will render configuration for a Property Editor UI with this alias.
-	 * @type {string}
-	 * @attr
-	 * @default ''
-	 */
-	private _propertyEditorUiAlias = '';
-	@property({ type: String, attribute: 'property-editor-ui-alias' })
-	public get propertyEditorUiAlias(): string {
-		return this._propertyEditorUiAlias;
-	}
-	public set propertyEditorUiAlias(value: string) {
-		const oldVal = this._propertyEditorUiAlias;
-		this._propertyEditorUiAlias = value;
-		this.requestUpdate('propertyEditorUiAlias', oldVal);
-		this._observePropertyEditorUIConfig();
-	}
+
+	// TODO: Make this element generic, so its not bound to DATA-TYPEs. This will require moving some functionality of Data-Type-Context to this. and this might need to self provide a variant Context for its inner property editor UIs.
+	#variantContext?: typeof UMB_DATA_TYPE_VARIANT_CONTEXT.TYPE;
 
 	/**
 	 * Data. The element will render configuration editors with values from this data.
@@ -46,62 +31,17 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement {
 	@state()
 	private _properties: Array<PropertyEditorConfigProperty> = [];
 
-	private _propertyEditorSchemaConfigDefaultData: Array<PropertyEditorConfigDefaultData> = [];
-	private _propertyEditorUISettingsDefaultData: Array<PropertyEditorConfigDefaultData> = [];
-
-	private _configDefaultData?: Array<PropertyEditorConfigDefaultData>;
 
-	private _propertyEditorSchemaConfigProperties: Array<PropertyEditorConfigProperty> = [];
-	private _propertyEditorUISettingsProperties: Array<PropertyEditorConfigProperty> = [];
+	constructor() {
+		super();
 
-	private _observePropertyEditorUIConfig() {
-		if (!this._propertyEditorUiAlias) return;
-
-		this.observe(
-			umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUi', this.propertyEditorUiAlias),
-			(manifest) => {
-				this._observePropertyEditorSchemaConfig(
-					manifest?.meta.propertyEditorSchemaAlias || UMB_PROPERTY_EDITOR_SCHEMA_ALIAS_DEFAULT
-				);
-				this._propertyEditorUISettingsProperties = manifest?.meta.settings?.properties || [];
-				this._propertyEditorUISettingsDefaultData = manifest?.meta.settings?.defaultData || [];
-				this._mergeConfigProperties();
-				this._mergeConfigDefaultData();
-			}
-		);
-	}
+		this.consumeContext(UMB_DATA_TYPE_VARIANT_CONTEXT, (instance) => {
+			this.#variantContext = instance;
+			this.observe(this.#variantContext.properties, (properties) => {
+				this._properties = properties as Array<PropertyEditorConfigProperty>;
+			}, 'observeProperties');
+		});
 
-	private _observePropertyEditorSchemaConfig(propertyEditorSchemaAlias: string) {
-		this.observe(
-			umbExtensionsRegistry.getByTypeAndAlias('propertyEditorSchema', propertyEditorSchemaAlias),
-			(manifest) => {
-				this._propertyEditorSchemaConfigProperties = manifest?.meta.settings?.properties || [];
-				this._propertyEditorSchemaConfigDefaultData = manifest?.meta.settings?.defaultData || [];
-				this._mergeConfigProperties();
-				this._mergeConfigDefaultData();
-			}
-		);
-	}
-
-	private _mergeConfigProperties() {
-		this._properties = [...this._propertyEditorSchemaConfigProperties, ...this._propertyEditorUISettingsProperties];
-	}
-
-	private _mergeConfigDefaultData() {
-		this._configDefaultData = [
-			...this._propertyEditorSchemaConfigDefaultData,
-			...this._propertyEditorUISettingsDefaultData,
-		];
-	}
-
-	/**
-	 * Get the stored value for a property. It will render the default value from the configuration if no value is stored in the database.
-	 */
-	private _getValue(property: PropertyEditorConfigProperty) {
-		const value = this.data.find((data) => data.alias === property.alias)?.value;
-		if (value) return value;
-		const defaultValue = this._configDefaultData?.find((data) => data.alias === property.alias)?.value;
-		return defaultValue ?? null;
 	}
 
 	render() {
@@ -115,7 +55,6 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement {
 									description="${ifDefined(property.description)}"
 									alias="${property.alias}"
 									property-editor-ui-alias="${property.propertyEditorUiAlias}"
-									.value=${this._getValue(property)}
 									.config=${property.config}></umb-workspace-property>
 							`
 						)}