@teambit/ui-foundation.ui.react-router.slot-router 0.0.489 → 0.0.490

package/dist/index.d.ts

@@ -1 +1 @@
-export { SlotRouter, SlotSubRouter, SlotRouterProps, RouteSlot, NavigationSlot } from './slot-router';
+export { SlotRouter, SlotRouterProps, RouteSlot, NavigationSlot } from './slot-router';

package/dist/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SlotSubRouter = exports.SlotRouter = void 0;
+exports.SlotRouter = void 0;
 var slot_router_1 = require("./slot-router");
 Object.defineProperty(exports, "SlotRouter", { enumerable: true, get: function () { return slot_router_1.SlotRouter; } });
-Object.defineProperty(exports, "SlotSubRouter", { enumerable: true, get: function () { return slot_router_1.SlotSubRouter; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6CAAsG;AAA7F,yGAAA,UAAU,OAAA;AAAE,4GAAA,aAAa,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6CAAuF;AAA9E,yGAAA,UAAU,OAAA"}

package/dist/slot-router.d.ts

@@ -1,15 +1,12 @@
-/// <reference types="react" />
+import { PropsWithChildren } from 'react';
 import { SlotRegistry } from '@teambit/harmony';
 import { RouteProps } from 'react-router-dom';
-import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import type { LinkProps } from '@teambit/base-react.navigation.link';
 export declare type RouteSlot = SlotRegistry<RouteProps | RouteProps[]>;
-export declare type NavigationSlot = SlotRegistry<NavLinkProps>;
-export declare type SlotRouterProps = {
+export declare type NavigationSlot = SlotRegistry<LinkProps>;
+export declare type SlotRouterProps = PropsWithChildren<{
     slot: RouteSlot;
     rootRoutes?: RouteProps[];
-};
-export declare function SlotRouter({ slot, rootRoutes }: SlotRouterProps): JSX.Element;
-export declare function SlotSubRouter({ slot, basePath }: {
-    slot: RouteSlot;
-    basePath?: string;
-}): JSX.Element;
+    parentPath?: string;
+}>;
+export declare function SlotRouter({ slot, rootRoutes, children, parentPath }: SlotRouterProps): JSX.Element;

package/dist/slot-router.js

@@ -3,22 +3,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SlotSubRouter = exports.SlotRouter = void 0;
+exports.SlotRouter = void 0;
 const react_1 = __importDefault(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const lodash_1 = require("lodash");
-const ui_foundation_ui_react_router_extend_path_1 = require("@teambit/ui-foundation.ui.react-router.extend-path");
-function SlotRouter({ slot, rootRoutes }) {
+function SlotRouter({ slot, rootRoutes, children, parentPath }) {
     const routes = (0, lodash_1.flatten)(slot.values());
     const withRoot = routes.concat(rootRoutes || []);
-    return (react_1.default.createElement(react_router_dom_1.Switch, null, withRoot.map((route, idx) => (react_1.default.createElement(react_router_dom_1.Route, Object.assign({ key: idx }, route))))));
+    const jsxRoutes = withRoot.map((route) => react_1.default.createElement(react_router_dom_1.Route, Object.assign({ key: toKey(route) }, route)));
+    if (parentPath) {
+        return (react_1.default.createElement(react_router_dom_1.Routes, null,
+            react_1.default.createElement(react_router_dom_1.Route, { path: parentPath },
+                jsxRoutes,
+                children)));
+    }
+    return (react_1.default.createElement(react_router_dom_1.Routes, null,
+        react_1.default.createElement(react_router_dom_1.Route, { path: parentPath },
+            jsxRoutes,
+            children)));
 }
 exports.SlotRouter = SlotRouter;
-function SlotSubRouter({ slot, basePath }) {
-    const routes = (0, lodash_1.flatten)(slot.values());
-    const { path: contextPath } = (0, react_router_dom_1.useRouteMatch)();
-    // TODO - generate key as part of the slot.
-    return (react_1.default.createElement(react_router_dom_1.Switch, null, routes.map((route, idx) => (react_1.default.createElement(react_router_dom_1.Route, Object.assign({ key: idx }, route, { path: (0, ui_foundation_ui_react_router_extend_path_1.extendPath)(basePath || contextPath, route.path) }))))));
+function toKey(route) {
+    if (route.path)
+        return route.path;
+    if (route.index)
+        return '/';
+    return '.';
 }
-exports.SlotSubRouter = SlotSubRouter;
 //# sourceMappingURL=slot-router.js.map

package/dist/slot-router.js.map

@@ -1 +1 @@
-{"version":3,"file":"slot-router.js","sourceRoot":"","sources":["../slot-router.tsx"],"names":[],"mappings":";;;;;;AACA,kDAA0B;AAC1B,uDAA4E;AAC5E,mCAAiC;AACjC,kHAAgF;AAWhF,SAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,UAAU,EAAmB;IAC9D,MAAM,MAAM,GAAG,IAAA,gBAAO,EAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC;IAEjD,OAAO,CACL,8BAAC,yBAAM,QACJ,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5B,8BAAC,wBAAK,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,EAAI,CAC/B,CAAC,CACK,CACV,CAAC;AACJ,CAAC;AAZD,gCAYC;AAED,SAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,QAAQ,EAA0C;IACtF,MAAM,MAAM,GAAG,IAAA,gBAAO,EAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IACtC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAA,gCAAa,GAAE,CAAC;IAC9C,2CAA2C;IAE3C,OAAO,CACL,8BAAC,yBAAM,QACJ,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC1B,8BAAC,wBAAK,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,IAAE,IAAI,EAAE,IAAA,sDAAU,EAAC,QAAQ,IAAI,WAAW,EAAE,KAAK,CAAC,IAAW,CAAC,IAAI,CAC7F,CAAC,CACK,CACV,CAAC;AACJ,CAAC;AAZD,sCAYC"}
+{"version":3,"file":"slot-router.js","sourceRoot":"","sources":["../slot-router.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAiD;AAEjD,uDAA6D;AAC7D,mCAAiC;AAYjC,SAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAmB;IACpF,MAAM,MAAM,GAAG,IAAA,gBAAO,EAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC;IAEjD,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,8BAAC,wBAAK,kBAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,IAAM,KAAK,EAAI,CAAC,CAAC;IAEnF,IAAI,UAAU,EAAE;QACd,OAAO,CACL,8BAAC,yBAAM;YACL,8BAAC,wBAAK,IAAC,IAAI,EAAE,UAAU;gBACpB,SAAS;gBACT,QAAQ,CACH,CACD,CACV,CAAC;KACH;IAED,OAAO,CACL,8BAAC,yBAAM;QACL,8BAAC,wBAAK,IAAC,IAAI,EAAE,UAAU;YACpB,SAAS;YACT,QAAQ,CACH,CACD,CACV,CAAC;AACJ,CAAC;AAzBD,gCAyBC;AAED,SAAS,KAAK,CAAC,KAAiB;IAC9B,IAAI,KAAK,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC,IAAI,CAAC;IAClC,IAAI,KAAK,CAAC,KAAK;QAAE,OAAO,GAAG,CAAC;IAC5B,OAAO,GAAG,CAAC;AACb,CAAC"}

package/index.ts

@@ -1 +1 @@
-export { SlotRouter, SlotSubRouter, SlotRouterProps, RouteSlot, NavigationSlot } from './slot-router';
+export { SlotRouter, SlotRouterProps, RouteSlot, NavigationSlot } from './slot-router';

package/package.json

@@ -1,24 +1,21 @@
 {
   "name": "@teambit/ui-foundation.ui.react-router.slot-router",
-  "version": "0.0.489",
+  "version": "0.0.490",
   "homepage": "https://bit.dev/teambit/ui-foundation/ui/react-router/slot-router",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "ui/react-router/slot-router",
-    "version": "0.0.489"
+    "version": "0.0.490"
   },
   "dependencies": {
     "lodash": "4.17.21",
-    "react-router-dom": "5.2.0",
     "core-js": "^3.0.0",
-    "@teambit/base-ui.routing.nav-link": "1.0.0",
-    "@teambit/harmony": "0.3.3",
-    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.486"
+    "@teambit/base-react.navigation.link": "2.0.27",
+    "@teambit/harmony": "0.3.3"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",
-    "@types/react-router-dom": "5.1.7",
     "@types/react": "^17.0.8",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
@@ -28,6 +25,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
+    "react-router-dom": "^6.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

package/slot-router.tsx

@@ -1,42 +1,47 @@
+import React, { PropsWithChildren } from 'react';
 import { SlotRegistry } from '@teambit/harmony';
-import React from 'react';
-import { Route, RouteProps, Switch, useRouteMatch } from 'react-router-dom';
+import { Routes, Route, RouteProps } from 'react-router-dom';
 import { flatten } from 'lodash';
-import { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';
-import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import type { LinkProps } from '@teambit/base-react.navigation.link';
 
 export type RouteSlot = SlotRegistry<RouteProps | RouteProps[]>;
-export type NavigationSlot = SlotRegistry<NavLinkProps>;
+export type NavigationSlot = SlotRegistry<LinkProps>;
 
-export type SlotRouterProps = {
+export type SlotRouterProps = PropsWithChildren<{
   slot: RouteSlot;
   rootRoutes?: RouteProps[];
-};
+  parentPath?: string;
+}>;
 
-export function SlotRouter({ slot, rootRoutes }: SlotRouterProps) {
+export function SlotRouter({ slot, rootRoutes, children, parentPath }: SlotRouterProps) {
   const routes = flatten(slot.values());
-
   const withRoot = routes.concat(rootRoutes || []);
 
-  return (
-    <Switch>
-      {withRoot.map((route, idx) => (
-        <Route key={idx} {...route} />
-      ))}
-    </Switch>
-  );
-}
+  const jsxRoutes = withRoot.map((route) => <Route key={toKey(route)} {...route} />);
 
-export function SlotSubRouter({ slot, basePath }: { slot: RouteSlot; basePath?: string }) {
-  const routes = flatten(slot.values());
-  const { path: contextPath } = useRouteMatch();
-  // TODO - generate key as part of the slot.
+  if (parentPath) {
+    return (
+      <Routes>
+        <Route path={parentPath}>
+          {jsxRoutes}
+          {children}
+        </Route>
+      </Routes>
+    );
+  }
 
   return (
-    <Switch>
-      {routes.map((route, idx) => (
-        <Route key={idx} {...route} path={extendPath(basePath || contextPath, route.path as any)} />
-      ))}
-    </Switch>
+    <Routes>
+      <Route path={parentPath}>
+        {jsxRoutes}
+        {children}
+      </Route>
+    </Routes>
   );
 }
+
+function toKey(route: RouteProps) {
+  if (route.path) return route.path;
+  if (route.index) return '/';
+  return '.';
+}

package/tsconfig.json

@@ -14,6 +14,7 @@
     "declaration": true,
     "sourceMap": true,
     "skipLibCheck": true,
+    "experimentalDecorators": true,
     "outDir": "dist",
     "moduleResolution": "node",
     "esModuleInterop": true,