feat(web): bump node and packages

.github/workflows/goreleaser.yaml

@@ -42,7 +42,7 @@ jobs:
       - uses: actions/setup-node@v3
         name: Set up Node
         with:
-          node-version: 18
+          node-version: 22
       - name: Run apt-get update
         run: sudo apt-get update
       - name: Install cross-compiler for linux/arm64

.github/workflows/vet.yaml

@@ -69,7 +69,7 @@ jobs:
         working-directory: web
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
     steps:
       - uses: actions/checkout@v3
       - name: Set up NodeJS ${{ matrix.node-version }}
@@ -89,7 +89,7 @@ jobs:
         working-directory: web
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
     steps:
       - uses: actions/checkout@v3
       - name: Set up NodeJS ${{ matrix.node-version }}

web/.nvmrc

@@ -1 +1 @@
-20.11.0
+22.5.1

web/package.json

@@ -14,60 +14,60 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@headlessui/react": "1.7.18",
-    "@heroicons/react": "2.1.1",
+    "@headlessui/react": "2.1.2",
+    "@heroicons/react": "2.1.5",
     "@tailwindcss/forms": "0.5.7",
-    "@tanstack/react-query": "5.17.19",
-    "@tanstack/react-query-devtools": "5.17.21",
+    "@tanstack/react-query": "5.51.15",
+    "@tanstack/react-query-devtools": "5.51.15",
     "classnames": "2.5.1",
     "graphology": "0.25.4",
     "graphology-layout": "0.6.1",
     "graphology-traversal": "0.3.1",
     "graphology-types": "0.24.7",
     "graphology-utils": "2.5.2",
