Merge branch 'main' into v14/feature/umb-property-editor-ui-textarea-readonly-mode

Author: madsrasmussen

.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

@@ -53,7 +53,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 		},
 	];
 
-	render() {
+	override render() {
 		return html`
 			<uui-box class="uui-text">
 				<div class="outer-wrapper">
@@ -72,7 +72,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	static styles = [
+	static override styles = [
 		UmbTextStyles,
 		css`
 			:host {

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

@@ -50,7 +50,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 		this.value = this.value.filter((r) => r.name !== item.name);
 	};
 
-	render() {
+	override render() {
 		return html`
 			<div class="sorter-container">
 				${repeat(
@@ -71,7 +71,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 		`;
 	}
 
-	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 {