@umbraco-cms/backoffice 1.0.0-next.37dcc47c → 1.0.0-next.596cc732

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
 {