catalyst-core 0.3.0-beta.5 → 0.3.0-canary.2

package/dist/web-router/utils/metaDataUtils.jsx

@@ -1,119 +1,119 @@
-import React from "react"
+import React from "react";
 /**
  * Merges multiple lists of head elements, ensuring that later lists override earlier ones in case of duplicates.
  * Handles all types of head elements, including title, meta, link, etc.
  *
- * @param {...Array<JSX.Element>} lists - Multiple lists of JSX head elements, where the first argument is the parent and the rest are children in order.
- * @returns {Array<JSX.Element>} - The combined list with later lists overriding duplicates from earlier ones.
+ * @param lists - Multiple lists of JSX head elements, where the first argument is the parent and the rest are children in order.
+ * @returns The combined list with later lists overriding duplicates from earlier ones.
  */
 export function mergeHeadElements(...lists) {
-    const elementMap = new Map()
+  const elementMap = new Map();
 
-    /**
-     * Function to get a unique key for a head element based on its type and attributes.
-     * @param {JSX.Element} element - The head element from which to derive a key.
-     * @returns {string} - A unique key representing the element.
-     */
-    const getKey = (element) => {
-        const { type, props } = element
-
-        if (type === "title") {
-            return "title" // Only one title should exist in a document
-        }
+  /**
+   * Function to get a unique key for a head element based on its type and attributes.
+   * @param element - The head element from which to derive a key.
+   * @returns A unique key representing the element.
+   */
+  const getKey = element => {
+    const {
+      type,
+      props
+    } = element;
+    if (type === "title") {
+      return "title"; // Only one title should exist in a document
+    }
 
-        // For meta tags, use 'name' or 'property' as unique identifiers
-        if (type === "meta") {
-            if (props.charset) {
-                return "charset" // Charset should be unique in a document
-            }
-            return props.name || props.property || props["http-equiv"] || props.httpEquiv || ""
-        }
+    // For meta tags, use 'name' or 'property' as unique identifiers
+    if (type === "meta") {
+      if (props.charset) {
+        return "charset"; // Charset should be unique in a document
+      }
+      return props.name || props.property || props["http-equiv"] || props.httpEquiv || "";
+    }
 
-        // For link tags, use 'rel' as a unique identifier
-        // if (type === "link") {
-        //   return props.rel || "";
-        // }
+    // For link tags, use 'rel' as a unique identifier
+    // if (type === "link") {
+    //   return props.rel || "";
+    // }
 
-        // Create a unique representation for other types of elements
-        return `${type}:${Object.entries(props)
-            .map(([key, value]) => `${key}=${value}`)
-            .join(",")}`
-    }
+    // Create a unique representation for other types of elements
+    return `${type}:${Object.entries(props).map(([key, value]) => `${key}=${value}`).join(",")}`;
+  };
 
-    // Loop through all the lists, ensuring later lists override earlier ones
-    lists?.forEach((list) => {
-        list?.forEach((element) => {
-            const key = getKey(element)
-            if (key) {
-                elementMap.set(key, element) // Overwrite earlier elements with later ones
-            }
-        })
-    })
+  // Loop through all the lists, ensuring later lists override earlier ones
+  lists?.forEach(list => {
+    list?.forEach(element => {
+      const key = getKey(element);
+      if (key) {
+        elementMap.set(key, element); // Overwrite earlier elements with later ones
+      }
+    });
+  });
 
-    // Return the combined list of head elements
-    return Array.from(elementMap.values())
+  // Return the combined list of head elements
+  return Array.from(elementMap.values());
 }
 
 /**
  * Deletes all elements in the head with a specific data attribute.
  *
- * @param {string} attributeName - The name of the data attribute to search for.
- * @param {string} [attributeValue] - The specific value of the data attribute to match (optional).
+ * @param attributeName - The name of the data attribute to search for.
+ * @param attributeValue - The specific value of the data attribute to match (optional).
  */
 export function deleteHeadTagsByDataAttribute(attributeName, attributeValue) {
-    const head = document.head
-    const tagsToDelete = []
+  const head = document.head;
+  const tagsToDelete = [];
 
-    // Iterate over all children in the head section
-    Array.from(head.children).forEach((element) => {
-        const hasAttribute = element.hasAttribute(`data-${attributeName}`)
+  // Iterate over all children in the head section
+  Array.from(head.children).forEach(element => {
+    const hasAttribute = element.hasAttribute(`data-${attributeName}`);
 
-        // If a specific attribute value is provided, check for it
-        if (attributeValue && hasAttribute) {
-            const matchesValue = element.getAttribute(`data-${attributeName}`) === attributeValue
-            if (matchesValue) {
-                tagsToDelete.push(element)
-            }
-        } else if (hasAttribute) {
-            // If no specific value, just check if the attribute is present
-            tagsToDelete.push(element)
-        }
-    })
+    // If a specific attribute value is provided, check for it
+    if (attributeValue && hasAttribute) {
+      const matchesValue = element.getAttribute(`data-${attributeName}`) === attributeValue;
+      if (matchesValue) {
+        tagsToDelete.push(element);
+      }
+    } else if (hasAttribute) {
+      // If no specific value, just check if the attribute is present
+      tagsToDelete.push(element);
+    }
+  });
 
-    // Delete all the tags that matched the attribute condition
-    tagsToDelete.forEach((tag) => {
-        head.removeChild(tag)
-    })
+  // Delete all the tags that matched the attribute condition
+  tagsToDelete.forEach(tag => {
+    head.removeChild(tag);
+  });
 }
 
 /**
  * Returns resolved array of meta data elements.
  *
  *
- * @param {Array<Match>} matchedRoutes  - Array of all matches.
- * @param {Object} routeData  - Data returned from Router.
- * @returns {Array<JSX.Element>} - List of all meta tags for the matched location.
+ * @param matchedRoutes  - Array of all matches.
+ * @param routeData  - Data returned from Router.
+ * @returns List of all meta tags for the matched location.
  */
 
 export function getMetaData(matchedRoutes, routeData) {
-    let allTags = []
-    try {
-        matchedRoutes?.forEach?.((match) => {
-            const setMetaData = match?.route?.component?.setMetaData
-            if (setMetaData) {
-                let tags = setMetaData(routeData)
-                allTags = [...allTags, tags]
-            }
-        })
-        if (Array.isArray(allTags) && allTags.length > 0) {
-            let mergedTags = mergeHeadElements(...allTags)
-            allTags = mergedTags.map((el, index) =>
-                React.cloneElement(el, { "data-catalyst": true, key: index })
-            )
-        }
-    } catch (er) {
-        console.log("meta tags error is ===>", er)
+  let allTags = [];
+  try {
+    matchedRoutes?.forEach?.(match => {
+      const setMetaData = match?.route?.component?.setMetaData;
+      if (setMetaData) {
+        let tags = setMetaData(routeData);
+        allTags = [...allTags, tags];
+      }
+    });
+    if (Array.isArray(allTags) && allTags.length > 0) {
+      let mergedTags = mergeHeadElements(...allTags);
+      allTags = mergedTags.map((el, index) => React.cloneElement(el, {
+        "data-catalyst": true,
+        key: index
+      }));
     }
-
-    return allTags
+  } catch (er) {
+    console.log("meta tags error is ===>", er);
+  }
+  return allTags;
 }

package/dist/web-router/utils/metaDataUtils.test.jsx

@@ -0,0 +1,188 @@
+import React from "react"
+import { describe, expect, it, vi, afterEach } from "vitest"
+import { mergeHeadElements, deleteHeadTagsByDataAttribute, getMetaData } from "./metaDataUtils.jsx"
+
+describe("mergeHeadElements", () => {
+    it("returns an empty array when given no lists", () => {
+        expect(mergeHeadElements()).toEqual([])
+    })
+
+    it("keeps only the last title element when multiple titles are given", () => {
+        const first = <title key="a">First</title>
+        const second = <title key="b">Second</title>
+        const result = mergeHeadElements([first], [second])
+        expect(result).toHaveLength(1)
+        expect(result[0].props.children).toBe("Second")
+    })
+
+    it("dedupes meta tags by name, keeping the later one", () => {
+        const first = <meta name="description" content="first" />
+        const second = <meta name="description" content="second" />
+        const result = mergeHeadElements([first], [second])
+        expect(result).toHaveLength(1)
+        expect(result[0].props.content).toBe("second")
+    })
+
+    it("dedupes meta tags by property when name is absent", () => {
+        const first = <meta property="og:title" content="first" />
+        const second = <meta property="og:title" content="second" />
+        const result = mergeHeadElements([first, second])
+        expect(result).toHaveLength(1)
+        expect(result[0].props.content).toBe("second")
+    })
+
+    it("treats charset meta tags as a single unique slot", () => {
+        const first = <meta charSet="utf-8" charset="utf-8" />
+        const second = <meta charSet="iso-8859-1" charset="iso-8859-1" />
+        const result = mergeHeadElements([first], [second])
+        expect(result).toHaveLength(1)
+    })
+
+    it("keeps distinct meta tags with different names", () => {
+        const description = <meta name="description" content="desc" />
+        const keywords = <meta name="keywords" content="kw" />
+        const result = mergeHeadElements([description, keywords])
+        expect(result).toHaveLength(2)
+    })
+
+    it("preserves order across multiple non-overlapping lists", () => {
+        const a = <meta name="a" content="1" />
+        const b = <meta name="b" content="2" />
+        const c = <meta name="c" content="3" />
+        const result = mergeHeadElements([a], [b], [c])
+        expect(result.map((el) => el.props.name)).toEqual(["a", "b", "c"])
+    })
+
+    it("ignores null/undefined lists mixed in with real ones", () => {
+        const a = <meta name="a" content="1" />
+        const result = mergeHeadElements(null, [a], undefined)
+        expect(result).toHaveLength(1)
+    })
+
+    it("keys non-title/non-meta elements (e.g. link) by type + serialized props, so later ones override", () => {
+        const first = <link rel="canonical" href="https://a.example" />
+        const second = <link rel="canonical" href="https://a.example" data-x="2" />
+        // different serialized props -> different keys -> both kept
+        const kept = mergeHeadElements([first], [second])
+        expect(kept).toHaveLength(2)
+
+        // identical props -> same key -> later overrides
+        const dupA = <link rel="stylesheet" href="/x.css" />
+        const dupB = <link rel="stylesheet" href="/x.css" />
+        const deduped = mergeHeadElements([dupA], [dupB])
+        expect(deduped).toHaveLength(1)
+        expect(deduped[0]).toBe(dupB)
+    })
+})
+
+describe("deleteHeadTagsByDataAttribute", () => {
+    afterEach(() => {
+        document.head.innerHTML = ""
+    })
+
+    it("removes every element carrying the given data attribute", () => {
+        document.head.innerHTML = `
+            <meta data-catalyst="true" name="a">
+            <meta data-catalyst="true" name="b">
+            <meta name="c">
+        `
+        deleteHeadTagsByDataAttribute("catalyst")
+        expect(document.head.querySelectorAll("[data-catalyst]")).toHaveLength(0)
+        expect(document.head.querySelectorAll("meta")).toHaveLength(1)
+    })
+
+    it("removes only elements matching a specific attribute value when given one", () => {
+        document.head.innerHTML = `
+            <meta data-catalyst="route-a" name="a">
+            <meta data-catalyst="route-b" name="b">
+        `
+        deleteHeadTagsByDataAttribute("catalyst", "route-a")
+        expect(document.head.querySelector('[data-catalyst="route-a"]')).toBeNull()
+        expect(document.head.querySelector('[data-catalyst="route-b"]')).not.toBeNull()
+    })
+
+    it("does nothing when no elements match", () => {
+        document.head.innerHTML = `<meta name="untouched">`
+        expect(() => deleteHeadTagsByDataAttribute("catalyst")).not.toThrow()
+        expect(document.head.querySelectorAll("meta")).toHaveLength(1)
+    })
+})
+
+describe("getMetaData", () => {
+    it("returns an empty array when matchedRoutes is undefined", () => {
+        expect(getMetaData(undefined, {})).toEqual([])
+    })
+
+    it("returns an empty array when no route defines setMetaData", () => {
+        const matchedRoutes = [{ route: { component: {} } }]
+        expect(getMetaData(matchedRoutes, {})).toEqual([])
+    })
+
+    it("calls each route's setMetaData with the route data and merges results", () => {
+        const routeData = { title: "Home" }
+        const matchedRoutes = [
+            {
+                route: {
+                    component: {
+                        setMetaData: (data) => [<title key="t">{data.title}</title>],
+                    },
+                },
+            },
+        ]
+        const result = getMetaData(matchedRoutes, routeData)
+        expect(result).toHaveLength(1)
+        expect(result[0].props.children).toBe("Home")
+    })
+
+    it("stamps every returned element with data-catalyst and a stable key", () => {
+        const matchedRoutes = [
+            {
+                route: {
+                    component: {
+                        setMetaData: () => [
+                            <meta key="a" name="a" content="1" />,
+                            <meta key="b" name="b" content="2" />,
+                        ],
+                    },
+                },
+            },
+        ]
+        const result = getMetaData(matchedRoutes, {})
+        expect(result).toHaveLength(2)
+        for (const el of result) {
+            expect(el.props["data-catalyst"]).toBe(true)
+        }
+    })
+
+    it("merges tags from multiple matched routes, later routes winning on conflict", () => {
+        const matchedRoutes = [
+            {
+                route: { component: { setMetaData: () => [<meta key="a" name="shared" content="parent" />] } },
+            },
+            {
+                route: { component: { setMetaData: () => [<meta key="b" name="shared" content="child" />] } },
+            },
+        ]
+        const result = getMetaData(matchedRoutes, {})
+        expect(result).toHaveLength(1)
+        expect(result[0].props.content).toBe("child")
+    })
+
+    it("swallows errors from a misbehaving setMetaData and returns an empty array", () => {
+        const consoleSpy = vi.spyOn(console, "log").mockImplementation(() => {})
+        const matchedRoutes = [
+            {
+                route: {
+                    component: {
+                        setMetaData: () => {
+                            throw new Error("boom")
+                        },
+                    },
+                },
+            },
+        ]
+        expect(() => getMetaData(matchedRoutes, {})).not.toThrow()
+        expect(getMetaData(matchedRoutes, {})).toEqual([])
+        consoleSpy.mockRestore()
+    })
+})

package/dist/web-router/vitest.setup.js

@@ -0,0 +1,12 @@
+import "@testing-library/jest-dom/vitest"
+import { cleanup } from "@testing-library/react"
+import { afterEach } from "vitest"
+
+// RTL only auto-cleans up between tests when a test framework's globals
+// are detected in a way it recognizes (works out of the box with Jest);
+// under Vitest it needs to be wired explicitly, or renders from one test
+// leak into the next and multi-render tests using the same testids across
+// `it` blocks start finding duplicate elements.
+afterEach(() => {
+    cleanup()
+})