Update to Node v22 (GoogleForCreators#13857)

sgmelayu · Nov 24, 2024 · 1e8d5fc · 1e8d5fc
1 parent d8044b2
commit 1e8d5fc
Show file tree

Hide file tree

Showing 13 changed files with 496 additions and 413 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20
+22
diff --git a/babel.config.cjs b/babel.config.cjs
@@ -32,7 +32,7 @@ module.exports = function (api) {
           shippedProposals: true,
           targets,
           useBuiltIns: 'usage',
-          corejs: '3.35.1',
+          corejs: '3.39.0',
         },
       ],
       [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "url": "https://github.com/googleforcreators/web-stories-wp/issues"
   },
   "engines": {
-    "node": ">= 20",
+    "node": ">= 22",
     "npm": ">= 10"
   },
   "type": "module",
@@ -39,7 +39,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
-    "@eslint-community/eslint-plugin-eslint-comments": "^4.4.0",
+    "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
     "@googleforcreators/dashboard": "*",
     "@googleforcreators/design-system": "*",
     "@googleforcreators/fonts": "*",
@@ -53,9 +53,9 @@
     "@prettier/plugin-xml": "^3.4.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-dynamic-import-vars": "^2.1.3",
+    "@rollup/plugin-dynamic-import-vars": "^2.1.5",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-url": "^8.0.2",
     "@storybook/addon-a11y": "^8.4.5",
@@ -75,13 +75,13 @@
     "@svgr/rollup": "^8.0.1",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.9.3",
     "@types/styled-components": "^5.1.26",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
@@ -104,7 +104,7 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "browserslist": "^4.24.2",
     "circular-dependency-plugin": "^5.2.2",
-    "core-js": "^3.38.1",
+    "core-js": "^3.39.0",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
@@ -114,22 +114,22 @@
     "eslint-plugin-header": "^3.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jasmine": "^4.2.2",
-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jest-extended": "^2.4.0",
-    "eslint-plugin-jsdoc": "^50.4.3",
-    "eslint-plugin-jsx-a11y": "^6.10.1",
+    "eslint-plugin-jsdoc": "^50.5.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-oxlint": "^0.13.1",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-security": "^3.0.1",
-    "eslint-plugin-styled-components-a11y": "^2.1.35",
-    "eslint-plugin-testing-library": "^6.4.0",
-    "html-webpack-plugin": "^5.6.0",
-    "husky": "^9.1.6",
+    "eslint-plugin-styled-components-a11y": "^2.1.36",
+    "eslint-plugin-testing-library": "^7.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-canvas-mock": "^2.5.2",
@@ -147,15 +147,15 @@
     "karma-sourcemap-loader": "^0.4.0",
     "karma-webpack": "^5.0.1",
     "lint-staged": "^15.2.10",
-    "markdownlint-cli": "^0.42.0",
+    "markdownlint-cli": "^0.43.0",
     "mini-css-extract-plugin": "^2.9.2",
     "mockdate": "^3.0.5",
     "npm-package-json-lint": "^8.0.0",
     "npm-run-all": "^4.1.5",
     "oxlint": "^0.13.1",
     "patch-package": "^8.0.0",
     "postcss-jsx": "^0.36.4",
-    "postcss-styled-syntax": "^0.6.4",
+    "postcss-styled-syntax": "^0.7.0",
     "postcss-syntax": "^0.36.2",
     "prettier": "^3.3.3",
     "puppeteer": "^21.9.0",
@@ -174,12 +174,12 @@
     "stylelint-prettier": "^5.0.2",
     "stylis-plugin-rtl": "^1.0.0",
     "terser-webpack-plugin": "^5.3.10",
-    "typescript": "^5.6.3",
-    "webpack": "^5.95.0",
+    "typescript": "^5.7.2",
+    "webpack": "^5.96.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",
-    "webpackbar": "^6.0.1",
+    "webpackbar": "^7.0.0",
     "worker-loader": "^3.0.8",
     "workspaces-run": "^1.0.2"
   },

