Migrate to vite and vitest and update matrix-widget-toolkit dependencies

README.md

@@ -69,7 +69,7 @@ Once running, you can visit the widget URL (`http(s)://localhost:3000/`) and fol
 In the project directory, you can run:
 
 - `yarn dev`: Start the widget for development.
-- `yarn start`: Start the widget for development with a self-signed HTTPS certificate.
+- `yarn dev:https`: Start the widget for development with a self-signed HTTPS certificate.
 - `yarn build`: Run the build step in all projects.
 - `yarn test`: Watch all files for changes and run tests of the widget.
 - `yarn lint`: Run eslint in all projects.

e2e/package.json

@@ -9,11 +9,11 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.9.1",
     "@playwright/test": "^1.44.0",
-    "@types/lodash": "^4.17.4",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.4.6",
     "eslint": "^8.57.0",
     "eslint-plugin-playwright": "^1.6.1",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "testcontainers": "^10.9.0",
     "typescript": "^5.4.5"
   },

e2e/src/scheduleBreakoutSessions.spec.ts

@@ -15,7 +15,7 @@
  */
 
 import { expect } from '@playwright/test';
-import { repeat } from 'lodash';
+import { repeat } from 'lodash-es';
 import { test } from './fixtures';
 
 test.describe('Schedule Breakout Sessions', () => {

e2e/src/scheduleMeeting.spec.ts

@@ -15,7 +15,7 @@
  */
 
 import { expect } from '@playwright/test';
-import { repeat } from 'lodash';
+import { repeat } from 'lodash-es';
 import { test } from './fixtures';
 
 test.describe('Schedule Meeting', () => {

e2e/src/widgetSetup.spec.ts

@@ -78,6 +78,7 @@ test.describe('Meeting Widget Setup', () => {
 
     // Wait for a moment and give the bot a chance to initialize the room. There
     // is no better way to observe that the bot has completed its work.
+    // eslint-disable-next-line
     await alicePage.waitForTimeout(1000);
 
     expect(await aliceElementWebPage.getWidgets()).toEqual(['NeoDateFix']);

e2e/tsconfig.json

@@ -1,5 +1,8 @@
 // Package specific tsconfig that extends the root one.
 {
   "extends": "../tsconfig.json",
-  "include": ["src"]
+  "include": ["src"],
+  "compilerOptions": {
+    "noEmit": true
+  }
 }

matrix-meetings-bot/package.json

@@ -14,13 +14,13 @@
     "docker:inspect": "docker inspect nordeck/matrix-meetings-bot",
     "prestart": "yarn build",
     "build": "nest build && yarn copyfiles && yarn copyImages",
-    "depcheck": "depcheck",
+    "depcheck": "depcheck --ignores=\"typescript\",\"@types/jest\"",
     "start": "PORT=3001 nest start",
     "start:dev": "PORT=3001 nest start --watch",
     "start:debug": "PORT=3001 nest start --debug --watch",
     "copyfiles": "copyfiles -E -u 1 src/static/locales/**/*.json lib",
     "copyImages": "copyfiles -E -u 1 src/static/images/* lib",
-    "lint": "eslint . --no-error-on-unmatched-pattern",
+    "lint": "eslint . --max-warnings=0",
     "translate": "i18next 'src/**/*.{ts,tsx}'",
     "test": "jest --watch",
     "test:all": "jest --coverage --watchAll=false",
@@ -37,20 +37,20 @@
     "@nestjs/microservices": "^10.3.9",
     "@nestjs/platform-express": "^10.4.6",
     "@nestjs/swagger": "^7.3.1",
+    "@nordeck/matrix-meetings-calendar": "1.0.0",
     "@supercharge/promise-pool": "^3.2.0",
     "base64url": "^3.0.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
     "express": "^4.20.0",
     "html-entities": "^2.5.2",
-    "i18next": "^23.7.16",
-    "i18next-fs-backend": "^2.3.1",
+    "i18next": "^23.16.5",
+    "i18next-fs-backend": "^2.3.2",
     "i18next-http-middleware": "^3.6.0",
     "joi": "^17.13.3",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "luxon": "^3.3.0",
     "matrix-bot-sdk": "npm:@nordeck/[email protected]",
-    "@nordeck/matrix-meetings-calendar": "1.0.0",
     "mime-types": "^2.1.35",
     "mustache": "^4.2.0",
     "nestjs-pino": "^4.1.0",
@@ -64,8 +64,8 @@
   },
   "devDependencies": {
     "@nestjs/cli": "^10.1.14",
-    "@types/jest": "^27.5.2",
-    "@types/lodash": "^4.17.4",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.12",
     "@types/luxon": "^3.2.0",
     "@types/mime-types": "^2.1.4",
     "@types/mustache": "^4.2.5",
@@ -76,9 +76,9 @@
     "dotenv-cli": "^7.4.2",
     "eslint": "^8.57.0",
     "i18next-parser": "^8.13.0",
-    "jest": "^27.4.3",
+    "jest": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "ts-jest": "^27.1.5",
+    "ts-jest": "^29.2.5",
     "ts-mockito": "^2.6.1",
     "typescript": "^5.4.5"
   },
@@ -112,6 +112,7 @@
       "<rootDir>/test"
     ],
     "moduleNameMapper": {
+      "@nordeck/matrix-meetings-calendar/src/testing/testUtils": "<rootDir>/../packages/calendar/src/testing/testUtils.ts",
       "matrix-meetings-(.*)": "<rootDir>/../packages/$1/src/index.ts"
     }
   },

matrix-meetings-bot/src/util/migrateMeetingTime.test.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { mockCalendarEntry } from '@nordeck/matrix-meetings-calendar';
+import { mockCalendarEntry } from '@nordeck/matrix-meetings-calendar/src/testing/testUtils';
 import { migrateMeetingTime } from './migrateMeetingTime';
 
 describe('migrateMeetingTime', () => {

matrix-meetings-bot/test/RoomMessageService.test.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { mockCalendarEntry } from '@nordeck/matrix-meetings-calendar';
+import { mockCalendarEntry } from '@nordeck/matrix-meetings-calendar/src/testing/testUtils';
 import { MatrixClient } from 'matrix-bot-sdk';
 import {
   anyString,

matrix-meetings-bot/tsconfig.json

@@ -12,7 +12,8 @@
     "declaration": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "moduleResolution": "node"
   },
   "include": ["./src/**/*"]
 }

matrix-meetings-widget/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="A meetings widget for the Element messenger"
+    />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>NeoDateFix Widget</title>
+
+    <!--#echo var="__INJECT_SCRIPT_TAG__" encoding="none"-->
+
+    <script nonce='<!--#echo var="cspNonce"-->'>
+      __webpack_nonce__ = '<!--#echo var="cspNonce"-->';
+      // Set global for compatibility reason.
+      // globalThis ?? window is required to make with work in  all environments (dev / prod).
+      global = globalThis ?? window;
+    </script>
+
+    <script nonce='<!--#echo var="cspNonce"-->' type="module">
+      // Copy environment variables to process.env for backward compatibility with CRA.
+      window.process = window.process ?? {};
+      window.process.env = import.meta.env;
+    </script>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

matrix-meetings-widget/package.json

@@ -5,67 +5,70 @@
   "license": "Apache-2.0",
   "version": "1.6.1",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@fullcalendar/core": "^6.1.14",
     "@fullcalendar/daygrid": "^6.1.14",
     "@fullcalendar/interaction": "^6.1.14",
     "@fullcalendar/react": "^6.1.14",
     "@fullcalendar/timegrid": "^6.1.14",
-    "@matrix-widget-toolkit/api": "^3.2.2",
-    "@matrix-widget-toolkit/mui": "^1.1.6",
-    "@matrix-widget-toolkit/react": "^1.0.5",
+    "@matrix-widget-toolkit/api": "^3.4.2",
+    "@matrix-widget-toolkit/mui": "^2.0.6",
+    "@matrix-widget-toolkit/react": "^2.0.3",
     "@mui/icons-material": "^5.15.3",
     "@mui/lab": "^5.0.0-alpha.159",
     "@mui/material": "^5.15.3",
-    "@mui/x-date-pickers": "^6.18.6",
     "@mui/utils": "^5.14.18",
+    "@mui/x-date-pickers": "^6.18.6",
+    "@nordeck/matrix-meetings-calendar": "1.0.0",
     "@reduxjs/toolkit": "^1.9.7",
-    "i18next": "^23.7.16",
+    "i18next": "^23.16.5",
+    "i18next-browser-languagedetector": "^8.0.0",
     "i18next-chained-backend": "^4.6.2",
-    "i18next-http-backend": "^2.5.2",
+    "i18next-http-backend": "^2.6.2",
     "joi": "^17.13.3",
-    "lodash": "^4.17.20",
+    "lodash-es": "^4.17.21",
     "luxon": "^3.3.0",
-    "@nordeck/matrix-meetings-calendar": "1.0.0",
-    "matrix-widget-api": "^1.5.0",
+    "matrix-widget-api": "^1.9.0",
     "mustache": "^4.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-i18next": "^14.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.1.1",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.23.1",
-    "react-use": "^17.4.2",
+    "react-use": "^17.5.1",
     "redux": "^5.0.1",
     "reselect": "^4.1.8",
     "rrule": "^2.8.1",
     "rxjs": "^7.8.1",
-    "timezones-ical-library": "^1.7.2"
+    "timezones-ical-library": "^1.8.3"
   },
   "devDependencies": {
-    "@craco/craco": "^7.1.0",
-    "@matrix-widget-toolkit/testing": "^2.3.2",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^12.1.5",
+    "@matrix-widget-toolkit/testing": "^3.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "12",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^27.5.2",
-    "@types/jest-axe": "^3.5.9",
-    "@types/lodash": "^4.17.4",
+    "@types/lodash-es": "^4.17.12",
     "@types/luxon": "^3.2.0",
     "@types/mustache": "^4.2.5",
     "@types/node": "^20.4.6",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.19",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-i18next": "^8.1.0",
-    "cross-env": "^7.0.3",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "@vitest/coverage-v8": "^2.1.4",
+    "@vitest/ui": "^2.1.4",
+    "axe-core": "^4.10.2",
     "dotenv-cli": "^7.4.2",
     "eslint": "^8.57.0",
     "i18next-parser": "^8.13.0",
-    "jest": "^27.4.3",
-    "jest-axe": "^8.0.0",
+    "jsdom": "^25.0.1",
     "msw": "^1.3.2",
-    "react-scripts": "5.0.1",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vite": "^5.4.10",
+    "vitest": "^2.1.4"
   },
   "engines": {
     "node": ">=20",
@@ -78,13 +81,13 @@
     "docker:stop": "docker stop matrix-meetings-widget",
     "docker:remove": "yarn run docker:stop && docker rm -v matrix-meetings-widget",
     "docker:inspect": "docker inspect nordeck/matrix-meetings-widget",
-    "start": "cross-env HTTPS=true BROWSER=none ESLINT_NO_DEV_ERRORS=true TSC_COMPILE_ON_ERROR=true craco start",
-    "dev": "cross-env BROWSER=none ESLINT_NO_DEV_ERRORS=true TSC_COMPILE_ON_ERROR=true WDS_SOCKET_PORT=0 craco start",
-    "build": "cross-env GENERATE_SOURCEMAP=false INLINE_RUNTIME_CHUNK=false craco build",
-    "depcheck": "depcheck",
-    "test": "craco test",
-    "test:ci": "craco test --coverage",
-    "test:all": "craco test --coverage --watchAll=false --maxWorkers=50%",
+    "dev": "vite",
+    "dev:https": "VITE_DEV_SSL=true vite",
+    "build": "vite build",
+    "tsc": "tsc",
+    "depcheck": "depcheck --ignores=\"@vitest/coverage-v8\"",
+    "test": "vitest",
+    "test:all": "vitest run --coverage",
     "lint": "eslint . --max-warnings=0",
     "translate": "i18next 'src/**/*.{ts,tsx}'",
     "generate-disclaimer": "cp ../LICENSE ./build/LICENSE.txt && cp NOTICE ./build/NOTICE.txt && yarn licenses generate-disclaimer --prod >> ./build/NOTICE.txt && yarn licenses list --prod --json --no-progress > ./build/licenses.json"
@@ -101,14 +104,6 @@
       "last 1 safari version"
     ]
   },
-  "jest": {
-    "transformIgnorePatterns": [
-      "(?!(/node_modules/(@fullcalendar)/))(/node_modules/.+.(js|jsx|mjs|cjs|ts|tsx)$)"
-    ],
-    "moduleNameMapper": {
-      "matrix-meetings-(.*)": "<rootDir>/../packages/$1/src/index.ts"
-    }
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/nordeck/matrix-meetings.git"