Build: Separate eslint logic for **/*.ts files (#19852)

* build: move typescript specific eslint rules to the `**/*ts.` pattern to avoid errors for .js files

* allow `Example` as class prefix

* allow `example-` as custom element prefix

* Removed `eslint-disable-next-line` comments

from the Example classes.

* Code formatting/tidy-up of Example classes

---------

Co-authored-by: leekelleher <leekelleher@gmail.com>

src/Umbraco.Web.UI.Client/devops/eslint/rules/enforce-umb-prefix-on-element-name.cjs

@@ -1,3 +1,5 @@
+const ALLOWED_PREFIXES = ['umb-', 'ufm-', 'test-', 'example-'];
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
 	meta: {
@@ -23,9 +25,8 @@ module.exports = {
 				if (isCustomElementDecorator) {
 					const elementName = node.arguments[0].value;
 
-					// check if the element name starts with 'umb-', 'ufm-', or 'test-', to be allow tests to have custom elements:
-					const prefixes = ['umb-', 'ufm-', 'test-'];
-					const isElementNameValid = prefixes.some((prefix) => elementName.startsWith(prefix));
+					// check if the element name starts with an allowed prefix:
+					const isElementNameValid = ALLOWED_PREFIXES.some((prefix) => elementName.startsWith(prefix));
 
 					if (!isElementNameValid) {
 						context.report({

src/Umbraco.Web.UI.Client/devops/eslint/rules/umb-class-prefix.cjs

@@ -1,3 +1,5 @@
+const ALLOWED_PREFIXES = ['Umb', 'Example'];
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
 	meta: {
@@ -11,10 +13,10 @@ module.exports = {
 	},
 	create: function (context) {
 		function checkClassName(node) {
-			if (node.id && node.id.name && !node.id.name.startsWith('Umb')) {
+			if (node.id && node.id.name && !ALLOWED_PREFIXES.some((prefix) => node.id.name.startsWith(prefix))) {
 				context.report({
 					node: node.id,
-					message: 'Class declaration should be prefixed with "Umb"',
+					message: `Class declaration should be prefixed with one of the following prefixes: ${ALLOWED_PREFIXES.join(', ')}`,
 				});
 			}
 		}

src/Umbraco.Web.UI.Client/eslint.config.js

@@ -38,15 +38,6 @@ export default [
 
 	// Global config
 	{
-		languageOptions: {
-			parserOptions: {
-				project: true,
-				tsconfigRootDir: import.meta.dirname,
-			},
-			globals: {
-				...globals.browser,
-			},
-		},
 		plugins: {
 			import: importPlugin,
 			'local-rules': localRules,
@@ -77,13 +68,6 @@ export default [
 					excludedFileNames: ['umbraco-package'],
 				},
 			],
-			'@typescript-eslint/no-non-null-assertion': 'off',
-			'@typescript-eslint/no-explicit-any': 'warn',
-			'@typescript-eslint/no-unused-vars': 'error',
-			'@typescript-eslint/consistent-type-exports': 'error',
-			'@typescript-eslint/consistent-type-imports': 'error',
-			'@typescript-eslint/no-import-type-side-effects': 'warn',
-			'@typescript-eslint/no-deprecated': 'warn',
 			'jsdoc/check-tag-names': [
 				'warn',
 				{
@@ -95,6 +79,27 @@ export default [
 	},
 
 	// Pattern-specific overrides
+	{
+		files: ['**/*.ts'],
+		languageOptions: {
+			parserOptions: {
+				project: true,
+				tsconfigRootDir: import.meta.dirname,
+			},
+			globals: {
+				...globals.browser,
+			},
+		},
+		rules: {
+			'@typescript-eslint/no-non-null-assertion': 'off',
+			'@typescript-eslint/no-explicit-any': 'warn',
+			'@typescript-eslint/no-unused-vars': 'error',
+			'@typescript-eslint/consistent-type-exports': 'error',
+			'@typescript-eslint/consistent-type-imports': 'error',
+			'@typescript-eslint/no-import-type-side-effects': 'warn',
+			'@typescript-eslint/no-deprecated': 'warn',
+		},
+	},
 	{
 		files: ['**/*.js'],
 		...tseslint.configs.disableTypeChecked,

src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts

@@ -4,11 +4,8 @@ import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';
 
-// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name
 @customElement('example-block-custom-view')
-// eslint-disable-next-line local-rules/umb-class-prefix
 export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement {
-	//
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 

src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/dataset-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 UmbPropertyValueData, type UmbPropertyDatasetElement } from '@umbraco-cms/backoffice/property';
+import type { UmbPropertyValueData, UmbPropertyDatasetElement } from '@umbraco-cms/backoffice/property';
 
 @customElement('example-dataset-dashboard')
 export class ExampleDatasetDashboard extends UmbElementMixin(LitElement) {

src/Umbraco.Web.UI.Client/examples/icons/icons-dashboard.ts

@@ -2,9 +2,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';
 
-// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name
 @customElement('example-icons-dashboard')
-// eslint-disable-next-line local-rules/umb-class-prefix
 export class ExampleIconsDashboard extends UmbElementMixin(LitElement) {
 	override render() {
 		return html`

