Update dependencies to React 18, Node 20, TS 5.2, etc. (ianstormtaylo…

…r#5528)

* incremental upgrade to React 18, TS 4.9, etc.

* update yarn config

* fix build

* minor cleanup in type definitions

* incremental updates for TS 5.0

* fix build

* upgrade to typescript 5.2

* update dependencies

* fix lint issues

* update to latest Playwright version

* update changesets dep

* update emotion/css

* incremental dependency updates

* more small dependency updates

* upgrade prettier and eslint

* fix lint issues

* update dependencies rollup

* fix @types/node resolution to restore linting

* update tiny-invariant dependency

* update dependencies

* update dependencies lerna

* upgrade react-router-dom

* update @types/react and @types/node

* update babel dependencies

* udpate simple-git-hooks

* update @types/node resolution

* update lint-staged

* remove cypress from dependency list

* update @types/node to support Node 20

* update workflows to Node 20

* set resolutions for @types/react

* downgrade @types/react to 18.2.28

* update mocha

* update rimraf

* update @types/js-dom

* remove .lintstagedrc.js

* upgrade next to latest

* v0.61.4

* update lerna

* update faker and rollup

* update immer

* fix yarn clean command

* attempt to fix integration tests

* attempt to stabilize integration tests

* wip fix integration tests

* skip unstable integration test

* Add changeset

---------

Co-authored-by: Dalibor Tosic <dalibortosic00@gmail.com>
Co-authored-by: Nikola <nikolabijelic14@gmail.com>

.changeset/silly-wolves-prove.md

@@ -0,0 +1,8 @@
+---
+'slate-history': minor
+'slate-hyperscript': minor
+'slate-react': minor
+'slate': minor
+---
+
+Update dependencies to React 18, Node 20, TS 5.2, etc.

.eslintrc.json

@@ -2,12 +2,10 @@
   "root": true,
   "extends": [
     "plugin:import/typescript",
-    "prettier",
-    "prettier/@typescript-eslint",
-    "prettier/react",
+    "plugin:prettier/recommended",
     "plugin:react-hooks/recommended"
   ],
-  "plugins": ["@typescript-eslint", "import", "react", "prettier"],
+  "plugins": ["@typescript-eslint", "import", "react"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "sourceType": "module",
@@ -20,7 +18,7 @@
   "settings": {
     "import/extensions": [".js", ".ts", ".jsx", ".tsx"],
     "react": {
-      "version": "16"
+      "version": "18"
     }
   },
   "env": {
@@ -141,7 +139,8 @@
       "files": "**/test/**/*.{js,jsx,ts,tsx}",
       "rules": {
         "import/no-extraneous-dependencies": "off",
-        "import/no-unresolved": "off"
+        "import/no-unresolved": "off",
+        "react/no-unknown-property": "off"
       }
     },
     {

.github/workflows/ci.yml

@@ -26,9 +26,9 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
-          key: node18
+          key: node20
 
       - name: Run ${{ matrix.command }}
         run: yarn && yarn build && yarn ${{ matrix.command }}

.github/workflows/comment.yml

@@ -57,10 +57,10 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
           registry-url: https://registry.npmjs.org
-          key: node18
+          key: node20
 
       - name: Install dependencies
         run: yarn

.github/workflows/release.yml

@@ -30,10 +30,10 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
           registry-url: https://registry.npmjs.org
-          key: node18
+          key: node20
 
       - name: Install dependencies
         run: yarn

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "semi": false,
+  "arrowParens": "avoid",
   "trailingComma": "es5"
 }

.yarnrc

@@ -1 +1 @@
-yarn-path ".yarn/releases/yarn-3.3.1.cjs"
+yarn-path ".yarn/releases/yarn-3.6.4.cjs"

.yarnrc.yml

@@ -13,4 +13,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.3.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

config/typescript/tsconfig.json

@@ -11,7 +11,6 @@
     "resolveJsonModule": true,
     "sourceMap": true,
     "strict": true,
-    "suppressImplicitAnyIndexErrors": true,
     "target": "esnext"
   }
 }

docs/api/scrubber.md

