Optimize loop. (#384)

* Optimize loop.

* Update test.yml

.github/workflows/test.yml

@@ -12,7 +12,7 @@ jobs:
     - uses: actions/setup-node@v4
       with:
         node-version: 20
-    - run: npm install && npm run bootstrap
+    - run: npm install && cd packages/typeit && npm install && cd ../typeit-react && npm install && cd ../../ && npm run build
     - run: npm test
     - uses: preactjs/compressed-size-action@v2
       with:

lerna.json

@@ -3,6 +3,7 @@
         "packages/*"
     ],
     "version": "independent",
+    "useNx": false,
     "command": {
         "publish": {
             "ignoreChanges": [

packages/typeit-react/src/index.test.tsx

@@ -16,7 +16,7 @@ describe("rendering as specific element", () => {
           }}
         >
           A span tag.
-        </TypeIt>
+        </TypeIt>,
       );
     });
 
@@ -39,7 +39,7 @@ describe("rendering as specific element", () => {
           }}
         >
           An H1 tag.
-        </TypeIt>
+        </TypeIt>,
       );
     });
 

packages/typeit-react/src/setup.ts

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/vitest';
+import "@testing-library/jest-dom/vitest";
 import { beforeEach } from "vitest";
 import "vitest-dom/extend-expect";
 

packages/typeit/__tests__/TypeIt.test.js

@@ -149,7 +149,7 @@ describe("go()", () => {
         let element = document.getElementById("element");
 
         expect(element.dataset.typeitId).toEqual(
-          cursorNode.dataset.tiAnimationId
+          cursorNode.dataset.tiAnimationId,
         );
         expect(cursorNode.style.visibility).toEqual("");
         expect(cursorNode).not.toBeNull();
@@ -220,7 +220,7 @@ describe("type()", () => {
     let functionalInstance = new TypeIt("#element").type(() => "a");
 
     expect(instance.getQueue().getItems()).toHaveLength(
-      functionalInstance.getQueue().getItems().length
+      functionalInstance.getQueue().getItems().length,
     );
   });
 });
@@ -262,7 +262,7 @@ describe("move()", () => {
     let functionalInstance = new TypeIt("#element").move(() => 9);
 
     expect(instance.getQueue().getItems()).toHaveLength(
-      functionalInstance.getQueue().getItems().length
+      functionalInstance.getQueue().getItems().length,
     );
   });
 });