diff --git a/packages/commander/package.json b/packages/commander/package.json
@@ -31,7 +31,7 @@
     "semver": "^7.6.3"
   },
   "devDependencies": {
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.9.3",
     "@types/semver": "^7.5.8"
   },
   "bin": {

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -43,7 +43,7 @@
     "@googleforcreators/react": "*",
     "@googleforcreators/tracking": "*",
     "@types/react-modal": "^3.16.3",
-    "big.js": "^6.2.1",
+    "big.js": "^6.2.2",
     "mousetrap": "^1.6.5",
     "polished": "^4.3.1",
     "prop-types": "^15.8.1",

diff --git a/packages/media/src/test/isAnimatedGif.ts b/packages/media/src/test/isAnimatedGif.ts
@@ -32,7 +32,7 @@ describe('isAnimatedGif', () => {
       buffer.byteOffset,
       buffer.byteOffset + buffer.byteLength
     );
-    const result = isAnimatedGif(arrayBuffer);
+    const result = isAnimatedGif(arrayBuffer as unknown as ArrayBuffer);
 
     expect(result).toBeTrue();
   });
@@ -43,7 +43,7 @@ describe('isAnimatedGif', () => {
       buffer.byteOffset,
       buffer.byteOffset + buffer.byteLength
     );
-    const result = isAnimatedGif(arrayBuffer);
+    const result = isAnimatedGif(arrayBuffer as unknown as ArrayBuffer);
 
     expect(result).toBeFalse();
   });

