initial try at patching methods

typescript fixes

added tests

updated methods to get classes working

adding tests back in and tidying up

Author: DAZ

src/core/controller.ts

@@ -73,6 +73,14 @@ export class Controller<ElementType extends Element = Element> {
     return this.scope.data
   }
 
+  findElement(selector: string) {
+    return this.scope.findElement(selector)
+  }
+
+  findAllElements(selector: string) {
+    return this.scope.findAllElements(selector)
+  }
+
   initialize() {
     // Override in your subclass to set up initial controller state
   }

src/core/scope.ts

@@ -26,16 +26,38 @@ export class Scope {
   }
 
   findElement(selector: string): Element | undefined {
-    return this.element.matches(selector) ? this.element : this.queryElements(selector).find(this.containsElement)
+    const elementWithId = document.getElementById(selector)
+    if (elementWithId && this.containsElement(elementWithId)) {
+      return elementWithId
+    }
+    const newSelector = this.classifySelector(selector)
+    return this.element.matches(newSelector) ? this.element : this.queryElements(newSelector).find(this.containsElement)
   }
 
   findAllElements(selector: string): Element[] {
+    const newSelector = this.classifySelector(selector)
     return [
-      ...(this.element.matches(selector) ? [this.element] : []),
-      ...this.queryElements(selector).filter(this.containsElement),
+      ...(this.element.matches(newSelector) ? [this.element] : []),
+      ...this.queryElements(newSelector).filter(this.containsElement),
     ]
   }
 
+  classifySelector(selector: string | string[]): string {
+    const tokens = Array.isArray(selector) ? selector : [selector]
+
+    const allDefinedTokens = this.getAllClassTokens()
+    const isDefinedClass = tokens.every((token) => allDefinedTokens.includes(token))
+
+    const stringySelector = tokens.join(" ")
+    return isDefinedClass ? `.${stringySelector.replace(/ /g, ".")}` : stringySelector
+  }
+
+  getAllClassTokens(): string[] {
+    return Object.entries((this.element as HTMLElement).dataset)
+      .filter(([key]) => key.endsWith("Class"))
+      .flatMap(([_, value]) => (value ? value.trim().split(/\s+/) : []))
+  }
+
   containsElement = (element: Element): boolean => {
     return element.closest(this.controllerSelector) === this.element
   }

src/tests/modules/core/find_element_test.ts

@@ -0,0 +1,38 @@
+import { ClassController } from "../../controllers/class_controller"
+import { ControllerTestCase } from "../../cases/controller_test_case"
+
+export default class FindElementTests extends ControllerTestCase(ClassController) {
+  fixtureHTML = `
+    <div data-controller="${this.identifier}"
+      data-${this.identifier}-active-class="test--active"
+      data-${this.identifier}-loading-class="busy"
+      data-${this.identifier}-success-class="bg-green-400 border border-green-600"
+    >
+      <div id="inside-id" class="busy"></div>
+    </div>
+    <div id="outside-id" class="busy"></div>
+
+    "test findElement finds element by id inside scope"() {
+      const result = this.controller.findElement("inside-id")
+      this.assert.equal(result?.id, "inside-id")
+    }
+
+    "test findElement does not find element by id outside scope"() {
+      const result = this.controller.findElement("outside-id")
+      this.assert.equal(result, undefined)
+    }
+
+    "test findElement finds element by defined class"() {
+      const result = this.controller.findElement(this.controller.loadingClass)
+      this.assert.ok(result instanceof Element)
+      this.assert.ok(result?.classList.contains("busy"))
+    }
+
+    "test findAllElements returns multiple matches for defined class"() {
+      const results = this.controller.findAllElements(this.controller.loadingClass)
+      this.assert.ok(Array.isArray(results))
+      this.assert.equal(results.length, 1)
+      this.assert.ok(results[0].classList.contains("busy"))
+    }
+  `
+}