@forge/react 11.16.2-next.0-experimental-4a332af → 11.16.2-next.1-experimental-49a346a

package/CHANGELOG.md

@@ -1,13 +1,33 @@
 # @forge/react
 
-## 11.16.2-next.0-experimental-4a332af
+## 11.16.2-next.1-experimental-49a346a
+
+### Minor Changes
+
+- 8dc5a0c: Add routing components and hooks for use in full-page apps.
+
+  Added the following:
+
+  - `Router`
+  - `Route`
+  - `useNavigate`
+  - `useLocation`
+  - `useParams`
 
 ### Patch Changes
 
-- aa757af: Module add
-- Updated dependencies [aa757af]
+- Updated dependencies [3cf97c3]
+- Updated dependencies [f7f06c8]
 - Updated dependencies [dba5074]
-  - @forge/bridge@5.16.3-next.0-experimental-4a332af
+- Updated dependencies [fc55c83]
+  - @forge/bridge@5.17.0-next.6-experimental-49a346a
+
+## 11.16.2-next.1
+
+### Patch Changes
+
+- Updated dependencies [3cf97c3]
+  - @forge/bridge@5.17.0-next.1
 
 ## 11.16.2-next.0
 

package/out/router/components/ParamsContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ParamsContext: import("react").Context<Record<string, string> | null>;
+//# sourceMappingURL=ParamsContext.d.ts.map

package/out/router/components/ParamsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParamsContext.d.ts","sourceRoot":"","sources":["../../../src/router/components/ParamsContext.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa,wDAAqD,CAAC"}

package/out/router/components/ParamsContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParamsContext = void 0;
+const react_1 = require("react");
+exports.ParamsContext = (0, react_1.createContext)(null);

package/out/router/components/Route.d.ts

@@ -0,0 +1,7 @@
+import { ForgeChildren } from '../../types';
+export interface RouteProps {
+    path: string;
+    children: ForgeChildren;
+}
+export declare const Route: ({ path, children }: RouteProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Route.d.ts.map

package/out/router/components/Route.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Route.d.ts","sourceRoot":"","sources":["../../../src/router/components/Route.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,eAAO,MAAM,KAAK,uBAAwB,UAAU,mDAoBnD,CAAC"}

package/out/router/components/Route.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Route = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RouterContext_1 = require("./RouterContext");
+const ParamsContext_1 = require("./ParamsContext");
+const matchPath_1 = require("../utils/matchPath");
+const Route = ({ path, children }) => {
+    const context = (0, react_1.useContext)(RouterContext_1.RouterContext);
+    if (!context) {
+        throw new Error('Route must be used within a Router component');
+    }
+    const { location, hasMatchedRouteRef } = context;
+    if (hasMatchedRouteRef.current) {
+        return null;
+    }
+    const match = (0, matchPath_1.matchPath)(path, location.pathname);
+    if (!match) {
+        return null;
+    }
+    hasMatchedRouteRef.current = true;
+    return (0, jsx_runtime_1.jsx)(ParamsContext_1.ParamsContext.Provider, { value: match.params, children: children });
+};
+exports.Route = Route;

package/out/router/components/Router.d.ts

@@ -0,0 +1,7 @@
+import { ForgeChildren, ForgeNode } from '../../types';
+export interface RouterProps {
+    children: ForgeChildren;
+    fallback?: ForgeNode;
+}
+export declare const Router: ({ children, fallback }: RouterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Router.d.ts.map

package/out/router/components/Router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../../../src/router/components/Router.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,MAAM,2BAAmC,WAAW,4CA0ChE,CAAC"}

package/out/router/components/Router.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Router = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const bridge_1 = require("@forge/bridge");
+const RouterContext_1 = require("./RouterContext");
+const Router = ({ children, fallback = null }) => {
+    const [history, setHistory] = (0, react_1.useState)(null);
+    const [location, setLocation] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const hasMatchedRouteRef = (0, react_1.useRef)(false);
+    hasMatchedRouteRef.current = false;
+    (0, react_1.useEffect)(() => {
+        let unlisten;
+        bridge_1.view
+            .createHistory()
+            .then((history) => {
+            setHistory(history);
+            setLocation(history.location);
+            unlisten = history.listen((location) => {
+                // @ts-ignore - The history object returned by the bridge does not conform to the v5 types.
+                // Instead it uses v4 types, so we need to ignore this type error.
+                setLocation(location);
+            });
+        })
+            .catch(setError);
+        return () => {
+            unlisten?.();
+        };
+    }, []);
+    const routerContext = (0, react_1.useMemo)(() => {
+        if (!history || !location) {
+            return null;
+        }
+        return { history, location, hasMatchedRouteRef };
+    }, [history, location]);
+    if (error || !routerContext) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback });
+    }
+    return (0, jsx_runtime_1.jsx)(RouterContext_1.RouterContext.Provider, { value: routerContext, children: children });
+};
+exports.Router = Router;

