Fix: Keep typing scheduling invariant from version < 2

Before version 2, characters would be typed in the following order:

1. Update characters and lines state (i.e. render character in a line)
2. After being rendered, call onCharacterTyped
3. Generate a new delay for the given line and character that was just rendered
4. Set a timeout with the generated delay

After the introduction of Backspace and Delay elements in v2, the order
in which characters were typed was changed, changing the invariant of
when the delayGenerator was called and how delays were scheduled.
This was due to conflation between the newly introduced delays and the
normal typing scheduling.

This commit fixes that

Author: jstejada

src/Typist.jsx

@@ -39,7 +39,7 @@ export default class Typist extends Component {
     super(props);
     this.mounted = false;
     this.linesToType = [];
-    this.delay = null;
+    this.introducedDelay = null;
 
     if (props.children) {
       this.linesToType = utils.extractTextFromElement(props.children);
@@ -124,11 +124,11 @@ export default class Typist extends Component {
     if (isBackspaceOrDelayElement) {
       if (line.type && line.type.name === 'Backspace') {
         if (line.props.delay > 0) {
-          this.delay = line.props.delay;
+          this.introducedDelay = line.props.delay;
         }
         decoratedLine = String('🔙').repeat(line.props.count);
       } else if (line.type && line.type.name === 'Delay') {
-        this.delay = line.props.ms;
+        this.introducedDelay = line.props.ms;
         decoratedLine = '⏰';
       }
     }
@@ -150,36 +150,40 @@ export default class Typist extends Component {
     return new Promise((resolve) => {
       const textLines = this.state.textLines.slice();
 
-      const isBackspace = character === '🔙';
-      const isDelay = character === '⏰';
-      if (isDelay) {
-        resolve();
-        return;
-      }
+      utils.sleep(this.introducedDelay)
+      .then(() => {
+        this.introducedDelay = null;
+
+        const isBackspace = character === '🔙';
+        const isDelay = character === '⏰';
+        if (isDelay) {
+          resolve();
+          return;
+        }
 
-      if (isBackspace && lineIdx > 0) {
-        let prevLineIdx = lineIdx - 1;
-        let prevLine = textLines[prevLineIdx];
+        if (isBackspace && lineIdx > 0) {
+          let prevLineIdx = lineIdx - 1;
+          let prevLine = textLines[prevLineIdx];
 
-        for (let idx = prevLineIdx; idx >= 0; idx --) {
-          if (prevLine.length > 0 && !ACTION_CHARS.includes(prevLine[0])) {
-            break;
+          for (let idx = prevLineIdx; idx >= 0; idx --) {
+            if (prevLine.length > 0 && !ACTION_CHARS.includes(prevLine[0])) {
+              break;
+            }
+            prevLineIdx = idx;
+            prevLine = textLines[prevLineIdx];
           }
-          prevLineIdx = idx;
-          prevLine = textLines[prevLineIdx];
-        }
 
-        textLines[prevLineIdx] = prevLine.substr(0, prevLine.length - 1);
-      } else {
-        textLines[lineIdx] += character;
-      }
+          textLines[prevLineIdx] = prevLine.substr(0, prevLine.length - 1);
+        } else {
+          textLines[lineIdx] += character;
+        }
 
-      const delay = this.delay || this.delayGenerator(line, lineIdx, character, charIdx);
-      setTimeout(() => this.setState({ textLines }, () => {
-        this.delay = null;
-        onCharacterTyped(character, charIdx);
-        resolve();
-      }), delay);
+        this.setState({ textLines }, () => {
+          const delay = this.delayGenerator(line, lineIdx, character, charIdx);
+          onCharacterTyped(character, charIdx);
+          setTimeout(resolve, delay);
+        });
+      });
     });
   }
 

src/utils.js

@@ -1,6 +1,8 @@
 import React from 'react';
 
-export const sleep = (val) => new Promise((resolve) => setTimeout(resolve, val));
+export const sleep = (val) => new Promise((resolve) => (
+  val != null ? setTimeout(resolve, val) : resolve()
+));
 
 export function gaussianRnd(mean, std) {
   const times = 12;

test/Typist.spec.js

@@ -49,9 +49,9 @@ describe('Typist', () => {
     describe('when children passed', () => {
       const assertLine = (inst, line, acum = '') => {
         for (let idx = 1; idx <= line.length; idx++) {
+          expect(findDOMNode(inst).textContent).toEqual(`${acum}${line.slice(0, idx)}|`);
           jasmine.clock().tick(100);
           Promise.runAll();
-          expect(findDOMNode(inst).textContent).toEqual(`${acum}${line.slice(0, idx)}|`);
         }
       };
 
@@ -171,13 +171,13 @@ describe('Typist', () => {
 
           assertLines(inst, strs);
 
+          expect(findDOMNode(inst).textContent).toEqual('Test1Test|');
           jasmine.clock().tick(100);
           Promise.runAll();
-          expect(findDOMNode(inst).textContent).toEqual('Test1Test|');
 
+          expect(findDOMNode(inst).textContent).toEqual('Test1Tes|');
           jasmine.clock().tick(100);
           Promise.runAll();
-          expect(findDOMNode(inst).textContent).toEqual('Test1Tes|');
 
           const span = TestUtils.scryRenderedDOMComponentsWithTag(inst, 'span')[0];
           expect(findDOMNode(span).textContent).toEqual('Tes');
@@ -194,13 +194,13 @@ describe('Typist', () => {
 
           assertLines(inst, strs);
 
+          expect(findDOMNode(inst).textContent).toEqual('Test1|');
           jasmine.clock().tick(100);
           Promise.runAll();
-          expect(findDOMNode(inst).textContent).toEqual('Test1|');
 
+          expect(findDOMNode(inst).textContent).toEqual('Test|');
           jasmine.clock().tick(100);
           Promise.runAll();
-          expect(findDOMNode(inst).textContent).toEqual('Test|');
         });
 
         it('correctly uses a delay when backspacing if specified', () => {