kashi 3.0.0 → 3.0.1

package/README.md

@@ -101,31 +101,82 @@ Since the library was designed primarily to be used with vanilla JS, a _helper_
 > **Note**: There is TypeScript support, and even if your project doesn't use the JS superset, it should help VSCode and other editors provide autocomplete/code suggestions.
 
 ```tsx
-import { useEffect, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 import { Kashi, KashiProps } from "kashi";
 
+import { api } from "@/services/axios";
+
 // Example using Vite, React and TypeScript
-export const KashiWrapper = (props: Omit<KashiProps, "container">) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      new Kashi({
-        ...props,
-        container: ref.current,
-      });
-    }
+export const KashiWrapper = memo(
+  (props: Omit<KashiProps, "container"> & { url: string }) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      async function loadKashi() {
+        if (!ref.current) {
+          return;
+        }
+
+        if (!props.url) {
+          ref.current.innerHTML = "";
+          return;
+        }
+
+        try {
+          const { url, ...rest } = props;
+
+          const response = await api.get(url, { responseType: "blob" });
+
+          new Kashi({
+            ...rest,
+            file: response.data,
+            container: ref.current,
+          });
+        } catch (error) {
+          console.error("Error loading Kashi:", error);
+        }
+      }
 
-    return () => {
-      // Required to avoid duplication when React is in Strict Mode
-      if (ref.current) {
-        ref.current.innerHTML = "";
+      loadKashi();
+
+      return () => {
+        // Required to avoid duplication when React is in Strict Mode
+        if (ref.current) {
+          ref.current.innerHTML = "";
+        }
+      };
+    }, [ref.current, props]);
+
+    return <div className="kashi-wrapper" ref={ref} />;
+  },
+  (prevProps, nextProps) => {
+    function compareObjects(
+      obj1: Omit<KashiProps, "container">,
+      obj2: Omit<KashiProps, "container">,
+    ) {
+      const keys1 = Object.keys(obj1) as Array<
+        keyof Omit<KashiProps, "container">
+      >;
+      const keys2 = Object.keys(obj2) as Array<
+        keyof Omit<KashiProps, "container">
+      >;
+
+      if (keys1.length !== keys2.length) {
+        return false;
       }
-    };
-  }, [ref.current]);
 
-  return <div className="kashi-wrapper" ref={ref} />;
-};
+      for (const key of keys1) {
+        if (obj1[key] !== obj2[key]) {
+          return false;
+        }
+      }
+
+      return true;
+    }
+
+    return compareObjects(prevProps, nextProps);
+  },
+);
 ```
 
 ## 🧐 Constructor properties
@@ -149,7 +200,7 @@ Here's an example:
 
 ```html
 <div id="kashi">
-  <sp>
+  <p>
     <span data-time="00:17.55" data-ms-time="17550" data-empty="false" data-aria-current="false">
       Telling myself, "I won't go there"
     </span>
@@ -174,7 +225,7 @@ Here's an example:
       Souls tied, intertwined by our pride and guilt
     </span>
     <!-- ... -->
-  </sp>
+  </p>
 </div>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kashi",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Singing at the top of my lungs",
   "type": "module",
   "author": "lucasmc64",