chore(lit): add linting and fix (#12221)

https://mozilla-hub.atlassian.net/browse/MP-1738 migrate existing lit components to plain javascript with typescript in jsdoc to avoid the headache of dealing with typescript and babel
mdn · Dec 5, 2024 · 3d403a9 · 3d403a9
1 parent 11a675c
commit 3d403a9
Show file tree

Hide file tree

Showing 12 changed files with 255 additions and 65 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,24 +30,16 @@ yarn-error.log*
 /kumascript/coverage/
 /kumascript/node_modules/
 /testing/node_modules/
-/build/*.js
 /build/*.js.map
 /client/build
-/client/src/**/*.js
 /client/src/**/*.js.map
-/content/*.js
 /content/*.js.map
-/filecheck/*.js
 /filecheck/*.js.map
-/kumascript/*.js
 /kumascript/*.js.map
-/markdown/*.js
 /markdown/*.js.map
-/server/*.js
 /server/*.js.map
 /ssr/dist/
 /ssr/*.js.map
-/tool/*.js
 /tool/*.js.map
 
 # These are an effect of the dumper still producing all locales

diff --git a/client/config/webpack.config.js b/client/config/webpack.config.js
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 

diff --git a/client/package.json b/client/package.json
@@ -24,14 +24,20 @@
     ]
   },
   "eslintConfig": {
-    "extends": "react-app",
+    "extends": [
+      "react-app",
+      "plugin:wc/best-practice",
+      "plugin:lit/all"
+    ],
     "rules": {
+      "lit/no-template-map": "off",
       "react/jsx-no-target-blank": [
         "error",
         {
           "allowReferrer": true
         }
-      ]
+      ],
+      "wc/guard-super-call": "off"
     }
   },
   "jest": {

diff --git a/client/pwa/webpack.config.js b/client/pwa/webpack.config.js
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { fileURLToPath } from "node:url";
 import { execSync } from "node:child_process";
 import webpack from "webpack";

diff --git a/client/src/community/contributor-list.ts → client/src/community/contributor-list.js b/client/src/community/contributor-list.ts → client/src/community/contributor-list.js
@@ -1,18 +1,10 @@
 import { LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
 
 import styles from "./contributor-list.scss?css" with { type: "css" };
 
-interface ContributorData {
-  name: string;
-  github: string;
-  org?: string;
-}
+/** @import { ContributorData } from "./types" */
 
-@customElement("contributor-list")
 export class ContributorList extends LitElement {
-  _contributors: ContributorData[] = [];
-
   static properties = {
     _contributors: { state: true },
   };
@@ -21,8 +13,14 @@ export class ContributorList extends LitElement {
 
   constructor() {
     super();
+    /** @type {ContributorData[]} */
+    this._contributors = [];
+  }
+
+  _onChildrenChanged() {
     const contributorList = this.querySelector("ul");
-    const randomContributors: ContributorData[] = [];
+    /** @type {ContributorData[]} */
+    const randomContributors = [];
     if (contributorList) {
       const contributors = [...contributorList.querySelectorAll("li")];
       for (let index = 0; index < 8; index++) {
@@ -47,6 +45,16 @@ export class ContributorList extends LitElement {
     }
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this._onChildrenChanged();
+    new MutationObserver(() => this._onChildrenChanged()).observe(this, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+    });
+  }
+
   render() {
     return html`<div class="wrap">
       <div class="inner">
@@ -84,7 +92,7 @@ export class ContributorList extends LitElement {
               ?.split("/")
               .slice(-1)}`;
             return html`<li>
-              <a href="${github}" target="_blank" rel="nofollow noreferrer">
+              <a href=${github} target="_blank" rel="nofollow noreferrer">
                 <img
                   src="${imgSrc}?size=80"
                   srcset="${imgSrc}?size=160 2x"
@@ -102,7 +110,13 @@ export class ContributorList extends LitElement {
   }
 }
 
-function popRandom<T>(array: Array<T>) {
+customElements.define("contributor-list", ContributorList);
+
+/**
+ * @template T
+ * @param {Array<T>} array
+ */
+function popRandom(array) {
   const i = Math.floor(Math.random() * array.length);
   // mutate the array:
   return array.splice(i, 1)[0];

diff --git a/client/src/community/types.d.ts b/client/src/community/types.d.ts
@@ -0,0 +1,5 @@
+export interface ContributorData {
+  name: string;
+  github: string;
+  org?: string;
+}
diff --git a/client/src/curriculum/scrim-inline.ts → client/src/curriculum/scrim-inline.js b/client/src/curriculum/scrim-inline.ts → client/src/curriculum/scrim-inline.js
@@ -1,41 +1,53 @@
-import { html, LitElement, PropertyValues } from "lit";
-import { customElement } from "lit/decorators.js";
+import { html, LitElement, nothing } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { StyleInfo, styleMap } from "lit/directives/style-map.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createComponent } from "@lit/react";
 import React from "react";
-import { CURRICULUM } from "../telemetry/constants";
+import { CURRICULUM } from "../telemetry/constants.ts";
 
 import "./scrim-inline.global.css";
 import styles from "./scrim-inline.scss?css" with { type: "css" };
 import playSvg from "../assets/curriculum/scrim-play.svg?raw";
 
-@customElement("scrim-inline")
 class ScrimInline extends LitElement {
-  url?: string;
-  _fullUrl?: string;
-  _scrimId?: string;
-
-  img?: string;
-  _imgStyle: StyleInfo = {};
-
-  scrimTitle?: string;
-
-  _fullscreen = false;
-  _scrimLoaded = false;
-
   static properties = {
     url: { type: String },
     img: { type: String },
-    scrimTitle: { type: String },
+    scrimTitle: { type: String, attribute: "scrimtitle" },
     _fullscreen: { state: true },
     _scrimLoaded: { state: true },
   };
 
   static styles = styles;
 
-  willUpdate(changedProperties: PropertyValues<this>) {
+  constructor() {
+    super();
+    /** @type {string | undefined} */
+    this.url = undefined;
+    /** @type {string | undefined} */
+    this._fullUrl = undefined;
+    /** @type {string | undefined} */
+    this._scrimId = undefined;
+
+    /** @type {string | undefined} */
+    this.img = undefined;
+    /** @type {import("lit/directives/style-map.js").StyleInfo} */
+    this._imgStyle = {};
+
+    /** @type {string | undefined} */
+    this.scrimTitle = undefined;
+
+    /** @type {boolean} */
+    this._fullscreen = false;
+    /** @type {boolean} */
+    this._scrimLoaded = false;
+  }
+
+  /**
+   * @param {import("lit").PropertyValues<this>} changedProperties
+   */
+  willUpdate(changedProperties) {
     if (changedProperties.has("url")) {
       if (this.url) {
         const url = new URL(this.url);
@@ -60,7 +72,7 @@ class ScrimInline extends LitElement {
 
   render() {
     if (!this.url || !this._fullUrl) {
-      return html``;
+      return nothing;
     }
 
     return html`
@@ -70,13 +82,13 @@ class ScrimInline extends LitElement {
             <span>Clicking will load content from scrimba.com</span>
             <button
               tabindex="0"
-              @click="${this.#toggle}"
+              @click=${this.#toggle}
               class="toggle ${this._fullscreen ? "exit" : "enter"}"
             >
               <span class="visually-hidden">Toggle fullscreen</span>
             </button>
             <a
-              href="${this._fullUrl}"
+              href=${this._fullUrl}
               target="_blank"
               rel="origin noreferrer"
               class="external"
@@ -89,8 +101,8 @@ class ScrimInline extends LitElement {
             ${this._scrimLoaded
               ? html`
                   <iframe
-                    src="${this._fullUrl}"
-                    title="${ifDefined(this.scrimTitle)}"
+                    src=${this._fullUrl}
+                    title=${ifDefined(this.scrimTitle)}
                   ></iframe>
                 `
               : html`
@@ -111,7 +123,7 @@ class ScrimInline extends LitElement {
                       </div>`
                     : null}
                   <button
-                    @click="${this.#open}"
+                    @click=${this.#open}
                     class="open"
                     data-glean=${`${CURRICULUM}: scrim engage id:${this._scrimId}`}
                   >
@@ -127,10 +139,12 @@ class ScrimInline extends LitElement {
     `;
   }
 
-  #toggle(e: MouseEvent) {
-    if (e.target) {
-      (e.target as HTMLElement).dataset.glean =
-        `${CURRICULUM}: scrim fullscreen -> ${this._fullscreen ? 0 : 1} id:${this._scrimId}`;
+  /**
+   * @param {MouseEvent} e
+   */
+  #toggle(e) {
+    if (e.target instanceof HTMLElement) {
+      e.target.dataset.glean = `${CURRICULUM}: scrim fullscreen -> ${this._fullscreen ? 0 : 1} id:${this._scrimId}`;
     }
     if (this._fullscreen) {
       this.#close();
@@ -158,16 +172,7 @@ class ScrimInline extends LitElement {
   }
 }
 
-declare module "react/jsx-runtime" {
-  namespace JSX {
-    interface IntrinsicElements {
-      "scrim-inline": React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      >;
-    }
-  }
-}
+customElements.define("scrim-inline", ScrimInline);
 
 export default createComponent({
   tagName: "scrim-inline",

diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -1,6 +1,8 @@
 {
   "compilerOptions": {
     "allowJs": true,
+    "checkJs": true,
+    "allowImportingTsExtensions": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
@@ -17,7 +19,13 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "ES2020"
+    "target": "ES2020",
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true
+      }
+    ]
   },
   "include": ["src"]
 }
diff --git a/package.json b/package.json
@@ -201,10 +201,12 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-n": "^17.13.2",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-unicorn": "^56.0.1",
+    "eslint-plugin-wc": "^2.2.0",
     "eslint-webpack-plugin": "^4.2.0",
     "extend": "^3.0.2",
     "file-loader": "^6.2.0",
@@ -262,6 +264,7 @@
     "terser-loader": "^2.0.3",
     "terser-webpack-plugin": "^5.3.10",
     "ts-jest": "^29.2.5",
+    "ts-lit-plugin": "^2.0.2",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.2",

diff --git a/ssr/theme.js b/ssr/theme.js
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* eslint-env browser */
 /* eslint-disable n/no-unsupported-features/node-builtins */
 /**

diff --git a/ssr/webpack.config.js b/ssr/webpack.config.js
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { fileURLToPath } from "node:url";
 // TODO: fix nodeExternals (see note below, where it was used)
 // import nodeExternals from "webpack-node-externals";