@@ -42,10 +42,7 @@ import { Scrubber } from 'slate'
 const textRandomizer = (fieldNames: string[]) => (key, value) => {
   if (fieldNames.includes(key)) {
     if (typeof value === 'string') {
-      return value
-        .split('')
-        .map(generateRandomCharacter)
-        .join('')
+      return value.split('').map(generateRandomCharacter).join('')
     } else {
       return '... scrubbed ...'
     }

docs/general/changelog.md

@@ -501,10 +501,7 @@ editor.run('onKeyDown', { key: 'Tab', ... })
 **The `editor.change` method is deprecated.** With the removal of the `Change` object, there's no need anymore to create the small closures with `editor.change()`. Instead you can directly invoke commands on the editor in series, and all of the changes will be emitted asynchronously on the next tick.
 
 ```javascript
-editor
-  .insertText('word')
-  .moveFocusForward(10)
-  .addMark('bold')
+editor.insertText('word').moveFocusForward(10).addMark('bold')
 ```
 
 **The `applyOperations` method is deprecated.** Instead you can loop a set of operations and apply each one using `applyOperation`. This is to reduce the number of methods exposed on the `Editor` to keep it simpler.

docs/general/contributing.md

@@ -95,7 +95,7 @@ This will fix Prettier and Eslint errors.
 
 ## Running integration tests
 
-To run integrations with [cypress](https://github.com/cypress-io/cypress), first run `yarn start` to run the examples website, then run `yarn cypress:open` in a separate session to open the cypress GUI.
+To run integrations with [Playwright](https://playwright.dev/), first run `yarn start` to run the examples website, then run `yarn test:integration` in a separate session to open the Playwright test suite.
 
 ## Testing Input Methods
 

jest.config.js

@@ -1,10 +1,13 @@
 const config = {
   testMatch: ['<rootDir>/packages/slate-react/test/**/*.{js,ts,tsx,jsx}'],
   preset: 'ts-jest',
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/packages/slate-react/tsconfig.json',
-    },
+  transform: {
+    '^.+\\.(ts|tsx)$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/packages/slate-react/tsconfig.json',
+      },
+    ],
   },
   testEnvironment: 'jsdom',
 }

lerna.json

@@ -1,6 +1,5 @@
 {
-  "lerna": "3.19.0",
-  "version": "0.61.3",
+  "version": "0.61.4",
   "npmClient": "yarn",
-  "useWorkspaces": true
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

package.json

@@ -7,9 +7,9 @@
   "scripts": {
     "build": "yarn build:rollup && yarn build:next",
     "build:next": "cd ./site && next build && next export",
-    "build:rollup": "rollup --config ./config/rollup/rollup.config.js",
+    "build:rollup": "rollup --config ./config/rollup/rollup.config.js --bundleConfigAsCjs",
     "changesetversion": "yarn changeset version && yarn install && git add .",
-    "clean": "rimraf './packages/*/{dist,lib,node_modules}' './site/{.next,out}'",
+    "clean": "rimraf './packages/*/{dist,lib,node_modules}' './site/{.next,out}' --glob",
     "fix": "yarn fix:prettier && yarn fix:eslint",
     "fix:eslint": "yarn lint:eslint --fix",
     "fix:prettier": "yarn lint:prettier --write",
@@ -31,89 +31,90 @@
     "test": "yarn run test:mocha && yarn run test:jest",
     "test:custom": "mocha --require ./config/babel/register.cjs ./packages/slate/test/index.js",
     "test:inspect": "yarn test --inspect-brk",
-    "test:integration": "run-p -r serve playwright",
+    "test:integration": "yarn dlx playwright install --with-deps && run-p -r serve playwright",
+    "test:integration-local": "run-p -r serve playwright",
     "test:mocha": "mocha --require ./config/babel/register.cjs ./packages/{slate,slate-history,slate-hyperscript}/test/**/*.{js,ts}",
     "test:jest": "jest --config jest.config.js",
     "watch": "yarn build:rollup --watch",
     "playwright": "playwright test"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.4",
-    "@babel/core": "^7.7.4",
-    "@babel/helper-call-delegate": "^7.7.4",
-    "@babel/plugin-external-helpers": "^7.7.4",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/plugin-transform-modules-commonjs": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.7.4",
-    "@babel/polyfill": "^7.6.0",
-    "@babel/preset-env": "^7.7.4",
-    "@babel/preset-react": "^7.7.4",
-    "@babel/preset-typescript": "^7.7.4",
-    "@babel/register": "^7.7.4",
-    "@babel/runtime": "^7.7.4",
-    "@changesets/changelog-github": "^0.3.0",
-    "@changesets/cli": "^2.14.1",
-    "@emotion/css": "^11.7.1",
-    "@playwright/test": "^1.29.1",
-    "@testing-library/cypress": "^8.0.0",
-    "@types/jest": "27.0.1",
-    "@types/lodash": "^4.14.149",
-    "@types/mocha": "^5.2.7",
-    "@types/node": "^16.11.26",
-    "@types/prismjs": "^1.26.0",
-    "@types/react": "^16.9.13",
-    "@types/react-dom": "^16.9.4",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "27.0.6",
-    "babel-plugin-dev-expression": "^0.2.2",
-    "babel-plugin-module-resolver": "^3.1.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.2",
+    "@babel/helper-call-delegate": "^7.12.13",
+    "@babel/plugin-external-helpers": "^7.22.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.0",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@babel/register": "^7.22.15",
+    "@babel/runtime": "^7.23.2",
+    "@changesets/changelog-github": "^0.4.8",
+    "@changesets/cli": "^2.26.2",
+    "@emotion/css": "^11.11.2",
+    "@faker-js/faker": "^8.2.0",
+    "@playwright/test": "^1.39.0",
+    "@types/jest": "29.5.6",
+    "@types/lodash": "^4.14.200",
+    "@types/mocha": "^10.0.3",
+    "@types/node": "^20.8.7",
+    "@types/prismjs": "^1.26.1",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "29.7.0",
+    "babel-plugin-dev-expression": "^0.2.3",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "faker": "^4.1.0",
     "image-extensions": "^1.1.0",
-    "is-hotkey": "^0.1.6",
-    "is-url": "^1.2.2",
-    "jest": "27.0.6",
-    "lerna": "^3.19.0",
-    "lint-staged": ">=10",
-    "lodash": "^4.17.4",
-    "mocha": "^6.2.0",
-    "next": "^12.2.0",
-    "npm-run-all": "^4.1.2",
-    "playwright": "^1.29.1",
-    "prettier": "^1.19.1",
+    "is-hotkey": "^0.2.0",
+    "is-url": "^1.2.4",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "lerna": "^7.4.1",
+    "lint-staged": "^15.0.1",
+    "lodash": "^4.17.21",
+    "mocha": "^10.2.0",
+    "next": "^13.5.6",
+    "npm-run-all": "^4.1.5",
+    "nx": "^16.10.0",
+    "prettier": "^3.0.3",
     "prismjs": "^1.29.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-error-boundary": "^1.2.5",
-    "react-router-dom": "^5.1.2",
-    "react-values": "^0.3.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.26.6",
-    "rollup-plugin-babel": "^4.3.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
+    "react-router-dom": "^6.17.0",
+    "react-values": "^0.3.3",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.1.4",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "rollup-plugin-typescript2": "^0.27.2",
-    "shell-quote": "^1.7.2",
-    "simple-git-hooks": ">=2.0.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "shell-quote": "^1.8.1",
+    "simple-git-hooks": "^2.9.0",
     "slate": "workspace:*",
     "slate-history": "workspace:*",
     "slate-hyperscript": "workspace:*",
     "slate-react": "workspace:*",
-    "source-map-loader": "^4.0.0",
-    "ts-jest": "^27.1.3",
-    "typescript": "4.0.5"
+    "source-map-loader": "^4.0.1",
+    "ts-jest": "^29.1.1",
+    "typescript": "5.2.2"
   },
   "simple-git-hooks": {
     "pre-commit": "yarn lint-staged"
@@ -124,5 +125,8 @@
       "eslint --fix"
     ]
   },
-  "packageManager": "yarn@3.3.1"
+  "packageManager": "yarn@3.6.4",
+  "resolutions": {
+    "@types/node": "20.8.7"
+  }
 }

packages/slate-history/package.json

@@ -17,11 +17,11 @@
     "is-plain-object": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.23.2",
     "lodash": "^4.17.21",
     "slate": "^0.94.0",
     "slate-hyperscript": "^0.81.3",
-    "source-map-loader": "^4.0.0"
+    "source-map-loader": "^4.0.1"
   },
   "peerDependencies": {
     "slate": ">=0.65.3"

packages/slate-hyperscript/package.json

@@ -17,9 +17,9 @@
     "is-plain-object": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.23.2",
     "slate": "^0.94.0",
-    "source-map-loader": "^4.0.0"
+    "source-map-loader": "^4.0.1"
   },
   "peerDependencies": {
     "slate": ">=0.65.3"