Fix theme-watch crashing on lint errors

wcomponents-theme/build-js.mjs

@@ -77,7 +77,15 @@ async function build(singleFile) {
  */
 async function buildSingle(singleFile) {
 	let fileName = singleFile;
-	themeLinter.run(singleFile);
+	try {
+		await themeLinter.run(singleFile);
+	} catch (ignore) {
+		/*
+			We do not break the build when processing a single file, as this only happens during active development.
+			When the full build is run, the build will break.
+		*/
+		console.error(ignore);
+	}
 	fileName = fileName.replace(dirs.script.src, "");
 	let conf = config;
 	Object.assign({}, conf);

wcomponents-theme/package.json

@@ -74,5 +74,10 @@
 		"sass": "1.5.1",
 		"sass-lint": "1.12.1",
 		"uglify-js": "3.17.4"
+	},
+	"overrides": {
+		"babel-plugin-transform-commonjs": {
+			"globals": "17.6.0"
+		}
 	}
 }

wcomponents-theme/src/main/js/wc/a8n.mjs

@@ -9,6 +9,7 @@ import timers from "wc/timers.mjs";
 import Observer from "wc/Observer.mjs";
 import fixes from "wc/fixes.mjs";
 
+
 let observer,
 	timer,
 	globalPending = 0;
