refactor: create new type and rename some variables

- Create `Delay` type
- Rename `setUpProps` to `updateProps`
- Default values of props moved to `TypistCore`
- Using object destructuring to get coreProps instead of `useMemo`

Author: jason89521

README.md

@@ -121,7 +121,7 @@ Set to `true` if you want to pause the typing animation.
 
 **Default**: `() => {return}`
 
-This function will be called when the typing animation finishes.
+This function will be called when the typing animation finishes. It will be called before `finishDelay`.
 
 #### `splitter`
 

src/TypistCore.ts

@@ -1,17 +1,16 @@
 import React from 'react';
 
-import type { Splitter, TypedLines, TypistProps } from './types/TypistProps';
-import { emptyFunc } from './utils/defaultFuncs';
+import type { Splitter, TypedLines, TypistProps, Delay } from './types/TypistProps';
+import { defaultSplitter, emptyFunc } from './utils/defaultFuncs';
 import getActions from './utils/getActions';
 
-type T = Omit<TypistProps, 'cursor' | 'disabled' | 'restartKey'>;
-type CoreProps = Required<T>;
+type CoreProps = Omit<TypistProps, 'cursor' | 'disabled' | 'restartKey'>;
 type SetTypedLines = React.Dispatch<React.SetStateAction<TypedLines>>;
 
 export default class TypistCore {
   #children: React.ReactNode;
-  #typingDelay!: number | (() => number);
-  #backspaceDelay!: number | (() => number);
+  #typingDelay!: Delay;
+  #backspaceDelay!: Delay;
   #loop!: boolean;
   #pause!: boolean;
   #startDelay!: number;
@@ -24,7 +23,7 @@ export default class TypistCore {
   #setTypedLines: SetTypedLines;
 
   constructor(props: CoreProps, setTypedLines: SetTypedLines) {
-    this.setUpProps(props);
+    this.updateProps(props);
     this.#setTypedLines = setTypedLines;
   }
 
@@ -36,16 +35,16 @@ export default class TypistCore {
     };
   };
 
-  setUpProps = ({
+  updateProps = ({
     children,
-    typingDelay,
-    backspaceDelay,
-    loop,
-    pause,
-    startDelay,
-    finishDelay,
-    onTypingDone,
-    splitter,
+    typingDelay = 75,
+    backspaceDelay = 75,
+    loop = false,
+    pause = false,
+    startDelay = 0,
+    finishDelay = 0,
+    onTypingDone = emptyFunc,
+    splitter = defaultSplitter,
   }: CoreProps) => {
     this.#children = children;
     this.#typingDelay = typingDelay;
@@ -82,9 +81,10 @@ export default class TypistCore {
     }
   };
 
-  #timeoutPromise = (delay: number) => {
+  #timeoutPromise = (delay: Delay) => {
     return new Promise<void>((resolve, reject) => {
-      const timeoutId = setTimeout(resolve, delay);
+      const ms = typeof delay === 'number' ? delay : delay();
+      const timeoutId = setTimeout(resolve, ms);
       this.#clearTimer = () => {
         clearTimeout(timeoutId);
         reject();
@@ -123,14 +123,13 @@ export default class TypistCore {
   };
 
   /**
-   * Each async token should be executed after the pause promise resolve.
+   * Each token should be executed after the pause promise resolve.
    * @param callback
-   * @param timeoutDelay
+   * @param delay
    */
-  #executeAsyncToken = async (callback: () => void, timeoutDelay: number | (() => number)) => {
+  #executeToken = async (callback: () => void, delay: Delay) => {
     await this.#pausePromise();
     callback();
-    const delay = typeof timeoutDelay === 'number' ? timeoutDelay : timeoutDelay();
     await this.#timeoutPromise(delay);
   };
 
@@ -147,7 +146,7 @@ export default class TypistCore {
     const splittedLine = this.#splitter(line);
     const lastIdx = this.#typedLines.length;
     for (let charIdx = 1; charIdx <= splittedLine.length; charIdx++) {
-      await this.#executeAsyncToken(() => {
+      await this.#executeToken(() => {
         const newLine = splittedLine.slice(0, charIdx).join('');
         const newTypedLines = [...this.#typedLines];
         newTypedLines[lastIdx] = newLine;
@@ -157,14 +156,14 @@ export default class TypistCore {
   };
 
   #typeElement = async (el: React.ReactElement) => {
-    await this.#executeAsyncToken(() => {
+    await this.#executeToken(() => {
       this.#updateTypedLines([...this.#typedLines, el]);
     }, this.#typingDelay);
   };
 
   #backspace = async (amount: number) => {
     while (amount--) {
-      await this.#executeAsyncToken(() => {
+      await this.#executeToken(() => {
         const typedLines = [...this.#typedLines];
         let lineIndex = typedLines.length - 1;
         let line = typedLines[lineIndex];

src/components/Typist.tsx

@@ -1,56 +1,20 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import type { TypedLines, TypistProps } from '../types/TypistProps';
 import getTypedChildren from '../utils/getTypedChildren';
 import getFinalTypedLines from '../utils/getFinalTypedLines';
 import insertCursor from '../utils/insertCursor';
-import { defaultSplitter, emptyFunc } from '../utils/defaultFuncs';
+import { defaultSplitter } from '../utils/defaultFuncs';
 import Backspace from './Backspace';
 import Delay from './Delay';
 import Paste from './Paste';
 
 import TypistCore from '../TypistCore';
 
-const Typist = ({
-  children,
-  typingDelay = 75,
-  backspaceDelay = 75,
-  loop = false,
-  pause = false,
-  startDelay = 0,
-  finishDelay = 0,
-  onTypingDone = emptyFunc,
-  splitter = defaultSplitter,
-  cursor,
-  disabled = false,
-  restartKey,
-}: TypistProps) => {
+const Typist = ({ cursor, disabled = false, restartKey, ...coreProps }: TypistProps) => {
+  const { children, splitter = defaultSplitter } = coreProps;
   const [typedLines, setTypedLines] = useState<TypedLines>([]);
   const typistCoreRef = useRef<TypistCore>();
-  const coreProps = useMemo(
-    () => ({
-      children,
-      typingDelay,
-      backspaceDelay,
-      loop,
-      pause,
-      startDelay,
-      finishDelay,
-      onTypingDone,
-      splitter,
-    }),
-    [
-      children,
-      typingDelay,
-      backspaceDelay,
-      loop,
-      pause,
-      startDelay,
-      finishDelay,
-      onTypingDone,
-      splitter,
-    ]
-  );
 
   useEffect(() => {
     // If disable is true, show the final result immediately.
@@ -77,7 +41,7 @@ const Typist = ({
 
   // Update the typistCore's props whenever component's props change
   useEffect(() => {
-    typistCoreRef.current?.setUpProps(coreProps);
+    typistCoreRef.current?.updateProps(coreProps);
   }, [coreProps]);
 
   const typedChildren = getTypedChildren(children, typedLines);

src/index.ts

@@ -1,5 +1,5 @@
-import type { TypistProps, Splitter } from './types/TypistProps';
+import type { TypistProps, Splitter, Delay } from './types/TypistProps';
 import Typist from './components/Typist';
 
 export default Typist;
-export type { TypistProps, Splitter };
+export type { TypistProps, Splitter, Delay };

src/types/TypistProps.ts

@@ -1,11 +1,12 @@
 export type TypedChildren = (string | React.ReactElement)[] | null | undefined;
 export type TypedLines = (string | React.ReactElement | null)[];
+export type Delay = number | (() => number);
 export type Splitter = (str: string) => string[];
 
 export type TypistProps = {
   children: React.ReactNode;
-  typingDelay?: number | (() => number);
-  backspaceDelay?: number | (() => number);
+  typingDelay?: Delay;
+  backspaceDelay?: Delay;
   loop?: boolean;
   pause?: boolean;
   startDelay?: number;