@openwebf/react-router 0.24.2 → 1.0.0

package/dist/index.esm.js

@@ -1,5 +1,4 @@
-import React, { useRef, useMemo, useState, createContext, useContext, useEffect, Children, isValidElement } from 'react';
-import { createWebFComponent } from '@openwebf/react-core-ui';
+import React, { useRef, useMemo, useState, useEffect, createContext, useContext, Children, isValidElement } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -34,14 +33,347 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 /**
- * Router management module
+ * Platform detection and abstraction layer
  *
- * Encapsulates routing navigation functionality with route guard mechanism for permission checks
+ * Detects whether running in WebF or standard browser environment
+ * and provides a unified interface for platform-specific APIs.
+ *
+ * WebF types are provided by @openwebf/webf-enterprise-typings package.
+ * In browser environments, the router works without WebF types.
  */
-function getHybridHistory() {
+/**
+ * Get the WebF hybridHistory object if available
+ * Types come from @openwebf/webf-enterprise-typings peer dependency
+ */
+function getWebFHybridHistory() {
     var _a;
     return (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.webf) === null || _a === void 0 ? void 0 : _a.hybridHistory;
 }
+/**
+ * Detect the current platform
+ */
+function detectPlatform() {
+    // Check for WebF's hybridHistory API
+    if (getWebFHybridHistory()) {
+        return 'webf';
+    }
+    return 'browser';
+}
+/**
+ * Check if running in WebF environment
+ */
+function isWebF() {
+    return detectPlatform() === 'webf';
+}
+/**
+ * Check if running in browser environment
+ */
+function isBrowser() {
+    return detectPlatform() === 'browser';
+}
+/**
+ * Get the current platform type (evaluated once at module load)
+ */
+const platform = detectPlatform();
+
+/**
+ * Browser History Adapter
+ *
+ * Provides a unified history API that mimics WebF's hybridHistory
+ * but uses the standard browser History API under the hood.
+ *
+ * Supports SSR/Node.js environments by providing memory-based fallback.
+ */
+/**
+ * Check if we're in a browser environment
+ */
+function hasWindow() {
+    return typeof window !== 'undefined' && typeof window.history !== 'undefined';
+}
+/**
+ * Generate a unique key for history entries
+ */
+function generateKey() {
+    return Math.random().toString(36).substring(2, 10);
+}
+/**
+ * Browser History implementation that provides WebF-like navigation APIs
+ */
+class BrowserHistoryAdapter {
+    constructor() {
+        this._stack = [];
+        this._currentIndex = -1;
+        this._listeners = new Set();
+        this._initialized = false;
+        this._initialize();
+    }
+    _initialize() {
+        if (this._initialized)
+            return;
+        this._initialized = true;
+        // SSR/Node.js fallback - use memory-based history
+        if (!hasWindow()) {
+            const key = generateKey();
+            this._stack = [{ path: '/', state: null, key }];
+            this._currentIndex = 0;
+            return;
+        }
+        // Initialize with current location
+        const initialPath = window.location.pathname || '/';
+        const initialState = window.history.state;
+        if (initialState === null || initialState === void 0 ? void 0 : initialState.key) {
+            // Restore from existing state
+            this._stack = [{ path: initialState.path, state: initialState.state, key: initialState.key }];
+            this._currentIndex = 0;
+        }
+        else {
+            // Fresh start
+            const key = generateKey();
+            const entry = { path: initialPath, state: null, key };
+            this._stack = [entry];
+            this._currentIndex = 0;
+            // Replace current state with our tracked state
+            window.history.replaceState({ path: initialPath, state: null, key, index: 0 }, '', initialPath);
+        }
+        // Listen to popstate events
+        window.addEventListener('popstate', this._handlePopState.bind(this));
+    }
+    _handlePopState(event) {
+        const state = event.state;
+        if (state === null || state === void 0 ? void 0 : state.key) {
+            // Find the entry in our stack
+            const index = this._stack.findIndex((e) => e.key === state.key);
+            if (index !== -1) {
+                this._currentIndex = index;
+            }
+        }
+        // Dispatch custom event for Routes component
+        this._dispatchRouterChangeEvent((state === null || state === void 0 ? void 0 : state.path) || window.location.pathname, state === null || state === void 0 ? void 0 : state.state, 'didPopNext');
+    }
+    _dispatchRouterChangeEvent(path, state, kind) {
+        if (typeof document === 'undefined')
+            return;
+        const event = new CustomEvent('hybridrouterchange', {
+            bubbles: true,
+            composed: true,
+            detail: { path, state, kind },
+        });
+        event.path = path;
+        event.state = state;
+        event.kind = kind;
+        document.dispatchEvent(event);
+    }
+    /**
+     * Get the current state
+     */
+    get state() {
+        var _a, _b;
+        return (_b = (_a = this._stack[this._currentIndex]) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : null;
+    }
+    /**
+     * Get the current path
+     */
+    get path() {
+        var _a, _b;
+        return (_b = (_a = this._stack[this._currentIndex]) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : '/';
+    }
+    /**
+     * Get the full navigation stack
+     */
+    get buildContextStack() {
+        // Return entries up to current index (simulating WebF's stack behavior)
+        return this._stack.slice(0, this._currentIndex + 1);
+    }
+    /**
+     * Push a new named route (WebF-style)
+     */
+    pushNamed(path, options) {
+        var _a;
+        const key = generateKey();
+        const state = (_a = options === null || options === void 0 ? void 0 : options.arguments) !== null && _a !== void 0 ? _a : null;
+        const newIndex = this._currentIndex + 1;
+        // Truncate forward stack if we're in the middle
+        this._stack = this._stack.slice(0, newIndex);
+        const entry = { path, state, key };
+        this._stack.push(entry);
+        this._currentIndex = newIndex;
+        if (hasWindow()) {
+            window.history.pushState({ path, state, key, index: newIndex }, '', path);
+        }
+        this._dispatchRouterChangeEvent(path, state, 'didPush');
+    }
+    /**
+     * Replace the current route (WebF-style)
+     */
+    pushReplacementNamed(path, options) {
+        var _a;
+        const key = generateKey();
+        const state = (_a = options === null || options === void 0 ? void 0 : options.arguments) !== null && _a !== void 0 ? _a : null;
+        const entry = { path, state, key };
+        this._stack[this._currentIndex] = entry;
+        if (hasWindow()) {
+            window.history.replaceState({ path, state, key, index: this._currentIndex }, '', path);
+        }
+        this._dispatchRouterChangeEvent(path, state, 'didPush');
+    }
+    /**
+     * Go back in history
+     */
+    back() {
+        var _a;
+        if (hasWindow()) {
+            window.history.back();
+        }
+        else if (this._currentIndex > 0) {
+            // Memory-based fallback for SSR
+            this._currentIndex--;
+            const entry = this._stack[this._currentIndex];
+            this._dispatchRouterChangeEvent((_a = entry === null || entry === void 0 ? void 0 : entry.path) !== null && _a !== void 0 ? _a : '/', entry === null || entry === void 0 ? void 0 : entry.state, 'didPopNext');
+        }
+    }
+    /**
+     * Pop the current route (Flutter-style)
+     */
+    pop(result) {
+        var _a;
+        if (this._currentIndex > 0) {
+            if (hasWindow()) {
+                window.history.back();
+            }
+            else {
+                // Memory-based fallback for SSR
+                this._currentIndex--;
+                const entry = this._stack[this._currentIndex];
+                this._dispatchRouterChangeEvent((_a = entry === null || entry === void 0 ? void 0 : entry.path) !== null && _a !== void 0 ? _a : '/', entry === null || entry === void 0 ? void 0 : entry.state, 'didPopNext');
+            }
+        }
+    }
+    /**
+     * Pop routes until reaching a specific route
+     */
+    popUntil(targetPath) {
+        var _a;
+        const targetIndex = this._stack.findIndex((e) => e.path === targetPath);
+        if (targetIndex !== -1 && targetIndex < this._currentIndex) {
+            if (hasWindow()) {
+                const delta = targetIndex - this._currentIndex;
+                window.history.go(delta);
+            }
+            else {
+                // Memory-based fallback for SSR
+                this._currentIndex = targetIndex;
+                const entry = this._stack[this._currentIndex];
+                this._dispatchRouterChangeEvent((_a = entry === null || entry === void 0 ? void 0 : entry.path) !== null && _a !== void 0 ? _a : '/', entry === null || entry === void 0 ? void 0 : entry.state, 'didPopNext');
+            }
+        }
+    }
+    /**
+     * Pop the current route and push a new route
+     */
+    popAndPushNamed(path, options) {
+        var _a;
+        const key = generateKey();
+        const state = (_a = options === null || options === void 0 ? void 0 : options.arguments) !== null && _a !== void 0 ? _a : null;
+        const entry = { path, state, key };
+        this._stack[this._currentIndex] = entry;
+        if (hasWindow()) {
+            window.history.replaceState({ path, state, key, index: this._currentIndex }, '', path);
+        }
+        this._dispatchRouterChangeEvent(path, state, 'didPush');
+    }
+    /**
+     * Push a new route and remove routes until a specific route
+     */
+    pushNamedAndRemoveUntil(state, path, untilPath) {
+        const targetIndex = this._stack.findIndex((e) => e.path === untilPath);
+        if (targetIndex !== -1) {
+            // Truncate stack to target and add new entry
+            this._stack = this._stack.slice(0, targetIndex + 1);
+            this._currentIndex = targetIndex;
+        }
+        this.pushNamed(path, { arguments: state });
+    }
+    /**
+     * Push a new route and remove all routes until a specific route (Flutter-style)
+     */
+    pushNamedAndRemoveUntilRoute(newPath, untilPath, options) {
+        this.pushNamedAndRemoveUntil(options === null || options === void 0 ? void 0 : options.arguments, newPath, untilPath);
+    }
+    /**
+     * Check if we can go back
+     */
+    canPop() {
+        return this._currentIndex > 0;
+    }
+    /**
+     * Pop if possible, return success status
+     */
+    maybePop(result) {
+        if (this.canPop()) {
+            this.pop(result);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Push state (web-style)
+     */
+    pushState(state, name) {
+        this.pushNamed(name, { arguments: state });
+    }
+    /**
+     * Replace state (web-style)
+     */
+    replaceState(state, name) {
+        this.pushReplacementNamed(name, { arguments: state });
+    }
+    /**
+     * Pop and push with restoration capability
+     */
+    restorablePopAndPushState(state, name) {
+        const key = generateKey();
+        this.popAndPushNamed(name, { arguments: state });
+        return key;
+    }
+    /**
+     * Pop and push named route with restoration capability
+     */
+    restorablePopAndPushNamed(path, options) {
+        const key = generateKey();
+        this.popAndPushNamed(path, options);
+        return key;
+    }
+}
+// Singleton instance
+let browserHistoryInstance = null;
+/**
+ * Get the browser history adapter instance
+ */
+function getBrowserHistory() {
+    if (!browserHistoryInstance) {
+        browserHistoryInstance = new BrowserHistoryAdapter();
+    }
+    return browserHistoryInstance;
+}
+/**
+ * Reset the browser history adapter (for testing)
+ */
+function resetBrowserHistory() {
+    browserHistoryInstance = null;
+}
+
+/**
+ * Get the appropriate history object based on the current platform.
+ * Returns WebF's hybridHistory in WebF environment, or BrowserHistoryAdapter in browser.
+ */
+function getHybridHistory() {
+    const webfHistory = getWebFHybridHistory();
+    if (webfHistory) {
+        return webfHistory;
+    }
+    // Fallback to browser history adapter
+    return getBrowserHistory();
+}
 let ensureRouteMountedCallback = null;
 function __unstable_setEnsureRouteMountedCallback(callback) {
     ensureRouteMountedCallback = callback;
@@ -55,7 +387,8 @@ function ensureRouteMounted(pathname) {
 }
 /**
  * WebF Router object - provides comprehensive navigation APIs
- * Combines web-like history management with Flutter-like navigation patterns
+ * Combines web-like history management with Flutter-like navigation patterns.
+ * Works in both WebF native environment and standard browser environment.
  */
 const WebFRouter = {
     /**
@@ -86,8 +419,6 @@ const WebFRouter = {
      */
     push: (path, state) => __awaiter(void 0, void 0, void 0, function* () {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         yield ensureRouteMounted(path);
         hybridHistory.pushNamed(path, { arguments: state });
     }),
@@ -97,8 +428,6 @@ const WebFRouter = {
      */
     replace: (path, state) => __awaiter(void 0, void 0, void 0, function* () {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         yield ensureRouteMounted(path);
         hybridHistory.pushReplacementNamed(path, { arguments: state });
     }),
@@ -107,8 +436,6 @@ const WebFRouter = {
      */
     back: () => {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         hybridHistory.back();
     },
     /**
@@ -117,8 +444,6 @@ const WebFRouter = {
      */
     pop: (result) => {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         hybridHistory.pop(result);
     },
     /**
@@ -126,8 +451,6 @@ const WebFRouter = {
      */
     popUntil: (path) => {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         hybridHistory.popUntil(path);
     },
     /**
@@ -135,8 +458,6 @@ const WebFRouter = {
      */
     popAndPushNamed: (path, state) => __awaiter(void 0, void 0, void 0, function* () {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         yield ensureRouteMounted(path);
         hybridHistory.popAndPushNamed(path, { arguments: state });
     }),
@@ -145,8 +466,6 @@ const WebFRouter = {
      */
     pushNamedAndRemoveUntil: (path, state, untilPath) => __awaiter(void 0, void 0, void 0, function* () {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         yield ensureRouteMounted(path);
         hybridHistory.pushNamedAndRemoveUntil(state, path, untilPath);
     }),
@@ -155,8 +474,6 @@ const WebFRouter = {
      */
     pushNamedAndRemoveUntilRoute: (newPath, untilPath, state) => __awaiter(void 0, void 0, void 0, function* () {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         yield ensureRouteMounted(newPath);
         hybridHistory.pushNamedAndRemoveUntilRoute(newPath, untilPath, { arguments: state });
     }),
@@ -165,8 +482,6 @@ const WebFRouter = {
      */
     canPop: () => {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            return false;
         return hybridHistory.canPop();
     },
     /**
@@ -175,8 +490,6 @@ const WebFRouter = {
      */
     maybePop: (result) => {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            return false;
         return hybridHistory.maybePop(result);
     },
     /**
@@ -184,8 +497,6 @@ const WebFRouter = {
      */
     pushState: (state, name) => {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         hybridHistory.pushState(state, name);
     },
     /**
@@ -193,8 +504,6 @@ const WebFRouter = {
      */
     replaceState: (state, name) => {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         hybridHistory.replaceState(state, name);
     },
     /**
@@ -203,8 +512,6 @@ const WebFRouter = {
      */
     restorablePopAndPushState: (state, name) => {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         return hybridHistory.restorablePopAndPushState(state, name);
     },
     /**
@@ -213,8 +520,6 @@ const WebFRouter = {
      */
     restorablePopAndPushNamed: (path, state) => __awaiter(void 0, void 0, void 0, function* () {
         const hybridHistory = getHybridHistory();
-        if (!hybridHistory)
-            throw new Error('WebF hybridHistory is not available');
         yield ensureRouteMounted(path);
         return hybridHistory.restorablePopAndPushNamed(path, { arguments: state });
     })
@@ -317,41 +622,183 @@ var useMemoizedFn = function (fn) {
     return memoizedFn.current;
 };
 
-// Create the raw component using createWebFComponent
-const RawWebFRouterLink = createWebFComponent({
-    tagName: 'webf-router-link',
-    displayName: 'WebFRouterLink',
-    // Map props to attributes
-    attributeProps: ['path', 'title', 'theme'],
-    // Event handlers
-    events: [
-        {
-            propName: 'onScreen',
-            eventName: 'onscreen',
-            handler: (callback) => (event) => {
-                // Cast through unknown first for proper type conversion
-                callback(event);
+// Conditionally import createWebFComponent only when needed
+let createWebFComponent = null;
+let WebFElementWithMethods = null;
+// Try to import @openwebf/react-core-ui, but don't fail if it's not available in browser
+try {
+    const coreUi = require("@openwebf/react-core-ui");
+    createWebFComponent = coreUi.createWebFComponent;
+    WebFElementWithMethods = coreUi.WebFElementWithMethods;
+}
+catch (e) {
+    // In browser environment without @openwebf/react-core-ui, we'll use the fallback
+}
+// Lazily create the WebF component only when needed
+let RawWebFRouterLink = null;
+function getRawWebFRouterLink() {
+    if (RawWebFRouterLink)
+        return RawWebFRouterLink;
+    if (!createWebFComponent) {
+        throw new Error('@openwebf/react-core-ui is required in WebF environment');
+    }
+    RawWebFRouterLink = createWebFComponent({
+        tagName: 'webf-router-link',
+        displayName: 'WebFRouterLink',
+        // Map props to attributes
+        attributeProps: ['path', 'title', 'theme'],
+        // Event handlers
+        events: [
+            {
+                propName: 'onScreen',
+                eventName: 'onscreen',
+                handler: (callback) => (event) => {
+                    callback(event);
+                },
             },
-        },
-        {
-            propName: 'offScreen',
-            eventName: 'offscreen',
-            handler: (callback) => (event) => {
-                // Cast through unknown first for proper type conversion
-                callback(event);
+            {
+                propName: 'offScreen',
+                eventName: 'offscreen',
+                handler: (callback) => (event) => {
+                    callback(event);
+                },
             },
-        },
-        {
-            propName: 'onPrerendering',
-            eventName: 'prerendering',
-            handler: (callback) => (event) => {
-                callback(event);
+            {
+                propName: 'onPrerendering',
+                eventName: 'prerendering',
+                handler: (callback) => (event) => {
+                    callback(event);
+                },
             },
-        },
-    ],
-});
-const WebFRouterLink = function (props) {
+        ],
+    });
+    return RawWebFRouterLink;
+}
+/**
+ * Browser-based RouterLink implementation
+ * Used when running in standard browser environment instead of WebF
+ */
+const BrowserRouterLink = function (props) {
+    const [isActive, setIsActive] = useState(false);
+    const [isRender, setIsRender] = useState(false);
+    const hasTriggeredOnScreen = useRef(false);
+    useEffect(() => {
+        const browserHistory = getBrowserHistory();
+        const currentPath = browserHistory.path;
+        // Check if this route matches the current path
+        const isCurrentlyActive = currentPath === props.path;
+        setIsActive(isCurrentlyActive);
+        if (isCurrentlyActive && !hasTriggeredOnScreen.current) {
+            hasTriggeredOnScreen.current = true;
+            setIsRender(true);
+            // Create a synthetic event for onScreen callback
+            if (props.onScreen) {
+                const syntheticEvent = {
+                    state: browserHistory.state,
+                    kind: 'didPush',
+                    path: props.path,
+                    nativeEvent: new Event('onscreen'),
+                    currentTarget: null,
+                    target: null,
+                    bubbles: true,
+                    cancelable: false,
+                    defaultPrevented: false,
+                    eventPhase: 0,
+                    isTrusted: true,
+                    preventDefault: () => { },
+                    isDefaultPrevented: () => false,
+                    stopPropagation: () => { },
+                    isPropagationStopped: () => false,
+                    persist: () => { },
+                    timeStamp: Date.now(),
+                    type: 'onscreen',
+                };
+                props.onScreen(syntheticEvent);
+            }
+        }
+        // Listen for route changes
+        const handleRouteChange = (event) => {
+            var _a, _b, _c, _d, _e;
+            const customEvent = event;
+            const newPath = ((_a = customEvent.detail) === null || _a === void 0 ? void 0 : _a.path) || event.path;
+            const newIsActive = newPath === props.path;
+            if (newIsActive && !isActive) {
+                // Route became active
+                hasTriggeredOnScreen.current = true;
+                setIsRender(true);
+                setIsActive(true);
+                if (props.onScreen) {
+                    const syntheticEvent = {
+                        state: ((_b = customEvent.detail) === null || _b === void 0 ? void 0 : _b.state) || event.state,
+                        kind: (((_c = customEvent.detail) === null || _c === void 0 ? void 0 : _c.kind) || event.kind),
+                        path: newPath,
+                        nativeEvent: event,
+                        currentTarget: event.currentTarget,
+                        target: event.target,
+                        bubbles: true,
+                        cancelable: false,
+                        defaultPrevented: false,
+                        eventPhase: 0,
+                        isTrusted: true,
+                        preventDefault: () => { },
+                        isDefaultPrevented: () => false,
+                        stopPropagation: () => { },
+                        isPropagationStopped: () => false,
+                        persist: () => { },
+                        timeStamp: Date.now(),
+                        type: 'onscreen',
+                    };
+                    props.onScreen(syntheticEvent);
+                }
+            }
+            else if (!newIsActive && isActive) {
+                // Route became inactive
+                setIsActive(false);
+                if (props.offScreen) {
+                    const syntheticEvent = {
+                        state: ((_d = customEvent.detail) === null || _d === void 0 ? void 0 : _d.state) || event.state,
+                        kind: (((_e = customEvent.detail) === null || _e === void 0 ? void 0 : _e.kind) || event.kind),
+                        path: newPath,
+                        nativeEvent: event,
+                        currentTarget: event.currentTarget,
+                        target: event.target,
+                        bubbles: true,
+                        cancelable: false,
+                        defaultPrevented: false,
+                        eventPhase: 0,
+                        isTrusted: true,
+                        preventDefault: () => { },
+                        isDefaultPrevented: () => false,
+                        stopPropagation: () => { },
+                        isPropagationStopped: () => false,
+                        persist: () => { },
+                        timeStamp: Date.now(),
+                        type: 'offscreen',
+                    };
+                    props.offScreen(syntheticEvent);
+                }
+            }
+        };
+        document.addEventListener('hybridrouterchange', handleRouteChange);
+        return () => {
+            document.removeEventListener('hybridrouterchange', handleRouteChange);
+        };
+    }, [props.path, props.onScreen, props.offScreen, isActive]);
+    // In browser mode, we render a div that acts as a route container
+    // Only show content when route is rendered (similar to WebF behavior)
+    return (React.createElement("div", { "data-path": props.path, "data-title": props.title, style: {
+            display: isActive ? 'block' : 'none',
+            width: '100%',
+            height: '100%',
+        } }, isRender ? props.children : null));
+};
+/**
+ * WebF RouterLink implementation
+ * Used in WebF native environment
+ */
+const WebFNativeRouterLink = function (props) {
     const [isRender, enableRender] = useState(false);
+    const RawComponent = getRawWebFRouterLink();
     const handleOnScreen = (event) => {
         enableRender(true);
         if (props.onScreen) {
@@ -363,7 +810,18 @@ const WebFRouterLink = function (props) {
         enableRender(true);
         (_a = props.onPrerendering) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (React.createElement(RawWebFRouterLink, { title: props.title, path: props.path, theme: props.theme, onScreen: handleOnScreen, offScreen: props.offScreen, onPrerendering: handlePrerendering }, isRender ? props.children : null));
+    return (React.createElement(RawComponent, { title: props.title, path: props.path, theme: props.theme, onScreen: handleOnScreen, offScreen: props.offScreen, onPrerendering: handlePrerendering }, isRender ? props.children : null));
+};
+/**
+ * Unified RouterLink component that works in both WebF and browser environments
+ */
+const WebFRouterLink = function (props) {
+    // Use WebF native implementation if in WebF environment
+    if (isWebF()) {
+        return React.createElement(WebFNativeRouterLink, Object.assign({}, props));
+    }
+    // Use browser-based implementation
+    return React.createElement(BrowserRouterLink, Object.assign({}, props));
 };
 
 /**
@@ -825,5 +1283,5 @@ function useNavigate() {
     }, []);
 }
 
-export { Route, Routes, WebFRouter, WebFRouterLink, __unstable_setEnsureRouteMountedCallback, matchPath, matchRoutes, pathToRegex, useLocation, useNavigate, useParams, useRouteContext, useRoutes };
+export { Route, Routes, WebFRouter, WebFRouterLink, __unstable_setEnsureRouteMountedCallback, detectPlatform, isBrowser, isWebF, matchPath, matchRoutes, pathToRegex, platform, resetBrowserHistory, useLocation, useNavigate, useParams, useRouteContext, useRoutes };
 //# sourceMappingURL=index.esm.js.map