src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts

@@ -5,10 +5,8 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 
-// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name
 @customElement('example-manifest-picker-dashboard')
-// eslint-disable-next-line local-rules/enforce-element-suffix-on-element-class-name, local-rules/umb-class-prefix
-export class ExampleManifestPickerDashboard extends UmbLitElement {
+export class ExampleManifestPickerDashboardElement extends UmbLitElement {
 	#options: Array<Option> = [];
 
 	@state()
@@ -90,10 +88,10 @@ export class ExampleManifestPickerDashboard extends UmbLitElement {
 	];
 }
 
-export default ExampleManifestPickerDashboard;
+export default ExampleManifestPickerDashboardElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'example-manifest-picker-dashboard': ExampleManifestPickerDashboard;
+		'example-manifest-picker-dashboard': ExampleManifestPickerDashboardElement;
 	}
 }

src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts

@@ -1,9 +1,10 @@
+import type { ExampleSorterGroup, ModelEntryType } from './sorter-group.js';
 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 { ExampleSorterGroup, ModelEntryType } from './sorter-group.js';
 
 import './sorter-group.js';
+
 @customElement('example-sorter-dashboard')
 export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 	groupOneItems: ModelEntryType[] = [

src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts

@@ -1,10 +1,10 @@
+import type { ExampleSorterItem } from './sorter-item.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, LitElement, repeat, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 
 import './sorter-item.js';
-import ExampleSorterItem from './sorter-item.js';
 
 export type ModelEntryType = {
 	name: string;

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts

@@ -1,9 +1,10 @@
+import type { ModelEntryType } from './sorter-group.js';
 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 './sorter-group.js';
+
 @customElement('example-sorter-dashboard')
 export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 	groupOneItems: ModelEntryType[] = [

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts

@@ -1,4 +1,4 @@
-import type ExampleSorterItem from './sorter-item.js';
+import type { ExampleSorterItem } from './sorter-item.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, LitElement, repeat, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';

src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-status-footer-app.element.ts

@@ -1,6 +1,6 @@
+import { EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js';
 import { customElement, html, state, LitElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
-import { EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js';
 
 @customElement('example-counter-status-footer-app')
 export class ExampleCounterStatusFooterAppElement extends UmbElementMixin(LitElement) {
@@ -15,13 +15,10 @@ export class ExampleCounterStatusFooterAppElement extends UmbElementMixin(LitEle
 	async #observeCounter() {
 		const context = await this.getContext(EXAMPLE_COUNTER_CONTEXT);
 		if (!context) return;
-		
-		this.observe(
-			context.counter,
-			(counter: number) => {
-				this._counter = counter;
-			},
-		);
+
+		this.observe(context.counter, (counter: number) => {
+			this._counter = counter;
+		});
 	}
 
 	override render() {
@@ -35,4 +32,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'example-counter-status-footer-app': ExampleCounterStatusFooterAppElement;
 	}
-}
+}

src/Umbraco.Web.UI.Client/examples/workspace-context-counter/reset-counter-menu-item.action.ts

@@ -2,7 +2,10 @@ import { EXAMPLE_COUNTER_CONTEXT } from './counter-workspace-context.js';
 import { UmbWorkspaceActionMenuItemBase } from '@umbraco-cms/backoffice/workspace';
 import type { UmbWorkspaceActionMenuItem } from '@umbraco-cms/backoffice/workspace';
 
-export class ExampleResetCounterMenuItemAction extends UmbWorkspaceActionMenuItemBase implements UmbWorkspaceActionMenuItem {
+export class ExampleResetCounterMenuItemAction
+	extends UmbWorkspaceActionMenuItemBase
+	implements UmbWorkspaceActionMenuItem
+{
 	/**
 	 * This method is executed when the menu item is clicked
 	 */
@@ -11,10 +14,10 @@ export class ExampleResetCounterMenuItemAction extends UmbWorkspaceActionMenuIte
 		if (!context) {
 			throw new Error('Could not get the counter context');
 		}
-		
+
 		// Reset the counter to 0
 		context.reset();
 	}
 }
 
-export const api = ExampleResetCounterMenuItemAction;
+export const api = ExampleResetCounterMenuItemAction;