diff --git a/packages/migration/package.json b/packages/migration/package.json
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "rollup": "^2.79.2"
   },
   "scripts": {

diff --git a/packages/rich-text/src/utils/getCaretCharacterOffsetWithin.ts b/packages/rich-text/src/utils/getCaretCharacterOffsetWithin.ts
@@ -44,7 +44,11 @@ interface CaretPosition {
 }
 
 interface SelectionDocument extends Document {
-  caretPositionFromPoint?: (x: number, y: number) => CaretPosition | null;
+  caretPositionFromPoint: (
+    x: number,
+    y: number,
+    options?: CaretPositionFromPointOptions
+  ) => CaretPosition | null;
 }
 
 // Extend for wider browser support.

diff --git a/packages/story-editor/src/app/canvas/useCanvasKeys.ts b/packages/story-editor/src/app/canvas/useCanvasKeys.ts
@@ -179,7 +179,7 @@ function useCanvasKeys(ref: RefObject<Node>) {
   // Position (x/y) key handler.
   useGlobalKeyDownEffect(
     { key: ['up', 'down', 'left', 'right'], shift: true },
-    ({ key, shiftKey }) => {
+    ({ key, shiftKey }: KeyboardEvent) => {
       if (isEditing || !selectedElements?.length) {
         return;
       }
@@ -204,7 +204,7 @@ function useCanvasKeys(ref: RefObject<Node>) {
   // Layer up/down.
   useGlobalKeyDownEffect(
     { key: ['mod+up', 'mod+down', 'mod+left', 'mod+right'], shift: true },
-    (evt) => {
+    (evt: KeyboardEvent) => {
       const { key, shiftKey } = evt;
 
       // Cancel the default behavior of the event: it's very jarring to run
@@ -293,7 +293,7 @@ function useCanvasKeys(ref: RefObject<Node>) {
   ].includes(animationState);
   useGlobalKeyDownEffect(
     { key: ['mod+enter'] },
-    (evt) => {
+    (evt: KeyboardEvent) => {
       evt.preventDefault();
       if (currentPageNumber === 1) {
         return;
@@ -313,7 +313,7 @@ function useCanvasKeys(ref: RefObject<Node>) {
 
   useGlobalKeyDownEffect(
     { key: ['mod+k'] },
-    (evt) => {
+    (evt: KeyboardEvent) => {
       evt.preventDefault();
       if (
         !selectedElements.length ||

diff --git a/packages/story-editor/src/app/media/utils/heif/utils.ts b/packages/story-editor/src/app/media/utils/heif/utils.ts
@@ -60,7 +60,7 @@ export async function decodeImage(image: DecodeResult) {
         if (!result) {
           reject(new Error('HEIF processing error'));
         } else {
-          resolve(result.data.buffer);
+          resolve(result.data.buffer as ArrayBuffer);
         }
       }
     );

diff --git a/packages/story-editor/src/app/media/utils/useFFmpeg.ts b/packages/story-editor/src/app/media/utils/useFFmpeg.ts
@@ -205,7 +205,9 @@ function useFFmpeg() {
         const data = ffmpeg.FS('readFile', tempFileName);
 
         return blobToFile(
-          new Blob([data.buffer], { type: MEDIA_POSTER_IMAGE_MIME_TYPE }),
+          new Blob([data.buffer as BlobPart], {
+            type: MEDIA_POSTER_IMAGE_MIME_TYPE,
+          }),
           outputFileName,
           MEDIA_POSTER_IMAGE_MIME_TYPE
         );
@@ -263,7 +265,9 @@ function useFFmpeg() {
         const data = ffmpeg.FS('readFile', tempFileName);
 
         return blobToFile(
-          new Blob([data.buffer], { type: MEDIA_TRANSCODED_MIME_TYPE }),
+          new Blob([data.buffer as BlobPart], {
+            type: MEDIA_TRANSCODED_MIME_TYPE,
+          }),
           outputFileName,
           MEDIA_TRANSCODED_MIME_TYPE
         );
@@ -348,7 +352,7 @@ function useFFmpeg() {
           .map((outputFile) => {
             const data = (ffmpeg as FFmpeg).FS('readFile', outputFile);
             return blobToFile(
-              new Blob([data.buffer], { type }),
+              new Blob([data.buffer as BlobPart], { type }),
               outputFile,
               type
             );
@@ -417,7 +421,7 @@ function useFFmpeg() {
         const data = ffmpeg.FS('readFile', tempFileName);
 
         return blobToFile(
-          new Blob([data.buffer], { type }),
+          new Blob([data.buffer as BlobPart], { type }),
           outputFileName,
           type
         );
@@ -478,7 +482,7 @@ function useFFmpeg() {
         const data = ffmpeg.FS('readFile', tempFileName);
 
         return blobToFile(
-          new Blob([data.buffer], { type }),
+          new Blob([data.buffer as BlobPart], { type }),
           outputFileName,
           type
         );
@@ -538,7 +542,7 @@ function useFFmpeg() {
         const data = ffmpeg.FS('readFile', tempFileName);
 
         return blobToFile(
-          new Blob([data.buffer], { type }),
+          new Blob([data.buffer as BlobPart], { type }),
           outputFileName,
           type
         );
@@ -596,7 +600,9 @@ function useFFmpeg() {
         const data = ffmpeg.FS('readFile', tempFileName);
 
         return blobToFile(
-          new Blob([data.buffer], { type: MEDIA_TRANSCODED_MIME_TYPE }),
+          new Blob([data.buffer as BlobPart], {
+            type: MEDIA_TRANSCODED_MIME_TYPE,
+          }),
           outputFileName,
           MEDIA_TRANSCODED_MIME_TYPE
         );
@@ -651,7 +657,7 @@ function useFFmpeg() {
         const data = ffmpeg.FS('readFile', tempFileName);
 
         return blobToFile(
-          new Blob([data.buffer], { type: 'audio/mpeg' }),
+          new Blob([data.buffer as BlobPart], { type: 'audio/mpeg' }),
           outputFileName,
           'audio/mpeg'
         );

diff --git a/packages/story-editor/src/components/footer/carousel/carouselContext/useCarouselKeys.ts b/packages/story-editor/src/components/footer/carousel/carouselContext/useCarouselKeys.ts
@@ -70,7 +70,7 @@ function useCarouselKeys({
   useKeyDownEffect(
     listElement,
     { key: ['up', 'down', 'left', 'right'] },
-    ({ key }) => {
+    ({ key }: KeyboardEvent) => {
       // Intercept all keys, but only handle left and right.
       const dir = getArrowDir(key, 'ArrowRight', 'ArrowLeft', isRTL);
       if (dir === 0) {
@@ -103,7 +103,7 @@ function useCarouselKeys({
   useKeyDownEffect(
     listElement,
     { key: ['mod+up', 'mod+down', 'mod+left', 'mod+right'], shift: true },
-    (evt) => {
+    (evt: KeyboardEvent) => {
       const { key, shiftKey } = evt;
 
       // Cancel the default behavior of the event: it's very jarring to run