Merge branch 'main' into remove-framer-motion

Author: microbit-matt-hillsdon

package-lock.json

@@ -28,8 +28,6 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/lodash.sortby": "^4.7.6",
     "@types/lunr": "^2.3.4",
     "@types/marked": "^4.0.1",
     "@types/node": "^24.12.0",
@@ -39,8 +37,6 @@
     "crelt": "^1.0.5",
     "dompurify": "^3.2.5",
     "file-saver": "^2.0.5",
-    "lodash.debounce": "^4.0.8",
-    "lodash.sortby": "^4.7.0",
     "lunr": "^2.3.9",
     "lunr-languages": "^1.14.0",
     "lzma": "^2.3.2",
@@ -56,7 +52,6 @@
     "vite": "^7.3.1",
     "vscode-jsonrpc": "^9.0.0",
     "vscode-languageserver-protocol": "^3.16.0",
-    "web-vitals": "^1.1.1",
     "xterm": "4.19.0",
     "xterm-addon-fit": "^0.5.0"
   },

package.json

@@ -0,0 +1,50 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { vi } from "vitest";
+import { debounce } from "./debounce-util";
+
+describe("debounce", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("calls the function once with the latest arguments after the wait", () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+    debounced("first");
+    debounced("second");
+    vi.advanceTimersByTime(99);
+    expect(fn).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(1);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith("second");
+  });
+
+  it("restarts the wait on each call", () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+    debounced();
+    vi.advanceTimersByTime(60);
+    debounced();
+    vi.advanceTimersByTime(60);
+    expect(fn).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(40);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("fires again for calls after a completed wait", () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+    debounced();
+    vi.advanceTimersByTime(100);
+    debounced();
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+});

src/common/debounce-util.test.ts

@@ -0,0 +1,20 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Returns a function that delays calling fn until waitMs have elapsed
+ * since the last call, invoking it with the most recent arguments.
+ */
+export const debounce = <A extends unknown[]>(
+  fn: (...args: A) => void,
+  waitMs: number
+): ((...args: A) => void) => {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  return (...args: A) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), waitMs);
+  };
+};

src/common/debounce-util.ts

@@ -0,0 +1,42 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { sortBy } from "./sort-util";
+
+describe("sortBy", () => {
+  it("sorts ascending by a single iteratee", () => {
+    expect(sortBy(["banana", "apple", "cherry"], (s) => s)).toEqual([
+      "apple",
+      "banana",
+      "cherry",
+    ]);
+  });
+
+  it("uses later iteratees as tie-breakers", () => {
+    const files = [
+      { name: "b.py", main: false },
+      { name: "main.py", main: true },
+      { name: "a.py", main: false },
+    ];
+    expect(
+      sortBy(
+        files,
+        (f) => !f.main,
+        (f) => f.name
+      ).map((f) => f.name)
+    ).toEqual(["main.py", "a.py", "b.py"]);
+  });
+
+  it("is stable and does not mutate its input", () => {
+    const input = [
+      { key: 1, id: "first" },
+      { key: 0, id: "a" },
+      { key: 1, id: "second" },
+    ];
+    const result = sortBy(input, (x) => x.key);
+    expect(result.map((x) => x.id)).toEqual(["a", "first", "second"]);
+    expect(input.map((x) => x.id)).toEqual(["first", "a", "second"]);
+  });
+});

src/common/sort-util.test.ts

@@ -0,0 +1,30 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+type Iteratee<T> = (item: T) => string | number | boolean;
+
+/**
+ * Returns a copy of the array sorted ascending by the iteratees,
+ * comparing by the first iteratee and using the others as tie-breakers.
+ * The sort is stable.
+ */
+export const sortBy = <T>(
+  items: readonly T[],
+  ...iteratees: Iteratee<T>[]
+): T[] =>
+  [...items].sort((a, b) => {
+    for (const iteratee of iteratees) {
+      const left = iteratee(a);
+      const right = iteratee(b);
+      if (left < right) {
+        return -1;
+      }
+      if (left > right) {
+        return 1;
+      }
+    }
+    return 0;
+  });

src/common/sort-util.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { Divider, Link, List, ListItem } from "@microbit/ui";
-import sortBy from "lodash.sortby";
+import { sortBy } from "../../common/sort-util";
 import { ReactNode, useCallback } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { SystemStyleObject } from "styled-system/types";

src/documentation/api/ApiDocumentation.tsx

@@ -3,16 +3,13 @@
  *
  * SPDX-License-Identifier: MIT
  */
+import { sortBy } from "../../common/sort-util";
 import { Extract } from "./common";
 
 export type Position = [number, number];
 
-// Avoid lodash in the worker
-export const sortByStart = (positions: Position[]): Position[] => {
-  const copy = [...positions];
-  copy.sort((a, b) => (a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0));
-  return copy;
-};
+export const sortByStart = (positions: Position[]): Position[] =>
+  sortBy(positions, (p) => p[0]);
 
 /**
  * Return text or matches covering the string from start to end.

src/documentation/search/extracts.ts

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import debounce from "lodash.debounce";
+import { debounce } from "../../common/debounce-util";
 import {
   createContext,
   ReactNode,

src/documentation/search/search-hooks.tsx

@@ -11,7 +11,7 @@ import {
   insertBracket,
 } from "@codemirror/autocomplete";
 import { TransactionSpec } from "@codemirror/state";
-import sortBy from "lodash.sortby";
+import { sortBy } from "../../../common/sort-util";
 import { IntlShape } from "react-intl";
 import * as LSP from "vscode-languageserver-protocol";
 import {