@teambit/react-router 0.0.743 → 0.0.746

package/LocationHooks.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate, NavigateFunction, useNavigationType } from 'react-router-dom';
+import { LocationListener } from './react-router.ui.runtime';
+
+export function LocationHooks({
+  onLocationChange, onNavigatorChange,
+}: {
+  onLocationChange: LocationListener;
+  onNavigatorChange: (nav: NavigateFunction) => void;
+}) {
+  const location = useLocation();
+  const navAction = useNavigationType(); // the action that got react router to this location
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    onLocationChange(location, navAction);
+  }, [location, navAction, onLocationChange]);
+
+  useEffect(() => {
+    onNavigatorChange(navigate);
+  }, [navigate, onNavigatorChange]);
+
+  return null;
+}

package/dist/LocationHooks.d.ts

@@ -0,0 +1,6 @@
+import { NavigateFunction } from 'react-router-dom';
+import { LocationListener } from './react-router.ui.runtime';
+export declare function LocationHooks({ onLocationChange, onNavigatorChange, }: {
+    onLocationChange: LocationListener;
+    onNavigatorChange: (nav: NavigateFunction) => void;
+}): null;

package/dist/LocationHooks.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LocationHooks = LocationHooks;
+
+function _react() {
+  const data = require("react");
+
+  _react = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _reactRouterDom() {
+  const data = require("react-router-dom");
+
+  _reactRouterDom = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function LocationHooks({
+  onLocationChange,
+  onNavigatorChange
+}) {
+  const location = (0, _reactRouterDom().useLocation)();
+  const navAction = (0, _reactRouterDom().useNavigationType)(); // the action that got react router to this location
+
+  const navigate = (0, _reactRouterDom().useNavigate)();
+  (0, _react().useEffect)(() => {
+    onLocationChange(location, navAction);
+  }, [location, navAction, onLocationChange]);
+  (0, _react().useEffect)(() => {
+    onNavigatorChange(navigate);
+  }, [navigate, onNavigatorChange]);
+  return null;
+}
+
+//# sourceMappingURL=LocationHooks.js.map

package/dist/LocationHooks.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LocationHooks","onLocationChange","onNavigatorChange","location","useLocation","navAction","useNavigationType","navigate","useNavigate","useEffect"],"sources":["LocationHooks.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useLocation, useNavigate, NavigateFunction, useNavigationType } from 'react-router-dom';\nimport { LocationListener } from './react-router.ui.runtime';\n\nexport function LocationHooks({\n  onLocationChange, onNavigatorChange,\n}: {\n  onLocationChange: LocationListener;\n  onNavigatorChange: (nav: NavigateFunction) => void;\n}) {\n  const location = useLocation();\n  const navAction = useNavigationType(); // the action that got react router to this location\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    onLocationChange(location, navAction);\n  }, [location, navAction, onLocationChange]);\n\n  useEffect(() => {\n    onNavigatorChange(navigate);\n  }, [navigate, onNavigatorChange]);\n\n  return null;\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGO,SAASA,aAAT,CAAuB;EAC5BC,gBAD4B;EACVC;AADU,CAAvB,EAKJ;EACD,MAAMC,QAAQ,GAAG,IAAAC,6BAAA,GAAjB;EACA,MAAMC,SAAS,GAAG,IAAAC,mCAAA,GAAlB,CAFC,CAEsC;;EACvC,MAAMC,QAAQ,GAAG,IAAAC,6BAAA,GAAjB;EAEA,IAAAC,kBAAA,EAAU,MAAM;IACdR,gBAAgB,CAACE,QAAD,EAAWE,SAAX,CAAhB;EACD,CAFD,EAEG,CAACF,QAAD,EAAWE,SAAX,EAAsBJ,gBAAtB,CAFH;EAIA,IAAAQ,kBAAA,EAAU,MAAM;IACdP,iBAAiB,CAACK,QAAD,CAAjB;EACD,CAFD,EAEG,CAACA,QAAD,EAAWL,iBAAX,CAFH;EAIA,OAAO,IAAP;AACD"}

package/dist/index.d.ts

@@ -1,10 +1,17 @@
 import { ReactRouterAspect } from './react-router.aspect';
 export { Routing } from './routing-method';
 export type { ReactRouterUI } from './react-router.ui.runtime';
-export { Link, LinkProps } from '@teambit/base-ui.routing.link';
-export { NavLink, NavLinkProps } from '@teambit/base-ui.routing.nav-link';
-export { RoutingProvider, useRouting, useLocation } from '@teambit/base-ui.routing.routing-provider';
-export { LinkAnchor, LinkContextProvider, useLinkContext } from '@teambit/ui-foundation.ui.react-router.link-anchor';
-export * as ReactRouter from 'react-router';
+export * as navigation from '@teambit/base-react.navigation.link';
+export * as ReactRouter from 'react-router-dom';
 export { ReactRouterAspect };
 export default ReactRouterAspect;
+export { /** @deprecated */ Link, /** @deprecated */ LinkProps } from '@teambit/base-ui.routing.link';
+export { /** @deprecated */ NavLink, /** @deprecated */ NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+export { 
+/** @deprecated */ RoutingProvider, 
+/** @deprecated */ useRouting, 
+/** @deprecated */ useLocation, } from '@teambit/base-ui.routing.routing-provider';
+export { 
+/** @deprecated */ LinkAnchor, 
+/** @deprecated */ LinkContextProvider, 
+/** @deprecated */ useLinkContext, } from '@teambit/ui-foundation.ui.react-router.link-anchor';

package/dist/index.js

@@ -58,7 +58,7 @@ Object.defineProperty(exports, "RoutingProvider", {
     return _baseUiRouting3().RoutingProvider;
   }
 });
-exports.default = void 0;
+exports.navigation = exports.default = void 0;
 Object.defineProperty(exports, "useLinkContext", {
   enumerable: true,
   get: function () {
@@ -98,6 +98,40 @@ function _routingMethod() {
   return data;
 }
 
+function _navigation() {
+  const data = _interopRequireWildcard(require("@teambit/base-react.navigation.link"));
+
+  _navigation = function () {
+    return data;
+  };
+
+  return data;
+}
+
+Object.defineProperty(exports, "navigation", {
+  enumerable: true,
+  get: function () {
+    return _navigation();
+  }
+});
+
+function _ReactRouter() {
+  const data = _interopRequireWildcard(require("react-router-dom"));
+
+  _ReactRouter = function () {
+    return data;
+  };
+
+  return data;
+}
+
+Object.defineProperty(exports, "ReactRouter", {
+  enumerable: true,
+  get: function () {
+    return _ReactRouter();
+  }
+});
+
 function _baseUiRouting() {
   const data = require("@teambit/base-ui.routing.link");
 
@@ -138,30 +172,12 @@ function _uiFoundationUiReactRouter() {
   return data;
 }
 
-function _ReactRouter() {
-  const data = _interopRequireWildcard(require("react-router"));
-
-  _ReactRouter = function () {
-    return data;
-  };
-
-  return data;
-}
-
-Object.defineProperty(exports, "ReactRouter", {
-  enumerable: true,
-  get: function () {
-    return _ReactRouter();
-  }
-});
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// TODO - replace with resolveFromHost / resolveFromApp when available
-// this exposes the Link components installed in bit bin, so they can use the same RoutingProvider file from node_modules
-var _default = _reactRouter().ReactRouterAspect;
+var _default = _reactRouter().ReactRouterAspect; // TODO - remove after releasing dependants (symphony)
+
 
 exports.default = _default;
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ReactRouterAspect"],"sources":["index.ts"],"sourcesContent":["import { ReactRouterAspect } from './react-router.aspect';\n\nexport { Routing } from './routing-method';\nexport type { ReactRouterUI } from './react-router.ui.runtime';\n\n// TODO - replace with resolveFromHost / resolveFromApp when available\n// this exposes the Link components installed in bit bin, so they can use the same RoutingProvider file from node_modules\nexport { Link, LinkProps } from '@teambit/base-ui.routing.link';\nexport { NavLink, NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nexport { RoutingProvider, useRouting, useLocation } from '@teambit/base-ui.routing.routing-provider';\nexport { LinkAnchor, LinkContextProvider, useLinkContext } from '@teambit/ui-foundation.ui.react-router.link-anchor';\nexport * as ReactRouter from 'react-router';\n\nexport { ReactRouterAspect };\nexport default ReactRouterAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAKA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;AALA;AACA;eAQeA,gC"}
+{"version":3,"names":["ReactRouterAspect"],"sources":["index.ts"],"sourcesContent":["import { ReactRouterAspect } from './react-router.aspect';\n\nexport { Routing } from './routing-method';\nexport type { ReactRouterUI } from './react-router.ui.runtime';\n\nexport * as navigation from '@teambit/base-react.navigation.link';\nexport * as ReactRouter from 'react-router-dom';\n\nexport { ReactRouterAspect };\nexport default ReactRouterAspect;\n\n// TODO - remove after releasing dependants (symphony)\nexport { /** @deprecated */ Link, /** @deprecated */ LinkProps } from '@teambit/base-ui.routing.link';\nexport { /** @deprecated */ NavLink, /** @deprecated */ NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nexport {\n  /** @deprecated */ RoutingProvider,\n  /** @deprecated */ useRouting,\n  /** @deprecated */ useLocation,\n} from '@teambit/base-ui.routing.routing-provider';\nexport {\n  /** @deprecated */ LinkAnchor,\n  /** @deprecated */ LinkContextProvider,\n  /** @deprecated */ useLinkContext,\n} from '@teambit/ui-foundation.ui.react-router.link-anchor';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAKA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;eAVeA,gC,EAEf"}

package/dist/legacy-routing.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function LegacyNavProvider({ children }: PropsWithChildren<{}>): JSX.Element;

package/dist/legacy-routing.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LegacyNavProvider = LegacyNavProvider;
+
+function _extends2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+  _extends2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _objectWithoutProperties2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+  _objectWithoutProperties2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _baseUiRouting() {
+  const data = require("@teambit/base-ui.routing.routing-provider");
+
+  _baseUiRouting = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _baseReactNavigation() {
+  const data = require("@teambit/base-react.navigation.link");
+
+  _baseReactNavigation = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function useLegacyRouting() {
+  return {
+    Link: _baseReactNavigation().Link,
+    // eslint-disable-next-line react/prop-types
+    NavLink: /*#__PURE__*/(0, _react().forwardRef)(function NavLinkAdapter(_ref, ref) {
+      let {
+        isActive
+      } = _ref,
+          props = (0, _objectWithoutProperties2().default)(_ref, ["isActive"]);
+      const active = isActive === null || isActive === void 0 ? void 0 : isActive();
+      return /*#__PURE__*/_react().default.createElement(_baseReactNavigation().Link, (0, _extends2().default)({}, props, {
+        active: active,
+        ref: ref
+      }));
+    }),
+    useLocation: () => {
+      var _useLocation;
+
+      return (// @ts-ignore
+        (_useLocation = (0, _baseReactNavigation().useLocation)()) !== null && _useLocation !== void 0 ? _useLocation : {
+          pathname: '/',
+          hash: '',
+          search: ''
+        }
+      );
+    }
+  };
+}
+
+function LegacyNavProvider({
+  children
+}) {
+  const legacyRouting = useLegacyRouting();
+  return /*#__PURE__*/_react().default.createElement(_baseUiRouting().RoutingProvider, {
+    value: legacyRouting
+  }, children);
+}
+
+//# sourceMappingURL=legacy-routing.js.map

package/dist/legacy-routing.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useLegacyRouting","Link","NavLink","forwardRef","NavLinkAdapter","ref","isActive","props","active","useLocation","pathname","hash","search","LegacyNavProvider","children","legacyRouting"],"sources":["legacy-routing.tsx"],"sourcesContent":["import React, { PropsWithChildren, forwardRef } from 'react';\nimport { RoutingProvider, Routing } from '@teambit/base-ui.routing.routing-provider';\nimport type { NavLinkProps } from '@teambit/base-ui.routing.native-nav-link';\nimport { Link, useLocation } from '@teambit/base-react.navigation.link';\n\nfunction useLegacyRouting(): Routing {\n  return {\n    Link,\n    // eslint-disable-next-line react/prop-types\n    NavLink: forwardRef<HTMLAnchorElement, NavLinkProps>(function NavLinkAdapter({ isActive, ...props }, ref) {\n      const active = isActive?.();\n      return <Link {...props} active={active} ref={ref} />;\n    }),\n    useLocation: () =>\n      // @ts-ignore\n      useLocation() ?? { pathname: '/', hash: '', search: '' },\n  };\n}\n\nexport function LegacyNavProvider({ children }: PropsWithChildren<{}>) {\n  const legacyRouting = useLegacyRouting();\n\n  return <RoutingProvider value={legacyRouting}>{children}</RoutingProvider>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAEA,SAASA,gBAAT,GAAqC;EACnC,OAAO;IACLC,IAAI,EAAJA,2BADK;IAEL;IACAC,OAAO,eAAE,IAAAC,mBAAA,EAA4C,SAASC,cAAT,OAAgDC,GAAhD,EAAqD;MAAA,IAA7B;QAAEC;MAAF,CAA6B;MAAA,IAAdC,KAAc;MACxG,MAAMC,MAAM,GAAGF,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,EAAvB;MACA,oBAAO,+BAAC,2BAAD,+BAAUC,KAAV;QAAiB,MAAM,EAAEC,MAAzB;QAAiC,GAAG,EAAEH;MAAtC,GAAP;IACD,CAHQ,CAHJ;IAOLI,WAAW,EAAE;MAAA;;MAAA,OACX;QADW,gBAEX,IAAAA,kCAAA,GAFW,uDAEM;UAAEC,QAAQ,EAAE,GAAZ;UAAiBC,IAAI,EAAE,EAAvB;UAA2BC,MAAM,EAAE;QAAnC;MAFN;IAAA;EAPR,CAAP;AAWD;;AAEM,SAASC,iBAAT,CAA2B;EAAEC;AAAF,CAA3B,EAAgE;EACrE,MAAMC,aAAa,GAAGf,gBAAgB,EAAtC;EAEA,oBAAO,+BAAC,gCAAD;IAAiB,KAAK,EAAEe;EAAxB,GAAwCD,QAAxC,CAAP;AACD"}

package/dist/react-router.ui.runtime.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { RouteProps } from 'react-router-dom';
-import { History, LocationListener, LocationDescriptor, Action } from 'history';
+import type { Location, NavigationType, RouteProps } from 'react-router-dom';
 import { SlotRegistry } from '@teambit/harmony';
 import { RenderPlugins } from '@teambit/ui';
 import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { Routing } from './routing-method';
+export declare type LocationListener = (location: Location, action: NavigationType) => void;
 declare type RouteChangeSlot = SlotRegistry<LocationListener>;
 declare type RenderContext = {
     initialLocation?: string;
@@ -18,7 +18,6 @@ export declare class ReactRouterUI {
      *
      */
     private routeChangeListener;
-    private routerHistory?;
     private routingMode;
     constructor(
     /**
@@ -33,9 +32,6 @@ export declare class ReactRouterUI {
      * render all slot routes.
      */
     renderRoutes(routes: RouteProps[]): JSX.Element;
-    private unregisterListener?;
-    /** (internal method) sets the routing engine for navigation methods */
-    setRouter: (routerHistory: History) => void;
     /** decides how navigation is stored and applied.
      * Url - updates the `window.location.pathname`.
      * Hash - updates `window.location.hash`.
@@ -50,12 +46,12 @@ export declare class ReactRouterUI {
     /**
      * change browser location
      */
-    navigateTo: (path: LocationDescriptor, action?: Action | undefined) => void;
+    navigateTo: (path: Location | string, action?: NavigationType | undefined) => void;
+    private navigate?;
+    private handleLocationChange;
     private AppRoutingContext;
     renderPlugin: RenderPlugins<RenderContext>;
-    static slots: (((registerFn: () => string) => SlotRegistry<RouteProps<string, {
-        [x: string]: string | undefined;
-    }>>) | ((registerFn: () => string) => SlotRegistry<LocationListener<unknown>>))[];
+    static slots: (((registerFn: () => string) => SlotRegistry<RouteProps>) | ((registerFn: () => string) => SlotRegistry<LocationListener>))[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
     static provider(deps: any, config: any, [routeSlot, routeChangeSlot]: [RouteSlot, RouteChangeSlot]): Promise<ReactRouterUI>;
 }

package/dist/react-router.ui.runtime.js

@@ -8,8 +8,6 @@ require("core-js/modules/es.promise.js");
 
 require("core-js/modules/es.regexp.exec.js");
 
-require("core-js/modules/es.string.replace.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -95,6 +93,16 @@ function _routingMethod() {
   return data;
 }
 
+function _LocationHooks() {
+  const data = require("./LocationHooks");
+
+  _LocationHooks = function () {
+    return data;
+  };
+
+  return data;
+}
+
 class ReactRouterUI {
   constructor(
   /**
@@ -107,20 +115,11 @@ class ReactRouterUI {
   routeChangeListener) {
     this.routeSlot = routeSlot;
     this.routeChangeListener = routeChangeListener;
-    (0, _defineProperty2().default)(this, "routerHistory", void 0);
     (0, _defineProperty2().default)(this, "routingMode", _uiFoundationUi().isBrowser ? _routingMethod().Routing.url : _routingMethod().Routing.static);
-    (0, _defineProperty2().default)(this, "unregisterListener", undefined);
-    (0, _defineProperty2().default)(this, "setRouter", routerHistory => {
-      var _this$unregisterListe;
-
-      this.routerHistory = routerHistory;
-      (_this$unregisterListe = this.unregisterListener) === null || _this$unregisterListe === void 0 ? void 0 : _this$unregisterListe.call(this);
-      this.unregisterListener = routerHistory.listen((...args) => {
-        this.routeChangeListener.values().forEach(listener => listener(...args));
-      });
-    });
     (0, _defineProperty2().default)(this, "navigateTo", (path, action) => {
-      var _this$routerHistory, _this$routerHistory2;
+      var _this$navigate, _this$navigate2;
+
+      const state = typeof path !== 'string' ? path.state : undefined;
 
       switch (action) {
         case 'POP':
@@ -128,14 +127,24 @@ class ReactRouterUI {
         // TBD;
 
         case 'REPLACE':
-          (_this$routerHistory = this.routerHistory) === null || _this$routerHistory === void 0 ? void 0 : _this$routerHistory.replace(path);
+          (_this$navigate = this.navigate) === null || _this$navigate === void 0 ? void 0 : _this$navigate.call(this, path, {
+            replace: true,
+            state
+          });
           return;
 
         case 'PUSH':
         default:
-          (_this$routerHistory2 = this.routerHistory) === null || _this$routerHistory2 === void 0 ? void 0 : _this$routerHistory2.push(path);
+          (_this$navigate2 = this.navigate) === null || _this$navigate2 === void 0 ? void 0 : _this$navigate2.call(this, path, {
+            state
+          });
       }
     });
+    (0, _defineProperty2().default)(this, "navigate", undefined);
+    (0, _defineProperty2().default)(this, "handleLocationChange", (location, action) => {
+      const listeners = this.routeChangeListener.values();
+      listeners.forEach(listener => listener(location, action));
+    });
     (0, _defineProperty2().default)(this, "AppRoutingContext", ({
       children,
       renderCtx
@@ -144,7 +153,10 @@ class ReactRouterUI {
         reactRouterUi: this,
         routing: this.routingMode,
         location: renderCtx === null || renderCtx === void 0 ? void 0 : renderCtx.initialLocation
-      }, children);
+      }, children, /*#__PURE__*/_react().default.createElement(_LocationHooks().LocationHooks, {
+        onLocationChange: this.handleLocationChange,
+        onNavigatorChange: nav => this.navigate = nav
+      }));
     });
     (0, _defineProperty2().default)(this, "renderPlugin", {
       browserInit: () => {
@@ -175,12 +187,13 @@ class ReactRouterUI {
       rootRoutes: routes
     });
   }
-
   /** decides how navigation is stored and applied.
    * Url - updates the `window.location.pathname`.
    * Hash - updates `window.location.hash`.
    * InMemory - store state internally and don't update the browser.
    */
+
+
   setRoutingMode(routing) {
     this.routingMode = routing;
   }

package/dist/react-router.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["ReactRouterUI","constructor","routeSlot","routeChangeListener","isBrowser","Routing","url","static","undefined","routerHistory","unregisterListener","listen","args","values","forEach","listener","path","action","replace","push","children","renderCtx","routingMode","initialLocation","browserInit","window","location","pathname","search","hash","serverInit","browser","reactContext","AppRoutingContext","renderRoutes","routes","setRoutingMode","routing","register","route","registerListener","provider","deps","config","routeChangeSlot","Slot","withType","UIRuntime","ReactRouterAspect","addRuntime"],"sources":["react-router.ui.runtime.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { RouteProps } from 'react-router-dom';\nimport { History, UnregisterCallback, LocationListener, LocationDescriptor, Action } from 'history';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { RenderPlugins, UIRuntime } from '@teambit/ui';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { isBrowser } from '@teambit/ui-foundation.ui.is-browser';\n\nimport { ReactRouterAspect } from './react-router.aspect';\nimport { RouteContext, RootRoute } from './route-context';\nimport { Routing } from './routing-method';\n\ntype RouteChangeSlot = SlotRegistry<LocationListener>;\ntype RenderContext = { initialLocation?: string };\n\nexport class ReactRouterUI {\n  private routerHistory?: History;\n  private routingMode = isBrowser ? Routing.url : Routing.static;\n\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n    /**\n     *\n     */\n    private routeChangeListener: RouteChangeSlot\n  ) {}\n\n  /**\n   * render all slot routes.\n   */\n  renderRoutes(routes: RouteProps[]) {\n    return <RootRoute routeSlot={this.routeSlot} rootRoutes={routes} />;\n  }\n\n  private unregisterListener?: UnregisterCallback = undefined;\n  /** (internal method) sets the routing engine for navigation methods */\n  setRouter = (routerHistory: History) => {\n    this.routerHistory = routerHistory;\n\n    this.unregisterListener?.();\n    this.unregisterListener = routerHistory.listen((...args) => {\n      this.routeChangeListener.values().forEach((listener) => listener(...args));\n    });\n  };\n\n  /** decides how navigation is stored and applied.\n   * Url - updates the `window.location.pathname`.\n   * Hash - updates `window.location.hash`.\n   * InMemory - store state internally and don't update the browser.\n   */\n  setRoutingMode(routing: Routing) {\n    this.routingMode = routing;\n  }\n\n  /**\n   * register a new route.\n   */\n  register(route: RouteProps) {\n    this.routeSlot.register(route);\n    return this;\n  }\n\n  registerListener(listener: LocationListener) {\n    this.routeChangeListener.register(listener);\n  }\n\n  /**\n   * change browser location\n   */\n  navigateTo = (\n    /** destination */\n    path: LocationDescriptor,\n    /** history action to execute (pop / push / replace) */\n    action?: Action\n  ) => {\n    switch (action) {\n      case 'POP':\n        return; // TBD;\n      case 'REPLACE':\n        this.routerHistory?.replace(path);\n        return;\n      case 'PUSH':\n      default:\n        this.routerHistory?.push(path);\n    }\n  };\n\n  private AppRoutingContext = ({ children, renderCtx }: { children: ReactNode; renderCtx?: RenderContext }) => {\n    return (\n      <RouteContext reactRouterUi={this} routing={this.routingMode} location={renderCtx?.initialLocation}>\n        {children}\n      </RouteContext>\n    );\n  };\n\n  public renderPlugin: RenderPlugins<RenderContext> = {\n    browserInit: () => {\n      const initialLocation = `${window.location.pathname}${window.location.search}${window.location.hash}`;\n      return { initialLocation };\n    },\n    serverInit: ({ browser }) => {\n      const initialLocation = browser?.location.url;\n      return { initialLocation };\n    },\n    reactContext: this.AppRoutingContext,\n  };\n\n  static slots = [Slot.withType<RouteProps>(), Slot.withType<LocationListener>()];\n  static runtime = UIRuntime;\n\n  static async provider(deps, config, [routeSlot, routeChangeSlot]: [RouteSlot, RouteChangeSlot]) {\n    return new ReactRouterUI(routeSlot, routeChangeSlot);\n  }\n}\n\nReactRouterAspect.addRuntime(ReactRouterUI);\n"],"mappings":"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"}
+{"version":3,"names":["ReactRouterUI","constructor","routeSlot","routeChangeListener","isBrowser","Routing","url","static","path","action","state","undefined","navigate","replace","location","listeners","values","forEach","listener","children","renderCtx","routingMode","initialLocation","handleLocationChange","nav","browserInit","window","pathname","search","hash","serverInit","browser","reactContext","AppRoutingContext","renderRoutes","routes","setRoutingMode","routing","register","route","registerListener","provider","deps","config","routeChangeSlot","Slot","withType","UIRuntime","ReactRouterAspect","addRuntime"],"sources":["react-router.ui.runtime.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { NavigateFunction } from 'react-router-dom';\nimport type { Location, NavigationType, RouteProps } from 'react-router-dom';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { RenderPlugins, UIRuntime } from '@teambit/ui';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { isBrowser } from '@teambit/ui-foundation.ui.is-browser';\n\nimport { ReactRouterAspect } from './react-router.aspect';\nimport { RouteContext, RootRoute } from './route-context';\nimport { Routing } from './routing-method';\nimport { LocationHooks } from './LocationHooks';\n\nexport type LocationListener = (location: Location, action: NavigationType) => void;\ntype RouteChangeSlot = SlotRegistry<LocationListener>;\ntype RenderContext = { initialLocation?: string };\n\nexport class ReactRouterUI {\n  private routingMode = isBrowser ? Routing.url : Routing.static;\n\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n    /**\n     *\n     */\n    private routeChangeListener: RouteChangeSlot\n  ) {}\n\n  /**\n   * render all slot routes.\n   */\n  renderRoutes(routes: RouteProps[]) {\n    return <RootRoute routeSlot={this.routeSlot} rootRoutes={routes} />;\n  }\n\n  /** decides how navigation is stored and applied.\n   * Url - updates the `window.location.pathname`.\n   * Hash - updates `window.location.hash`.\n   * InMemory - store state internally and don't update the browser.\n   */\n  setRoutingMode(routing: Routing) {\n    this.routingMode = routing;\n  }\n\n  /**\n   * register a new route.\n   */\n  register(route: RouteProps) {\n    this.routeSlot.register(route);\n    return this;\n  }\n\n  registerListener(listener: LocationListener) {\n    this.routeChangeListener.register(listener);\n  }\n\n  /**\n   * change browser location\n   */\n  navigateTo = (\n    /** destination */\n    path: Location | string,\n    /** history action to execute (pop / push / replace) */\n    action?: NavigationType\n  ) => {\n    const state = typeof path !== 'string' ? path.state : undefined;\n\n    switch (action) {\n      case 'POP':\n        return; // TBD;\n      case 'REPLACE':\n        this.navigate?.(path, { replace: true, state });\n        return;\n      case 'PUSH':\n      default:\n        this.navigate?.(path, { state });\n    }\n  };\n\n  private navigate?: NavigateFunction = undefined;\n\n  private handleLocationChange = (location: Location, action: NavigationType) => {\n    const listeners = this.routeChangeListener.values();\n    listeners.forEach((listener) => listener(location, action));\n  };\n\n  private AppRoutingContext = ({ children, renderCtx }: { children: ReactNode; renderCtx?: RenderContext }) => {\n    return (\n      <RouteContext reactRouterUi={this} routing={this.routingMode} location={renderCtx?.initialLocation}>\n        {children}\n        <LocationHooks\n          onLocationChange={this.handleLocationChange}\n          onNavigatorChange={(nav) => (this.navigate = nav)}\n        />\n      </RouteContext>\n    );\n  };\n\n  public renderPlugin: RenderPlugins<RenderContext> = {\n    browserInit: () => {\n      const initialLocation = `${window.location.pathname}${window.location.search}${window.location.hash}`;\n      return { initialLocation };\n    },\n    serverInit: ({ browser }) => {\n      const initialLocation = browser?.location.url;\n      return { initialLocation };\n    },\n    reactContext: this.AppRoutingContext,\n  };\n\n  static slots = [Slot.withType<RouteProps>(), Slot.withType<LocationListener>()];\n  static runtime = UIRuntime;\n\n  static async provider(deps, config, [routeSlot, routeChangeSlot]: [RouteSlot, RouteChangeSlot]) {\n    return new ReactRouterUI(routeSlot, routeChangeSlot);\n  }\n}\n\nReactRouterAspect.addRuntime(ReactRouterUI);\n"],"mappings":"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"}

package/dist/route-context.d.ts

@@ -1,9 +1,8 @@
 import { ReactNode } from 'react';
-import { RouteProps, useHistory } from 'react-router-dom';
+import { RouteProps } from 'react-router-dom';
 import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { ReactRouterUI } from './react-router.ui.runtime';
 import { Routing } from './routing-method';
-export declare type History = ReturnType<typeof useHistory>;
 declare type RouterContextProps = {
     reactRouterUi: ReactRouterUI;
     routing?: Routing;
@@ -17,6 +16,6 @@ declare type RootRouteProps = {
 /**
  * Setup context needed for routing.
  */
-export declare function RouteContext({ reactRouterUi, routing, children, location }: RouterContextProps): JSX.Element;
+export declare function RouteContext({ routing, children, location }: RouterContextProps): JSX.Element;
 export declare function RootRoute({ rootRoutes, routeSlot }: RootRouteProps): JSX.Element;
 export {};

package/dist/route-context.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,7 +9,7 @@ exports.RootRoute = RootRoute;
 exports.RouteContext = RouteContext;
 
 function _react() {
-  const data = _interopRequireWildcard(require("react"));
+  const data = _interopRequireDefault(require("react"));
 
   _react = function () {
     return data;
@@ -26,10 +28,10 @@ function _reactRouterDom() {
   return data;
 }
 
-function _baseUiRouting() {
-  const data = require("@teambit/base-ui.routing.routing-provider");
+function _server() {
+  const data = require("react-router-dom/server");
 
-  _baseUiRouting = function () {
+  _server = function () {
     return data;
   };
 
@@ -46,10 +48,20 @@ function _uiFoundationUiReactRouter() {
   return data;
 }
 
-function _reactRouterRouting() {
-  const data = require("./react-router-routing");
+function _baseReactNavigation() {
+  const data = require("@teambit/base-react.navigation.link");
+
+  _baseReactNavigation = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _uiFoundationUiNavigation() {
+  const data = require("@teambit/ui-foundation.ui.navigation.react-router-adapter");
 
-  _reactRouterRouting = function () {
+  _uiFoundationUiNavigation = function () {
     return data;
   };
 
@@ -66,31 +78,30 @@ function _routingMethod() {
   return data;
 }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _legacyRouting() {
+  const data = require("./legacy-routing");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+  _legacyRouting = function () {
+    return data;
+  };
+
+  return data;
+}
 
 /**
  * Setup context needed for routing.
  */
 function RouteContext({
-  reactRouterUi,
   routing = _routingMethod().Routing.url,
   children,
   location
 }) {
-  return (
-    /*#__PURE__*/
-    // {/* set up the virtual router (browser, inMemory, etc) */}
-    _react().default.createElement(Router, {
-      type: routing,
-      location: location
-    }, /*#__PURE__*/_react().default.createElement(HistoryGetter, {
-      onRouterChange: reactRouterUi.setRouter
-    }), /*#__PURE__*/_react().default.createElement(_baseUiRouting().RoutingProvider, {
-      value: _reactRouterRouting().reactRouterRouting
-    }, children))
-  );
+  return /*#__PURE__*/_react().default.createElement(Router, {
+    type: routing,
+    location: location
+  }, /*#__PURE__*/_react().default.createElement(_baseReactNavigation().NavigationProvider, {
+    implementation: _uiFoundationUiNavigation().reactRouterAdapter
+  }, /*#__PURE__*/_react().default.createElement(_legacyRouting().LegacyNavProvider, null, children)));
 }
 
 function RootRoute({
@@ -112,8 +123,8 @@ function Router({
 }) {
   switch (type) {
     case _routingMethod().Routing.static:
-      return /*#__PURE__*/_react().default.createElement(_reactRouterDom().StaticRouter, {
-        location: location
+      return /*#__PURE__*/_react().default.createElement(_server().StaticRouter, {
+        location: location || '/'
       }, children);
 
     case _routingMethod().Routing.inMemory:
@@ -132,19 +143,5 @@ function Router({
       return /*#__PURE__*/_react().default.createElement(_reactRouterDom().BrowserRouter, null, children);
   }
 }
-/**
- * Calls onRouterChange when routing History object changes.
- * Used to inject history back into reactRouterUi
- * (needs to be rendered inside of <BrowserRouter/>)
- */
-
-
-function HistoryGetter({
-  onRouterChange
-}) {
-  const history = (0, _reactRouterDom().useHistory)();
-  (0, _react().useEffect)(() => onRouterChange(history), [history]);
-  return null;
-}
 
 //# sourceMappingURL=route-context.js.map

package/dist/route-context.js.map

@@ -1 +1 @@
-{"version":3,"names":["RouteContext","reactRouterUi","routing","Routing","url","children","location","setRouter","reactRouterRouting","RootRoute","rootRoutes","routeSlot","Router","type","static","inMemory","hash","HistoryGetter","onRouterChange","history","useHistory","useEffect"],"sources":["route-context.tsx"],"sourcesContent":["import React, { useEffect, ReactNode } from 'react';\nimport { BrowserRouter, StaticRouter, MemoryRouter, HashRouter, RouteProps, useHistory } from 'react-router-dom';\nimport { RoutingProvider } from '@teambit/base-ui.routing.routing-provider';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { ReactRouterUI } from './react-router.ui.runtime';\nimport { reactRouterRouting } from './react-router-routing';\nimport { Routing } from './routing-method';\n\nexport type History = ReturnType<typeof useHistory>;\n\ntype RouterContextProps = {\n  reactRouterUi: ReactRouterUI;\n  routing?: Routing;\n  children: ReactNode;\n  location?: string;\n};\n\ntype RootRouteProps = {\n  rootRoutes: RouteProps[];\n  routeSlot: RouteSlot;\n};\n\n/**\n * Setup context needed for routing.\n */\nexport function RouteContext({ reactRouterUi, routing = Routing.url, children, location }: RouterContextProps) {\n  return (\n    // {/* set up the virtual router (browser, inMemory, etc) */}\n    <Router type={routing} location={location}>\n      {/* injects History object back to reactRouterUi */}\n      <HistoryGetter onRouterChange={reactRouterUi.setRouter} />\n      {/* injects react-router Link into context  */}\n      <RoutingProvider value={reactRouterRouting}>\n        {/* route tree root: */}\n        {children}\n      </RoutingProvider>\n    </Router>\n  );\n}\n\nexport function RootRoute({ rootRoutes, routeSlot }: RootRouteProps) {\n  return <SlotRouter slot={routeSlot} rootRoutes={rootRoutes} />;\n}\n\n/** provides the router engine (browser, inMemory, etc) */\nfunction Router({ type, children, location }: { type: Routing; children: ReactNode; location?: string }) {\n  switch (type) {\n    case Routing.static:\n      return <StaticRouter location={location}>{children}</StaticRouter>;\n    case Routing.inMemory:\n      return (\n        <MemoryRouter initialEntries={[location || '/']} initialIndex={1}>\n          {children}\n        </MemoryRouter>\n      );\n    case Routing.hash:\n      // @ts-ignore - https://github.com/teambit/bit/issues/5746\n      return <HashRouter>{children}</HashRouter>;\n    case Routing.url:\n    default:\n      // @ts-ignore - https://github.com/teambit/bit/issues/5746\n      return <BrowserRouter>{children}</BrowserRouter>;\n  }\n}\n\n/**\n * Calls onRouterChange when routing History object changes.\n * Used to inject history back into reactRouterUi\n * (needs to be rendered inside of <BrowserRouter/>)\n */\nfunction HistoryGetter({ onRouterChange }: { onRouterChange: (routerHistory: History) => void }) {\n  const history = useHistory();\n  useEffect(() => onRouterChange(history), [history]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAgBA;AACA;AACA;AACO,SAASA,YAAT,CAAsB;EAAEC,aAAF;EAAiBC,OAAO,GAAGC,wBAAA,CAAQC,GAAnC;EAAwCC,QAAxC;EAAkDC;AAAlD,CAAtB,EAAwG;EAC7G;IAAA;IACE;IACA,+BAAC,MAAD;MAAQ,IAAI,EAAEJ,OAAd;MAAuB,QAAQ,EAAEI;IAAjC,gBAEE,+BAAC,aAAD;MAAe,cAAc,EAAEL,aAAa,CAACM;IAA7C,EAFF,eAIE,+BAAC,gCAAD;MAAiB,KAAK,EAAEC;IAAxB,GAEGH,QAFH,CAJF;EAFF;AAYD;;AAEM,SAASI,SAAT,CAAmB;EAAEC,UAAF;EAAcC;AAAd,CAAnB,EAA8D;EACnE,oBAAO,+BAAC,uCAAD;IAAY,IAAI,EAAEA,SAAlB;IAA6B,UAAU,EAAED;EAAzC,EAAP;AACD;AAED;;;AACA,SAASE,MAAT,CAAgB;EAAEC,IAAF;EAAQR,QAAR;EAAkBC;AAAlB,CAAhB,EAAyG;EACvG,QAAQO,IAAR;IACE,KAAKV,wBAAA,CAAQW,MAAb;MACE,oBAAO,+BAAC,8BAAD;QAAc,QAAQ,EAAER;MAAxB,GAAmCD,QAAnC,CAAP;;IACF,KAAKF,wBAAA,CAAQY,QAAb;MACE,oBACE,+BAAC,8BAAD;QAAc,cAAc,EAAE,CAACT,QAAQ,IAAI,GAAb,CAA9B;QAAiD,YAAY,EAAE;MAA/D,GACGD,QADH,CADF;;IAKF,KAAKF,wBAAA,CAAQa,IAAb;MACE;MACA,oBAAO,+BAAC,4BAAD,QAAaX,QAAb,CAAP;;IACF,KAAKF,wBAAA,CAAQC,GAAb;IACA;MACE;MACA,oBAAO,+BAAC,+BAAD,QAAgBC,QAAhB,CAAP;EAfJ;AAiBD;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASY,aAAT,CAAuB;EAAEC;AAAF,CAAvB,EAAiG;EAC/F,MAAMC,OAAO,GAAG,IAAAC,4BAAA,GAAhB;EACA,IAAAC,kBAAA,EAAU,MAAMH,cAAc,CAACC,OAAD,CAA9B,EAAyC,CAACA,OAAD,CAAzC;EAEA,OAAO,IAAP;AACD"}
+{"version":3,"names":["RouteContext","routing","Routing","url","children","location","reactRouterAdapter","RootRoute","rootRoutes","routeSlot","Router","type","static","inMemory","hash"],"sources":["route-context.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { BrowserRouter, MemoryRouter, HashRouter, RouteProps } from 'react-router-dom';\nimport { StaticRouter } from 'react-router-dom/server';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { NavigationProvider } from '@teambit/base-react.navigation.link';\nimport { reactRouterAdapter } from '@teambit/ui-foundation.ui.navigation.react-router-adapter';\nimport { ReactRouterUI } from './react-router.ui.runtime';\nimport { Routing } from './routing-method';\nimport { LegacyNavProvider } from './legacy-routing';\n\ntype RouterContextProps = {\n  reactRouterUi: ReactRouterUI;\n  routing?: Routing;\n  children: ReactNode;\n  location?: string;\n};\n\ntype RootRouteProps = {\n  rootRoutes: RouteProps[];\n  routeSlot: RouteSlot;\n};\n\n/**\n * Setup context needed for routing.\n */\nexport function RouteContext({ routing = Routing.url, children, location }: RouterContextProps) {\n  return (\n    <Router type={routing} location={location}>\n      <NavigationProvider implementation={reactRouterAdapter}>\n        <LegacyNavProvider>\n          {/* route tree root: */}\n          {children}\n        </LegacyNavProvider>\n      </NavigationProvider>\n    </Router>\n  );\n}\n\nexport function RootRoute({ rootRoutes, routeSlot }: RootRouteProps) {\n  return <SlotRouter slot={routeSlot} rootRoutes={rootRoutes} />;\n}\n\n/** provides the router engine (browser, inMemory, etc) */\nfunction Router({ type, children, location }: { type: Routing; children: ReactNode; location?: string }) {\n  switch (type) {\n    case Routing.static:\n      return <StaticRouter location={location || '/'}>{children}</StaticRouter>;\n    case Routing.inMemory:\n      return (\n        <MemoryRouter initialEntries={[location || '/']} initialIndex={1}>\n          {children}\n        </MemoryRouter>\n      );\n    case Routing.hash:\n      // @ts-ignore - https://github.com/teambit/bit/issues/5746\n      return <HashRouter>{children}</HashRouter>;\n    case Routing.url:\n    default:\n      // @ts-ignore - https://github.com/teambit/bit/issues/5746\n      return <BrowserRouter>{children}</BrowserRouter>;\n  }\n}\n"],"mappings":";;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAcA;AACA;AACA;AACO,SAASA,YAAT,CAAsB;EAAEC,OAAO,GAAGC,wBAAA,CAAQC,GAApB;EAAyBC,QAAzB;EAAmCC;AAAnC,CAAtB,EAAyF;EAC9F,oBACE,+BAAC,MAAD;IAAQ,IAAI,EAAEJ,OAAd;IAAuB,QAAQ,EAAEI;EAAjC,gBACE,+BAAC,yCAAD;IAAoB,cAAc,EAAEC;EAApC,gBACE,+BAAC,kCAAD,QAEGF,QAFH,CADF,CADF,CADF;AAUD;;AAEM,SAASG,SAAT,CAAmB;EAAEC,UAAF;EAAcC;AAAd,CAAnB,EAA8D;EACnE,oBAAO,+BAAC,uCAAD;IAAY,IAAI,EAAEA,SAAlB;IAA6B,UAAU,EAAED;EAAzC,EAAP;AACD;AAED;;;AACA,SAASE,MAAT,CAAgB;EAAEC,IAAF;EAAQP,QAAR;EAAkBC;AAAlB,CAAhB,EAAyG;EACvG,QAAQM,IAAR;IACE,KAAKT,wBAAA,CAAQU,MAAb;MACE,oBAAO,+BAAC,sBAAD;QAAc,QAAQ,EAAEP,QAAQ,IAAI;MAApC,GAA0CD,QAA1C,CAAP;;IACF,KAAKF,wBAAA,CAAQW,QAAb;MACE,oBACE,+BAAC,8BAAD;QAAc,cAAc,EAAE,CAACR,QAAQ,IAAI,GAAb,CAA9B;QAAiD,YAAY,EAAE;MAA/D,GACGD,QADH,CADF;;IAKF,KAAKF,wBAAA,CAAQY,IAAb;MACE;MACA,oBAAO,+BAAC,4BAAD,QAAaV,QAAb,CAAP;;IACF,KAAKF,wBAAA,CAAQC,GAAb;IACA;MACE;MACA,oBAAO,+BAAC,+BAAD,QAAgBC,QAAhB,CAAP;EAfJ;AAiBD"}

package/legacy-routing.tsx

@@ -0,0 +1,24 @@
+import React, { PropsWithChildren, forwardRef } from 'react';
+import { RoutingProvider, Routing } from '@teambit/base-ui.routing.routing-provider';
+import type { NavLinkProps } from '@teambit/base-ui.routing.native-nav-link';
+import { Link, useLocation } from '@teambit/base-react.navigation.link';
+
+function useLegacyRouting(): Routing {
+  return {
+    Link,
+    // eslint-disable-next-line react/prop-types
+    NavLink: forwardRef<HTMLAnchorElement, NavLinkProps>(function NavLinkAdapter({ isActive, ...props }, ref) {
+      const active = isActive?.();
+      return <Link {...props} active={active} ref={ref} />;
+    }),
+    useLocation: () =>
+      // @ts-ignore
+      useLocation() ?? { pathname: '/', hash: '', search: '' },
+  };
+}
+
+export function LegacyNavProvider({ children }: PropsWithChildren<{}>) {
+  const legacyRouting = useLegacyRouting();
+
+  return <RoutingProvider value={legacyRouting}>{children}</RoutingProvider>;
+}

package/package.json

@@ -1,34 +1,30 @@
 {
   "name": "@teambit/react-router",
-  "version": "0.0.743",
+  "version": "0.0.746",
   "homepage": "https://bit.dev/teambit/ui-foundation/react-router",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "react-router",
-    "version": "0.0.743"
+    "version": "0.0.746"
   },
   "dependencies": {
-    "react-router": "5.2.0",
-    "history": "4.10.1",
-    "react-router-dom": "5.2.0",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
+    "@teambit/base-react.navigation.link": "2.0.27",
     "@teambit/base-ui.routing.link": "1.0.0",
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/base-ui.routing.routing-provider": "1.0.0",
+    "@teambit/base-ui.routing.native-nav-link": "1.0.0",
     "@teambit/harmony": "0.3.3",
+    "@teambit/ui-foundation.ui.navigation.react-router-adapter": "6.1.1",
     "@teambit/ui-foundation.ui.react-router.link-anchor": "0.0.123",
     "@teambit/ui-foundation.ui.is-browser": "0.0.486",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.489",
-    "@teambit/ui": "0.0.743",
-    "@teambit/ui-foundation.ui.react-router.link": "0.0.489",
-    "@teambit/ui-foundation.ui.react-router.nav-link": "0.0.489"
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.490",
+    "@teambit/ui": "0.0.746"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
-    "@types/history": "4.7.8",
-    "@types/react-router-dom": "5.1.7",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0",
@@ -36,6 +32,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
+    "react-router-dom": "^6.0.0",
     "@teambit/legacy": "1.0.273",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"

package/{preview-1653708349111.js → preview-1653881205832.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_react-router@0.0.743/dist/react-router.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_react-router@0.0.743/dist/react-router.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_react-router@0.0.746/dist/react-router.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_react-router@0.0.746/dist/react-router.docs.mdx')]

package/react-router.ui.runtime.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { RouteProps } from 'react-router-dom';
-import { History, UnregisterCallback, LocationListener, LocationDescriptor, Action } from 'history';
+import { NavigateFunction } from 'react-router-dom';
+import type { Location, NavigationType, RouteProps } from 'react-router-dom';
 import { Slot, SlotRegistry } from '@teambit/harmony';
 import { RenderPlugins, UIRuntime } from '@teambit/ui';
 import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
@@ -9,12 +9,13 @@ import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
 import { ReactRouterAspect } from './react-router.aspect';
 import { RouteContext, RootRoute } from './route-context';
 import { Routing } from './routing-method';
+import { LocationHooks } from './LocationHooks';
 
+export type LocationListener = (location: Location, action: NavigationType) => void;
 type RouteChangeSlot = SlotRegistry<LocationListener>;
 type RenderContext = { initialLocation?: string };
 
 export class ReactRouterUI {
-  private routerHistory?: History;
   private routingMode = isBrowser ? Routing.url : Routing.static;
 
   constructor(
@@ -35,17 +36,6 @@ export class ReactRouterUI {
     return <RootRoute routeSlot={this.routeSlot} rootRoutes={routes} />;
   }
 
-  private unregisterListener?: UnregisterCallback = undefined;
-  /** (internal method) sets the routing engine for navigation methods */
-  setRouter = (routerHistory: History) => {
-    this.routerHistory = routerHistory;
-
-    this.unregisterListener?.();
-    this.unregisterListener = routerHistory.listen((...args) => {
-      this.routeChangeListener.values().forEach((listener) => listener(...args));
-    });
-  };
-
   /** decides how navigation is stored and applied.
    * Url - updates the `window.location.pathname`.
    * Hash - updates `window.location.hash`.
@@ -72,26 +62,39 @@ export class ReactRouterUI {
    */
   navigateTo = (
     /** destination */
-    path: LocationDescriptor,
+    path: Location | string,
     /** history action to execute (pop / push / replace) */
-    action?: Action
+    action?: NavigationType
   ) => {
+    const state = typeof path !== 'string' ? path.state : undefined;
+
     switch (action) {
       case 'POP':
         return; // TBD;
       case 'REPLACE':
-        this.routerHistory?.replace(path);
+        this.navigate?.(path, { replace: true, state });
         return;
       case 'PUSH':
       default:
-        this.routerHistory?.push(path);
+        this.navigate?.(path, { state });
     }
   };
 
+  private navigate?: NavigateFunction = undefined;
+
+  private handleLocationChange = (location: Location, action: NavigationType) => {
+    const listeners = this.routeChangeListener.values();
+    listeners.forEach((listener) => listener(location, action));
+  };
+
   private AppRoutingContext = ({ children, renderCtx }: { children: ReactNode; renderCtx?: RenderContext }) => {
     return (
       <RouteContext reactRouterUi={this} routing={this.routingMode} location={renderCtx?.initialLocation}>
         {children}
+        <LocationHooks
+          onLocationChange={this.handleLocationChange}
+          onNavigatorChange={(nav) => (this.navigate = nav)}
+        />
       </RouteContext>
     );
   };

package/route-context.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, ReactNode } from 'react';
-import { BrowserRouter, StaticRouter, MemoryRouter, HashRouter, RouteProps, useHistory } from 'react-router-dom';
-import { RoutingProvider } from '@teambit/base-ui.routing.routing-provider';
+import React, { ReactNode } from 'react';
+import { BrowserRouter, MemoryRouter, HashRouter, RouteProps } from 'react-router-dom';
+import { StaticRouter } from 'react-router-dom/server';
 import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { NavigationProvider } from '@teambit/base-react.navigation.link';
+import { reactRouterAdapter } from '@teambit/ui-foundation.ui.navigation.react-router-adapter';
 import { ReactRouterUI } from './react-router.ui.runtime';
-import { reactRouterRouting } from './react-router-routing';
 import { Routing } from './routing-method';
-
-export type History = ReturnType<typeof useHistory>;
+import { LegacyNavProvider } from './legacy-routing';
 
 type RouterContextProps = {
   reactRouterUi: ReactRouterUI;
@@ -23,17 +23,15 @@ type RootRouteProps = {
 /**
  * Setup context needed for routing.
  */
-export function RouteContext({ reactRouterUi, routing = Routing.url, children, location }: RouterContextProps) {
+export function RouteContext({ routing = Routing.url, children, location }: RouterContextProps) {
   return (
-    // {/* set up the virtual router (browser, inMemory, etc) */}
     <Router type={routing} location={location}>
-      {/* injects History object back to reactRouterUi */}
-      <HistoryGetter onRouterChange={reactRouterUi.setRouter} />
-      {/* injects react-router Link into context  */}
-      <RoutingProvider value={reactRouterRouting}>
-        {/* route tree root: */}
-        {children}
-      </RoutingProvider>
+      <NavigationProvider implementation={reactRouterAdapter}>
+        <LegacyNavProvider>
+          {/* route tree root: */}
+          {children}
+        </LegacyNavProvider>
+      </NavigationProvider>
     </Router>
   );
 }
@@ -46,7 +44,7 @@ export function RootRoute({ rootRoutes, routeSlot }: RootRouteProps) {
 function Router({ type, children, location }: { type: Routing; children: ReactNode; location?: string }) {
   switch (type) {
     case Routing.static:
-      return <StaticRouter location={location}>{children}</StaticRouter>;
+      return <StaticRouter location={location || '/'}>{children}</StaticRouter>;
     case Routing.inMemory:
       return (
         <MemoryRouter initialEntries={[location || '/']} initialIndex={1}>
@@ -62,15 +60,3 @@ function Router({ type, children, location }: { type: Routing; children: ReactNo
       return <BrowserRouter>{children}</BrowserRouter>;
   }
 }
-
-/**
- * Calls onRouterChange when routing History object changes.
- * Used to inject history back into reactRouterUi
- * (needs to be rendered inside of <BrowserRouter/>)
- */
-function HistoryGetter({ onRouterChange }: { onRouterChange: (routerHistory: History) => void }) {
-  const history = useHistory();
-  useEffect(() => onRouterChange(history), [history]);
-
-  return null;
-}

package/dist/react-router-routing/index.d.ts

@@ -1 +0,0 @@
-export { reactRouterRouting } from './react-router-routing';

package/dist/react-router-routing/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "reactRouterRouting", {
-  enumerable: true,
-  get: function () {
-    return _reactRouterRouting().reactRouterRouting;
-  }
-});
-
-function _reactRouterRouting() {
-  const data = require("./react-router-routing");
-
-  _reactRouterRouting = function () {
-    return data;
-  };
-
-  return data;
-}
-
-//# sourceMappingURL=index.js.map

package/dist/react-router-routing/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { reactRouterRouting } from './react-router-routing';\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}

package/dist/react-router-routing/react-router-routing.d.ts

@@ -1,11 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import { Link } from '@teambit/ui-foundation.ui.react-router.link';
-import { NavLink } from '@teambit/ui-foundation.ui.react-router.nav-link';
-/**
- * defines react-router's routing components (link, useLocation, etc)
- */
-export declare const reactRouterRouting: {
-    Link: typeof Link;
-    NavLink: typeof NavLink;
-    useLocation: typeof useLocation;
-};

package/dist/react-router-routing/react-router-routing.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.reactRouterRouting = void 0;
-
-function _reactRouterDom() {
-  const data = require("react-router-dom");
-
-  _reactRouterDom = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _uiFoundationUiReactRouter() {
-  const data = require("@teambit/ui-foundation.ui.react-router.link");
-
-  _uiFoundationUiReactRouter = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _uiFoundationUiReactRouter2() {
-  const data = require("@teambit/ui-foundation.ui.react-router.nav-link");
-
-  _uiFoundationUiReactRouter2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-// eslint-disable-next-line no-restricted-imports
-// eslint-disable-next-line no-restricted-imports
-// React Router Link and NavLink are internal implementations of our isomorphic routing components.
-// do not use them, use @teambit/base-ui.routing.link and @teambit/base-ui.routing.nav-link instead
-//
-// here we define them as the routing components of the application.
-
-/**
- * defines react-router's routing components (link, useLocation, etc)
- */
-const reactRouterRouting = {
-  Link: _uiFoundationUiReactRouter().Link,
-  NavLink: _uiFoundationUiReactRouter2().NavLink,
-  useLocation: _reactRouterDom().useLocation
-};
-exports.reactRouterRouting = reactRouterRouting;
-
-//# sourceMappingURL=react-router-routing.js.map

package/dist/react-router-routing/react-router-routing.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["reactRouterRouting","Link","NavLink","useLocation"],"sources":["react-router-routing.tsx"],"sourcesContent":["import { useLocation } from 'react-router-dom';\n// eslint-disable-next-line no-restricted-imports\nimport { Link } from '@teambit/ui-foundation.ui.react-router.link';\n// eslint-disable-next-line no-restricted-imports\nimport { NavLink } from '@teambit/ui-foundation.ui.react-router.nav-link';\n\n// React Router Link and NavLink are internal implementations of our isomorphic routing components.\n// do not use them, use @teambit/base-ui.routing.link and @teambit/base-ui.routing.nav-link instead\n//\n// here we define them as the routing components of the application.\n\n/**\n * defines react-router's routing components (link, useLocation, etc)\n */\nexport const reactRouterRouting = { Link, NavLink, useLocation };\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAHA;AAEA;AAGA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAG;EAAEC,IAAI,EAAJA,iCAAF;EAAQC,OAAO,EAAPA,qCAAR;EAAiBC,WAAW,EAAXA;AAAjB,CAA3B"}

package/react-router-routing/index.ts

@@ -1 +0,0 @@
-export { reactRouterRouting } from './react-router-routing';

package/react-router-routing/react-router-routing.tsx

@@ -1,15 +0,0 @@
-import { useLocation } from 'react-router-dom';
-// eslint-disable-next-line no-restricted-imports
-import { Link } from '@teambit/ui-foundation.ui.react-router.link';
-// eslint-disable-next-line no-restricted-imports
-import { NavLink } from '@teambit/ui-foundation.ui.react-router.nav-link';
-
-// React Router Link and NavLink are internal implementations of our isomorphic routing components.
-// do not use them, use @teambit/base-ui.routing.link and @teambit/base-ui.routing.nav-link instead
-//
-// here we define them as the routing components of the application.
-
-/**
- * defines react-router's routing components (link, useLocation, etc)
- */
-export const reactRouterRouting = { Link, NavLink, useLocation };