Finish refactor of components and test helpers to LitElements

Author: webstackdev

_TODO.md

@@ -269,22 +269,3 @@ This article has different approaches to [print pagination](https://www.customjs
 - cover.jpg for reliability-and-testing needs touch up in GIMP
 - We need to check for short form and deep article articles where the deep-dive index.pdf has a non-featured tag lik "argo-cd" only in the pdf.mdx. In those cases, we should make sure the callout for the deep dive includes the name of that non-featured (technology) tag and add the name to the tags: frontmatter key in the index.mdx
 - Need an article on OpenStack
-
-## HTMLElement vs. extends HTMLElement
-
-A bunch of our web components extend directly from HTMLElement instead of following the instructions to extend LitElement.
-
-- Consent/Banner
-- Consent/Checkbox
-- Consent/Preferences
-
-The WebComponentModule type in this file is used throughout component scripts:
-
-`src/components/scripts/@types/webComponentModule.ts`
-
-There are testing fixtures that might be targeting HTMLElement instead of LitElement:
-
-`isLikelyWebComponent()` in `test/eslint/enforce-centralized-events-rule.ts`
-line 113 in `test/eslint/__tests__/enforce-centralized-events-rule.spec.ts`
-
-interface `ElementWithTestProperties` in `test/e2e/assertions/index.ts`

src/components/scripts/@types/webComponentModule.ts

@@ -1,4 +1,6 @@
-export interface WebComponentModule<TElement extends HTMLElement = HTMLElement> {
+import type { LitElement } from 'lit'
+
+export interface WebComponentModule<TElement extends HTMLElement = LitElement> {
   registeredName: string
   componentCtor: CustomElementConstructor & { prototype: TElement }
   registerWebComponent: (_tagName?: string) => Promise<void> | void

test/eslint/__tests__/enforce-centralized-events-rule.spec.ts

@@ -116,6 +116,24 @@ describe('enforce-centralized-events', () => {
             this.addEventListener('keyup', this.handleKeyUp);
           }
         }
+      `,
+          filename: 'src/components/MyComponent/index.ts',
+        },
+
+        // ========================================
+        // Valid: LitElement web components
+        // ========================================
+        {
+          code: `
+        import { LitElement } from 'lit';
+
+        class MyComponent extends LitElement {
+          connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener('click', this.handleClick);
+            this.addEventListener('keyup', this.handleKeyUp);
+          }
+        }
       `,
           filename: 'src/components/MyComponent/index.ts',
         },

test/eslint/enforce-centralized-events-rule.ts

@@ -78,7 +78,7 @@ const enforceCentralizedEventsRule: Rule.RuleModule = {
       let foundWebComponent = false
       const visitorKeys = sourceCode.visitorKeys ?? {}
 
-      const isHTMLElementSubclass = (node: Node): boolean => {
+      const isWebComponentSubclass = (node: Node): boolean => {
         if (node.type !== 'ClassDeclaration' && node.type !== 'ClassExpression') {
           return false
         }
@@ -87,14 +87,14 @@ const enforceCentralizedEventsRule: Rule.RuleModule = {
         return Boolean(
           superClass &&
           superClass.type === 'Identifier' &&
-          superClass.name === 'HTMLElement',
+          (superClass.name === 'HTMLElement' || superClass.name === 'LitElement'),
         )
       }
 
       const checkNode = (astNode: Node | null | undefined): void => {
         if (!astNode || foundWebComponent) return
 
-        if (isHTMLElementSubclass(astNode)) {
+        if (isWebComponentSubclass(astNode)) {
           foundWebComponent = true
           return
         }