From 6dabf849b5a05cfbbfc405ee8b128fdd2fdf3265 Mon Sep 17 00:00:00 2001 From: Alberto Gasparin Date: Sat, 2 Apr 2022 17:22:43 +1100 Subject: [PATCH 1/2] Consolidate Router component --- docs/_sidebar.md | 1 - docs/api/components.md | 74 +---- docs/router/README.md | 1 - docs/router/selection.md | 3 - docs/router/ssr.md | 29 +- examples/hydration/index.tsx | 5 +- src/__tests__/integration/test.tsx | 23 +- .../unit/controllers/memory-router/test.tsx | 21 -- .../unit/controllers/resource-store/test.tsx | 11 +- .../unit/controllers/router-store/test.tsx | 74 +++-- .../unit/controllers/router/test.tsx | 189 ++++++++++- .../unit/controllers/static-router/test.tsx | 221 ------------- .../controllers/subscribers/route/test.tsx | 7 +- .../controllers/universal-router/test.tsx | 304 ------------------ src/common/types.ts | 11 - src/common/utils/create-location/index.ts | 2 +- .../utils/create-location/parse-path.ts | 2 +- src/controllers/index.ts | 4 +- src/controllers/memory-router/index.tsx | 58 ---- src/controllers/resource-store/index.tsx | 3 +- src/controllers/resource-store/types.ts | 1 - src/controllers/router-store/index.tsx | 71 +--- src/controllers/router-store/types.ts | 30 +- src/controllers/router/index.tsx | 137 ++++---- src/controllers/router/types.ts | 22 +- src/controllers/static-router/index.tsx | 56 ---- src/controllers/static-router/types.ts | 8 - src/controllers/subscribers/route/index.tsx | 3 +- src/controllers/universal-router/index.tsx | 100 ------ src/controllers/universal-router/types.ts | 27 -- src/index.js.flow | 19 +- src/index.ts | 2 - src/types.js.flow | 51 +-- 33 files changed, 410 insertions(+), 1160 deletions(-) delete mode 100644 docs/router/selection.md delete mode 100644 src/__tests__/unit/controllers/memory-router/test.tsx delete mode 100644 src/__tests__/unit/controllers/static-router/test.tsx delete mode 100644 src/__tests__/unit/controllers/universal-router/test.tsx delete mode 100644 src/controllers/memory-router/index.tsx delete mode 100644 src/controllers/static-router/index.tsx delete mode 100644 src/controllers/static-router/types.ts delete mode 100644 src/controllers/universal-router/index.tsx delete mode 100644 src/controllers/universal-router/types.ts diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 0a28db2b..34705108 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -11,7 +11,6 @@ * **Router** - [Configuration](/router/configuration.md) - - [Selection](/router/selection.md) - [State](/router/state.md) - [SSR](/router/ssr.md) diff --git a/docs/api/components.md b/docs/api/components.md index d4e601e2..34327d1b 100644 --- a/docs/api/components.md +++ b/docs/api/components.md @@ -29,43 +29,16 @@ import { appRoutes } from './routing'; ### Router props -| prop | type | description | -| ----------------- | ------------------------- | -------------------------------------------------------------------------------------------------- | -| `routes` | `Routes[]` | Your application's routes | -| `initialRoute` | `Route` | The route your application is initially showing | -| `history` | `History` | The history instance for the router | -| `basePath` | `string` | Base path string that will get prepended to all route paths | -| `resourceContext` | `ResourceContext` | Custom contextual data that will be provided to all your resources' `getKey` and `getData` methods | -| `resourceData` | `ResourceData` | Pre-resolved resource data. When provided, the router will not request resources on mount | -| `onPrefetch` | `function(RouterContext)` | Called when prefetch is triggered from a Link | - -## StaticRouter - -If you are planning to render your application on the server, you must use the `StaticRouter` in your server side entry. The `StaticRouter` should only be used on server as it omits all browser-only resources. It does not require a `history` prop to be provided, instead, you simply need to provide the current `location` as a string. In order to achieve this, we recommend your server side application uses [`jsdom`](https://github.com/jsdom/jsdom). - -```js -// server-app.js -import { StaticRouter } from 'react-resource-router'; -import { App } from '../components'; -import { appRoutes } from '../routing'; - -const { pathname, search } = window.location; -const location = `${pathname}${search}`; - -export const ServerApp = () => ( - - - -); -``` - -### StaticRouter props - -| prop | type | description | -| ---------- | ---------- | ----------------------------------------------------------- | -| `routes` | `Routes[]` | Your application's routes | -| `location` | `string` | The string representation of the app's current location | -| `basePath` | `string` | Base path string that will get prepended to all route paths | +| prop | type | description | +| ----------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | +| `routes` | `Routes[]` | Your application's routes | +| `history` | `History` | The history instance for the router, if omitted memory history will be used (optional but recommended) | +| `location` | `string` | If `history` prop is omitted, this configures the initial location for the default memory history (optional, useful for tests and storybooks) | +| `basePath` | `string` | Base path string that will get prepended to all route paths (optional) | +| `initialRoute` | `Route` | The route your application is initially showing, it's a performance optimisation to avoid route matching cost on initial render(optional) | +| `resourceContext` | `ResourceContext` | Custom contextual data that will be provided to all your resources' `getKey` and `getData` methods (optional) | +| `resourceData` | `ResourceData` | Pre-resolved resource data. When provided, the router will not request resources on mount (optional) | +| `onPrefetch` | `function(RouterContext)` | Called when prefetch is triggered from a Link (optional) | ## MemoryRouter @@ -73,28 +46,7 @@ The `MemoryRouter` component can be used for your application's unit tests. ```js it('should send right props after render with routes', () => { - mount( - - - {({ history, location, routes, route, match, query }) => { - expect(history).toEqual(mockHistory); - expect(location).toEqual(mockLocation); - expect(routes).toEqual(routes); - expect(route).toEqual( - expect.objectContaining({ - path: `/pathname`, - }) - ); - expect(match).toBeTruthy(); - expect(query).toEqual({ - foo: 'bar', - }); - - return
I am a subscriber
; - }} - - - ); + render({/* ... */}); }); ``` @@ -102,9 +54,9 @@ it('should send right props after render with routes', () => { | prop | type | description | | ---------- | ---------- | ----------------------------------------------------------- | -| `routes` | `Routes[]` | Your application's routes | -| `location` | `string` | The string representation of the app's current location | | `basePath` | `string` | Base path string that will get prepended to all route paths | +| `location` | `string` | The string representation of the app's current location | +| `routes` | `Routes[]` | Your application's routes | ## Link component diff --git a/docs/router/README.md b/docs/router/README.md index 1df7d24f..7809f9d1 100644 --- a/docs/router/README.md +++ b/docs/router/README.md @@ -1,6 +1,5 @@ - **Router** - [Configuration](./configuration.md) - - [Selection](./selection.md) - [State](./state.md) - [SSR](./ssr.md) diff --git a/docs/router/selection.md b/docs/router/selection.md deleted file mode 100644 index f034e806..00000000 --- a/docs/router/selection.md +++ /dev/null @@ -1,3 +0,0 @@ -# Which Router should I use? - -React Resource Router provides three kinds of routers which should be quite familiar to anyone who has used `react-router` previously. These are the core [`Router`](../api/components.md#router), the [`StaticRouter`](../api/components.md#staticrouter) for use on the server and the [`MemoryRouter`](../api/components.md#memoryrouter) for use in tests. Please check the [API](../api) docs for more detailed information about these components. diff --git a/docs/router/ssr.md b/docs/router/ssr.md index b1b0f8f9..2d87032c 100644 --- a/docs/router/ssr.md +++ b/docs/router/ssr.md @@ -22,22 +22,25 @@ import { RouteComponent } from 'react-resource-router'; export const App = () => ( <> + +