Merge branch 'master' into vscode/next

Author: heyzec

package.json

@@ -69,15 +69,15 @@
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-to-hast": "^13.0.0",
     "normalize.css": "^8.0.1",
-    "phaser": "~3.87.0",
+    "phaser": "~3.90.0",
     "query-string": "^9.0.0",
     "re-resizable": "^6.9.9",
     "react": "^18.3.1",
     "react-ace": "^14.0.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-debounce-render": "^8.0.2",
     "react-dom": "^18.3.1",
-    "react-drag-drop-files": "^2.3.10",
+    "react-drag-drop-files": "^3.0.0",
     "react-draggable": "^4.4.5",
     "react-dropzone": "^14.2.3",
     "react-i18next": "^15.0.0",
@@ -87,7 +87,7 @@
     "react-papaparse": "^4.0.2",
     "react-qr-reader": "^3.0.0-beta-1",
     "react-redux": "^8.1.1",
-    "react-router-dom": "^6.14.1",
+    "react-router": "^7.6.2",
     "react-select": "^5.7.3",
     "react-simple-keyboard": "^3.6.27",
     "react-sortable-hoc": "^2.0.0",
@@ -108,6 +108,7 @@
     "yareco": "^0.1.5"
   },
   "devDependencies": {
+    "@aaroon/workbox-rspack-plugin": "^0.3.2",
     "@babel/core": "^7.24.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-typescript": "^7.24.1",
@@ -122,16 +123,16 @@
     "@svgr/webpack": "^8.0.0",
     "@swc/core": "^1.11.22",
     "@swc/jest": "^0.2.38",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^15.0.6",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/dompurify": "^3.0.5",
     "@types/estree": "^1.0.5",
-    "@types/gapi": "^0.0.44",
-    "@types/gapi.auth2": "^0.0.57",
+    "@types/gapi": "^0.0.47",
+    "@types/gapi.auth2": "^0.0.61",
     "@types/gapi.client": "^1.0.5",
     "@types/gapi.client.drive-v3": "^0.0.5",
-    "@types/google.picker": "^0.0.39",
+    "@types/google.picker": "^0.0.51",
     "@types/identity-obj-proxy": "^3",
     "@types/jest": "^29.0.0",
     "@types/js-cookie": "^3.0.6",

renovate.json

@@ -3,12 +3,8 @@
   "extends": [
     "config:recommended",
     ":dependencyDashboard",
-    "group:allNonMajor",
     ":label(dependencies)"
   ],
-  "major": {
-    "dependencyDashboardApproval": true
-  },
   "packageRules": [
     {
       "rangeStrategy": "update-lockfile",

rsbuild.config.ts

@@ -4,6 +4,7 @@ import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';
+import { InjectManifest } from '@aaroon/workbox-rspack-plugin';
 
 const { publicVars, rawPublicVars } = loadEnv({ prefixes: ['REACT_APP_'] });
 
@@ -118,6 +119,15 @@ export default defineConfig({
       //   })
       // ];
 
+      config.plugins = [
+        ...config.plugins,
+        new InjectManifest({
+          swSrc: './src/service-worker.ts',
+          swDest: 'service-worker.js',
+          maximumFileSizeToCacheInBytes: 20 * 1024 * 1024,
+        })
+      ];
+
       // Workaround to suppress warnings caused by ts-morph in js-slang
       // if (config.module) {
       //   config.module.noParse = /node_modules\/@ts-morph\/common\/dist\/typescript\.js$/;

src/commons/ReactRouterPrompt.tsx

@@ -1,14 +1,14 @@
 /**
  * Intermediate implementation of deprecated <Prompt /> component
- * from react-router-dom's v5 to v6 upgrade.
+ * from react-router's v5 to v6 upgrade.
  *
- * react-router-dom plans to bring <Prompt /> back in the future. Until then,
+ * react-router plans to bring <Prompt /> back in the future. Until then,
  * we can use this suggested implementation.
  *
  * See: https://github.com/remix-run/react-router/issues/8139#issuecomment-1382428200
  */
 import React from 'react';
-import { useBeforeUnload, useBlocker } from 'react-router-dom';
+import { useBeforeUnload, useBlocker } from 'react-router';
 
 // You can abstract `useBlocker` to use the browser's `window.confirm` dialog to
 // determine whether or not the user should navigate within the current origin.

src/commons/__tests__/__snapshots__/Markdown.tsx.snap

@@ -6,10 +6,10 @@ exports[`Markdown page renders correctly 1`] = `
   dangerouslySetInnerHTML={
     {
       "__html": "<p>Welcome to the Source Academy playground!</p>
-<p>The book <a target="_blank" rel="noopener noreferrer" href="https://sourceacademy.org/sicpjs/"><em>Structure and Interpretation of Computer Programs, JavaScript Edition</em></a>
-uses JavaScript sublanguages that we call <a target="_blank" rel="noopener noreferrer" href="https://docs.sourceacademy.org/"><em>Source</em></a>. You have chosen the sublanguage <a target="_blank" rel="noopener noreferrer" href="https://docs.sourceacademy.org/source_1/"><em>Source §1</em></a>.</p>
-<p>In the editor on the left, you can use the <a target="_blank" rel="noopener noreferrer" href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts"><em>Ace keyboard shortcuts</em></a> 
-and also the <a target="_blank" rel="noopener noreferrer" href="https://github.com/source-academy/frontend/wiki/Source-Academy-Keyboard-Shortcuts"><em>Source Academy keyboard shortcuts</em></a>.</p>",
+<p>The book <a href="https://sourceacademy.org/sicpjs/" rel="noopener noreferrer" target="_blank"><em>Structure and Interpretation of Computer Programs, JavaScript Edition</em></a>
+uses JavaScript sublanguages that we call <a href="https://docs.sourceacademy.org/" rel="noopener noreferrer" target="_blank"><em>Source</em></a>. You have chosen the sublanguage <a href="https://docs.sourceacademy.org/source_1/" rel="noopener noreferrer" target="_blank"><em>Source §1</em></a>.</p>
+<p>In the editor on the left, you can use the <a href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts" rel="noopener noreferrer" target="_blank"><em>Ace keyboard shortcuts</em></a> 
+and also the <a href="https://github.com/source-academy/frontend/wiki/Source-Academy-Keyboard-Shortcuts" rel="noopener noreferrer" target="_blank"><em>Source Academy keyboard shortcuts</em></a>.</p>",
     }
   }
 />

src/commons/application/Application.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import Messages, {
   MessageType,
   MessageTypeNames,

src/commons/application/ApplicationWrapper.tsx

@@ -3,8 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { RouterProvider } from 'react-router';
-import { createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from 'react-router';
 import { getAcademyRoutes } from 'src/pages/academy/academyRoutes';
 
 import { getFullAcademyRouterConfig, playgroundOnlyRouterConfig } from '../../routes/routerConfig';
@@ -38,9 +37,7 @@ const ApplicationWrapper: React.FC = () => {
       ? playgroundOnlyRouterConfig
       : getFullAcademyRouterConfig({ name, isLoggedIn, courseId, academyRoutes });
 
-    const r = createBrowserRouter(routerConfig, {
-      future: { v7_relativeSplatPath: true }
-    });
+    const r = createBrowserRouter(routerConfig);
     dispatch(updateReactRouter(r));
 
     return r;

src/commons/application/actions/CommonsActions.ts

@@ -1,4 +1,4 @@
-import { Router } from '@remix-run/router';
+import { Router } from 'src/commons/application/types/CommonsTypes';
 import { createActions } from 'src/commons/redux/utils';
 
 const CommonsActions = createActions('commons', {

src/commons/application/types/CommonsTypes.ts

@@ -1,3 +1,4 @@
-import { Router } from '@remix-run/router';
+import type { createBrowserRouter } from 'react-router';
 
+export type Router = ReturnType<typeof createBrowserRouter>;
 export type RouterState = Router | null;

src/commons/assessment/Assessment.tsx

@@ -22,8 +22,7 @@ import classNames from 'classnames';
 import { sortBy } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { Navigate, useLoaderData, useParams } from 'react-router';
-import { NavLink } from 'react-router-dom';
+import { Navigate, NavLink, useLoaderData, useParams } from 'react-router';
 import { numberRegExp } from 'src/features/academy/AcademyTypes';
 import Messages, { sendToWebview } from 'src/features/vscode/messages';
 import classes from 'src/styles/Academy.module.scss';