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

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

@@ -0,0 +1,100 @@
+import React from "react"
+import { describe, expect, it, vi, afterEach } from "vitest"
+import { render, waitFor, act } from "@testing-library/react"
+import { MemoryRouter, Routes, Route, useNavigate } from "react-router"
+import { MetaTag } from "./MetaTag.jsx"
+import { OneMgRouterContext } from "../context.jsx"
+import { RouterContext } from "./RouterDataProvider.jsx"
+
+function renderMetaTag({ matchedRoutes = [], routerData = {} } = {}) {
+    return render(
+        <MemoryRouter initialEntries={["/"]}>
+            <Routes>
+                <Route
+                    path="/"
+                    element={
+                        <OneMgRouterContext.Provider value={{ matchedRoutes }}>
+                            <RouterContext.Provider value={routerData}>
+                                <MetaTag />
+                            </RouterContext.Provider>
+                        </OneMgRouterContext.Provider>
+                    }
+                />
+            </Routes>
+        </MemoryRouter>
+    )
+}
+
+describe("MetaTag", () => {
+    afterEach(() => {
+        document.head.innerHTML = ""
+    })
+
+    it("renders without crashing when there are no matched routes", () => {
+        expect(() => renderMetaTag()).not.toThrow()
+    })
+
+    it("writes tags returned by a matched route's setMetaData into the document head", async () => {
+        const matchedRoutes = [
+            {
+                route: {
+                    component: {
+                        setMetaData: () => [<meta key="d" name="description" content="hello" />],
+                    },
+                },
+            },
+        ]
+        renderMetaTag({ matchedRoutes })
+        await waitFor(() => {
+            expect(document.head.querySelector('meta[name="description"]')).not.toBeNull()
+        })
+        expect(document.head.querySelector('meta[name="description"]').getAttribute("content")).toBe(
+            "hello"
+        )
+    })
+
+    it("keeps the placeholder meta tag when no route provides setMetaData", () => {
+        renderMetaTag({ matchedRoutes: [{ route: { component: {} } }] })
+        // Component should still render (Helmet/HelmetProvider tree),
+        // even with the single empty placeholder <meta> from useState.
+        expect(document.querySelector("head")).not.toBeNull()
+    })
+
+    it("re-runs setMetaData and clears previous tags when the location changes", async () => {
+        // A rerender() with a NEW <MemoryRouter initialEntries> does not
+        // navigate an already-mounted router -- initialEntries is only
+        // read on first mount. Confirmed directly: that approach left
+        // setMetaData called once even after "changing" the path.
+        // Navigating within one mounted router (via a real useNavigate
+        // call, triggered here through a button) is what actually
+        // changes useLocation() and re-fires MetaTag's effect.
+        const setMetaData = vi.fn(() => [<meta key="d" name="description" content="v1" />])
+        const matchedRoutes = [{ route: { component: { setMetaData } } }]
+
+        function NavButton() {
+            const navigate = useNavigate()
+            return (
+                <button type="button" onClick={() => navigate("/b")}>
+                    go
+                </button>
+            )
+        }
+
+        render(
+            <MemoryRouter initialEntries={["/a"]}>
+                <OneMgRouterContext.Provider value={{ matchedRoutes }}>
+                    <RouterContext.Provider value={{}}>
+                        <NavButton />
+                        <MetaTag />
+                    </RouterContext.Provider>
+                </OneMgRouterContext.Provider>
+            </MemoryRouter>
+        )
+        await waitFor(() => expect(setMetaData).toHaveBeenCalledTimes(1))
+
+        await act(async () => {
+            document.querySelector("button").click()
+        })
+        await waitFor(() => expect(setMetaData).toHaveBeenCalledTimes(2))
+    })
+})

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

@@ -0,0 +1,96 @@
+import React from "react";
+import type { Location, NavigateFunction, Params, RouteObject } from "react-router";
+/**
+ * Data a route fetcher produced, as exposed by useCurrentRouteData / useRouterData.
+ */
+export interface RouteData {
+    data: any;
+    error: any;
+    isFetching: boolean;
+    isFetched: boolean;
+    /**
+     * Refetches this route's data. Returns a promise when supplied by the
+     * provider; the initial-state placeholder is a synchronous no-op.
+     */
+    refetch?: (args?: any) => void | Promise<void>;
+    clear?: (wait?: number) => void;
+    /** Internal marker: set when the route defines no fetcher. Stripped before return. */
+    fetcherNotAvailable?: boolean;
+}
+/**
+ * Route data keyed by route key (pathname plus query string).
+ */
+export type RoutesData = Record<string, RouteData>;
+export declare const RouterContext: React.Context<RoutesData>;
+/**
+ * Global RouterDataProvider configuration.
+ */
+export interface RouterDataProviderConfig {
+    /** disableCaching disable caching of fetched data - default is false */
+    disableCaching?: boolean;
+}
+/**
+ * Arguments handed to a route's clientFetcher / serverFetcher.
+ */
+export interface RouterFetcherProps {
+    /** route object */
+    route: any;
+    /** the current location object, which represents the current URL in web browsers. */
+    location?: Location;
+    /** object of key/value pairs of the dynamic params from the current URL that were matched by the route path. */
+    params?: Params;
+    /** search parameters via URLSearchParams interface. */
+    searchParams?: URLSearchParams | any;
+    /** function to navigate to other pages based on response. */
+    navigate?: NavigateFunction;
+    /** Express request object, present on the server only. */
+    req?: any;
+    /** Express response object, present on the server only. */
+    res?: any;
+}
+/**
+ * Arguments for the server-side fetch pass.
+ */
+export interface ServerFetchDataProps {
+    /** routes Array */
+    routes: RouteObject[];
+    /** current url */
+    url: string;
+    /** Express request object */
+    req: any;
+    /** Express response object */
+    res?: any;
+}
+/**
+ * @description call this function to fetch data using fetchers defined in routes
+ * @param serverFetchDataProps
+ * @param fetcherArgs anything passed in fetcherArgs prop of RouterProvider
+ * @returns RoutesData
+ */
+export declare const serverDataFetcher: (serverFetchDataProps: ServerFetchDataProps, fetcherArgs?: Record<string, any>) => Promise<RoutesData>;
+/**
+ * Props accepted by {@link RouterDataProvider}.
+ */
+export interface RouterDataProviderProps {
+    /** Initial State of Data Provider - Mostly used to hydrate client with data from server */
+    initialState?: any;
+    children?: any;
+    /** anything passed in fetcherArgs is passed to all the fetcher functions */
+    fetcherArgs?: Record<string, any>;
+    /** Global router data provider config */
+    config?: RouterDataProviderConfig;
+}
+/**
+ * @description Render the child components with router context and execute data fetchers on path change
+ */
+export declare const RouterDataProvider: ({ children, initialState, fetcherArgs, config, }: RouterDataProviderProps) => any;
+/**
+ * @description returns current router context object with three values: data, error, isFetching, isFetched
+ * @throws If used outside RouterDataProvider Context
+ */
+export declare const useCurrentRouteData: () => RouteData;
+/**
+ * @description returns a router context object with data of all the fetchers in current route tree
+ * @throws If used outside RouterDataProvider Context
+ */
+export declare const useRouterData: () => RoutesData;