package/out/router/components/RouterContext.d.ts

@@ -0,0 +1,9 @@
+import { MutableRefObject } from 'react';
+import type { History, Location } from 'history';
+export interface RouterContextValue {
+    history: History;
+    location: Location;
+    hasMatchedRouteRef: MutableRefObject<boolean>;
+}
+export declare const RouterContext: import("react").Context<RouterContextValue | null>;
+//# sourceMappingURL=RouterContext.d.ts.map

package/out/router/components/RouterContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouterContext.d.ts","sourceRoot":"","sources":["../../../src/router/components/RouterContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAC"}

package/out/router/components/RouterContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouterContext = void 0;
+const react_1 = require("react");
+exports.RouterContext = (0, react_1.createContext)(null);

package/out/router/components/__test__/Router.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Router.test.d.ts.map

package/out/router/components/__test__/Router.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.test.d.ts","sourceRoot":"","sources":["../../../../src/router/components/__test__/Router.test.tsx"],"names":[],"mappings":""}

package/out/router/components/__test__/Router.test.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const testUtils_1 = require("../../../__test__/testUtils");
+const reconcilerTestRenderer_1 = tslib_1.__importDefault(require("../../../__test__/reconcilerTestRenderer"));
+const Router_1 = require("../Router");
+const Route_1 = require("../Route");
+const __1 = require("../../..");
+const test_utils_1 = require("../../utils/test-utils");
+const mockCreateHistory = jest.fn(async () => (0, test_utils_1.createMockHistory)());
+jest.mock('@forge/bridge', () => ({
+    view: {
+        createHistory: () => mockCreateHistory()
+    }
+}));
+describe('Router', () => {
+    let bridgeCalls;
+    beforeAll(() => {
+        bridgeCalls = (0, testUtils_1.setupBridge)();
+    });
+    beforeEach(() => {
+        bridgeCalls.length = 0;
+        mockCreateHistory.mockClear();
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)());
+    });
+    afterEach(() => jest.clearAllMocks());
+    it('renders children after history is initialized', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home Page" }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Home Page');
+    });
+    it('renders fallback while history is loading', async () => {
+        mockCreateHistory.mockImplementation(() => new Promise(() => { }));
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { fallback: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Loading..." }), children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home Page" }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Loading...');
+    });
+    it('renders children when Route path matches', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { children: (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home Page" }) }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Home Page');
+    });
+    it('does not render Route children when path does not match', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { children: (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/settings", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Settings Page" }) }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc?.children).toHaveLength(0);
+    });
+    it('throws when Route is used outside of Router', async () => {
+        await expect(reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home" }) }))).rejects.toThrow('Route must be used within a Router component');
+    });
+    it('renders only the first matching Route when multiple routes match', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsxs)(Router_1.Router, { children: [(0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "First" }) }), (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Second" }) })] }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'First');
+        expect(forgeDoc?.children).toHaveLength(1);
+    });
+    it('renders the catchall Route when no other route matches', async () => {
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)('/unknown'));
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsxs)(Router_1.Router, { children: [(0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home" }) }), (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "*", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Not Found" }) })] }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Not Found');
+        expect(forgeDoc?.children).toHaveLength(1);
+    });
+    it('renders a specific Route over catchall when it matches', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsxs)(Router_1.Router, { children: [(0, jsx_runtime_1.jsx)(Route_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home" }) }), (0, jsx_runtime_1.jsx)(Route_1.Route, { path: "*", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Not Found" }) })] }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Home');
+        expect(forgeDoc?.children).toHaveLength(1);
+    });
+});

