Merge pull request #2 from react18-tools/handle-updates

Handle updates

Author: mayank1513

lib/CHANGELOG.md

@@ -1,5 +1,23 @@
 # typingfx
 
+## 1.0.0
+
+### Major Changes
+
+- eb0bd92: Use children as last step - this is more intuitive. When animation stops (in case of repeat < Infinity), children, if truthy, will be seen rendered.
+
+### Minor Changes
+
+- 704bd9b: Add option to control cursor visibility after compliting the type animation
+
+### Patch Changes
+
+- bf52379: fix: Handle cursor not shown after anim end when it ends with a number (a delay indicator).
+- 378bbdc: refactor: split utils in separate file. Export right prop types.
+- 9aab8c8: Fix step and children updates.
+- 1771179: Handle edge cases
+- b862fb0: Export utils for better test coverage as animationed is not supported in vitest env.
+
 ## 0.0.1
 
 ### Patch Changes

lib/package.json

@@ -2,7 +2,7 @@
   "name": "typingfx",
   "author": "Mayank Kumar Chaudhari (https://mayank-chaudhari.vercel.app)",
   "private": false,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "description": "Customizable, smooth, and snappy typing animations for React — built for natural, human-like effects with minimal config.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",
@@ -37,7 +37,6 @@
     "esbuild-plugin-rdi": "^0.0.0",
     "esbuild-plugin-react18": "0.2.6",
     "esbuild-plugin-react18-css": "^0.0.4",
-    "jsdom": "^26.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tsup": "^8.4.0",
@@ -46,6 +45,7 @@
     "vitest": "^3.1.1"
   },
   "dependencies": {
+    "happy-dom": "^17.4.6",
     "r18gs": "^3.0.1"
   },
   "peerDependencies": {

lib/src/client/type-out/type-out.module.scss

@@ -41,15 +41,18 @@
   height: 0 !important;
 }
 
+.cursor .cursor,
+.wait.del,
 .wait.type {
-  animation-duration: var(--d);
   width: auto !important;
   height: auto !important;
 }
+
+.wait.type {
+  animation-duration: var(--d);
+}
 .wait.del {
   animation-duration: var(--r);
-  width: auto !important;
-  height: auto !important;
 }
 
 .cursor .cursor::after,

lib/src/client/type-out/type-out.test.tsx

@@ -1,7 +1,14 @@
-import { act, render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { TypeOut } from "./type-out"; // import the component
-import { describe, expect, it, vi } from "vitest";
+import { beforeAll, describe, expect, it } from "vitest";
 import styles from "./type-out.module.scss";
+import {
+  addAnimationListeners,
+  listElements,
+  setupTypingFX,
+  updateAfterDelAnim,
+  updateAfterTypeAnim,
+} from "./utils";
 
 describe("TypeOut Component", () => {
   // Test for Reduced Motion Preference
@@ -13,8 +20,12 @@ describe("TypeOut Component", () => {
   });
 
   // Test for Force Prop: Ensures animation is shown even with reduced motion preference
-  it("should override reduced-motion and show animation when force is true", () => {
-    const { container } = render(<TypeOut steps={["Hello World", "I am using TypingFX"]} force />);
+  it("should override reduced-motion and show animation when force is true", async ({ expect }) => {
+    const { container } = render(
+      <TypeOut steps={["Hello World", "I am using TypingFX"]} paused force />,
+    );
+
+    await screen.findByText("TypingFX");
     // Check if typing animation is applied even if reduced-motion is preferred
     expect(container.getElementsByClassName(styles.typeout).length).toBe(1);
   });
@@ -38,3 +49,29 @@ describe("TypeOut Component", () => {
     expect(container.classList).not.toContain(styles.cursor);
   });
 });
+
+describe.concurrent("Utils", () => {
+  let list: HTMLElement[][];
+  let typeOutEl: HTMLElement;
+  beforeAll(() => {
+    const { container } = render(<TypeOut steps={["Hello World", "I am using TypingFX"]} force />);
+    typeOutEl = container.getElementsByClassName(styles.typeout)[0] as HTMLElement;
+    list = listElements(typeOutEl);
+  });
+  it("setupTypingFX", ({ expect }) => {
+    expect(setupTypingFX(null)).toBe(null);
+  });
+
+  it("listElements", ({ expect }) => {
+    expect(list.length).not.toBe(0);
+  });
+
+  it("addAnimationListeners", ({ expect }) => {
+    addAnimationListeners(list, 1, false);
+    expect(list[0][0].classList).toContain(styles.hk);
+    updateAfterTypeAnim(list[0][0]);
+    expect(list[0][0].classList).not.toContain(styles.hk);
+    updateAfterDelAnim(list[0][0]);
+    expect(list[0][0].classList).toContain(styles.hk);
+  });
+});