@teambit/react-router 0.0.551 → 0.0.556

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

@@ -1,6 +1,9 @@
 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;

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

@@ -8,18 +8,50 @@ declare type RenderRoutesOptions = {
     initialLocation?: string;
 };
 export declare class ReactRouterUI {
+    /**
+     * route slot.
+     */
     private routeSlot;
+    /**
+     *
+     */
     private routeChangeListener;
     private routerHistory?;
     private routingMode;
-    constructor(routeSlot: RouteSlot, routeChangeListener: RouteChangeSlot);
+    constructor(
+    /**
+     * route slot.
+     */
+    routeSlot: RouteSlot, 
+    /**
+     *
+     */
+    routeChangeListener: RouteChangeSlot);
+    /**
+     * render all slot routes.
+     */
     renderRoutes(routes: RouteProps[], options?: RenderRoutesOptions): 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`.
+     * InMemory - store state internally and don't update the browser.
+     */
     setRoutingMode(routing: Routing): void;
+    /**
+     * register a new route.
+     */
     register(route: RouteProps): this;
     registerListener(listener: LocationListener): void;
+    /**
+     * change browser location
+     */
     navigateTo: (path: LocationDescriptor, action?: Record<string, any> | Action | undefined) => void;
+    /**
+     * change browser location
+     */
     private legacyNavigateTo;
     static slots: (((registerFn: () => string) => SlotRegistry<RouteProps<string, {
         [x: string]: string | undefined;

package/dist/route-context.d.ts

@@ -14,6 +14,9 @@ declare type RootRouteProps = {
     rootRoutes: RouteProps[];
     routeSlot: RouteSlot;
 };
+/**
+ * Setup context needed for routing.
+ */
 export declare function RouteContext({ reactRouterUi, routing, children, location }: RouterContextProps): JSX.Element;
 export declare function RootRoute({ rootRoutes, routeSlot }: RootRouteProps): JSX.Element;
 export {};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react-router",
-  "version": "0.0.551",
+  "version": "0.0.556",
   "homepage": "https://bit.dev/teambit/ui-foundation/react-router",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "react-router",
-    "version": "0.0.551"
+    "version": "0.0.556"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -17,12 +17,12 @@
     "@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.96",
-    "@teambit/ui-foundation.ui.is-browser": "0.0.459",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.461",
-    "@teambit/ui": "0.0.551",
-    "@teambit/ui-foundation.ui.react-router.link": "0.0.461",
-    "@teambit/ui-foundation.ui.react-router.nav-link": "0.0.461"
+    "@teambit/ui-foundation.ui.react-router.link-anchor": "0.0.101",
+    "@teambit/ui-foundation.ui.is-browser": "0.0.464",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.466",
+    "@teambit/ui": "0.0.556",
+    "@teambit/ui-foundation.ui.react-router.link": "0.0.466",
+    "@teambit/ui-foundation.ui.react-router.nav-link": "0.0.466"
   },
   "devDependencies": {
     "@types/history": "4.7.8",
@@ -35,7 +35,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.169",
+    "@teambit/legacy": "1.0.173",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -63,12 +63,18 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.169",
+        "@teambit/legacy": "1.0.173",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "README.md",
+    "README.mdx"
+  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/index.ts

@@ -1,13 +0,0 @@
-import { ReactRouterAspect } from './react-router.aspect';
-
-export { Routing } from './routing-method';
-export type { ReactRouterUI } from './react-router.ui.runtime';
-
-// 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
-export { Link, LinkProps } from '@teambit/base-ui.routing.link';
-export { NavLink, NavLinkProps } from '@teambit/base-ui.routing.nav-link';
-export { LinkAnchor, LinkContextProvider, useLinkContext } from '@teambit/ui-foundation.ui.react-router.link-anchor';
-
-export { ReactRouterAspect };
-export default ReactRouterAspect;

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 };

package/react-router.aspect.ts

@@ -1,5 +0,0 @@
-import { Aspect } from '@teambit/harmony';
-
-export const ReactRouterAspect = Aspect.create({
-  id: 'teambit.ui-foundation/react-router',
-});

package/react-router.ui.runtime.tsx

@@ -1,124 +0,0 @@
-import React 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 { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
-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';
-
-type RouteChangeSlot = SlotRegistry<LocationListener>;
-type RenderRoutesOptions = {
-  initialLocation?: string;
-};
-
-export class ReactRouterUI {
-  private routerHistory?: History;
-  private routingMode = isBrowser ? Routing.url : Routing.static;
-
-  constructor(
-    /**
-     * route slot.
-     */
-    private routeSlot: RouteSlot,
-    /**
-     *
-     */
-    private routeChangeListener: RouteChangeSlot
-  ) {}
-
-  /**
-   * 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>
-    );
-  }
-
-  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`.
-   * InMemory - store state internally and don't update the browser.
-   */
-  setRoutingMode(routing: Routing) {
-    this.routingMode = routing;
-  }
-
-  /**
-   * register a new route.
-   */
-  register(route: RouteProps) {
-    this.routeSlot.register(route);
-    return this;
-  }
-
-  registerListener(listener: LocationListener) {
-    this.routeChangeListener.register(listener);
-  }
-
-  /**
-   * change browser location
-   */
-  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>
-  ) => {
-    if (typeof action !== 'string') {
-      this.legacyNavigateTo(path as string, action);
-      return;
-    }
-
-    switch (action) {
-      case 'POP':
-        return; // TBD;
-      case 'REPLACE':
-        this.routerHistory?.replace(path);
-        return;
-      case 'PUSH':
-      default:
-        this.routerHistory?.push(path);
-    }
-  };
-
-  /**
-   * change browser location
-   */
-  private legacyNavigateTo = (
-    /** destination */
-    path: string,
-    state?: Record<string, any>
-  ) => {
-    this.routerHistory?.push(path, state);
-  };
-
-  static slots = [Slot.withType<RouteProps>(), Slot.withType<LocationListener>()];
-  static runtime = UIRuntime;
-
-  static async provider(deps, config, [routeSlot, routeChangeSlot]: [RouteSlot, RouteChangeSlot]) {
-    return new ReactRouterUI(routeSlot, routeChangeSlot);
-  }
-}
-
-ReactRouterAspect.addRuntime(ReactRouterUI);

