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

package/dist/web-router/components/SplitInview.jsx

@@ -1,106 +1,95 @@
-import React, { useState, useEffect, useRef } from "react"
+import React, { useState, useEffect, useRef } from "react";
 
 // Load components 75% of viewport below the fold so they're ready by the time
 // the user scrolls to them. Matches react-loadable-visibility's default.
-const DEFAULT_ROOT_MARGIN = "0px 0px 75% 0px"
+const DEFAULT_ROOT_MARGIN = "0px 0px 75% 0px";
 
 // Shared IntersectionObserver for the default (no rootOptions) path.
 // Each observed element maps to a callback that fires once and unobserves.
-const callbacks = new Map()
-let sharedObserver = null
-
+const callbacks = new Map();
+let sharedObserver = null;
 function getSharedObserver() {
-    if (sharedObserver) return sharedObserver
-    sharedObserver = new IntersectionObserver(
-        (entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting || entry.intersectionRatio > 0) {
-                    const cb = callbacks.get(entry.target)
-                    if (cb) {
-                        cb()
-                        callbacks.delete(entry.target)
-                        sharedObserver.unobserve(entry.target)
-                    }
-                }
-            })
-        },
-        { rootMargin: DEFAULT_ROOT_MARGIN }
-    )
-    return sharedObserver
+  if (sharedObserver) return sharedObserver;
+  sharedObserver = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting || entry.intersectionRatio > 0) {
+        const cb = callbacks.get(entry.target);
+        if (cb) {
+          cb();
+          callbacks.delete(entry.target);
+          sharedObserver.unobserve(entry.target);
+        }
+      }
+    });
+  }, {
+    rootMargin: DEFAULT_ROOT_MARGIN
+  });
+  return sharedObserver;
 }
+const hasCustomOptions = o => o && typeof o === "object" && (o.root != null || o.rootMargin != null || o.threshold != null);
 
-const hasCustomOptions = (o) =>
-    o && typeof o === "object" && (o.root != null || o.rootMargin != null || o.threshold != null)
+/**
+ * Props for the internal visibility-deferring wrapper. Not part of the public
+ * surface: `split()` supplies these from its own options.
+ */
 
 /**
  * Defers rendering of children until the placeholder enters the viewport.
  * Once visible, it stays visible.
  *
  * On the server or when IntersectionObserver is unavailable, children render immediately.
- *
- * @param {Object} props
- * @param {React.ReactNode} props.fallback - Shown while the component is outside the viewport
- * @param {React.ReactNode} props.children - Rendered once the placeholder scrolls into view
- * @param {Object=} props.rootOptions - Optional IntersectionObserver options for parity with react-loadable-visibility
- * @param {Function=} props.onVisible - Called once when the placeholder enters the viewport
  */
