Upgrade next.js to 12 and related packages (#5042)

* Upgrade next.js and source-map-loader

* Add changeset

* Upgrade eslint and typescript

* improve reliability of iframe test

* fix lint

.changeset/large-experts-know.md

@@ -0,0 +1,8 @@
+---
+'slate': patch
+'slate-history': patch
+'slate-hyperscript': patch
+'slate-react': patch
+---
+
+Upgrade next.js and source-map-loader packages

cypress/integration/examples/iframe.ts

@@ -1,9 +1,13 @@
 // Taken from https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
 const getIframeDocument = () => {
-  return cy
-    .get('iframe')
-    .its('0.contentDocument')
-    .should('exist')
+  return (
+    cy
+      // adding the wait here because the IFrame component re-renders a bunch of times at startup which can mess up this test.
+      .wait(1000)
+      .get('iframe')
+      .its('0.contentDocument')
+      .should('exist')
+  )
 }
 
 const getIframeBody = () => {

package.json

@@ -62,15 +62,15 @@
     "@types/node": "^16.11.26",
     "@types/react": "^16.9.13",
     "@types/react-dom": "^16.9.4",
-    "@typescript-eslint/eslint-plugin": "^2.9.0",
-    "@typescript-eslint/parser": "^2.9.0",
+    "@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",
     "cypress": "^8.3.0",
-    "eslint": "^6.7.1",
-    "eslint-config-prettier": "^6.7.0",
+    "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",
@@ -83,7 +83,7 @@
     "lint-staged": ">=10",
     "lodash": "^4.17.4",
     "mocha": "^6.2.0",
-    "next": "^10.2.3",
+    "next": "^12.2.0",
     "npm-run-all": "^4.1.2",
     "prettier": "^1.19.1",
     "prismjs": "^1.5.1",
@@ -109,9 +109,9 @@
     "slate-history": "workspace:*",
     "slate-hyperscript": "workspace:*",
     "slate-react": "workspace:*",
-    "source-map-loader": "^0.2.4",
+    "source-map-loader": "^4.0.0",
     "ts-jest": "^27.1.3",
-    "typescript": "3.9.7"
+    "typescript": "4.0.5"
   },
   "simple-git-hooks": {
     "pre-commit": "yarn lint-staged"

packages/slate-history/package.json

@@ -21,7 +21,7 @@
     "lodash": "^4.17.21",
     "slate": "^0.81.0",
     "slate-hyperscript": "^0.77.0",
-    "source-map-loader": "^0.2.4"
+    "source-map-loader": "^4.0.0"
   },
   "peerDependencies": {
     "slate": ">=0.65.3"

packages/slate-history/src/history-editor.ts

@@ -19,6 +19,7 @@ export interface HistoryEditor extends BaseEditor {
   redo: () => void
 }
 
+// eslint-disable-next-line no-redeclare
 export const HistoryEditor = {
   /**
    * Check if a value is a `HistoryEditor` object.

packages/slate-history/src/history.ts

@@ -11,6 +11,7 @@ export interface History {
   undos: Operation[][]
 }
 
+// eslint-disable-next-line no-redeclare
 export const History = {
   /**
    * Check if a value is a `History` object.

packages/slate-hyperscript/package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@babel/runtime": "^7.7.4",
     "slate": "^0.81.0",
-    "source-map-loader": "^0.2.4"
+    "source-map-loader": "^4.0.0"
   },
   "peerDependencies": {
     "slate": ">=0.65.3"

packages/slate-react/package.json

@@ -35,7 +35,7 @@
     "react-test-renderer": ">=16.8.0",
     "slate": "^0.81.0",
     "slate-hyperscript": "^0.77.0",
-    "source-map-loader": "^0.2.4"
+    "source-map-loader": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

packages/slate-react/src/components/editable.tsx

@@ -1479,6 +1479,7 @@ const defaultScrollSelectionIntoView = (
     scrollIntoView(leafEl, {
       scrollMode: 'if-needed',
     })
+    // @ts-expect-error an unorthodox delete D:
     delete leafEl.getBoundingClientRect
   }
 }

packages/slate-react/src/plugin/react-editor.ts

@@ -51,6 +51,7 @@ export interface ReactEditor extends BaseEditor {
   hasRange: (editor: ReactEditor, range: Range) => boolean
 }
 
+// eslint-disable-next-line no-redeclare
 export const ReactEditor = {
   /**
    * Check if the user is currently composing inside the editor.

packages/slate/package.json

@@ -22,7 +22,7 @@
     "@babel/runtime": "^7.7.4",
     "lodash": "^4.17.21",
     "slate-hyperscript": "^0.77.0",
-    "source-map-loader": "^0.2.4"
+    "source-map-loader": "^4.0.0"
   },
   "keywords": [
     "canvas",

packages/slate/src/interfaces/editor.ts

@@ -326,6 +326,7 @@ export interface EditorInterface {
 
 const IS_EDITOR_CACHE = new WeakMap<object, boolean>()
 
+// eslint-disable-next-line no-redeclare
 export const Editor: EditorInterface = {
   /**
    * Get the ancestor above a location in the document.

packages/slate/src/interfaces/element.ts

@@ -37,6 +37,7 @@ const isElement = (value: any): value is Element => {
   )
 }
 
+// eslint-disable-next-line no-redeclare
 export const Element: ElementInterface = {
   /**
    * Check if a value implements the 'Ancestor' interface.

packages/slate/src/interfaces/location.ts

@@ -15,6 +15,7 @@ export interface LocationInterface {
   isLocation: (value: any) => value is Location
 }
 
+// eslint-disable-next-line no-redeclare
 export const Location: LocationInterface = {
   /**
    * Check if a value implements the `Location` interface.
@@ -36,6 +37,7 @@ export interface SpanInterface {
   isSpan: (value: any) => value is Span
 }
 
+// eslint-disable-next-line no-redeclare
 export const Span: SpanInterface = {
   /**
    * Check if a value implements the `Span` interface.

packages/slate/src/interfaces/node.ts

@@ -102,6 +102,7 @@ export interface NodeInterface {
 
 const IS_NODE_LIST_CACHE = new WeakMap<any[], boolean>()
 
+// eslint-disable-next-line no-redeclare
 export const Node: NodeInterface = {
   /**
    * Get the node at a specific path, asserting that it's an ancestor node.

packages/slate/src/interfaces/operation.ts

@@ -147,6 +147,7 @@ export interface OperationInterface {
   inverse: (op: Operation) => Operation
 }
 
+// eslint-disable-next-line no-redeclare
 export const Operation: OperationInterface = {
   /**
    * Check of a value is a `NodeOperation` object.

packages/slate/src/interfaces/path-ref.ts

@@ -16,6 +16,7 @@ export interface PathRefInterface {
   transform: (ref: PathRef, op: Operation) => void
 }
 
+// eslint-disable-next-line no-redeclare
 export const PathRef: PathRefInterface = {
   /**
    * Transform the path ref's current value by an operation.

packages/slate/src/interfaces/path.ts

@@ -53,6 +53,7 @@ export interface PathInterface {
   ) => Path | null
 }
 
+// eslint-disable-next-line no-redeclare
 export const Path: PathInterface = {
   /**
    * Get a list of ancestor paths for a given path.

packages/slate/src/interfaces/point-ref.ts

@@ -17,6 +17,7 @@ export interface PointRefInterface {
   transform: (ref: PointRef, op: Operation) => void
 }
 
+// eslint-disable-next-line no-redeclare
 export const PointRef: PointRefInterface = {
   /**
    * Transform the point ref's current value by an operation.

packages/slate/src/interfaces/point.ts

@@ -34,6 +34,7 @@ export interface PointInterface {
   ) => Point | null
 }
 
+// eslint-disable-next-line no-redeclare
 export const Point: PointInterface = {
   /**
    * Compare a point to another, returning an integer indicating whether the

packages/slate/src/interfaces/range-ref.ts

@@ -16,6 +16,7 @@ export interface RangeRefInterface {
   transform: (ref: RangeRef, op: Operation) => void
 }
 
+// eslint-disable-next-line no-redeclare
 export const RangeRef: RangeRefInterface = {
   /**
    * Transform the range ref's current value by an operation.

packages/slate/src/interfaces/range.ts

@@ -44,6 +44,7 @@ export interface RangeInterface {
   ) => Range | null
 }
 
+// eslint-disable-next-line no-redeclare
 export const Range: RangeInterface = {
   /**
    * Get the start and end points of a range, in the order in which they appear

packages/slate/src/interfaces/scrubber.ts

@@ -22,6 +22,7 @@ let _scrubber: Scrubber | undefined = undefined
  *    });
  *
  */
+// eslint-disable-next-line no-redeclare
 export const Scrubber: ScrubberInterface = {
   setScrubber(scrubber: Scrubber | undefined): void {
     _scrubber = scrubber

packages/slate/src/interfaces/text.ts

@@ -28,6 +28,7 @@ export interface TextInterface {
   decorations: (node: Text, decorations: Range[]) => Text[]
 }
 
+// eslint-disable-next-line no-redeclare
 export const Text: TextInterface = {
   /**
    * Check if two text nodes are equal.

packages/slate/src/transforms/general.ts

@@ -313,6 +313,7 @@ const applyToDraft = (editor: Editor, selection: Selection, op: Operation) => {
   return selection
 }
 
+// eslint-disable-next-line no-redeclare
 export const GeneralTransforms: GeneralTransforms = {
   /**
    * Transform the editor by an operation.

packages/slate/src/transforms/node.ts

@@ -127,6 +127,7 @@ export interface NodeTransforms {
   ) => void
 }
 
+// eslint-disable-next-line no-redeclare
 export const NodeTransforms: NodeTransforms = {
   /**
    * Insert nodes at a specific location in the Editor.

packages/slate/src/transforms/selection.ts

@@ -29,6 +29,7 @@ export interface SelectionTransforms {
   setSelection: (editor: Editor, props: Partial<Range>) => void
 }
 
+// eslint-disable-next-line no-redeclare
 export const SelectionTransforms: SelectionTransforms = {
   /**
    * Collapse the selection.

packages/slate/src/transforms/text.ts

@@ -46,6 +46,7 @@ export interface TextTransforms {
   ) => void
 }
 
+// eslint-disable-next-line no-redeclare
 export const TextTransforms: TextTransforms = {
   /**
    * Delete content in the editor.

site/next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

site/next.config.js

@@ -5,9 +5,13 @@ module.exports = {
   webpack: config => {
     config.module.rules.push({
       test: /\.js$/,
-      loader: require.resolve('source-map-loader'),
       enforce: 'pre',
       exclude: [/node_modules\/@next/, /node_modules\/next/],
+      use: [
+        {
+          loader: require.resolve('source-map-loader'),
+        },
+      ],
     })
     return config
   },