package/route-context.tsx

@@ -1,74 +0,0 @@
-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 { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
-import { ReactRouterUI } from './react-router.ui.runtime';
-import { reactRouterRouting } from './react-router-routing';
-import { Routing } from './routing-method';
-
-export type History = ReturnType<typeof useHistory>;
-
-type RouterContextProps = {
-  reactRouterUi: ReactRouterUI;
-  routing?: Routing;
-  children: ReactNode;
-  location?: string;
-};
-
-type RootRouteProps = {
-  rootRoutes: RouteProps[];
-  routeSlot: RouteSlot;
-};
-
-/**
- * Setup context needed for routing.
- */
-export function RouteContext({ reactRouterUi, 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>
-    </Router>
-  );
-}
-
-export function RootRoute({ rootRoutes, routeSlot }: RootRouteProps) {
-  return <SlotRouter slot={routeSlot} rootRoutes={rootRoutes} />;
-}
-
-/** provides the router engine (browser, inMemory, etc) */
-function Router({ type, children, location }: { type: Routing; children: ReactNode; location?: string }) {
-  switch (type) {
-    case Routing.static:
-      return <StaticRouter location={location}>{children}</StaticRouter>;
-    case Routing.inMemory:
-      return (
-        <MemoryRouter initialEntries={[location || '/']} initialIndex={1}>
-          {children}
-        </MemoryRouter>
-      );
-    case Routing.hash:
-      return <HashRouter>{children}</HashRouter>;
-    case Routing.url:
-    default:
-      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/routing-method.tsx

@@ -1,6 +0,0 @@
-export enum Routing {
-  url,
-  hash,
-  inMemory,
-  static,
-}

package/tsconfig.json

@@ -1,35 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      "es2019",
-      "DOM",
-      "ES6",
-      "DOM.Iterable",
-      "ScriptHost"
-    ],
-    "target": "es2015",
-    "module": "commonjs",
-    "jsx": "react",
-    "declaration": true,
-    "sourceMap": true,
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "outDir": "dist",
-    "composite": true,
-    "emitDeclarationOnly": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "allowSyntheticDefaultImports": true,
-    "strictPropertyInitialization": false,
-    "strict": true,
-    "noImplicitAny": false,
-    "rootDir": ".",
-    "removeComments": true,
-    "preserveConstEnums": true,
-    "resolveJsonModule": true
-  },
-  "exclude": [
-    "dist"
-  ]
-}

package/types/asset.d.ts

@@ -1,29 +0,0 @@
-declare module '*.png' {
-  const value: any;
-  export = value;
-}
-declare module '*.svg' {
-  import type { FunctionComponent, SVGProps } from 'react';
-
-  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
-  const src: string;
-  export default src;
-}
-
-// @TODO Gilad
-declare module '*.jpg' {
-  const value: any;
-  export = value;
-}
-declare module '*.jpeg' {
-  const value: any;
-  export = value;
-}
-declare module '*.gif' {
-  const value: any;
-  export = value;
-}
-declare module '*.bmp' {
-  const value: any;
-  export = value;
-}

package/types/style.d.ts

@@ -1,42 +0,0 @@
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.mdx' {
-  const component: any;
-  export default component;
-}