Fix benchmarks that use value.change (#2569)

* benchmark for large with selection

* inputer -> inputter

* value.change -> editor for slate benchmarks

* use editor in slate-react benchmarks

* prettier

* fix decorations benchmark

benchmark/slate-react/index.js

@@ -29,7 +29,7 @@ module.exports.run = function(include) {
       const dir = resolve(benchmarkDir, benchmark)
       const module = require(dir)
       const fn = module.default
-      bench.input(() => module.input)
+      bench.input(module.input)
 
       bench.run(input => {
         fn(input)

benchmark/slate-react/rendering/decoration.js

@@ -4,14 +4,15 @@
 const React = require('react')
 const ReactDOM = require('react-dom/server')
 const h = require('../../helpers/h')
-const { Editor } = require('slate-react')
+const { Editor } = require('slate')
+const { Editor: EditorComponent } = require('slate-react')
 
 module.exports.default = function(value) {
-  const el = React.createElement(Editor, { value })
+  const el = React.createElement(EditorComponent, { value })
   ReactDOM.renderToStaticMarkup(el)
 }
 
-const value = (
+let value = (
   <value>
     <document>
       {Array.from(Array(10)).map(() => (
@@ -49,4 +50,8 @@ const decorations = texts.flatMap((t, index) => {
   ]
 })
 
-module.exports.input = value.change().setValue({ decorations }).value
+value = value.setProperties({ decorations })
+
+const editor = new Editor({ value })
+
+module.exports.input = editor.value

benchmark/slate-react/rendering/large-with-selection.js

@@ -0,0 +1,66 @@
+/** @jsx h */
+/* eslint-disable react/jsx-key */
+
+const React = require('react')
+const ReactDOM = require('react-dom/server')
+const h = require('../../helpers/h')
+const { Editor } = require('slate-react')
+
+module.exports.default = function(value) {
+  const el = React.createElement(Editor, { value })
+  ReactDOM.renderToStaticMarkup(el)
+}
+
+module.exports.input = (
+  <value>
+    <document>
+      <paragraph>
+        Breve whipped ristretto ut as to go café au lait. Extra, skinny
+        trifecta, cup chicory medium cup dripper whipped coffee cultivar. Body
+        crema iced whipped, grounds turkish coffee steamed crema affogato.{' '}
+        <b>Skinny that wings aged cream,</b> grounds siphon coffee french press
+        mazagran irish roast.
+      </paragraph>
+      <block type="level-one">
+        <block type="level-two">
+          <block type="coffee-container">
+            <inline type="coffee">
+              Extra, brewed caffeine fair trade, whipped cup bar flavour grounds
+              organic. Café au lait blue mountain cortado saucer, macchiato ut
+              that caramelization flavour.
+            </inline>
+            <inline type="coffee">
+              Crema frappuccino so decaffeinated, sit café au lait irish
+              cultivar doppio café au lait. Dripper irish fair trade <anchor />kopi-luwak
+              ut beans skinny saucer.
+            </inline>
+          </block>
+          <block type="coffee-container">
+            <inline type="coffee">
+              Half and half, irish rich sugar medium frappuccino spoon. Whipped,
+              caramelization, caffeine french press cinnamon variety rich redeye
+              acerbic americano aftertaste. Shop crema filter seasonal, filter
+              aromatic, french press mazagran affogato cappuccino single origin.
+            </inline>
+            Plunger pot aromatic, crema, cultivar french press, skinny and
+            percolator so single origin. Id variety and cinnamon brewed flavour
+            cultivar acerbic half and half et<focus /> cappuccino.
+            <inline type="coffee">
+              Cup qui a barista crema white kopi-luwak chicory trifecta.
+            </inline>
+          </block>
+        </block>
+      </block>
+      {Array.from(Array(10)).map(() => (
+        <quote>
+          <paragraph>
+            <paragraph>
+              This is editable <b>rich</b> text, <i>much</i> better than a
+              textarea!
+            </paragraph>
+          </paragraph>
+        </quote>
+      ))}
+    </document>
+  </value>
+)

benchmark/slate/changes/add-mark.js

@@ -2,9 +2,10 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
-module.exports.default = function(change) {
+module.exports.default = function(editor) {
-  change
+  editor
     .addMark('bold')
     .moveForward(5)
     .addMark('bold')
@@ -37,6 +38,6 @@ const value = (
   </value>
 )
 
-module.exports.input = function() {
+module.exports.input = () => {
-  return value.change()
+  return new Editor({ value })
 }

benchmark/slate/changes/delete-backward.js

@@ -2,9 +2,10 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
-module.exports.default = function(change) {
+module.exports.default = function(editor) {
-  change
+  editor
     .deleteBackward()
     .deleteBackward()
     .deleteBackward()
@@ -31,5 +32,5 @@ const value = (
 )
 
 module.exports.input = () => {
-  return value.change()
+  return new Editor({ value })
 }

benchmark/slate/changes/delete-forward.js

@@ -2,9 +2,10 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
-module.exports.default = function(change) {
+module.exports.default = function(editor) {
-  change
+  editor
     .deleteForward()
     .deleteForward()
     .deleteForward()
@@ -31,5 +32,5 @@ const value = (
 )
 
 module.exports.input = () => {
-  return value.change()
+  return new Editor({ value })
 }

benchmark/slate/changes/insert-node-by-key.js

@@ -2,9 +2,10 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
-module.exports.default = function(change) {
+module.exports.default = function(editor) {
-  change
+  editor
     .insertNodeByKey('a0', 0, <paragraph>Hello world</paragraph>)
     .insertNodeByKey('a1', 1, <paragraph>Hello world</paragraph>)
     .insertNodeByKey('a2', 2, <paragraph>Hello world</paragraph>)
@@ -29,5 +30,5 @@ const value = (
 )
 
 module.exports.input = function() {
-  return value.change()
+  return new Editor({ value })
 }

benchmark/slate/changes/insert-text-by-key.js

@@ -2,9 +2,10 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
-module.exports.default = function({ change, text }) {
+module.exports.default = function(editor) {
-  change
+  editor
     .insertTextByKey('T1', 0, 'one')
     .insertTextByKey('T2', 5, 'two')
     .insertTextByKey('T3', 10, 'three')
@@ -31,9 +32,8 @@ const value = (
     </document>
   </value>
 )
-const text = value.document.getLastText()
+// const text = value.document.getLastText()
 
-module.exports.input = function() {
+module.exports.input = () => {
-  const change = value.change()
+  return new Editor({ value })
-  return { change, text }
 }

benchmark/slate/changes/insert-text.js

@@ -2,9 +2,10 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
-module.exports.default = function(change) {
+module.exports.default = function(editor) {
-  change
+  editor
     .insertText('one')
     .moveForward(5)
     .insertText('two')
@@ -34,6 +35,6 @@ const value = (
   </value>
 )
 
-module.exports.input = function() {
+module.exports.input = () => {
-  return value.change()
+  return new Editor({ value })
 }

benchmark/slate/changes/normalize.js

@@ -2,6 +2,7 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
 module.exports.default = function(change) {
   change
@@ -35,5 +36,5 @@ const value = (
 )
 
 module.exports.input = function() {
-  return value.change()
+  return new Editor({ value }, { normalize: false })
 }

benchmark/slate/changes/remove-node-by-key.js

@@ -2,9 +2,10 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
-module.exports.default = function({ change, text }) {
+module.exports.default = function(editor) {
-  change
+  editor
     .removeNodeByKey('T1')
     .removeNodeByKey('T2')
     .removeNodeByKey('T3')
@@ -34,6 +35,5 @@ const value = (
 const text = value.document.getLastText()
 
 module.exports.input = function() {
-  const change = value.change()
+  return new Editor({ value })
-  return { change, text }
 }

benchmark/slate/changes/set-blocks.js

@@ -2,9 +2,10 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
-module.exports.default = function(change) {
+module.exports.default = function(editor) {
-  change
+  editor
     .setBlocks('quote')
     .setBlocks('paragraph')
     .setBlocks('aside')
@@ -31,5 +32,5 @@ const value = (
 )
 
 module.exports.input = function() {
-  return value.change()
+  return new Editor({ value })
 }

benchmark/slate/changes/split-block.js

@@ -2,9 +2,10 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
-module.exports.default = function(change) {
+module.exports.default = function(editor) {
-  change
+  editor
     .splitBlock()
     .moveForward(5)
     .splitBlock()
@@ -35,5 +36,5 @@ const value = (
 )
 
 module.exports.input = function() {
-  return value.change()
+  return new Editor({ value })
 }

benchmark/slate/models/get-active-marks-at-range.js

@@ -2,12 +2,13 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
 module.exports.default = function(value) {
   value.document.getActiveMarksAtRange(value.selection)
 }
 
-const value = (
+let value = (
   <value>
     <document>
       {Array.from(Array(10)).map(() => (
@@ -23,8 +24,12 @@ const value = (
     </document>
   </value>
 )
-  .change()
+
-  .moveToRangeOfDocument().value
+const editor = new Editor({ value })
+
+editor.moveToRangeOfDocument()
+
+value = editor.value
 
 module.exports.input = function() {
   return value

benchmark/slate/models/get-leaf-blocks-at-range.js

@@ -2,12 +2,13 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
 module.exports.default = function(value) {
   value.document.getLeafBlocksAtRange(value.selection)
 }
 
-const value = (
+let value = (
   <value>
     <document>
       {Array.from(Array(10)).map(() => (
@@ -23,8 +24,10 @@ const value = (
     </document>
   </value>
 )
-  .change()
+
-  .moveToRangeOfDocument().value
+const editor = new Editor({ value })
+editor.moveToRangeOfDocument()
+value = editor.value
 
 module.exports.input = () => {
   return value

benchmark/slate/models/get-leaf-inlines-at-range.js

@@ -2,12 +2,13 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
 module.exports.default = function(value) {
   value.document.getLeafInlinesAtRange(value.selection)
 }
 
-const value = (
+let value = (
   <value>
     <document>
       {Array.from(Array(10)).map(() => (
@@ -23,8 +24,10 @@ const value = (
     </document>
   </value>
 )
-  .change()
+
-  .moveToRangeOfDocument().value
+const editor = new Editor({ value })
+editor.moveToRangeOfDocument()
+value = editor.value
 
 module.exports.input = function() {
   return value

benchmark/slate/models/get-marks-at-range.js

@@ -2,12 +2,13 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
 module.exports.default = function(value) {
   value.document.getMarksAtRange(value.selection)
 }
 
-const value = (
+let value = (
   <value>
     <document>
       {Array.from(Array(10)).map(() => (
@@ -23,8 +24,10 @@ const value = (
     </document>
   </value>
 )
-  .change()
+
-  .moveToRangeOfDocument().value
+const editor = new Editor({ value })
+editor.moveToRangeOfDocument()
+value = editor.value
 
 module.exports.input = function() {
   return value

benchmark/slate/models/get-texts-at-range.js

@@ -2,12 +2,13 @@
 /* eslint-disable react/jsx-key */
 
 const h = require('../../helpers/h')
+const { Editor } = require('slate')
 
 module.exports.default = function(value) {
   value.document.getTextsAtRange(value.selection)
 }
 
-const value = (
+let value = (
   <value>
     <document>
       {Array.from(Array(10)).map(() => (
@@ -23,8 +24,10 @@ const value = (
     </document>
   </value>
 )
-  .change()
+
-  .moveToRangeOfDocument().value
+const editor = new Editor({ value })
+editor.moveToRangeOfDocument()
+value = editor.value
 
 module.exports.input = function() {
   return value

packages/slate-dev-benchmark/src/Bench.js

@@ -27,7 +27,7 @@ class Bench {
     this.name = name
     this.options = makeOptions({ ...suite.options, ...options })
     this.isFinished = false
-    this.inputer = () => undefined
+    this.inputter = () => undefined
     this.runner = () => {}
     this.report = { ...errorReport }
     suite.addBench(this)
@@ -45,22 +45,22 @@ class Bench {
 
   /**
    * Set the method to generate (different} inputs for each run
-   * @param {Array|Function|Scalar} inputer
+   * @param {Array|Function|Scalar} inputter
    * @return {void}
    */
 
-  input(inputer) {
+  input(inputter) {
-    if (Array.isArray(inputer)) {
+    if (Array.isArray(inputter)) {
-      this.inputer = index => inputer[index % inputer.length]
+      this.inputter = index => inputter[index % inputter.length]
       return
     }
 
-    if (typeof inputer === 'function') {
+    if (typeof inputter === 'function') {
-      this.inputer = inputer
+      this.inputter = inputter
       return
     }
 
-    this.inputer = () => inputer
+    this.inputter = () => inputter
   }
 
   /**
@@ -84,7 +84,7 @@ class Bench {
   async compose(times, initial) {
     times = Math.floor(times)
     const isAsync = this.options.async
-    const { runner, inputer } = this
+    const { runner, inputter } = this
 
     const { maxTime } = this.options
     let seq = Number.isFinite(this.options.maxTries) ? 1 : NaN
@@ -125,7 +125,7 @@ class Bench {
 
     function runBundleTasks(tries, initialIndex) {
       const inputs = Array.from({ length: tries }).map(index =>
-        inputer(index + initialIndex)
+        inputter(index + initialIndex)
       )
       const timer = new Timer()
       timer.start()