Migrate yarn to berry v3 (#4417)

* Migrate to yarn berry v3

* Fix yarn dependencies for linting

* Specifically invoke bash in yarn clean to make brace expansion work

* Upgrade cypress to 8.x to support yarn berry

* Try out yarn berry workaround for netlify

From https://answers.netlify.com/t/using-the-new-yarn-release-2-0-0-berry/8270

* Update .yarnrc.yml for syntax consistency

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>

* use rimraf for clean command with escaped glob pattern

* Use workspace:* resolution for workspace packages and rewrite yarn.lock

* set workspace package versions explicit again

* update peer dependencies

* disable import/named for ts and tsx files

* Replace 'key' with 'key=true' wherever babel complains

* replace all instances of key to someKey in tests to satisfy eslint and babel

* remove unnecessary yarn packageExtension and remove cross-env dependency

* upgrade yarn to latest

* Upgrade next.js to 10.x to support yarn berry

* update .yarnrc to satisfy netlify

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>

.eslintrc.json

@@ -1,16 +1,12 @@
 {
+  "root": true,
   "extends": [
     "plugin:import/typescript",
     "prettier",
     "prettier/@typescript-eslint",
     "prettier/react"
   ],
-  "plugins": [
+  "plugins": ["@typescript-eslint", "import", "react", "prettier"],
-    "@typescript-eslint",
-    "import",
-    "react",
-    "prettier"
-  ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "sourceType": "module",
@@ -21,12 +17,7 @@
   },
   "ignorePatterns": ["**/next-env.d.ts"],
   "settings": {
-    "import/extensions": [
+    "import/extensions": [".js", ".ts", ".jsx", ".tsx"],
-      ".js",
-      ".ts",
-      ".jsx",
-      ".tsx"
-    ],
     "react": {
       "version": "detect"
     }
@@ -45,10 +36,7 @@
         "allowKeywords": true
       }
     ],
-    "eqeqeq": [
+    "eqeqeq": ["error", "smart"],
-      "error",
-      "smart"
-    ],
     "import/default": "error",
     "import/export": "error",
     "import/first": "error",
@@ -106,10 +94,7 @@
     "no-var": "error",
     "no-void": "error",
     "no-with": "error",
-    "object-shorthand": [
+    "object-shorthand": ["error", "always"],
-      "error",
-      "always"
-    ],
     "prefer-arrow-callback": "error",
     "prefer-const": [
       "error",
@@ -123,10 +108,7 @@
     "prefer-template": "error",
     "prettier/prettier": "error",
     "radix": "error",
-    "react/jsx-boolean-value": [
+    "react/jsx-boolean-value": ["error", "never"],
-      "error",
-      "never"
-    ],
     "react/jsx-no-duplicate-props": "error",
     "react/jsx-no-target-blank": "error",
     "react/jsx-no-undef": "error",
@@ -145,21 +127,13 @@
       "error",
       "always",
       {
-        "exceptions": [
+        "exceptions": ["-"]
-          "-"
-        ]
       }
     ],
     "use-isnan": "error",
     "valid-typeof": "error",
-    "yield-star-spacing": [
+    "yield-star-spacing": ["error", "after"],
-      "error",
+    "yoda": ["error", "never"]
-      "after"
-    ],
-    "yoda": [
-      "error",
-      "never"
-    ]
   },
   "overrides": [
     {
@@ -168,6 +142,12 @@
         "import/no-extraneous-dependencies": "off",
         "import/no-unresolved": "off"
       }
+    },
+    {
+      "files": "**/*.{ts,tsx}",
+      "rules": {
+        "import/named": "off"
+      }
     }
   ]
 }

.gitignore

@@ -15,3 +15,11 @@ cypress/videos
 cypress/fixtures
 cypress/plugins
 .DS_Store
+
+# Recommendation from https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored (not using Zero-installs)
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

.yarnrc

@@ -0,0 +1 @@
+yarn-path ".yarn/releases/yarn-3.0.1.cjs"

.yarnrc.yml

@@ -0,0 +1,12 @@
+packageExtensions:
+  eslint-module-utils@*:
+    dependencies:
+      eslint-import-resolver-node: "*"
+  next@*:
+    dependencies:
+      eslint-import-resolver-node: "*"
+  react-error-boundary@*:
+    dependencies:
+      prop-types: "*"
+
+yarnPath: .yarn/releases/yarn-3.0.1.cjs

package.json

@@ -8,7 +8,7 @@
     "build": "yarn build:rollup && yarn build:next",
     "build:next": "cd ./site && next build && next export",
     "build:rollup": "rollup --config ./config/rollup/rollup.config.js",
-    "clean": "rimraf ./node_modules ./packages/*/{dist,lib,node_modules} ./site/{.next,out}",
+    "clean": "rimraf './packages/*/{dist,lib,node_modules}' './site/{.next,out}'",
     "fix": "yarn fix:prettier && yarn fix:eslint",
     "fix:eslint": "yarn lint:eslint --fix",
     "fix:prettier": "yarn lint:prettier --write",
@@ -17,7 +17,7 @@
     "lint:prettier": "prettier --check \"**/*.{css,md,js,jsx,json,ts,tsx}\"",
     "lint:typescript": "tsc --build ./ --force",
     "open": "open http://localhost:3000",
-    "prerelease": "cross-env NODE_ENV=production yarn build:rollup && yarn test && yarn lint",
+    "prerelease": "NODE_ENV=production yarn build:rollup && yarn test && yarn lint",
     "release:publish:latext": "lerna publish --force-publish",
     "release:publish:next": "lerna publish --dist-tag next --force-publish",
     "release:publish:experimental": "lerna publish --dist-tag experimental",
@@ -27,7 +27,7 @@
     "internal:release:next": "yarn prerelease && yarn changeset publish --tag next",
     "serve": "cd ./site && next",
     "start": "npm-run-all --parallel --print-label watch serve",
-    "test": "mocha --require ./config/babel/register.cjs ./packages/*/test/**/*.{js,ts}",
+    "test": "mocha --require ./config/babel/register.cjs './packages/*/test/**/*.{js,ts}'",
     "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 cypress:run",
@@ -62,7 +62,6 @@
     "babel-eslint": "^10.0.3",
     "babel-plugin-dev-expression": "^0.2.2",
     "babel-plugin-module-resolver": "^3.1.1",
-    "cross-env": "6.0.3",
     "cypress": "^8.3.0",
     "emotion": "^10.0.9",
     "eslint": "^6.7.1",
@@ -100,10 +99,10 @@
     "rollup-plugin-typescript2": "^0.27.2",
     "shell-quote": "^1.7.2",
     "simple-git-hooks": ">=2.0.3",
-    "slate": "*",
+    "slate": "workspace:*",
-    "slate-history": "*",
+    "slate-history": "workspace:*",
-    "slate-hyperscript": "*",
+    "slate-hyperscript": "workspace:*",
-    "slate-react": "*",
+    "slate-react": "workspace:*",
     "source-map-loader": "^0.2.4",
     "typescript": "3.9.7"
   },
@@ -115,5 +114,6 @@
       "prettier --write",
       "eslint --fix"
     ]
-  }
+  },
+  "packageManager": "yarn@3.0.1"
 }

packages/slate-history/package.json

@@ -17,11 +17,14 @@
     "is-plain-object": "^3.0.0"
   },
   "devDependencies": {
+    "@babel/runtime": "^7.7.4",
+    "lodash": "^4.17.21",
     "slate": "^0.65.3",
-    "slate-hyperscript": "^0.62.0"
+    "slate-hyperscript": "^0.62.0",
+    "source-map-loader": "^0.2.4"
   },
   "peerDependencies": {
-    "slate": ">=0.55.0"
+    "slate": ">=0.65.3"
   },
   "umdGlobals": {
     "slate": "Slate"

packages/slate-hyperscript/package.json

@@ -17,10 +17,12 @@
     "is-plain-object": "^3.0.0"
   },
   "devDependencies": {
-    "slate": "^0.65.3"
+    "@babel/runtime": "^7.7.4",
+    "slate": "^0.65.3",
+    "source-map-loader": "^0.2.4"
   },
   "peerDependencies": {
-    "slate": ">=0.55.0"
+    "slate": ">=0.65.3"
   },
   "umdGlobals": {
     "slate": "Slate"

packages/slate-react/package.json

@@ -24,15 +24,21 @@
     "tiny-invariant": "1.0.6"
   },
   "devDependencies": {
+    "@babel/runtime": "^7.7.4",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
     "jsdom": "^16.6.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
     "react-test-renderer": ">=16.8.0",
     "slate": "^0.65.3",
-    "slate-hyperscript": "^0.62.0"
+    "slate-hyperscript": "^0.62.0",
+    "source-map-loader": "^0.2.4"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "slate": ">=0.55.0"
+    "slate": ">=0.65.3"
   },
   "umdGlobals": {
     "react": "React",

packages/slate/package.json

@@ -19,7 +19,10 @@
     "tiny-warning": "^1.0.3"
   },
   "devDependencies": {
-    "lodash": "^4.17.21"
+    "@babel/runtime": "^7.7.4",
+    "lodash": "^4.17.21",
+    "slate-hyperscript": "^0.62.0",
+    "source-map-loader": "^0.2.4"
   },
   "keywords": [
     "canvas",

packages/slate/test/operations/set_node/remove-null.tsx

@@ -5,7 +5,7 @@ import { Transforms, Editor } from 'slate'
 export const input = (
   <editor>
     <element>
-      <text key />
+      <text someKey />
     </element>
   </editor>
 )
@@ -15,8 +15,8 @@ export const operations = [
   {
     type: 'set_node',
     path: [0, 0],
-    properties: { key: true },
+    properties: { someKey: true },
-    newProperties: { key: null },
+    newProperties: { someKey: null },
   },
 ]
 

packages/slate/test/operations/set_node/remove-omit.tsx

@@ -5,7 +5,7 @@ import { Transforms, Editor } from 'slate'
 export const input = (
   <editor>
     <element>
-      <text key />
+      <text someKey />
     </element>
   </editor>
 )
@@ -14,7 +14,7 @@ export const operations = [
   {
     type: 'set_node',
     path: [0, 0],
-    properties: { key: true },
+    properties: { someKey: true },
     newProperties: {},
   },
 ]

packages/slate/test/operations/set_node/remove-undefined.tsx

@@ -5,7 +5,7 @@ import { Transforms, Editor } from 'slate'
 export const input = (
   <editor>
     <element>
-      <text key />
+      <text someKey />
     </element>
   </editor>
 )
@@ -15,8 +15,8 @@ export const operations = [
   {
     type: 'set_node',
     path: [0, 0],
-    properties: { key: true },
+    properties: { someKey: true },
-    newProperties: { key: undefined },
+    newProperties: { someKey: undefined },
   },
 ]
 

packages/slate/test/transforms/setNodes/basic-structure/can-be-serialized.tsx

@@ -4,7 +4,7 @@ import { Editor, Transforms, Operation } from 'slate'
 import { jsx } from '../../..'
 
 export const run = (editor: Editor) => {
-  Transforms.setNodes(editor, { key: true }, { at: [0] })
+  Transforms.setNodes(editor, { someKey: true }, { at: [0] })
   const [op] = editor.operations
   const roundTrip: Operation = JSON.parse(JSON.stringify(op))
   assert.deepStrictEqual(op, roundTrip)
@@ -18,7 +18,7 @@ export const input = (
 )
 export const output = (
   <editor>
-    <block key>
+    <block someKey>
       <text />
     </block>
   </editor>

packages/slate/test/transforms/setNodes/block/block-across.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isBlock(editor, n) }
   )
 }
@@ -23,11 +23,11 @@ export const input = (
 )
 export const output = (
   <editor>
-    <block key>
+    <block someKey>
       <anchor />
       word
     </block>
-    <block key>
+    <block someKey>
       a<focus />
       nother
     </block>

packages/slate/test/transforms/setNodes/block/block-hanging.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isBlock(editor, n) }
   )
 }
@@ -23,7 +23,7 @@ export const input = (
 )
 export const output = (
   <editor>
-    <block key>
+    <block someKey>
       <anchor />
       word
     </block>

packages/slate/test/transforms/setNodes/block/block-nested.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isBlock(editor, n) }
   )
 }
@@ -22,7 +22,7 @@ export const input = (
 export const output = (
   <editor>
     <block>
-      <block key>
+      <block someKey>
         <cursor />
         word
       </block>

packages/slate/test/transforms/setNodes/block/block-void.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isBlock(editor, n) }
   )
 }
@@ -19,7 +19,7 @@ export const input = (
 )
 export const output = (
   <editor>
-    <block void key>
+    <block void someKey>
       <cursor />
       word
     </block>

packages/slate/test/transforms/setNodes/block/block.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isBlock(editor, n) }
   )
 }
@@ -19,7 +19,7 @@ export const input = (
 )
 export const output = (
   <editor>
-    <block key>
+    <block someKey>
       <cursor />
       word
     </block>

packages/slate/test/transforms/setNodes/inline/inline-across.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isInline(editor, n) }
   )
 }
@@ -33,7 +33,7 @@ export const output = (
   <editor>
     <block>
       <text />
-      <inline key>
+      <inline someKey>
         <anchor />
         word
       </inline>
@@ -41,7 +41,7 @@ export const output = (
     </block>
     <block>
       <text />
-      <inline key>
+      <inline someKey>
         another
         <focus />
       </inline>

packages/slate/test/transforms/setNodes/inline/inline-block-hanging.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isInline(editor, n) }
   )
 }
@@ -33,7 +33,7 @@ export const output = (
   <editor>
     <block>
       <text />
-      <inline key>
+      <inline someKey>
         <anchor />
         word
       </inline>

packages/slate/test/transforms/setNodes/inline/inline-hanging.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isInline(editor, n) }
   )
 }
@@ -25,7 +25,7 @@ export const output = (
   <editor>
     <block>
       <text />
-      <inline key>
+      <inline someKey>
         <anchor />
         word
       </inline>

packages/slate/test/transforms/setNodes/inline/inline-nested.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isInline(editor, n) }
   )
 }
@@ -31,7 +31,7 @@ export const output = (
       <text />
       <inline>
         <text />
-        <inline key>
+        <inline someKey>
           <cursor />
           word
         </inline>

packages/slate/test/transforms/setNodes/inline/inline-void.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isInline(editor, n) }
   )
 }
@@ -25,7 +25,7 @@ export const output = (
   <editor>
     <block>
       <text />
-      <inline void key>
+      <inline void someKey>
         <cursor />
         word
       </inline>

packages/slate/test/transforms/setNodes/inline/inline.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: n => Editor.isInline(editor, n) }
   )
 }
@@ -25,7 +25,7 @@ export const output = (
   <editor>
     <block>
       <text />
-      <inline key>
+      <inline someKey>
         <cursor />
         word
       </inline>

packages/slate/test/transforms/setNodes/split/text-remove.tsx

@@ -5,14 +5,14 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: null },
+    { someKey: null },
     { match: Text.isText, split: true }
   )
 }
 export const input = (
   <editor>
     <block>
-      <text key>
+      <text someKey>
         w<anchor />
         or
         <focus />d
@@ -23,13 +23,13 @@ export const input = (
 export const output = (
   <editor>
     <block>
-      <text key>w</text>
+      <text someKey>w</text>
       <text>
         <anchor />
         or
         <focus />
       </text>
-      <text key>d</text>
+      <text someKey>d</text>
     </block>
   </editor>
 )

packages/slate/test/transforms/setNodes/split/text.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: Text.isText, split: true }
   )
 }