package/out/router/components/index.d.ts

@@ -0,0 +1,3 @@
+export { Router, type RouterProps } from './Router';
+export { Route, type RouteProps } from './Route';
+//# sourceMappingURL=index.d.ts.map

package/out/router/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/router/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/out/router/components/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Route = exports.Router = void 0;
+var Router_1 = require("./Router");
+Object.defineProperty(exports, "Router", { enumerable: true, get: function () { return Router_1.Router; } });
+var Route_1 = require("./Route");
+Object.defineProperty(exports, "Route", { enumerable: true, get: function () { return Route_1.Route; } });

package/out/router/hooks/__test__/useLocation.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useLocation.test.d.ts.map

package/out/router/hooks/__test__/useLocation.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocation.test.d.ts","sourceRoot":"","sources":["../../../../src/router/hooks/__test__/useLocation.test.tsx"],"names":[],"mappings":""}

package/out/router/hooks/__test__/useLocation.test.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const testUtils_1 = require("../../../__test__/testUtils");
+const reconcilerTestRenderer_1 = tslib_1.__importDefault(require("../../../__test__/reconcilerTestRenderer"));
+const Router_1 = require("../../components/Router");
+const useNavigate_1 = require("../useNavigate");
+const useLocation_1 = require("../useLocation");
+const components_1 = require("../../../components");
+const test_utils_1 = require("../../utils/test-utils");
+const mockCreateHistory = jest.fn(async () => (0, test_utils_1.createMockHistory)());
+jest.mock('@forge/bridge', () => ({
+    view: {
+        createHistory: () => mockCreateHistory()
+    }
+}));
+describe('useLocation', () => {
+    let bridgeCalls;
+    beforeAll(() => {
+        bridgeCalls = (0, testUtils_1.setupBridge)();
+    });
+    beforeEach(() => {
+        bridgeCalls.length = 0;
+        mockCreateHistory.mockClear();
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)());
+    });
+    afterEach(() => jest.clearAllMocks());
+    it('returns the current location', async () => {
+        const locationListener = jest.fn();
+        const LocationTest = () => {
+            const location = (0, useLocation_1.useLocation)();
+            (0, react_1.useEffect)(() => locationListener(location), [location]);
+            return (0, jsx_runtime_1.jsx)(components_1.Text, { children: "Location Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { children: (0, jsx_runtime_1.jsx)(LocationTest, {}) }));
+        expect(locationListener).toHaveBeenCalledWith(expect.objectContaining({
+            pathname: '/',
+            search: '',
+            hash: ''
+        }));
+    });
+    it('updates when navigation occurs', async () => {
+        const locationListener = jest.fn();
+        const LocationTest = () => {
+            const location = (0, useLocation_1.useLocation)();
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => locationListener(location), [location]);
+            (0, react_1.useEffect)(() => {
+                navigate('/about');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_1.Text, { children: "Location Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Router_1.Router, { children: (0, jsx_runtime_1.jsx)(LocationTest, {}) }));
+        expect(locationListener).toHaveBeenCalledWith(expect.objectContaining({ pathname: '/' }));
+        expect(locationListener).toHaveBeenCalledWith(expect.objectContaining({ pathname: '/about' }));
+    });
+});

package/out/router/hooks/__test__/useNavigate.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useNavigate.test.d.ts.map

package/out/router/hooks/__test__/useNavigate.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigate.test.d.ts","sourceRoot":"","sources":["../../../../src/router/hooks/__test__/useNavigate.test.tsx"],"names":[],"mappings":""}

package/out/router/hooks/__test__/useNavigate.test.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const testUtils_1 = require("../../../__test__/testUtils");
+const reconcilerTestRenderer_1 = tslib_1.__importDefault(require("../../../__test__/reconcilerTestRenderer"));
+const components_1 = require("../../components");
+const useNavigate_1 = require("../useNavigate");
+const useLocation_1 = require("../useLocation");
+const components_2 = require("../../../components");
+const test_utils_1 = require("../../utils/test-utils");
+let mockHistory;
+const mockCreateHistory = jest.fn(async (initialPath) => {
+    mockHistory = (0, test_utils_1.createMockHistory)(initialPath);
+    return mockHistory;
+});
+jest.mock('@forge/bridge', () => ({
+    view: {
+        createHistory: () => mockCreateHistory()
+    }
+}));
+describe('useNavigate', () => {
+    let bridgeCalls;
+    beforeAll(() => {
+        bridgeCalls = (0, testUtils_1.setupBridge)();
+    });
+    beforeEach(() => {
+        bridgeCalls.length = 0;
+        mockCreateHistory.mockClear();
+        mockCreateHistory.mockImplementation(async (initialPath) => {
+            mockHistory = (0, test_utils_1.createMockHistory)(initialPath);
+            return mockHistory;
+        });
+    });
+    afterEach(() => jest.clearAllMocks());
+    it('navigates to a new path using push by default', async () => {
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('/settings');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings');
+    });
+    it('navigates with replace when option is set', async () => {
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('/settings', { replace: true });
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.replace).toHaveBeenCalledWith('/settings');
+    });
+    it('navigates back in history when passed a negative number', async () => {
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate(-1);
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.go).toHaveBeenCalledWith(-1);
+    });
+    it('navigates forward in history when passed a positive number', async () => {
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate(2);
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.go).toHaveBeenCalledWith(2);
+    });
+    it('resolves relative paths against the current location', async () => {
+        mockCreateHistory.mockImplementation(async () => { mockHistory = (0, test_utils_1.createMockHistory)('/settings'); return mockHistory; });
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('personal');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings/personal');
+    });
+    it('resolves relative paths against updated location after navigation', async () => {
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            const location = (0, useLocation_1.useLocation)();
+            (0, react_1.useEffect)(() => {
+                if (location.pathname === '/') {
+                    navigate('/settings');
+                }
+                else if (location.pathname === '/settings') {
+                    navigate('personal');
+                }
+            }, [location, navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings');
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings/personal');
+    });
+    it('navigates up one level with ../', async () => {
+        mockCreateHistory.mockImplementation(async () => { mockHistory = (0, test_utils_1.createMockHistory)('/settings/general'); return mockHistory; });
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('../advanced');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings/advanced');
+    });
+    it('navigates up multiple levels with ../../', async () => {
+        mockCreateHistory.mockImplementation(async () => { mockHistory = (0, test_utils_1.createMockHistory)('/settings/general/details'); return mockHistory; });
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('../../other');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings/other');
+    });
+    it('resolves to root when navigating above the root with ../', async () => {
+        mockCreateHistory.mockImplementation(async () => { mockHistory = (0, test_utils_1.createMockHistory)('/settings'); return mockHistory; });
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('../../../../../../escaped');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/escaped');
+    });
+    it('resolves . as the current directory', async () => {
+        mockCreateHistory.mockImplementation(async () => { mockHistory = (0, test_utils_1.createMockHistory)('/settings/general'); return mockHistory; });
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('./advanced');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings/general/advanced');
+    });
+});

package/out/router/hooks/__test__/useParams.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useParams.test.d.ts.map

package/out/router/hooks/__test__/useParams.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParams.test.d.ts","sourceRoot":"","sources":["../../../../src/router/hooks/__test__/useParams.test.tsx"],"names":[],"mappings":""}

package/out/router/hooks/__test__/useParams.test.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const testUtils_1 = require("../../../__test__/testUtils");
+const reconcilerTestRenderer_1 = tslib_1.__importDefault(require("../../../__test__/reconcilerTestRenderer"));
+const components_1 = require("../../components");
+const useParams_1 = require("../useParams");
+const __1 = require("../../..");
+const test_utils_1 = require("../../utils/test-utils");
+const mockCreateHistory = jest.fn(async () => (0, test_utils_1.createMockHistory)());
+jest.mock('@forge/bridge', () => ({
+    view: {
+        createHistory: () => mockCreateHistory()
+    }
+}));
+describe('useParams', () => {
+    let bridgeCalls;
+    beforeAll(() => {
+        bridgeCalls = (0, testUtils_1.setupBridge)();
+    });
+    beforeEach(() => {
+        bridgeCalls.length = 0;
+        mockCreateHistory.mockClear();
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)());
+    });
+    afterEach(() => jest.clearAllMocks());
+    it('throws when used outside of Route', async () => {
+        const ComponentUsingParams = () => {
+            const params = (0, useParams_1.useParams)();
+            return (0, jsx_runtime_1.jsx)(__1.Text, { children: JSON.stringify(params) });
+        };
+        await expect(reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(ComponentUsingParams, {}))).rejects.toThrow('useParams must be used within a Route component');
+    });
+    it('renders route with no params', async () => {
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(components_1.Route, { path: "/", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Home" }) }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Home');
+    });
+    it('renders route with matched params', async () => {
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)('/posts/42'));
+        const Post = () => {
+            const { id } = (0, useParams_1.useParams)();
+            return (0, jsx_runtime_1.jsx)(__1.Text, { children: `Post ${id}` });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(components_1.Route, { path: "/posts/:id", children: (0, jsx_runtime_1.jsx)(Post, {}) }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Post 42');
+    });
+    it('renders route with multiple matched params', async () => {
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)('/posts/42/comments/7'));
+        const Comment = () => {
+            const { postId, commentId } = (0, useParams_1.useParams)();
+            return (0, jsx_runtime_1.jsx)(__1.Text, { children: `Post ${postId} Comment ${commentId}` });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(components_1.Route, { path: "/posts/:postId/comments/:commentId", children: (0, jsx_runtime_1.jsx)(Comment, {}) }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc).toHaveProperty('children[0].type', 'Text');
+        expect(forgeDoc).toHaveProperty('children[0].children[0].props.text', 'Post 42 Comment 7');
+    });
+    it('does not render route when dynamic path does not match', async () => {
+        mockCreateHistory.mockImplementation(async () => (0, test_utils_1.createMockHistory)('/users/alice'));
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(components_1.Route, { path: "/posts/:id", children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Post Detail" }) }) }));
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        expect(forgeDoc?.children).toHaveLength(0);
+    });
+});

package/out/router/hooks/useLocation.d.ts

@@ -0,0 +1,3 @@
+import type { Location } from 'history';
+export declare const useLocation: () => Location;
+//# sourceMappingURL=useLocation.d.ts.map

package/out/router/hooks/useLocation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocation.d.ts","sourceRoot":"","sources":["../../../src/router/hooks/useLocation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,WAAW,QAAO,QAQ9B,CAAC"}

package/out/router/hooks/useLocation.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocation = void 0;
+const react_1 = require("react");
+const RouterContext_1 = require("../components/RouterContext");
+const useLocation = () => {
+    const context = (0, react_1.useContext)(RouterContext_1.RouterContext);
+    if (!context) {
+        throw new Error('useLocation must be used within a Router component');
+    }
+    return context.location;
+};
+exports.useLocation = useLocation;

package/out/router/hooks/useNavigate.d.ts

@@ -0,0 +1,6 @@
+interface NavigateOptions {
+    replace?: boolean;
+}
+export declare const useNavigate: () => (to: string | number, options?: NavigateOptions) => void;
+export {};
+//# sourceMappingURL=useNavigate.d.ts.map

package/out/router/hooks/useNavigate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigate.d.ts","sourceRoot":"","sources":["../../../src/router/hooks/useNavigate.ts"],"names":[],"mappings":"AAGA,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAwBD,eAAO,MAAM,WAAW,aAUf,MAAM,GAAG,MAAM,YAAY,eAAe,SAkBlD,CAAC"}