Merge branch 'main' into bug/16601-Login-error

Author: iOvergaard

.storybook/preview.js

@@ -20,12 +20,12 @@ import { UmbIconRegistry } from '../src/packages/core/icon-registry/icon.registr
 import { UmbLitElement } from '../src/packages/core/lit-element';
 import { umbLocalizationRegistry } from '../src/packages/core/localization';
 import customElementManifests from '../dist-cms/custom-elements.json';
-import icons from '../src/packages/core/icon-registry/icons/icons';
+import icons from '../src/packages/core/icon-registry/icons';
 
 import '../src/libs/context-api/provide/context-provider.element';
 import '../src/packages/core/components';
 
-import { manifests as documentManifests } from '../src/packages/documents';
+import { manifests as documentManifests } from '../src/packages/documents/manifests';
 import { manifests as localizationManifests } from '../src/packages/core/localization/manifests';
 import { UmbNotificationContext } from '../src/packages/core/notification';
 

README.md

@@ -126,7 +126,7 @@ export default class MyElement extends UmbElementMixin(LitElement) {
 		this._notificationContext?.peek('positive', { data: { message: '#h5yr' } });
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-box headline="Welcome">
 				<p>A TypeScript Lit Dashboard</p>

devops/icons/index.js

@@ -46,7 +46,7 @@ const collectDictionaryIcons = async () => {
 					legacy: iconDef.legacy,
 					fileName: iconFileName,
 					svg,
-					output: `${iconsOutputDirectory}/${iconFileName}.js`,
+					output: `${iconsOutputDirectory}/${iconFileName}.ts`,
 				};
 
 				icons.push(icon);
@@ -77,7 +77,7 @@ const collectDictionaryIcons = async () => {
 					legacy: iconDef.legacy,
 					fileName: iconFileName,
 					svg,
-					output: `${iconsOutputDirectory}/${iconFileName}.js`,
+					output: `${iconsOutputDirectory}/${iconFileName}.ts`,
 				};
 
 				icons.push(icon);
@@ -102,7 +102,7 @@ const collectDictionaryIcons = async () => {
 					legacy: iconDef.legacy,
 					fileName: iconFileName,
 					svg,
-					output: `${iconsOutputDirectory}/${iconFileName}.js`,
+					output: `${iconsOutputDirectory}/${iconFileName}.ts`,
 				};
 
 				icons.push(icon);
@@ -141,7 +141,7 @@ const collectDiskIcons = async (icons) => {
 				legacy: true,
 				fileName: iconFileName,
 				svg,
-				output: `${iconsOutputDirectory}/${iconFileName}.js`,
+				output: `${iconsOutputDirectory}/${iconFileName}.ts`,
 			};
 
 			icons.push(icon);
@@ -168,13 +168,13 @@ const writeIconsToDisk = (icons) => {
 };
 
 const generateJS = (icons) => {
-	const JSPath = `${iconsOutputDirectory}/icons.ts`;
+	const JSPath = `${moduleDirectory}/icons.ts`;
 
 	const iconDescriptors = icons.map((icon) => {
 		return `{
 			name: "${icon.name}",
 			${icon.legacy ? 'legacy: true,' : ''}
-			path: "./icons/${icon.fileName}.js",
+			path: () => import("./icons/${icon.fileName}.js"),
 		}`.replace(/\t/g, ''); // Regex removes white space [NL]
 	});
 

devops/tsc-override/index.js

@@ -0,0 +1,111 @@
+// Notice: This script is not perfect and may not work in all cases. ex. it places the override term wrong for async and setter/getter methods. But its a help any way. [NL]
+
+import ts from 'typescript';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+
+const tsconfigPath = './tsconfig.json';
+
+const cwd = process.cwd();
+
+async function fixOverride() {
+	const configFile = path.isAbsolute(tsconfigPath)
+		? tsconfigPath
+		: ts.findConfigFile(cwd, ts.sys.fileExists, tsconfigPath);
+
+	if (!configFile) {
+		console.error('No tsconfig file found for path:', tsconfigPath);
+		process.exit(1);
+	}
+
+	const config = ts.readConfigFile(configFile, ts.sys.readFile);
+
+	const { options, fileNames } = ts.parseJsonConfigFileContent(
+		config.config,
+		ts.sys,
+
+		// Resolve to the folder where the tsconfig file located
+		path.dirname(tsconfigPath),
+	);
+
+	const program = ts.createProgram({
+		rootNames: fileNames,
+		options,
+	});
+
+	if (fileNames.length === 0) {
+		console.error('No files in the project.', {
+			fileNames,
+			options,
+		});
+
+		process.exit(1);
+	}
+	let emitResult = program.emit();
+
+	const overrideErrors = ts
+		.getPreEmitDiagnostics(program)
+		.concat(emitResult.diagnostics)
+		.filter((diagnostic) =>
+			[
+				// This member must have an 'override' modifier because it overrides a member in the base class '{0}'.
+				4114,
+				// This parameter property must have an 'override' modifier because it overrides a member in base class '{0}'
+				4115,
+				// This member must have an 'override' modifier because it overrides an abstract method that is declared in the base class '{0}'.
+				4116,
+			].includes(diagnostic.code),
+		);
+
+	const sortedErrors = sortErrors(overrideErrors);
+
+	for (const diagnostic of sortedErrors) {
+		await addOverride(diagnostic);
+	}
+}
+
+/**
+ *
+ * @param {ts.Diagnostic} diagnostic
+ * @returns {Promise<void>}
+ */
+async function addOverride(diagnostic) {
+	const fileContent = (await fs.readFile(diagnostic.file.fileName, 'utf-8')).toString();
+	let startIndex = diagnostic.start;
+
+	if (fileContent.slice(0, startIndex).endsWith(' get ')) {
+		startIndex -= 'get '.length;
+	}
+	if (fileContent.slice(0, startIndex).endsWith(' async ')) {
+		startIndex -= 'async '.length;
+	}
+	if (fileContent.slice(0, startIndex).endsWith(' readonly ')) {
+		startIndex -= 'readonly '.length;
+	}
+
+	const newFileContent = [fileContent.slice(0, startIndex), 'override ', fileContent.slice(startIndex)].join('');
+	await fs.writeFile(diagnostic.file.fileName, newFileContent);
+}
+
+/**
+ *
+ * @param {ts.Diagnostic[]} errors
+ * @returns {ts.Diagnostic[]}
+ */
+function sortErrors(errors) {
+	// Sort by file path and start position from end to start
+	// so we can insert override keyword without changing the start position of other errors in the same file that happen before
+	return errors.slice(0).sort((a, b) => {
+		if (a.file && b.file) {
+			if (a.file.fileName === b.file.fileName) {
+				return b.start - a.start;
+			}
+
+			return a.file.fileName.localeCompare(b.file.fileName);
+		}
+
+		return 0;
+	});
+}
+
+fixOverride();

devops/tsconfig/index.js

@@ -28,6 +28,7 @@ const tsConfigBase = {
 		baseUrl: '.',
 		incremental: true,
 		skipLibCheck: true,
+		noImplicitOverride: true,
 		/* Bundler mode */
 		moduleResolution: 'bundler',
 		allowImportingTsExtensions: true,

examples/dashboard-with-property-dataset/dataset-dashboard.ts

@@ -18,7 +18,7 @@ export class ExampleDatasetDashboard extends UmbElementMixin(LitElement) {
 		this.requestUpdate('data', oldValue);
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-box class="uui-text">
 				<h1 class="uui-h2" style="margin-top: var(--uui-size-layout-1);">Dataset Example</h1>
@@ -39,7 +39,7 @@ export class ExampleDatasetDashboard extends UmbElementMixin(LitElement) {
 							},
 							{
 								alias: 'items',
-								value: [ 'First Option' , 'Second Option', 'Third Option' ],
+								value: ['First Option', 'Second Option', 'Third Option'],
 							},
 						]}
 						property-editor-ui-alias="Umb.PropertyEditorUi.Dropdown"></umb-property>
@@ -51,7 +51,7 @@ export class ExampleDatasetDashboard extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

examples/manifest-picker/manifest-picker-dashboard.ts

@@ -38,7 +38,7 @@ export class ExampleManifestPickerDashboard extends UmbLitElement {
 		this._selectedManifest = selectedManifest?.value ?? '';
 	}
 
-	render() {
+	override render() {
 		return html`
 			<uui-box>
 				<umb-property-layout label="Select a extension type...">
@@ -77,7 +77,7 @@ export class ExampleManifestPickerDashboard extends UmbLitElement {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

examples/sorter-with-nested-containers/sorter-dashboard.ts

@@ -1,7 +1,7 @@
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
-import type { ModelEntryType } from './sorter-group.js';
+import type { ExampleSorterGroup, ModelEntryType } from './sorter-group.js';
 
 import './sorter-group.js';
 @customElement('example-sorter-dashboard')
@@ -53,19 +53,26 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 		},
 	];
 
-	render() {
+	override render() {
 		return html`
 			<uui-box class="uui-text">
 				<div class="outer-wrapper">
-					<h5>Notice this example still only support single group of Sorter.</h5>
-					<example-sorter-group .initialItems=${this.groupOneItems}></example-sorter-group>
-					<example-sorter-group .initialItems=${this.groupTwoItems}></example-sorter-group>
+					<example-sorter-group
+						.value=${this.groupOneItems}
+						@change=${(e: Event) => {
+							this.groupOneItems = (e.target as ExampleSorterGroup).value;
+						}}></example-sorter-group>
+					<example-sorter-group
+						.value=${this.groupTwoItems}
+						@change=${(e: Event) => {
+							this.groupTwoItems = (e.target as ExampleSorterGroup).value;
+						}}></example-sorter-group>
 				</div>
 			</uui-box>
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

examples/sorter-with-nested-containers/sorter-group.ts

@@ -13,28 +13,8 @@ export type ModelEntryType = {
 
 @customElement('example-sorter-group')
 export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
-	@property({ type: Array, attribute: false })
-	public get initialItems(): ModelEntryType[] {
-		return this.items;
-	}
-	public set initialItems(value: ModelEntryType[]) {
-		// Only want to set the model initially, cause any re-render should not set this again.
-		if (this._items !== undefined) return;
-		this.items = value;
-	}
-
-	@property({ type: Array, attribute: false })
-	public get items(): ModelEntryType[] {
-		return this._items ?? [];
-	}
-	public set items(value: ModelEntryType[]) {
-		const oldValue = this._items;
-		this._items = value;
-		this.#sorter.setModel(this._items);
-		this.requestUpdate('items', oldValue);
-	}
-	private _items?: ModelEntryType[];
-
+	//
+	// Sorter setup:
 	#sorter = new UmbSorterController<ModelEntryType, ExampleSorterItem>(this, {
 		getUniqueOfElement: (element) => {
 			return element.name;
@@ -46,33 +26,52 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 		itemSelector: 'example-sorter-item',
 		containerSelector: '.sorter-container',
 		onChange: ({ model }) => {
-			const oldValue = this._items;
-			this._items = model;
-			this.requestUpdate('items', oldValue);
+			const oldValue = this._value;
+			this._value = model;
+			this.requestUpdate('value', oldValue);
+			// Fire an event for the parent to know that the model has changed.
+			this.dispatchEvent(new CustomEvent('change'));
 		},
 	});
 
+	@property({ type: Array, attribute: false })
+	public get value(): ModelEntryType[] {
+		return this._value ?? [];
+	}
+	public set value(value: ModelEntryType[]) {
+		const oldValue = this._value;
+		this._value = value;
+		this.#sorter.setModel(this._value);
+		this.requestUpdate('value', oldValue);
+	}
+	private _value?: ModelEntryType[];
+
 	removeItem = (item: ModelEntryType) => {
-		this.items = this.items.filter((r) => r.name !== item.name);
+		this.value = this.value.filter((r) => r.name !== item.name);
 	};
 
-	render() {
+	override render() {
 		return html`
 			<div class="sorter-container">
 				${repeat(
-					this.items,
+					this.value,
+					// Note: ideally you have an unique identifier for each item, but for this example we use the `name` as identifier.
 					(item) => item.name,
 					(item) =>
 						html`<example-sorter-item name=${item.name}>
 							<button slot="action" @click=${() => this.removeItem(item)}>Delete</button>
-							${item.children ? html`<example-sorter-group .initialItems=${item.children}></example-sorter-group>` : ''}
+							<example-sorter-group
+								.value=${item.children ?? []}
+								@change=${(e: Event) => {
+									item.children = (e.target as ExampleSorterGroup).value;
+								}}></example-sorter-group>
 						</example-sorter-item>`,
 				)}
 			</div>
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

examples/sorter-with-nested-containers/sorter-item.ts

@@ -12,7 +12,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
 	@property({ type: Boolean, reflect: true, attribute: 'drag-placeholder' })
 	umbDragPlaceholder = false;
 
-	render() {
+	override render() {
 		return html`
 			<div>
 				${this.name}
@@ -23,7 +23,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {