build(deps-dev): update eslint-unicorn and fix/disable rules

build/eslint-fred.js

@@ -132,7 +132,7 @@ export default {
             }
 
             if (node.source.value === "lit") {
-              const htmlSpecifier = node.specifiers.find(
+              const htmlSpecifier = node.specifiers.some(
                 (spec) =>
                   spec.type === "ImportSpecifier" &&
                   spec.imported.type === "Identifier" &&

build/loaders/fix-light-dark.js

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/no-this-outside-of-class */
 import crypto from "node:crypto";
 
 /**

components/button/sandbox.js

@@ -10,7 +10,7 @@ import { Button } from "./server.js";
 
 export class ButtonSandbox extends SandboxComponent {
   render() {
-    const hrefs = [undefined, "http://example.com"];
+    const hrefs = [undefined, "https://example.com"];
     const variants = [undefined, "primary", "secondary", "plain"];
     const actions = [undefined, "positive", "negative"];
     const icons = [

components/color-theme/element.js

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/prefer-includes-over-repeated-comparisons */
 import { LitElement, html } from "lit";
 
 import { L10nMixin } from "../../l10n/mixin.js";

components/compat-table/element.js

@@ -58,7 +58,7 @@ function browserToIconName(browser) {
   } else if (browser === "webview_ios") {
     return "safari";
   } else {
-    return browser.split("_")[0] ?? "";
+    return browser.split("_", 1)[0] ?? "";
   }
 }
 

components/cookie/utils.js

@@ -5,7 +5,7 @@ export function getCookieValue(name) {
     .find((row) => row.startsWith(`${name}=`));
 
   if (value && value.includes("=")) {
-    value = value.split("=")[1];
+    value = value.split("=", 2)[1];
   }
 
   return value;

components/curriculum-landing/server.js

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/better-dom-traversing */
 import { html } from "@lit-labs/ssr";
 import { nothing } from "lit";
 

components/dropdown/element.js

@@ -44,7 +44,9 @@ export class MDNDropdown extends LitElement {
 
   /** @param {string} name  */
   _slotElements(name) {
-    const slot = this.shadowRoot?.querySelector(`slot[name="${name}"]`);
+    const slot = this.shadowRoot?.querySelector(
+      `slot[name="${CSS.escape(name)}"]`,
+    );
     if (slot instanceof HTMLSlotElement) {
       return slot.assignedElements();
     }

components/interactive-example/utils.js

@@ -4,7 +4,7 @@
  * @param {string} code
  */
 export function isCSSSupported(code) {
-  // http://regexr.com/3fvik
+  // https://regexr.com/3fvik
   const cssCommentsMatch = /(\/\*)[\s\S]+(\*\/)/g;
   const element = document.createElement("div");
 

components/latest-news/server.js

@@ -59,7 +59,7 @@ function getRelativeTime(seconds) {
     { amount: 60, unit: "minute" },
     { amount: 24, unit: "hour" },
     { amount: 7, unit: "day" },
-    { amount: 4.345_24, unit: "week" }, // 365/12/7
+    { amount: 4.34524, unit: "week" }, // 365/12/7
     { amount: 12, unit: "month" },
     { amount: Number.POSITIVE_INFINITY, unit: "year" },
   ];

components/outer-layout/server.js

@@ -69,7 +69,7 @@ export class OuterLayout extends ServerComponent {
       .filter((x) => x !== undefined);
 
     const area =
-      context.path.split("/")[3]?.toLowerCase() === "learn_web_development"
+      context.path.split("/", 4)[3]?.toLowerCase() === "learn_web_development"
         ? "learn"
         : undefined;
 

components/play-runner/element.js

@@ -70,7 +70,7 @@ export class MDNPlayRunner extends LitElement {
   /** @param {MessageEvent} e  */
   _onMessage({ data: { typ, prop, args, uuid }, origin }) {
     if (!uuid) {
-      uuid = new URL(origin, "https://example.com").hostname.split(".")[0];
+      uuid = new URL(origin, "https://example.com").hostname.split(".", 1)[0];
     }
     if (uuid !== this._subdomain) {
       return;

components/recent-contributions/server.js

@@ -58,7 +58,7 @@ function getRelativeTime(seconds) {
     { amount: 60, unit: "minute" },
     { amount: 24, unit: "hour" },
     { amount: 7, unit: "day" },
-    { amount: 4.345_24, unit: "week" }, // 365/12/7
+    { amount: 4.34524, unit: "week" }, // 365/12/7
     { amount: 12, unit: "month" },
     { amount: Number.POSITIVE_INFINITY, unit: "year" },
   ];

components/sidebar-filter/sidebar-filterer.js

@@ -355,13 +355,11 @@ export class SidebarFilterer {
    * @returns {HTMLElement|undefined} The found element or undefined if none found.
    */
   findFirstElementBefore(el, candidates) {
-    return [...candidates]
-      .reverse()
-      .find(
-        (candidate) =>
-          candidate.compareDocumentPosition(el) &
-          Node.DOCUMENT_POSITION_FOLLOWING,
-      );
+    return candidates.findLast(
+      (candidate) =>
+        candidate.compareDocumentPosition(el) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    );
   }
 
   /**

components/specifications-list/server.js

@@ -57,7 +57,7 @@ export class SpecificationsList extends ServerComponent {
    * @param {string} [title]
    */
   renderLink(url, title) {
-    const hash = url.split("#")[1];
+    const hash = url.split("#", 2)[1];
 
     const label = [
       title && html`${title}`,

entry.ssr.js

@@ -46,7 +46,7 @@ for (const [name, def] of customElements.__definitions) {
  * @param {import("@fred").CompilationStats} compilationStats
  */
 export async function render(path, partialContext, compilationStats) {
-  const locale = path.split("/")[1] || "en-US";
+  const locale = path.split("/", 2)[1] || "en-US";
 
   const context = {
     path,
@@ -135,7 +135,7 @@ export async function render(path, partialContext, compilationStats) {
  * @param {import("@fred").PartialContext} partialContext
  */
 export async function renderSimplified(path, partialContext) {
-  const locale = path.split("/")[1] || "en-US";
+  const locale = path.split("/", 2)[1] || "en-US";
   const context = {
     path,
     ...(await addFluent(locale)),

hooks/toc-highlight.js

@@ -11,7 +11,7 @@ function highlightTOC(toc) {
   const tocItemBySection = new Map();
   for (const item of tocItems.reverse()) {
     const target = document.querySelector(
-      `[id="${decodeURIComponent(item.hash).slice(1)}"]`,
+      `[id="${CSS.escape(decodeURIComponent(item.hash).slice(1))}"]`,
     );
 
     if (!target) {

l10n/fluent.js

@@ -14,7 +14,7 @@ const ftlMap = {
   "en-US": enUS_ftl,
 };
 
-const ALLOWED_TAGS = ["i", "strong", "br", "em"];
+const ALLOWED_TAGS = new Set(["i", "strong", "br", "em"]);
 const ALLOWED_ATTRIBUTES = ["title", "aria-label"];
 
 export class Fluent {
@@ -105,7 +105,7 @@ export class Fluent {
             }
           }
           if (
-            ALLOWED_TAGS.includes(token.tag) ||
+            ALLOWED_TAGS.has(token.tag) ||
             (name &&
               Object.keys(elements).includes(name) &&
               elements[name]?.tag === token.tag)

package.json

@@ -108,7 +108,7 @@
     "eslint-plugin-jsdoc": "^63.0.2",
     "eslint-plugin-lit": "^2.3.1",
     "eslint-plugin-n": "^18.1.0",
-    "eslint-plugin-unicorn": "^64.0.0",
+    "eslint-plugin-unicorn": "^65.0.1",
     "eslint-plugin-wc": "^3.1.0",
     "globals": "^17.6.0",
     "lefthook": "^2.1.9",

scripts/server.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from "node:url";
 import { rariBin } from "@mdn/rari";
 import { concurrently } from "concurrently";
 
-export const server = fileURLToPath(import.meta.resolve("../server.js"));
+const server = fileURLToPath(import.meta.resolve("../server.js"));
 
 const { commands, result } = concurrently(
   [

server.js

@@ -240,7 +240,7 @@ export async function startServer() {
       selfHandleResponse: true,
       on: {
         proxyReq: async (req) => {
-          const locale = req.path.split("/")[1];
+          const locale = req.path.split("/", 2)[1];
           if (locale && /^q[a-t][a-z]$/.test(locale)) {
             // if the locale matches a qaa...qtz private use language tag,
             // which we use for testing fluent with pseudo-locales,

symmetric-context/client.js

@@ -4,5 +4,5 @@
  * @type {import("./types.js").SymmetricContext}
  */
 globalThis.__MDNClientContext = {
-  locale: globalThis.location.pathname.split("/")[1] || "en-US",
+  locale: globalThis.location.pathname.split("/", 2)[1] || "en-US",
 };

test/unit/l10n/fixtures/simple-different.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-expressions, unicorn/no-this-outside-of-class */
 // @ts-nocheck
 
 this.l10n("id1")`Hello world!`;

test/unit/l10n/fixtures/simple.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-expressions, unicorn/no-this-outside-of-class */
 // @ts-nocheck
 
 this.l10n("id1")`Hello world!`;

test/unit/l10n/fixtures/tags-with-duplicates.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-expressions, unicorn/no-this-outside-of-class */
 // @ts-nocheck
 
 this.l10n("this-l10n")`This L10n`;

test/unit/l10n/fixtures/tags-with-substitutions.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-expressions, unicorn/no-this-outside-of-class */
 // @ts-nocheck
 
 const foo = "has";

test/unit/l10n/fixtures/tags.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-expressions, no-undef */
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-expressions, no-undef, unicorn/no-this-outside-of-class */
 // @ts-nocheck
 
 this.l10n("this-l10n")`This L10n`;