@teambit/react-router 0.0.647 → 0.0.651

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

@@ -2,10 +2,11 @@
 import { RouteProps } from 'react-router-dom';
 import { History, LocationListener, LocationDescriptor, Action } from 'history';
 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';
 declare type RouteChangeSlot = SlotRegistry<LocationListener>;
-declare type RenderRoutesOptions = {
+declare type RenderContext = {
     initialLocation?: string;
 };
 export declare class ReactRouterUI {
@@ -31,7 +32,7 @@ export declare class ReactRouterUI {
     /**
      * render all slot routes.
      */
-    renderRoutes(routes: RouteProps[], options?: RenderRoutesOptions): JSX.Element;
+    renderRoutes(routes: RouteProps[]): JSX.Element;
     private unregisterListener?;
     /** (internal method) sets the routing engine for navigation methods */
     setRouter: (routerHistory: History) => void;
@@ -49,11 +50,9 @@ export declare class ReactRouterUI {
     /**
      * change browser location
      */
-    navigateTo: (path: LocationDescriptor, action?: Record<string, any> | Action | undefined) => void;
-    /**
-     * change browser location
-     */
-    private legacyNavigateTo;
+    navigateTo: (path: LocationDescriptor, action?: Action | undefined) => void;
+    private AppRoutingContext;
+    renderPlugin: RenderPlugins<RenderContext>;
     static slots: (((registerFn: () => string) => SlotRegistry<RouteProps<string, {
         [x: string]: string | undefined;
     }>>) | ((registerFn: () => string) => SlotRegistry<LocationListener<unknown>>))[];

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

@@ -122,11 +122,6 @@ class ReactRouterUI {
     (0, _defineProperty2().default)(this, "navigateTo", (path, action) => {
       var _this$routerHistory, _this$routerHistory2;
 
-      if (typeof action !== 'string') {
-        this.legacyNavigateTo(path, action);
-        return;
-      }
-
       switch (action) {
         case 'POP':
           return;
@@ -141,10 +136,32 @@ class ReactRouterUI {
           (_this$routerHistory2 = this.routerHistory) === null || _this$routerHistory2 === void 0 ? void 0 : _this$routerHistory2.push(path);
       }
     });
-    (0, _defineProperty2().default)(this, "legacyNavigateTo", (path, state) => {
-      var _this$routerHistory3;
-
-      (_this$routerHistory3 = this.routerHistory) === null || _this$routerHistory3 === void 0 ? void 0 : _this$routerHistory3.push(path, state);
+    (0, _defineProperty2().default)(this, "AppRoutingContext", ({
+      children,
+      renderCtx
+    }) => {
+      return /*#__PURE__*/_react().default.createElement(_routeContext().RouteContext, {
+        reactRouterUi: this,
+        routing: this.routingMode,
+        location: renderCtx === null || renderCtx === void 0 ? void 0 : renderCtx.initialLocation
+      }, children);
+    });
+    (0, _defineProperty2().default)(this, "renderPlugin", {
+      browserInit: () => {
+        const initialLocation = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+        return {
+          initialLocation
+        };
+      },
+      serverInit: ({
+        browser
+      }) => {
+        const initialLocation = browser === null || browser === void 0 ? void 0 : browser.location.url;
+        return {
+          initialLocation
+        };
+      },
+      reactContext: this.AppRoutingContext
     });
   }
   /**
@@ -152,15 +169,11 @@ class ReactRouterUI {
    */
 
 
-  renderRoutes(routes, options = {}) {
-    return /*#__PURE__*/_react().default.createElement(_routeContext().RouteContext, {
-      reactRouterUi: this,
-      routing: this.routingMode,
-      location: options.initialLocation
-    }, /*#__PURE__*/_react().default.createElement(_routeContext().RootRoute, {
+  renderRoutes(routes) {
+    return /*#__PURE__*/_react().default.createElement(_routeContext().RootRoute, {
       routeSlot: this.routeSlot,
       rootRoutes: routes
-    }));
+    });
   }
 
   /** decides how navigation is stored and applied.

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

@@ -1 +1 @@
-{"version":3,"sources":["react-router.ui.runtime.tsx"],"names":["ReactRouterUI","constructor","routeSlot","routeChangeListener","isBrowser","Routing","url","static","undefined","routerHistory","unregisterListener","listen","args","values","forEach","listener","path","action","legacyNavigateTo","replace","push","state","renderRoutes","routes","options","routingMode","initialLocation","setRoutingMode","routing","register","route","registerListener","provider","deps","config","routeChangeSlot","Slot","withType","UIRuntime","ReactRouterAspect","addRuntime"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { RouteProps } from 'react-router-dom';\nimport { History, UnregisterCallback, LocationListener, LocationDescriptor, Action } from 'history';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { 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 RenderRoutesOptions = {\n  initialLocation?: string;\n};\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[], options: RenderRoutesOptions = {}): JSX.Element {\n    return (\n      <RouteContext reactRouterUi={this} routing={this.routingMode} location={options.initialLocation}>\n        <RootRoute routeSlot={this.routeSlot} rootRoutes={routes}></RootRoute>\n      </RouteContext>\n    );\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    /**\n     * type of history action to execute (pop / push / replace).\n     * Supports state-object for legacy calls. (this will be removed when supported by symphony)\n     */\n    action?: Action | Record<string, any>\n  ) => {\n    if (typeof action !== 'string') {\n      this.legacyNavigateTo(path as string, action);\n      return;\n    }\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  /**\n   * change browser location\n   */\n  private legacyNavigateTo = (\n    /** destination */\n    path: string,\n    state?: Record<string, any>\n  ) => {\n    this.routerHistory?.push(path, state);\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"]}
+{"version":3,"sources":["react-router.ui.runtime.tsx"],"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"],"mappings":"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","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"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react-router",
-  "version": "0.0.647",
+  "version": "0.0.651",
   "homepage": "https://bit.dev/teambit/ui-foundation/react-router",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "react-router",
-    "version": "0.0.647"
+    "version": "0.0.651"
   },
   "dependencies": {
     "react-router": "5.2.0",
@@ -18,25 +18,25 @@
     "@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/ui-foundation.ui.react-router.link-anchor": "0.0.122",
-    "@teambit/ui-foundation.ui.is-browser": "0.0.485",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.487",
-    "@teambit/ui": "0.0.647",
-    "@teambit/ui-foundation.ui.react-router.link": "0.0.488",
-    "@teambit/ui-foundation.ui.react-router.nav-link": "0.0.488"
+    "@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.488",
+    "@teambit/ui": "0.0.651",
+    "@teambit/ui-foundation.ui.react-router.link": "0.0.489",
+    "@teambit/ui-foundation.ui.react-router.nav-link": "0.0.489"
   },
   "devDependencies": {
     "@types/history": "4.7.8",
     "@types/react-router-dom": "5.1.7",
     "@types/react": "^17.0.8",
-    "@types/mocha": "5.2.7",
+    "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.219",
+    "@teambit/legacy": "1.0.223",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -54,7 +54,7 @@
       },
       "devDependencies": {
         "@teambit/legacy": "-",
-        "@types/mocha": "5.2.7",
+        "@types/mocha": "9.1.0",
         "@types/testing-library__jest-dom": "5.9.5",
         "@types/jest": "^26.0.0",
         "@types/react-dom": "^17.0.5",
@@ -64,7 +64,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.219",
+        "@teambit/legacy": "1.0.223",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/react-router.ui.runtime.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { RouteProps } from 'react-router-dom';
 import { History, UnregisterCallback, LocationListener, LocationDescriptor, Action } from 'history';
 import { Slot, SlotRegistry } from '@teambit/harmony';
-import { UIRuntime } from '@teambit/ui';
+import { RenderPlugins, UIRuntime } from '@teambit/ui';
 import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
 
@@ -11,9 +11,7 @@ import { RouteContext, RootRoute } from './route-context';
 import { Routing } from './routing-method';
 
 type RouteChangeSlot = SlotRegistry<LocationListener>;
-type RenderRoutesOptions = {
-  initialLocation?: string;
-};
+type RenderContext = { initialLocation?: string };
 
 export class ReactRouterUI {
   private routerHistory?: History;
@@ -33,12 +31,8 @@ export class ReactRouterUI {
   /**
    * render all slot routes.
    */
-  renderRoutes(routes: RouteProps[], options: RenderRoutesOptions = {}): JSX.Element {
-    return (
-      <RouteContext reactRouterUi={this} routing={this.routingMode} location={options.initialLocation}>
-        <RootRoute routeSlot={this.routeSlot} rootRoutes={routes}></RootRoute>
-      </RouteContext>
-    );
+  renderRoutes(routes: RouteProps[]) {
+    return <RootRoute routeSlot={this.routeSlot} rootRoutes={routes} />;
   }
 
   private unregisterListener?: UnregisterCallback = undefined;
@@ -79,17 +73,9 @@ export class ReactRouterUI {
   navigateTo = (
     /** destination */
     path: LocationDescriptor,
-    /**
-     * type of history action to execute (pop / push / replace).
-     * Supports state-object for legacy calls. (this will be removed when supported by symphony)
-     */
-    action?: Action | Record<string, any>
+    /** history action to execute (pop / push / replace) */
+    action?: Action
   ) => {
-    if (typeof action !== 'string') {
-      this.legacyNavigateTo(path as string, action);
-      return;
-    }
-
     switch (action) {
       case 'POP':
         return; // TBD;
@@ -102,15 +88,24 @@ export class ReactRouterUI {
     }
   };
 
-  /**
-   * change browser location
-   */
-  private legacyNavigateTo = (
-    /** destination */
-    path: string,
-    state?: Record<string, any>
-  ) => {
-    this.routerHistory?.push(path, state);
+  private AppRoutingContext = ({ children, renderCtx }: { children: ReactNode; renderCtx?: RenderContext }) => {
+    return (
+      <RouteContext reactRouterUi={this} routing={this.routingMode} location={renderCtx?.initialLocation}>
+        {children}
+      </RouteContext>
+    );
+  };
+
+  public renderPlugin: RenderPlugins<RenderContext> = {
+    browserInit: () => {
+      const initialLocation = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+      return { initialLocation };
+    },
+    serverInit: ({ browser }) => {
+      const initialLocation = browser?.location.url;
+      return { initialLocation };
+    },
+    reactContext: this.AppRoutingContext,
   };
 
   static slots = [Slot.withType<RouteProps>(), Slot.withType<LocationListener>()];