-    "javascript-time-ago": "2.5.9",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-router-dom": "6.21.3",
-    "react-time-ago": "7.2.1",
-    "react-zoom-pan-pinch": "3.3.0",
-    "wouter": "2.12.1"
+    "javascript-time-ago": "2.5.10",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "6.25.1",
+    "react-time-ago": "7.3.3",
+    "react-zoom-pan-pinch": "3.6.1",
+    "wouter": "3.3.1"
   },
   "devDependencies": {
-    "@babel/core": "7.23.7",
-    "@testing-library/jest-dom": "6.2.1",
-    "@testing-library/react": "14.1.2",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
-    "@vitejs/plugin-react": "4.2.1",
-    "@vitest/coverage-v8": "1.2.1",
-    "autoprefixer": "10.4.17",
+    "@babel/core": "7.25.2",
+    "@testing-library/jest-dom": "6.4.8",
+    "@testing-library/react": "16.0.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "@vitest/coverage-v8": "2.0.4",
+    "autoprefixer": "10.4.19",
     "babel-loader": "9.1.3",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-mdx": "3.1.5",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "jsdom": "24.0.0",
-    "msw": "2.1.4",
-    "postcss": "8.4.33",
-    "prettier": "3.2.4",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "jsdom": "24.1.1",
+    "msw": "2.3.4",
+    "postcss": "8.4.40",
+    "prettier": "3.3.3",
     "prop-types": "15.8.1",
-    "tailwindcss": "3.4.1",
-    "typescript": "5.3.3",
-    "vite": "5.0.12",
+    "tailwindcss": "3.4.7",
+    "typescript": "5.5.4",
+    "vite": "5.3.5",
     "vite-plugin-eslint": "1.8.1",
-    "vitest": "1.2.1",
+    "vitest": "2.0.4",
     "vitest-github-actions-reporter": "0.11.1"
   },
   "volta": {
-    "node": "20.11.0",
-    "npm": "10.2.4"
+    "node": "22.5.1",
+    "npm": "10.8.2"
   },
   "msw": {
     "workerDirectory": "public"

web/public/mockServiceWorker.js

@@ -2,13 +2,14 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.1.4).
+ * Mock Service Worker.
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = '223d191a56023cd36aa88c802961b911'
+const PACKAGE_VERSION = '2.3.4'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -48,7 +49,10 @@ self.addEventListener('message', async function (event) {
     case 'INTEGRITY_CHECK_REQUEST': {
       sendToClient(client, {
         type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: INTEGRITY_CHECKSUM,
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
       })
       break
     }
@@ -202,13 +206,6 @@ async function getResponse(event, client, requestId) {
     return passthrough()
   }
 
-  // Bypass requests with the explicit bypass header.
-  // Such requests can be issued by "ctx.fetch()".
-  const mswIntention = request.headers.get('x-msw-intention')
-  if (['bypass', 'passthrough'].includes(mswIntention)) {
-    return passthrough()
-  }
-
   // Notify the client that a request has been intercepted.
   const requestBuffer = await request.arrayBuffer()
   const clientMessage = await sendToClient(
@@ -240,7 +237,7 @@ async function getResponse(event, client, requestId) {
       return respondWithMock(clientMessage.data)
     }
 
-    case 'MOCK_NOT_FOUND': {
+    case 'PASSTHROUGH': {
       return passthrough()
     }
   }

web/src/components/Share.tsx

@@ -1,6 +1,6 @@
 import { memo, Fragment, useState, FocusEvent, useEffect } from 'react';
 
-import { Dialog, Transition } from '@headlessui/react';
+import { DialogPanel, TransitionChild, Transition, Dialog } from '@headlessui/react';
 import { ShareIcon, ClipboardDocumentCheckIcon } from '@heroicons/react/24/outline';
 import { useLocation } from 'wouter';
 
@@ -36,9 +36,9 @@ function Share() {
       >
         <ShareIcon className="fixed h-8 w-8 m-1" />
       </span>
-      <Transition.Root show={open} as={Fragment}>
+      <Transition show={open} as={Fragment}>
         <Dialog as="div" className="relative z-40" onClose={setOpen}>
-          <Transition.Child
+          <Transition
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
@@ -48,11 +48,11 @@ function Share() {
             leaveTo="opacity-0"
           >
             <div className="fixed inset-0 bg-stone-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
+          </Transition>
 
           <div className="fixed inset-0 z-10 overflow-y-auto">
             <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -61,7 +61,7 @@ function Share() {
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               >
-                <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-stone-200 dark:bg-stone-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+                <DialogPanel className="relative transform overflow-hidden rounded-lg bg-stone-200 dark:bg-stone-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
                   <div>
                     <div className="mt-3 text-center sm:mt-5">
                       <div className="mt-2">
@@ -90,12 +90,12 @@ function Share() {
                       Copy
                     </button>
                   </div>
-                </Dialog.Panel>
-              </Transition.Child>
+                </DialogPanel>
+              </TransitionChild>
             </div>
           </div>
         </Dialog>
-      </Transition.Root>
+      </Transition>
     </>
   );
 }

web/src/components/SlotBoundary.tsx

@@ -33,37 +33,39 @@ function SlotBoundary({
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <div
-        className={classNames('absolute px-0 py-0 m-0 leading-none', className)}
-        style={{
-          left: `${x - width / 2}px`,
-          top: `${y}px`,
-          width,
-          height,
-        }}
-      ></div>
-      {epoch && (
-        <p
-          className="absolute px-0 py-0 m-0 leading-none text-stone-900 dark:text-white pl-5 whitespace-nowrap text-2xl font-bold text-opacity-75 dark:text-opacity-75 font-mono"
+      <div>
+        <div
+          className={classNames('absolute px-0 py-0 m-0 leading-none', className)}
           style={{
             left: `${x - width / 2}px`,
-            top: `${y + height / 2 + textOffset + 30}px`,
+            top: `${y}px`,
+            width,
+            height,
           }}
-        >
-          EPOCH {epoch}
-        </p>
-      )}
-      {slot && (
-        <p
-          className="absolute px-0 py-0 m-0 leading-none text-stone-900 dark:text-white pl-5 whitespace-nowrap text-2xl font-bold text-opacity-75 dark:text-opacity-75 font-mono"
-          style={{
-            left: `${x - width / 2}px`,
-            top: `${y + height / 2 + textOffset}px`,
-          }}
-        >
-          SLOT {slot}
-        </p>
-      )}
+        ></div>
+        {epoch && (
+          <p
+            className="absolute px-0 py-0 m-0 leading-none text-stone-900 dark:text-white pl-5 whitespace-nowrap text-2xl font-bold text-opacity-75 dark:text-opacity-75 font-mono"
+            style={{
+              left: `${x - width / 2}px`,
+              top: `${y + height / 2 + textOffset + 30}px`,
+            }}
+          >
+            EPOCH {epoch}
+          </p>
+        )}
+        {slot && (
+          <p
+            className="absolute px-0 py-0 m-0 leading-none text-stone-900 dark:text-white pl-5 whitespace-nowrap text-2xl font-bold text-opacity-75 dark:text-opacity-75 font-mono"
+            style={{
+              left: `${x - width / 2}px`,
+              top: `${y + height / 2 + textOffset}px`,
+            }}
+          >
+            SLOT {slot}
+          </p>
+        )}
+      </div>
     </Transition>
   );
 }

web/src/components/SnapshotMarker.tsx

@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react';
 
-import { Popover } from '@headlessui/react';
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
 import classNames from 'classnames';
 
 import { FrameMetaData } from '@app/types/api';
@@ -84,10 +84,10 @@ function SnapshotMarker({
         left: `${percentage}%`,
       }}
     >
-      <Popover.Button as="span" className="relative flex h-10 w-1 pt-2 cursor-pointer">
+      <PopoverButton as="span" className="relative flex h-10 w-1 pt-2 cursor-pointer">
         <span className="relative flex flex-col rounded-full h-10 w-1">{segments}</span>
-      </Popover.Button>
-      <Popover.Panel className="fixed z-40 bottom-28 w-72 -ml-28 bg-stone-200 dark:bg-stone-800 shadow-lg rounded divide-y dark:divide-stone-700 cursor-pointer">
+      </PopoverButton>
+      <PopoverPanel className="fixed z-40 bottom-28 w-72 -ml-28 bg-stone-200 dark:bg-stone-800 shadow-lg rounded divide-y dark:divide-stone-700 cursor-pointer">
         {metadata.map((meta) => (
           <div
             key={meta.id}
@@ -98,7 +98,7 @@ function SnapshotMarker({
             <div className="text-sm text-stone-500 dark:text-stone-400">{meta.node}</div>
           </div>
         ))}
-      </Popover.Panel>
+      </PopoverPanel>
     </Popover>
   );
 }

web/src/hooks/__tests__/useActive.test.ts

@@ -2,7 +2,6 @@ import { renderHook } from '@testing-library/react';
 import { vi, Mock } from 'vitest';
 
 import { FrameMetaData } from '@app/types/api';
-import useFocus from '@contexts/focus';
 import useActiveFrame, { findLatestFrameIdPerNode } from '@hooks/useActive';
 import { useMetadataQuery } from '@hooks/useQuery';
 import { ProviderWrapper } from '@utils/testing';