-const SplitInview = ({ fallback = null, children, rootOptions, onVisible }) => {
-    const isServer = typeof window === "undefined"
-    const [isVisible, setIsVisible] = useState(() => {
-        if (isServer) return true
-        if (!window.IntersectionObserver) return true
-        return false
-    })
-    const ref = useRef(null)
-    // Freeze rootOptions at mount. IO options are not expected to change mid-lifecycle,
-    // so we avoid array/object identity churn (e.g. inline `threshold: [0, 0.5, 1]`).
-    const rootOptionsRef = useRef(rootOptions)
-    const onVisibleRef = useRef(onVisible)
-    onVisibleRef.current = onVisible
-
-    useEffect(() => {
-        if (isVisible) return
-        const node = ref.current
-        if (!node) return
-
-        const opts = rootOptionsRef.current
-        const fire = () => {
-            setIsVisible(true)
-            onVisibleRef.current?.()
+const SplitInview = ({
+  fallback = null,
+  children,
+  rootOptions,
+  onVisible
+}) => {
+  const isServer = typeof window === "undefined";
+  const [isVisible, setIsVisible] = useState(() => {
+    if (isServer) return true;
+    if (!window.IntersectionObserver) return true;
+    return false;
+  });
+  const ref = useRef(null);
+  // Freeze rootOptions at mount. IO options are not expected to change mid-lifecycle,
+  // so we avoid array/object identity churn (e.g. inline `threshold: [0, 0.5, 1]`).
+  const rootOptionsRef = useRef(rootOptions);
+  const onVisibleRef = useRef(onVisible);
+  onVisibleRef.current = onVisible;
+  useEffect(() => {
+    if (isVisible) return;
+    const node = ref.current;
+    if (!node) return;
+    const opts = rootOptionsRef.current;
+    const fire = () => {
+      setIsVisible(true);
+      onVisibleRef.current?.();
+    };
+    if (!hasCustomOptions(opts)) {
+      callbacks.set(node, fire);
+      getSharedObserver().observe(node);
+      return () => {
+        callbacks.delete(node);
+        if (sharedObserver) sharedObserver.unobserve(node);
+      };
+    }
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting || entry.intersectionRatio > 0) {
+          fire();
+          observer.unobserve(entry.target);
         }
-
-        if (!hasCustomOptions(opts)) {
-            callbacks.set(node, fire)
-            getSharedObserver().observe(node)
-            return () => {
-                callbacks.delete(node)
-                if (sharedObserver) sharedObserver.unobserve(node)
-            }
-        }
-
-        const observer = new IntersectionObserver(
-            (entries) => {
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting || entry.intersectionRatio > 0) {
-                        fire()
-                        observer.unobserve(entry.target)
-                    }
-                })
-            },
-            {
-                root: opts.root ?? null,
-                rootMargin: opts.rootMargin ?? DEFAULT_ROOT_MARGIN,
-                threshold: opts.threshold,
-            }
-        )
-
-        observer.observe(node)
-        return () => observer.disconnect()
-    }, [isVisible])
-
-    if (isVisible) return children
-
-    return <div ref={ref}>{fallback}</div>
-}
-
-export default SplitInview
+      });
+    }, {
+      root: opts.root ?? null,
+      rootMargin: opts.rootMargin ?? DEFAULT_ROOT_MARGIN,
+      threshold: opts.threshold
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [isVisible]);
+  if (isVisible) return children;
+  return <div ref={ref}>{fallback}</div>;
+};
+export default SplitInview;

package/dist/web-router/components/SplitInview.test.jsx

@@ -0,0 +1,112 @@
+import React from "react"
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest"
+import { render, screen, act } from "@testing-library/react"
+import SplitInview from "./SplitInview.jsx"
+
+// jsdom does not implement IntersectionObserver -- stub it here and
+// capture the callback/options so tests can simulate an intersection
+// firing without a real layout engine.
+let observedNodes
+let ioCallback
+let ioOptions
+
+class FakeIntersectionObserver {
+    constructor(callback, options) {
+        ioCallback = callback
+        ioOptions = options
+        observedNodes = []
+    }
+    observe(node) {
+        observedNodes.push(node)
+    }
+    unobserve(node) {
+        observedNodes = observedNodes.filter((n) => n !== node)
+    }
+    disconnect() {
+        observedNodes = []
+    }
+}
+
+function fireIntersection(node, isIntersecting = true) {
+    ioCallback([{ target: node, isIntersecting, intersectionRatio: isIntersecting ? 1 : 0 }])
+}
+
+beforeEach(() => {
+    vi.stubGlobal("IntersectionObserver", FakeIntersectionObserver)
+})
+
+afterEach(() => {
+    vi.unstubAllGlobals()
+})
+
+describe("SplitInview", () => {
+    it("renders the fallback placeholder before becoming visible", () => {
+        render(
+            <SplitInview fallback={<span>loading</span>}>
+                <span>real content</span>
+            </SplitInview>
+        )
+        expect(screen.getByText("loading")).toBeInTheDocument()
+        expect(screen.queryByText("real content")).not.toBeInTheDocument()
+    })
+
+    it("renders children once the observer reports an intersection", () => {
+        render(
+            <SplitInview fallback={<span>loading</span>}>
+                <span>real content</span>
+            </SplitInview>
+        )
+        const node = observedNodes[0]
+        act(() => {
+            fireIntersection(node, true)
+        })
+        expect(screen.getByText("real content")).toBeInTheDocument()
+    })
+
+    it("calls onVisible exactly once when it becomes visible", () => {
+        const onVisible = vi.fn()
+        render(
+            <SplitInview fallback={<span>loading</span>} onVisible={onVisible}>
+                <span>real content</span>
+            </SplitInview>
+        )
+        const node = observedNodes[0]
+        act(() => {
+            fireIntersection(node, true)
+            fireIntersection(node, true)
+        })
+        expect(onVisible).toHaveBeenCalledTimes(1)
+    })
+
+    it("ignores non-intersecting entries", () => {
+        render(
+            <SplitInview fallback={<span>loading</span>}>
+                <span>real content</span>
+            </SplitInview>
+        )
+        const node = observedNodes[0]
+        act(() => {
+            fireIntersection(node, false)
+        })
+        expect(screen.queryByText("real content")).not.toBeInTheDocument()
+    })
+
+    it("renders children immediately when IntersectionObserver is unavailable", () => {
+        vi.stubGlobal("IntersectionObserver", undefined)
+        render(
+            <SplitInview fallback={<span>loading</span>}>
+                <span>real content</span>
+            </SplitInview>
+        )
+        expect(screen.getByText("real content")).toBeInTheDocument()
+    })
+
+    it("uses a dedicated observer (not the shared default) when rootOptions are given", () => {
+        render(
+            <SplitInview fallback={<span>loading</span>} rootOptions={{ threshold: 0.5 }}>
+                <span>real content</span>
+            </SplitInview>
+        )
+        expect(ioOptions.threshold).toBe(0.5)
+    })
+})