@@ -22,7 +22,7 @@ export const output = (
   <editor>
     <block>
       <text>w</text>
-      <text key>
+      <text someKey>
         <anchor />
         or
         <focus />

packages/slate/test/transforms/setNodes/text/block-across.tsx

@@ -3,7 +3,7 @@ import { Transforms, Text } from 'slate'
 import { jsx } from '../../..'
 
 export const run = editor => {
-  Transforms.setNodes(editor, { key: true }, { match: Text.isText })
+  Transforms.setNodes(editor, { someKey: true }, { match: Text.isText })
 }
 export const input = (
   <editor>
@@ -20,13 +20,13 @@ export const input = (
 export const output = (
   <editor>
     <block>
-      <text key>
+      <text someKey>
         <anchor />
         word
       </text>
     </block>
     <block>
-      <text key>
+      <text someKey>
         a<focus />
         nother
       </text>

packages/slate/test/transforms/setNodes/text/merge-across.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../../..'
 export const run = editor => {
   Transforms.setNodes(
     editor,
-    { key: true },
+    { someKey: true },
     { match: Text.isText, split: true }
   )
 }
@@ -16,7 +16,7 @@ export const input = (
         One
         <anchor />
       </text>
-      <text key>Two</text>
+      <text someKey>Two</text>
       <text>
         <focus />
         Three
@@ -31,7 +31,7 @@ export const output = (
         One
         <anchor />
       </text>
-      <text key>
+      <text someKey>
         Two
         <focus />
       </text>

packages/slate/test/transforms/setNodes/text/text.tsx

@@ -3,7 +3,7 @@ import { Transforms, Text } from 'slate'
 import { jsx } from '../../..'
 
 export const run = editor => {
-  Transforms.setNodes(editor, { key: true }, { match: Text.isText })
+  Transforms.setNodes(editor, { someKey: true }, { match: Text.isText })
 }
 export const input = (
   <editor>
@@ -16,7 +16,7 @@ export const input = (
 export const output = (
   <editor>
     <block>
-      <text key>
+      <text someKey>
         <cursor />
         word
       </text>

packages/slate/test/transforms/setNodes/voids-true/block.tsx

@@ -8,12 +8,12 @@ export const input = (
   </editor>
 )
 export const run = editor => {
-  Transforms.setNodes(editor, { key: true }, { at: [0, 0], voids: true })
+  Transforms.setNodes(editor, { someKey: true }, { at: [0, 0], voids: true })
 }
 export const output = (
   <editor>
     <block void>
-      <text key>word</text>
+      <text someKey>word</text>
     </block>
   </editor>
 )

packages/slate/test/transforms/unsetNodes/operation-contents-check.tsx

@@ -4,7 +4,7 @@ import { Transforms, Text, Editor } from 'slate'
 import { jsx } from '../..'
 
 export const run = (editor: Editor) => {
-  Transforms.unsetNodes(editor, 'key', { at: [0] })
+  Transforms.unsetNodes(editor, 'someKey', { at: [0] })
 
   // unsetNodes uses null to remove properties, but that should not
   // flow through to the operation
@@ -14,7 +14,7 @@ export const run = (editor: Editor) => {
     assert.deepStrictEqual(setNode, {
       type: 'set_node',
       path: [0],
-      properties: { key: true },
+      properties: { someKey: true },
       newProperties: {},
     })
   } else {
@@ -25,7 +25,7 @@ export const run = (editor: Editor) => {
 }
 export const input = (
   <editor>
-    <block key>word</block>
+    <block someKey>word</block>
   </editor>
 )
 export const output = (

packages/slate/test/transforms/unsetNodes/text.tsx

@@ -3,12 +3,12 @@ import { Transforms, Text } from 'slate'
 import { jsx } from '../..'
 
 export const run = editor => {
-  Transforms.unsetNodes(editor, 'key', { match: Text.isText })
+  Transforms.unsetNodes(editor, 'someKey', { match: Text.isText })
 }
 export const input = (
   <editor>
     <block>
-      <text key>
+      <text someKey>
         <cursor />
         word
       </text>