@@ -418,8 +418,8 @@ describe("reset()", () => {
         afterComplete: () => {
           expect(element.innerHTML).toEqual(
             expect.stringMatching(
-              /Hi.<span class="ti-cursor" data-ti-animation-id=".+">|<\/span>/
-            )
+              /Hi.<span class="ti-cursor" data-ti-animation-id=".+">|<\/span>/,
+            ),
           );
           instance = instance.reset();
           expect(element.innerHTML).toEqual("");

packages/typeit/__tests__/chainable-methods/delete.test.js

@@ -16,8 +16,8 @@ describe("deleting fires correctly", () => {
       afterComplete: () => {
         expect(el.innerHTML).toEqual(
           expect.stringMatching(
-            /abc<span class="ti-cursor" data-ti-animation-id=".+">|<\/span>/
-          )
+            /abc<span class="ti-cursor" data-ti-animation-id=".+">|<\/span>/,
+          ),
         );
         done();
       },
@@ -36,8 +36,8 @@ describe("deleting fires correctly", () => {
       afterComplete: () => {
         expect(el.innerHTML).toEqual(
           expect.stringMatching(
-            /abc<strong>def<\/strong><span class="ti-cursor" data-ti-animation-id=".+">|<\/span>/
-          )
+            /abc<strong>def<\/strong><span class="ti-cursor" data-ti-animation-id=".+">|<\/span>/,
+          ),
         );
         done();
       },
@@ -112,8 +112,8 @@ describe("cursor has been moved", () => {
       afterComplete: () => {
         expect(document.body.querySelector("#element").innerHTML).toEqual(
           expect.stringMatching(
-            /abc <strong>def<\/strong> g<em><span class="ti-cursor" data-ti-animation-id=".+">|<\/span>jkl<\/em> mno/
-          )
+            /abc <strong>def<\/strong> g<em><span class="ti-cursor" data-ti-animation-id=".+">|<\/span>jkl<\/em> mno/,
+          ),
         );
         done();
       },
@@ -130,8 +130,8 @@ describe("cursor has been moved", () => {
       afterComplete: () => {
         expect(document.body.querySelector("#element").innerHTML).toEqual(
           expect.stringMatching(
-            /^abc <span class=\"ti-cursor\" data-ti-animation-id=\".+\">|<\/span> mno/
-          )
+            /^abc <span class=\"ti-cursor\" data-ti-animation-id=\".+\">|<\/span> mno/,
+          ),
         );
         done();
       },

packages/typeit/__tests__/flush.test.js

@@ -28,7 +28,7 @@ describe("deleting queue items", () => {
           instance.type("goodbye").flush(() => {
             expect(el.textContent).toEqual("hellogoodbye|");
             expect(instance.getQueue().getItems(true).length).toBeGreaterThan(
-              0
+              0,
             );
             resolve();
           });

packages/typeit/__tests__/helpers/chunkStrings.test.js

@@ -17,39 +17,39 @@ test("Parses normal string correctly.", () => {
 
 test("Parses single HTML tag.", () => {
   let result = chunkStringAsHtml(
-    "Hello, this is some <strong>bold</strong> text."
+    "Hello, this is some <strong>bold</strong> text.",
   );
 
   expect(result).toMatchSnapshot();
 });
 
 test("Parses multiple HTML tags.", () => {
   let result = chunkStringAsHtml(
-    "Hello, this is some <strong>bold</strong> text, and some <i>italicized</i> text."
+    "Hello, this is some <strong>bold</strong> text, and some <i>italicized</i> text.",
   );
 
   expect(result).toMatchSnapshot();
 });
 
 test("Parses HTML tag at beginning of string.", () => {
   let result = chunkStringAsHtml(
-    "<strong>Hello!</strong> This is some text with HTML at the beginning."
+    "<strong>Hello!</strong> This is some text with HTML at the beginning.",
   );
 
   expect(result).toMatchSnapshot();
 });
 
 test("Parses HTML tag at end of string.", () => {
   let result = chunkStringAsHtml(
-    "This is some text with HTML at the <em>end.</em>"
+    "This is some text with HTML at the <em>end.</em>",
   );
 
   expect(result).toMatchSnapshot();
 });
 
 test("Parses HTML tag with attributes.", () => {
   let result = chunkStringAsHtml(
-    'This string has an <strong class="strong-class" id="strong-id" data-whatever="data-att">element</strong> with attributes.'
+    'This string has an <strong class="strong-class" id="strong-id" data-whatever="data-att">element</strong> with attributes.',
   );
 
   expect(result).toMatchSnapshot();
@@ -58,13 +58,13 @@ test("Parses HTML tag with attributes.", () => {
 describe("maybeChunkStringAsHtml()", () => {
   test("Should return noderized string when setting is enabled.", () => {
     expect(
-      maybeChunkStringAsHtml("A <em>fancy</em> string.")
+      maybeChunkStringAsHtml("A <em>fancy</em> string."),
     ).toMatchSnapshot();
   });
 
   test("Should correctly transform non-HTML string as character objects.", () => {
     expect(
-      maybeChunkStringAsHtml("A <em>fancy</em> string.", false)
+      maybeChunkStringAsHtml("A <em>fancy</em> string.", false),
     ).toMatchSnapshot();
   });
 });
@@ -79,7 +79,7 @@ describe("walkElementNodes()", () => {
 
     // "B" should have an original parent of the <span>.
     expect(thirdNode.originalParent).toMatchObject(
-      document.querySelector("span")
+      document.querySelector("span"),
     );
 
     // Includes each text node, and separate nodes for the parent elements themselves.

packages/typeit/__tests__/helpers/cleanUpSkipped.test.ts

@@ -0,0 +1,89 @@
+import { expect, it, vi } from "vitest";
+import cleanUpSkipped from "../../src/helpers/cleanUpSkipped";
+import { QueueMapPair } from "../../src/types";
+
+it("should clean up skipped items", () => {
+  const cleanUp = vi.fn();
+  const queueItems = [
+    [Symbol("1"), vi.fn()],
+    [Symbol("2"), vi.fn()],
+    [Symbol("3"), vi.fn()],
+    [Symbol("4"), vi.fn()],
+    [Symbol("5"), vi.fn()],
+  ] as QueueMapPair[];
+
+  cleanUpSkipped({
+    index: 1,
+    newIndex: 3,
+    queueItems,
+    cleanUp,
+  });
+
+  expect(cleanUp).toHaveBeenCalledTimes(2);
+  expect(cleanUp).toHaveBeenCalledWith(queueItems[2][0]);
+  expect(cleanUp).toHaveBeenCalledWith(queueItems[3][0]);
+});
+
+it("should clean up skipped items... again", () => {
+  const cleanUp = vi.fn();
+  const queueItems = [
+    [Symbol("1"), vi.fn()],
+    [Symbol("2"), vi.fn()],
+    [Symbol("3"), vi.fn()],
+    [Symbol("4"), vi.fn()],
+    [Symbol("5"), vi.fn()],
+  ] as QueueMapPair[];
+
+  cleanUpSkipped({
+    index: 0,
+    newIndex: 4,
+    queueItems,
+    cleanUp,
+  });
+
+  expect(cleanUp).toHaveBeenCalledTimes(4);
+  expect(cleanUp).toHaveBeenCalledWith(queueItems[1][0]);
+  expect(cleanUp).toHaveBeenCalledWith(queueItems[2][0]);
+  expect(cleanUp).toHaveBeenCalledWith(queueItems[3][0]);
+  expect(cleanUp).toHaveBeenCalledWith(queueItems[4][0]);
+});
+
+it("should clean up skipped items... again", () => {
+  const cleanUp = vi.fn();
+  const queueItems = [
+    [Symbol("1"), vi.fn()],
+    [Symbol("2"), vi.fn()],
+    [Symbol("3"), vi.fn()],
+    [Symbol("4"), vi.fn()],
+    [Symbol("5"), vi.fn()],
+  ] as QueueMapPair[];
+
+  cleanUpSkipped({
+    index: 0,
+    newIndex: 0,
+    queueItems,
+    cleanUp,
+  });
+
+  expect(cleanUp).toHaveBeenCalledTimes(0);
+});
+
+it("should clean up skipped items... again", () => {
+  const cleanUp = vi.fn();
+  const queueItems = [
+    [Symbol("1"), vi.fn()],
+    [Symbol("2"), vi.fn()],
+    [Symbol("3"), vi.fn()],
+    [Symbol("4"), vi.fn()],
+    [Symbol("5"), vi.fn()],
+  ] as QueueMapPair[];
+
+  cleanUpSkipped({
+    index: 4,
+    newIndex: 4,
+    queueItems,
+    cleanUp,
+  });
+
+  expect(cleanUp).toHaveBeenCalledTimes(0);
+});

packages/typeit/__tests__/helpers/countStepsToSelector.test.js

@@ -70,7 +70,7 @@ describe("moving toward the end", () => {
 
   it("calculates correctly with nested HTML", () => {
     let queue = buildQueueFromString(
-      `23<strong>goodbye<em>ok, then!</em>haha.</strong>whatever.`
+      `23<strong>goodbye<em>ok, then!</em>haha.</strong>whatever.`,
     );
 
     const result = countStepsToSelector({

packages/typeit/__tests__/helpers/expandTextNodes.test.js

@@ -40,7 +40,7 @@ describe("nested HTML", () => {
     expect(getTextNodes(element.querySelector("strong"))).toHaveLength(7);
     expect(getTextNodes(element.querySelector("strong em"))).toHaveLength(4);
     expect(element.innerHTML).toEqual(
-      "hello, <strong>there, <em>pal!</em></strong>"
+      "hello, <strong>there, <em>pal!</em></strong>",
     );
   });
 });

packages/typeit/__tests__/helpers/fireItem.test.js

@@ -75,7 +75,7 @@ describe("cursor should be paused", () => {
         options: {
           delay: 500,
         },
-      })
+      }),
     );
 
     expect(mockAnimation.cancel).toHaveBeenCalledTimes(1);
@@ -121,7 +121,7 @@ describe("cursor should NOT be paused", () => {
             frames: ["frame1", "frame2"],
           },
         },
-      })
+      }),
     );
 
     expect(mockAnimation.cancel).not.toHaveBeenCalledTimes(1);

packages/typeit/__tests__/helpers/insertIntoElement.test.js

@@ -31,7 +31,7 @@ describe("plain text", () => {
     insertIntoElement(el, document.createTextNode("x"));
 
     expect(document.body.innerHTML).toEqual(
-      '<span id="el">x<i class="ti-cursor">|</i></span>'
+      '<span id="el">x<i class="ti-cursor">|</i></span>',
     );
   });
 
@@ -48,12 +48,12 @@ describe("plain text", () => {
 
     insertIntoElement(el, em);
     expect(document.body.innerHTML).toEqual(
-      '<span id="el"><em></em><i class="ti-cursor">|</i></span>'
+      '<span id="el"><em></em><i class="ti-cursor">|</i></span>',
     );
 
     insertIntoElement(el, text);
     expect(document.body.innerHTML).toEqual(
-      '<span id="el"><em>a</em><i class="ti-cursor">|</i></span>'
+      '<span id="el"><em>a</em><i class="ti-cursor">|</i></span>',
     );
   });
 
@@ -62,7 +62,7 @@ describe("plain text", () => {
     const el = document.querySelector("#top");
 
     const spanEl = getParsedBody(
-      'a<em id="middle">b<strong id="bottom">c</strong></em>'
+      'a<em id="middle">b<strong id="bottom">c</strong></em>',
     );
     const nodes = walkElementNodes(expandTextNodes(spanEl));
 
@@ -71,7 +71,7 @@ describe("plain text", () => {
     });
 
     expect(document.body.innerHTML).toEqual(
-      '<span id="top">a<em id="middle">b<strong id="bottom">c</strong></em><i class="ti-cursor">|</i></span>'
+      '<span id="top">a<em id="middle">b<strong id="bottom">c</strong></em><i class="ti-cursor">|</i></span>',
     );
   });
 
@@ -91,7 +91,7 @@ describe("plain text", () => {
     });
 
     expect(document.body.innerHTML).toEqual(
-      '<span id="top">a<br>b<br>c<i class="ti-cursor">|</i></span>'
+      '<span id="top">a<br>b<br>c<i class="ti-cursor">|</i></span>',
     );
   });
 });