package/dist/web-router/components/SsrRequestContext.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+/**
+ * Request-scoped SSR flags. `isBot` is true when the request User-Agent matched
+ * a known crawler, which forces `ssr: false` split components to render on the
+ * server anyway.
+ */
+export interface SsrRequestContextValue {
+    isBot: boolean;
+}
+export interface SsrRequestProviderProps {
+    value?: SsrRequestContextValue | null;
+    children?: any;
+}
+/**
+ * SSR request flags (e.g. crawler UA). Set by the document handler via SsrRequestProvider.
+ * Kept separate from Split.jsx so the server handler does not import lazy/Suspense code.
+ * `window.__CATALYST_IS_BOT__` is inlined for bots that execute JS so hydration matches the server.
+ */
+export declare const SsrRequestContext: React.Context<SsrRequestContextValue>;
+export declare function SsrRequestProvider({ value, children }: SsrRequestProviderProps): React.JSX.Element;

package/dist/web-router/components/SsrRequestContext.jsx

@@ -1,14 +1,24 @@
-import React, { createContext } from "react"
+import React, { createContext } from "react";
+
+/**
+ * Request-scoped SSR flags. `isBot` is true when the request User-Agent matched
+ * a known crawler, which forces `ssr: false` split components to render on the
+ * server anyway.
+ */
 
 /**
  * SSR request flags (e.g. crawler UA). Set by the document handler via SsrRequestProvider.
  * Kept separate from Split.jsx so the server handler does not import lazy/Suspense code.
  * `window.__CATALYST_IS_BOT__` is inlined for bots that execute JS so hydration matches the server.
  */
