@umbraco-cms/backoffice 1.0.0-next.37dcc47c → 1.0.0-next.47cc3341

package/README.md

@@ -87,10 +87,10 @@ customElements.define('my-custom-dashboard', MyDashboardElement);
 
 ### TypeScript with Lit
 
-First install Lit and Vite. This command will create a new folder called "my-package". Choose "lit" and "typescript" when prompted.
+First install Lit and Vite. This command will create a new folder called `my-package` which will have the Vite tooling and Lit for WebComponent development setup.
 
 ```bash
-npm create vite@latest my-package
+npm create vite@latest -- --template lit-ts my-package
 ```
 
 Go to the new folder and install the backoffice package.
@@ -100,7 +100,7 @@ cd my-package
 npm install -D @umbraco-cms/backoffice
 ```
 
-Then go to the element located in `src/my-element.ts` and add the following code.
+Then go to the element located in `src/my-element.ts` and replace it with the following code.
 
 ```typescript
 // src/my-element.ts
@@ -111,23 +111,24 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco
 
 @customElement('my-element')
 export default class MyElement extends UmbElementMixin(LitElement) {
-	#notificationContext?: UmbNotificationContext;
+
+	private _notificationContext?: UmbNotificationContext;
 
 	constructor() {
 		super();
 		this.consumeContext(UMB_NOTIFICATION_CONTEXT_TOKEN, (_instance) => {
-			this.#notificationContext = _instance;
+			this._notificationContext = _instance;
 		});
 	}
 
 	onClick() {
-		this.#notificationContext?.peek('positive', { data: { message: '#h5yr' } });
+		this._notificationContext?.peek('positive', { data: { message: '#h5yr' } });
 	}
 
 	render() {
 		return html`
 			<uui-box headline="Welcome">
-				<p>TS dashboard</p>
+				<p>A TypeScript Lit Dashboard</p>
 				<uui-button look="primary" label="Click me" @click=${() => this.onClick()}></uui-button>
 			</uui-box>
 		`;
@@ -141,7 +142,7 @@ declare global {
 }
 ```
 
-Finally add an umbraco-package.json file in the root of your package.
+Finally add an umbraco-package.json file in the root of your package folder `my-package`.
 
 ```json
 {

package/context-api.d.ts

@@ -1,4 +1,6 @@
-import { UmbControllerHostInterface, UmbControllerInterface } from './controller';
+import { UmbControllerHostElement, UmbControllerInterface } from './controller';
+import { UmbWorkspaceContextInterface } from './workspace';
+import { BaseEntity } from './models';
 
 declare class UmbContextToken<T = unknown> {
     protected alias: string;
@@ -90,9 +92,9 @@ declare class UmbContextConsumer<HostType extends EventTarget = EventTarget, T =
     destroy(): void;
 }
 
-declare class UmbContextConsumerController<T = unknown> extends UmbContextConsumer<UmbControllerHostInterface, T> implements UmbControllerInterface {
+declare class UmbContextConsumerController<T = unknown> extends UmbContextConsumer<UmbControllerHostElement, T> implements UmbControllerInterface {
     get unique(): undefined;
-    constructor(host: UmbControllerHostInterface, contextAlias: string | UmbContextToken<T>, callback: UmbContextCallback<T>);
+    constructor(host: UmbControllerHostElement, contextAlias: string | UmbContextToken<T>, callback: UmbContextCallback<T>);
     destroy(): void;
 }
 
@@ -136,9 +138,9 @@ declare class UmbContextProvider<HostType extends EventTarget = EventTarget> {
     destroy(): void;
 }
 
-declare class UmbContextProviderController<T = unknown> extends UmbContextProvider<UmbControllerHostInterface> implements UmbControllerInterface {
+declare class UmbContextProviderController<T = unknown> extends UmbContextProvider<UmbControllerHostElement> implements UmbControllerInterface {
     get unique(): string;
-    constructor(host: UmbControllerHostInterface, contextAlias: string | UmbContextToken<T>, instance: T);
+    constructor(host: UmbControllerHostElement, contextAlias: string | UmbContextToken<T>, instance: T);
     destroy(): void;
 }
 
@@ -162,4 +164,72 @@ declare class UmbContextProvideEventImplementation extends Event implements UmbC
 }
 declare const isUmbContextProvideEventType: (event: Event) => event is UmbContextProvideEventImplementation;
 
-export { UmbContextCallback, UmbContextConsumer, UmbContextConsumerController, UmbContextDebugRequest, UmbContextProvideEvent, UmbContextProvideEventImplementation, UmbContextProvider, UmbContextProviderController, UmbContextRequestEvent, UmbContextRequestEventImplementation, UmbContextToken, isUmbContextProvideEventType, isUmbContextRequestEvent, umbContextProvideEventType, umbContextRequestEventType, umbDebugContextEventType };
+interface UmbEntityWorkspaceContextInterface<EntityType = unknown> extends UmbWorkspaceContextInterface<EntityType> {
+    getEntityKey(): string | undefined;
+    getEntityType(): string;
+    save(): Promise<void>;
+}
+
+declare const UMB_ENTITY_WORKSPACE_CONTEXT: UmbContextToken<UmbEntityWorkspaceContextInterface<BaseEntity>>;
+
+/**
+ * Change the collection of Contexts into a simplified array of data
+ *
+ * @param contexts This is a map of the collected contexts from umb-debug
+ * @returns An array of simplified context data
+ */
+declare function contextData(contexts: Map<any, any>): Array<DebugContextData>;
+interface DebugContextData {
+    /**
+     * The alias of the context
+     *
+     * @type {string}
+     * @memberof DebugContextData
+     */
+    alias: string;
+    /**
+     * The type of the context such as object or string
+     *
+     * @type {("string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function")}
+     * @memberof DebugContextData
+     */
+    type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+    /**
+     * Data about the context that includes method and property names
+     *
+     * @type {DebugContextItemData}
+     * @memberof DebugContextData
+     */
+    data: DebugContextItemData;
+}
+interface DebugContextItemData {
+    type: string;
+    methods?: Array<unknown>;
+    properties?: Array<DebugContextItemPropertyData>;
+    value?: unknown;
+}
+interface DebugContextItemPropertyData {
+    /**
+     * The name of the property
+     *
+     * @type {string}
+     * @memberof DebugContextItemPropertyData
+     */
+    key: string;
+    /**
+     * The type of the property's value such as string or number
+     *
+     * @type {("string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function")}
+     * @memberof DebugContextItemPropertyData
+     */
+    type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+    /**
+    * Simple types such as string or number can have their value displayed stored inside the property
+    *
+    * @type {("string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function")}
+    * @memberof DebugContextItemPropertyData
+    */
+    value?: unknown;
+}
+
+export { DebugContextData, DebugContextItemData, DebugContextItemPropertyData, UMB_ENTITY_WORKSPACE_CONTEXT, UmbContextCallback, UmbContextConsumer, UmbContextConsumerController, UmbContextDebugRequest, UmbContextProvideEvent, UmbContextProvideEventImplementation, UmbContextProvider, UmbContextProviderController, UmbContextRequestEvent, UmbContextRequestEventImplementation, UmbContextToken, contextData, isUmbContextProvideEventType, isUmbContextRequestEvent, umbContextProvideEventType, umbContextRequestEventType, umbDebugContextEventType };

package/controller.d.ts

@@ -7,7 +7,7 @@ interface UmbControllerInterface {
     destroy(): void;
 }
 
-declare class UmbControllerHostInterface extends HTMLElement {
+declare class UmbControllerHostElement extends HTMLElement {
     hasController(controller: UmbControllerInterface): boolean;
     getControllers(filterMethod: (ctrl: UmbControllerInterface) => boolean): UmbControllerInterface[];
     addController(controller: UmbControllerInterface): void;
@@ -20,7 +20,7 @@ declare class UmbControllerHostInterface extends HTMLElement {
  * @param {Object} superClass - superclass to be extended.
  * @mixin
  */
-declare const UmbControllerHostMixin: <T extends HTMLElementConstructor<HTMLElement>>(superClass: T) => HTMLElementConstructor<UmbControllerHostInterface> & T;
+declare const UmbControllerHostMixin: <T extends HTMLElementConstructor>(superClass: T) => HTMLElementConstructor<UmbControllerHostElement> & T;
 declare global {
     interface HTMLElement {
         connectedCallback(): void;
@@ -29,13 +29,13 @@ declare global {
 }
 
 declare abstract class UmbController implements UmbControllerInterface {
-    protected host?: UmbControllerHostInterface;
+    protected host?: UmbControllerHostElement;
     private _alias?;
     get unique(): string | undefined;
-    constructor(host: UmbControllerHostInterface, alias?: string);
+    constructor(host: UmbControllerHostElement, alias?: string);
     abstract hostConnected(): void;
     abstract hostDisconnected(): void;
     destroy(): void;
 }
 
-export { UmbController, UmbControllerHostInterface, UmbControllerHostMixin, UmbControllerInterface };
+export { UmbController, UmbControllerHostElement, UmbControllerHostMixin, UmbControllerInterface };