Build updates (#1143)

Fixes issues encountered building on a new local install with Node 20
Minor non-visual icon difference in the test update.

Author: microbit-matt-hillsdon

package-lock.json

@@ -47,7 +47,7 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.8.0",
     "react-intl": "^5.20.10",
-    "vscode-jsonrpc": "^6.0.0",
+    "vscode-jsonrpc": "^8.0.0",
     "vscode-languageserver-protocol": "^3.16.0",
     "web-vitals": "^1.1.1",
     "xterm": "4.14.1",

package.json

@@ -28,7 +28,7 @@ const VisualViewPortCSSVariables = () => {
       return;
     }
     const resizeHandler = () => {
-      const { width, height } = window.visualViewport;
+      const { width, height } = window.visualViewport ?? {};
       let style = document.getElementById(styleId);
       if (!style) {
         style = document.head.appendChild(document.createElement("style"));
@@ -39,7 +39,7 @@ const VisualViewPortCSSVariables = () => {
     window.visualViewport.addEventListener("resize", resizeHandler);
     resizeHandler();
     return () => {
-      window.visualViewport.removeEventListener("resize", resizeHandler);
+      window.visualViewport?.removeEventListener("resize", resizeHandler);
       const style = document.getElementById(styleId);
       if (style) {
         style.remove();

src/common/VisualViewportCSSVariables.tsx

@@ -10,7 +10,7 @@ type storageType = "local" | "session";
 /**
  * Local and session storage-backed state (via JSON serialization).
  */
-export function useStorage<T>(
+export function useStorage<T extends object>(
   storageType: storageType,
   key: string,
   defaultValue: T,

src/common/use-storage.ts

@@ -48,7 +48,7 @@ describe("DocumentationContent", () => {
     ];
     const rendered = render(<DocumentationContent content={content} />);
     expect(rendered.container.innerHTML).toMatchInlineSnapshot(
-      `"<div class=\\"chakra-stack css-bs1yt6\\"><p><a target=\\"_blank\\" rel=\\"nofollow noopener\\" class=\\"chakra-link css-1w3ukj\\" href=\\"https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4\\">Read more about ASCII<svg stroke=\\"currentColor\\" fill=\\"currentColor\\" stroke-width=\\"0\\" viewBox=\\"0 0 24 24\\" focusable=\\"false\\" class=\\"chakra-icon css-q1kx43\\" height=\\"1em\\" width=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z\\"></path></g></svg></a>.</p></div>"`
+      `"<div class=\\"chakra-stack css-bs1yt6\\"><p><a target=\\"_blank\\" rel=\\"nofollow noopener\\" class=\\"chakra-link css-1w3ukj\\" href=\\"https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4\\">Read more about ASCII<svg stroke=\\"currentColor\\" fill=\\"currentColor\\" stroke-width=\\"0\\" viewBox=\\"0 0 24 24\\" focusable=\\"false\\" class=\\"chakra-icon css-q1kx43\\" height=\\"1em\\" width=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z\\"></path></svg></a>.</p></div>"`
     );
   });
 

src/documentation/common/DocumentationContent.test.tsx

@@ -79,7 +79,7 @@ describe("dndDecorations", () => {
 
     // ...and later dispatches timeout effect
     // (we've reduced the delay to 0 but it's still async)
-    const mockDispatch = view.dispatch as jest.MockedFunction<
+    const mockDispatch = view.dispatch as unknown as jest.MockedFunction<
       (t: Transaction) => void
     >;
     expect(mockDispatch.mock.calls.length).toEqual(0);

src/editor/codemirror/dnd-decorations.test.ts

@@ -25,6 +25,7 @@ import { DataLog } from "../device/simulator";
 import { useLogging } from "../logging/logging-hooks";
 import { useDataLog } from "./data-logging-hooks";
 import { useAutoScrollToBottom } from "./scroll-hooks";
+import { saveAs } from "file-saver";
 
 export interface DataLoggingModuleProps {
   icon: ReactNode;