@@ -90,7 +91,7 @@ function pendingUpdated(pending, flag) {
 function checkNotify() {
 	const element = document.body;
 	if (element) {
-		const isReady = !globalPending;  // When nothing is pwnding it will be zero
+		const isReady = !globalPending;  // When nothing is pending it will be zero
 		const currentState = instance.isReady();
 		if (isReady !== currentState) {
 			if (timer) {
@@ -131,7 +132,7 @@ function stateChangeFactory(element, attr) {
  */
 function isFlaggedReady() {
 	const element = document.body;
-	return (element && element.getAttribute(instance.attr) === "true");
+	return (element?.getAttribute(instance.attr) === "true");
 }
 
 /**

wcomponents-theme/src/main/js/wc/debug/debugUtils.mjs

@@ -36,7 +36,7 @@ function flagBad(tags, testFunc, container) {
 	}
 
 	if (candidates && candidates.length) {
-		candidates.forEach(testFunc);
+		candidates.forEach(element => testFunc(element));
 	}
 }
 

wcomponents-theme/src/main/js/wc/dom/diagnostic.mjs

@@ -215,7 +215,7 @@ const diagnostic = {
 	 * @returns {Boolean}
 	 */
 	isMessage: function (element, level) {
-		if (!(element && element.nodeType === Node.ELEMENT_NODE)) {
+		if (element?.nodeType !== Node.ELEMENT_NODE) {
 			return false;
 		}
 		// firstly, do we even have a message?
@@ -265,7 +265,7 @@ const diagnostic = {
 	 * @returns {HTMLElement} the target element of the diagnostic box
 	 */
 	getTarget: function (diag) {
-		if (!(diag && diag.nodeType === Node.ELEMENT_NODE && diag.matches(diagnosticSelector))) {
+		if (!(diag?.nodeType === Node.ELEMENT_NODE && diag.matches(diagnosticSelector))) {
 			return null;
 		}
 

wcomponents-theme/src/main/js/wc/dom/role.mjs

@@ -16,7 +16,7 @@ export default {
 	 */
 	get: function(element, implied) {
 		let role = "";
-		if (element && element.nodeType === Node.ELEMENT_NODE) {
+		if (element?.nodeType === Node.ELEMENT_NODE) {
 			role = element.getAttribute("role");
 			if (implied && !role) {
 				role = impliedARIA.getImpliedRole(/** @type {HTMLElement} */(element));
@@ -34,7 +34,7 @@ export default {
 	 */
 	has: function(element, implied) {
 		let result = false;
-		if (element && element.nodeType === Node.ELEMENT_NODE) {
+		if (element?.nodeType === Node.ELEMENT_NODE) {
 			result = element.hasAttribute("role");
 			if (implied && !result) {
 				result = !!impliedARIA.getImpliedRole(/** @type {HTMLElement} */(element));

wcomponents-theme/src/main/js/wc/dom/serialize.mjs

@@ -26,7 +26,7 @@ const instance = {
 					let same = false;
 					const stateBVal = stateB[key];
 					const stateAVal = stateA[key];
-					if (stateBVal && stateAVal && stateBVal.length === stateAVal.length) {
+					if (stateAVal?.length > 0 && stateBVal?.length === stateAVal.length) {
 						same = stateBVal.every(item => stateAVal.includes(item));
 					} else {
 						console.log("Param has changed", key, stateAVal, stateBVal);

wcomponents-theme/src/main/js/wc/dom/wrappedInput.mjs

@@ -42,7 +42,7 @@ wrappedInput.isReadOnly = function(element) {
  * @return {HTMLElement|null}
  */
 wrappedInput.getInput = function(element) {
-	if (!(element && element.matches(wrapperSelector))) {
+	if (!(element?.matches(wrapperSelector))) {
 		return null;
 	}
 	return element.querySelector(wrappedSelectors);

wcomponents-theme/src/main/js/wc/ui/ajax/processResponse.mjs

@@ -310,7 +310,7 @@
 	let child;
 	while ((child = _content.firstChild)) {
 		if (child.nodeType === Node.ELEMENT_NODE) {
 			result[result.length] = parent.insertBefore(child, element);
 		} else {
 			_content.removeChild(child);
 		}
@@ -381,7 +381,7 @@
 	const srcAttr = "src", defer = "defer";
 	let ownerElement = document.body;
 
-	if (relativeTo && relativeTo.nodeType === Node.ELEMENT_NODE) {
+	if (relativeTo?.nodeType === Node.ELEMENT_NODE) {
 		ownerElement = relativeTo.closest("form") || document.body;
 	}
 

wcomponents-theme/src/main/js/wc/ui/calendar.mjs

@@ -1022,7 +1022,7 @@ function keydownEvent($event) {
 function position(element) {
 	const cal = element || getCal();
 	if (cal && !shed.isHidden(cal, true)) {
-		const fixed = (window.getComputedStyle && window.getComputedStyle(cal).position === "fixed");
+		const fixed = (window?.getComputedStyle(cal).position === "fixed");
 		if (fixed) {
 			const input = getInputForCalendar(cal);
 			if (input) {

wcomponents-theme/src/main/js/wc/ui/feedback.mjs

@@ -255,7 +255,7 @@ const instance = {
 		let writeWhere = args.position,
 			target = args.element || args["target"];  // this was a mess with both properties in use
 
-		if (!(messages && target && target.nodeType === Node.ELEMENT_NODE)) {
+		if (!(messages && target?.nodeType === Node.ELEMENT_NODE)) {
 			// no messages or target for the messages
 			// don't throw: just do nothing
 			console.warn("trying to add nothing or to nothing");
@@ -308,7 +308,7 @@ const instance = {
 	 * @returns {boolean} `true` if a diagnostic box was found and removed.
 	 */
 	remove: function(element, target, level) {
-		if (!(element && element.nodeType === Node.ELEMENT_NODE)) {
+		if (element?.nodeType !== Node.ELEMENT_NODE) {
 			return false;
 		}
 		// read carefully before you try merging these two to be more 'efficient'/

wcomponents-theme/src/main/js/wc/ui/fieldset.mjs

@@ -45,7 +45,7 @@ function makeLegend(el) {
 }
 
 function labelToLegend(element) {
-	if (element && element.matches(fieldsetSelector)) {
+	if (element?.matches(fieldsetSelector)) {
 		makeLegend(element);
 	} else {
 		Array.from(document.body?.querySelectorAll(fieldsetSelector)).forEach(makeLegend);

wcomponents-theme/src/main/js/wc/ui/icon.mjs

@@ -93,7 +93,7 @@ function getHTML(icon) {
  * @throws {TypeError} if element is not an Element
  */
 function testElementArg(element) {
-	if (!(element && element.nodeType === Node.ELEMENT_NODE)) {
+	if (element?.nodeType !== Node.ELEMENT_NODE) {
 		throw new TypeError("element must be an HTML element");
 	}
 	return true;

wcomponents-theme/src/main/js/wc/ui/label.mjs

@@ -133,7 +133,7 @@ function shedMandatorySubscriber($event) {
 		return;
 	}
 	const input = wrappedInput.isOneOfMe(target) ? wrappedInput.getInput(target) : target;
-	if (input && input.type !== "radio" && (input.matches(tags.join()) || $role.has(input))) {
+	if (input?.type !== "radio" && (input.matches(tags.join()) || $role.has(input))) {
 		const func = action === shed.events.OPTIONAL ? "remove" : "add";
 		getLabelsForElement(target).forEach(function (next) {
 			mandateLabel(next, func);

wcomponents-theme/src/main/js/wc/ui/listboxAnalog.mjs

@@ -184,7 +184,7 @@ function getTextTarget(options, start, keyName) {
 		for (let i = startIdx + 1; i < options.length; ++i) {
 			let next = options[i];
 			let txt = next.textContent;
-			if (txt && txt[0].toLocaleLowerCase() === keyName) {
+			if (txt?.[0].toLocaleLowerCase() === keyName) {
 				result = next;
 				break;
 			}

wcomponents-theme/src/main/js/wc/ui/menu/core.mjs

@@ -248,7 +248,7 @@
 		tw.nextNode();
 		const node = tw.currentNode;
 
-		if (node && node.nodeType === Node.TEXT_NODE) {
+		if (node?.nodeType === Node.TEXT_NODE) {
 			const textNodeContent = node.nodeValue;
 			if (textNodeContent.toLocaleUpperCase().startsWith(letter.toLocaleUpperCase())) {
 				result = NodeFilter.FILTER_ACCEPT;
@@ -832,7 +832,7 @@
 	} else if (action === shed.actions.COLLAPSE && (content = instance.getSubMenu(branch, true))) {
 		if (CLASS.DEFAULT_DIRECTION) {
 			content.classList.remove(CLASS.DEFAULT_DIRECTION);
 			content.classList.remove(CLASS.AGAINST_DEFAULT);
 		}
 		content.classList.remove(CLASS.COLLIDE_SOUTH);
 		content.style.bottom = "";

wcomponents-theme/src/main/js/wc/ui/radioButtonSelect.mjs

@@ -37,7 +37,7 @@
 	 */
 	setSelectionByValue: function(element, value) {
 		if (element.matches(radioButtonSelectSelector)) {
 			if (!value) {
 				// deselectAll
 				getFilteredGroup(element).forEach((next) => shed.deselect(next));  // should be only one
 			} else {
@@ -71,7 +71,7 @@
  * @param {String} action One of the {@link module:wc/dom/shed~actions}: MANDATORY or OPTIONAL
  */
 function shedSubscriber(element, action) {
-	if (element && element.matches(radioButtonSelectSelector)) {
+	if (element?.matches(radioButtonSelectSelector)) {
 		group.getGroup(element, radioSelector).forEach(next => shed[action](next));
 	}
 }

wcomponents-theme/src/main/js/wc/ui/table/rowExpansion.mjs

@@ -235,7 +235,7 @@ function showHideContent(triggerRow, action) {
  * @param {CustomEvent & { target: HTMLElement, detail: { action: string } }} $event
  */
 function expCollapseObserver({ target: element, detail }) {
-	if (element && element.matches(tbl_expandable_row)) {
+	if (element?.matches(tbl_expandable_row)) {
 		const action = detail.action;
 		const control = Array.from(element.children).find(el => el.matches(row_trigger));
 		if (control) {