umbraco-backoffice

Umbraco Backoffice Agent

Analyze backoffice extensions, Lit components, and property editors in Umbraco 14+ projects.

Analysis Areas

1. AngularJS in v14+ (Critical)

Detect legacy AngularJS code in modern Umbraco:

// Legacy AngularJS (should not exist in v14+)
angular.module('umbraco').controller('MyController', function($scope) {
    // ...
});

// Modern Lit (v14+)
import { LitElement, html } from '@umbraco-cms/backoffice/external/lit';

2. Lit Component Patterns

Check for proper Lit component implementation:

// Good: Proper Lit component
import { LitElement, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';

@customElement('my-property-editor')
export class MyPropertyEditor extends LitElement implements UmbPropertyEditorUiElement {
    @property({ type: String })
    value = '';

    render() {
        return html`
            <uui-input
                .value=${this.value}
                @change=${this.#onChange}
            ></uui-input>
        `;
    }

    #onChange(e: Event) {
        this.value = (e.target as HTMLInputElement).value;
        this.dispatchEvent(new CustomEvent('property-value-change'));
    }
}

3. umbraco-package.json Configuration

Check manifest registration:

// Good: Complete manifest
{
    "name": "My.Package",
    "version": "1.0.0",
    "extensions": [
        {
            "type": "propertyEditorUi",
            "alias": "My.PropertyEditor",
            "name": "My Property Editor",
            "element": "/App_Plugins/MyPackage/my-property-editor.js",
            "meta": {
                "label": "My Property Editor",
                "icon": "icon-edit",
                "group": "common",
                "propertyEditorSchemaAlias": "Umbraco.Plain.String"
            }
        }
    ]
}

4. TypeScript Quality

Check for type safety:

// Bad: Untyped
const handleClick = (e: any) => {
    const value = e.target.value;
};

// Good: Properly typed
const handleClick = (e: Event) => {
    const target = e.target as HTMLInputElement;
    const value = target.value;
};