-export const SsrRequestContext = createContext({ isBot: false })
-
-export function SsrRequestProvider({ value, children }) {
-    return (
-        <SsrRequestContext.Provider value={value ?? { isBot: false }}>{children}</SsrRequestContext.Provider>
-    )
+export const SsrRequestContext = createContext({
+  isBot: false
+});
+export function SsrRequestProvider({
+  value,
+  children
+}) {
+  return <SsrRequestContext.Provider value={value ?? {
+    isBot: false
+  }}>{children}</SsrRequestContext.Provider>;
 }

package/dist/web-router/components/SsrRequestContext.test.jsx

@@ -0,0 +1,53 @@
+import React, { useContext } from "react"
+import { describe, expect, it } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { SsrRequestContext, SsrRequestProvider } from "./SsrRequestContext.jsx"
+
+function ContextReader() {
+    const value = useContext(SsrRequestContext)
+    return <div data-testid="value">{JSON.stringify(value)}</div>
+}
+
+describe("SsrRequestContext", () => {
+    it("defaults to { isBot: false }", () => {
+        expect(SsrRequestContext._currentValue).toEqual({ isBot: false })
+    })
+})
+
+describe("SsrRequestProvider", () => {
+    it("provides the given value to descendants", () => {
+        render(
+            <SsrRequestProvider value={{ isBot: true }}>
+                <ContextReader />
+            </SsrRequestProvider>
+        )
+        expect(screen.getByTestId("value")).toHaveTextContent(JSON.stringify({ isBot: true }))
+    })
+
+    it("falls back to { isBot: false } when value is null", () => {
+        render(
+            <SsrRequestProvider value={null}>
+                <ContextReader />
+            </SsrRequestProvider>
+        )
+        expect(screen.getByTestId("value")).toHaveTextContent(JSON.stringify({ isBot: false }))
+    })
+
+    it("falls back to { isBot: false } when value is undefined (not passed)", () => {
+        render(
+            <SsrRequestProvider>
+                <ContextReader />
+            </SsrRequestProvider>
+        )
+        expect(screen.getByTestId("value")).toHaveTextContent(JSON.stringify({ isBot: false }))
+    })
+
+    it("renders its children", () => {
+        render(
+            <SsrRequestProvider value={{ isBot: false }}>
+                <span>child content</span>
+            </SsrRequestProvider>
+        )
+        expect(screen.getByText("child content")).toBeInTheDocument()
+    })
+})

package/dist/web-router/context.d.ts

@@ -0,0 +1,15 @@
+import type { RouteMatch, RouteObject } from "react-router";
+/**
+ * Internal context shared among the router components. `matchedRoutes` is the
+ * match chain for the current location; the two callbacks are supplied by
+ * RouterDataProvider and consumed by useCurrentRouteData.
+ */
+export interface OneMgRouterContextValue {
+    matchedRoutes?: RouteMatch<string, RouteObject>[];
+    refetchData?: (route: RouteObject, routeKey: string) => (args?: Record<string, any>) => void | Promise<void>;
+    clear?: (routeKey: string) => (wait?: number) => void;
+}
+/**
+ * @description This is internal context made for sharing data among router components
+ */
+export declare const OneMgRouterContext: import("react").Context<OneMgRouterContextValue>;

package/dist/web-router/context.jsx

@@ -1,12 +1,12 @@
-import { createContext } from "react"
+import { createContext } from "react";
 
 /**
- * @typedef oneMgRouterContext
- * @property {import("react-router").RouteMatch<string, import("react-router").RouteObject>[]=} matchedRoutes
+ * Internal context shared among the router components. `matchedRoutes` is the
+ * match chain for the current location; the two callbacks are supplied by
+ * RouterDataProvider and consumed by useCurrentRouteData.
  */
 
 /**
  * @description This is internal context made for sharing data among router components
- * @type {import("react").Context<oneMgRouterContext>}
  */
-export const OneMgRouterContext = createContext({})
+export const OneMgRouterContext = createContext({});

package/dist/web-router/context.test.jsx

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest"
+import { OneMgRouterContext } from "./context.jsx"
+
+describe("OneMgRouterContext", () => {
+    it("is a React context with an empty object default value", () => {
+        expect(OneMgRouterContext.Provider).toBeDefined()
+        expect(OneMgRouterContext.Consumer).toBeDefined()
+        expect(OneMgRouterContext._currentValue).toEqual({})
+    })
+})

package/dist/web-router/utils/metaDataUtils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 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 declare function mergeHeadElements(...lists: any[]): any[];
+/**
+ * Deletes all elements in the head with a specific data attribute.
+ *
+ * @param attributeName - The name of the data attribute to search for.
+ * @param attributeValue - The specific value of the data attribute to match (optional).
+ */
+export declare function deleteHeadTagsByDataAttribute(attributeName: string, attributeValue?: string): void;
+/**
+ * Returns resolved array of meta data elements.
+ *
+ *
+ * @param matchedRoutes  - Array of all matches.
+ * @param routeData  - Data returned from Router.
+ * @returns List of all meta tags for the matched location.
+ */
+export declare function getMetaData(matchedRoutes: any, routeData: any): any[];