Making Router "plugins" prop required (#207)

Author: bobrovnik

README.md

@@ -122,12 +122,14 @@ import {
   RouteComponent,
   createBrowserHistory,
 } from 'react-resource-router';
+import { createResourcesPlugin } from 'react-resource-router/resources';
 import { appRoutes } from './routing/routes';
 
 const history = createBrowserHistory();
+const resourcesPlugin = createResourcesPlugin({});
 
 const App = () => (
-  <Router routes={appRoutes} history={history}>
+  <Router routes={appRoutes} history={history} plugins={[resourcesPlugin]}>
     <RouteComponent />
   </Router>
 );

docs/api/components.md

@@ -1,6 +1,6 @@
 ## Router
 
-The `Router` component should ideally wrap your client app as high up in the tree as possible. As soon as it is mounted, it will match the current route and then call all of the matched resources' `getData` methods. Components that are subscribed to these resources either via the [`useResource`](./hooks.md#useresource) hook or [`ResourceSubscriber`](./components.md#resourcesubscriber) will progressively update according to the requests' lifecycles.
+The `Router` component should ideally wrap your client app as high up in the tree as possible. 
 
 If you are planning to render your application on the server, we recommend creating a composition boundary between your router and the core of your application, including your `RouteComponent`.
 
@@ -19,10 +19,13 @@ export const App = () => (
 ```js
 // index.js
 import { Router, createBrowserHistory } from 'react-resource-router';
+import { createResourcesPlugin } from 'react-resource-router/resources';
 import { App } from './components';
 import { appRoutes } from './routing';
 
-<Router history={createBrowserHistory()} routes={appRoutes}>
+const resourcesPlugin = createResourcesPlugin({});
+
+<Router history={createBrowserHistory()} routes={appRoutes} plugins={[resourcesPlugin]}>
   <App />
 </Router>;
 ```
@@ -33,12 +36,54 @@ import { appRoutes } from './routing';
 | ----------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | `routes`          | `Routes[]`                | Your application's routes                                                                                                                     |
 | `history`         | `History`                 | The history instance for the router, if omitted memory history will be used (optional but recommended)                                        |
+| `plugins`         | `Plugin[]`                | Plugin allows you to hook into Router API and extra login on route load/prefetch/etc                                       |
 | `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)                                                                                      |
 
+## Resources plugin
+
+Resources plugin enables `resources` prop on the `Route` definition
+
+As soon as `Router` is mounted, it will match the current route and then call all of the matched resources' `getData` methods. Components that are subscribed to these resources either via the [`useResource`](./hooks.md#useresource) hook or [`ResourceSubscriber`](./components.md#resourcesubscriber) will progressively update according to the requests' lifecycles.
+
+```js
+// index.js
+import { Router, createBrowserHistory } from 'react-resource-router';
+import { createResourcesPlugin } from 'react-resource-router/resources';
+import { App } from './components';
+
+const resourcesPlugin = createResourcesPlugin({ ... });
+
+export const routes = [
+  {
+    path: '/home',
+    name: 'HOME',
+    component: Home,
+    resources: [homeResource],
+  },
+  {
+    path: '/about',
+    name: 'ABOUT',
+    component: About,
+    resources: [aboutResource],
+  },
+];
+
+<Router history={createBrowserHistory()} routes={routes} plugins={[resourcesPlugin]}>
+  <App />
+</Router>;
+```
+
+### Resources plugin props
+
+| prop              | type                      | description                                                                                                                                   |
+| ----------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `context` | `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)                                          |
+| `timeout`    | `number`            | `timout` is used to prevent slow APIs from causing long renders on the server, If a route resource does not return within the specified time then its data and promise will be set to null.(optional)                                          |
+
+
 ## MemoryRouter
 
 The `MemoryRouter` component can be used for your application's unit tests.
@@ -143,13 +188,15 @@ import {
   Router,
   RouteComponent,
 } from 'react-resource-router';
+import { createResourcesPlugin } from 'react-resource-router/resources';
 import { StaticNavigation } from '../components';
 import { routes } from '../routing';
 
 const history = createBrowserHistory();
+const resourcesPlugin = createResourcesPlugin({});
 
 export const App = () => (
-  <Router history={history} routes={routes}>
+  <Router history={history} routes={routes} plugins={[resourcesPlugin]}>
     <StaticNavigation />
     <RouteComponent />
   </Router>

docs/router/ssr.md

@@ -66,21 +66,30 @@ export const ClientApp = () => (
 
 Until React Suspense works on the server, we cannot do progressive rendering server side. To get around this, we need to `await` all resource requests to render our app _with all our resource data_ on the server.
 
-Luckily the `Router` provides a convenient static method to do this for us.
+Luckily we have a convenient static method `invokePluginLoad` to do this for us.
 
 ```js
 import { renderToString } from 'react-dom/server';
 import { Router } from 'react-resource-router';
+import { createResourcesPlugin } from 'react-resource-router/resources';
 import { routes } from '../routing/routes';
 import { ServerApp } from './app';
 
 const renderToStringWithData = async ({ location }) => {
-  await Router.requestResources({ location, routes });
+  const resourcesPlugin = createResourcesPlugin({});
+
+  invokePluginLoad([resourcesPlugin], {
+    history: createMemoryHistory({ initialEntries: [location] }),
+    routes,
+    basePath: '...',
+  });
+
+  const resourceData = await resourcesPlugin.getSerializedResources();
 
   return renderToString(<ServerApp location={location} />);
 };
 ```
 
 Notice that we do not need to provide any `resourceData` object to the `ServerApp`, the `Router` handles this for us internally.
 
-To prevent slow APIs from causing long renders on the server you can optionally pass in `timeout` as an option to `Router.requestResources`. If a route resource does not return within the specified time then its data and promise will be set to null.
+To prevent slow APIs from causing long renders on the server you can optionally pass in `timeout` as an option to `createResourcesPlugin({ timeout: ... })`. If a route resource does not return within the specified time then its data and promise will be set to null.

examples/basic-routing/index.tsx

@@ -31,7 +31,12 @@ const appRoutes = [
 
 const App = () => {
   return (
-    <Router basePath="/basic-routing" history={myHistory} routes={appRoutes}>
+    <Router
+      basePath="/basic-routing"
+      history={myHistory}
+      routes={appRoutes}
+      plugins={[]}
+    >
       <RouteComponent />
     </Router>
   );

examples/hash-routing/index.tsx

@@ -36,7 +36,7 @@ const routes = [
 
 const App = () => {
   return (
-    <Router history={history} routes={routes}>
+    <Router history={history} routes={routes} plugins={[]}>
       <RouteComponent />
     </Router>
   );

examples/hooks/index.tsx

@@ -13,6 +13,7 @@ import {
   createBrowserHistory,
   createRouterSelector,
 } from 'react-resource-router';
+import { createResourcesPlugin } from 'react-resource-router/resources';
 
 const myHistory = createBrowserHistory();
 const useRouteName = createRouterSelector(s => s.route.name);
@@ -51,9 +52,16 @@ const Title = () => {
   return <p>Page: {title}</p>;
 };
 
+const resourcesPlugin = createResourcesPlugin({});
+
 const App = () => {
   return (
-    <Router basePath="/hooks" history={myHistory} routes={appRoutes}>
+    <Router
+      basePath="/hooks"
+      history={myHistory}
+      routes={appRoutes}
+      plugins={[resourcesPlugin]}
+    >
       <Title />
       <RouteComponent />
     </Router>

examples/hydration-with-plugins/home.tsx

@@ -12,7 +12,6 @@ export const homeResource = createResource({
 
     return result;
   },
-  isBrowserOnly: true,
 });
 
 export const Home = () => {

examples/hydration-with-plugins/index.html

@@ -1,3 +1,4 @@
+import { createMemoryHistory } from 'history';
 import React from 'react';
 import { render } from 'react-dom';
 import { defaultRegistry } from 'react-sweet-state';
@@ -8,18 +9,25 @@ import {
   Router,
   RouteComponent,
   createBrowserHistory,
+  invokePluginLoad,
 } from 'react-resource-router';
+import { createResourcesPlugin } from 'react-resource-router/resources';
 
 const myHistory = createBrowserHistory();
 
 const appRoutes = [homeRoute];
 
 const getStateFromServer = async () => {
-  const resourceData = await Router.requestResources({
-    location: '/',
+  const resourcesPlugin = createResourcesPlugin({});
+
+  invokePluginLoad([resourcesPlugin], {
+    history: createMemoryHistory({ initialEntries: [location] }),
     routes: appRoutes,
+    basePath: '/hydration-with-plugins',
   });
 
+  const resourceData = await resourcesPlugin.getSerializedResources();
+
   // clearing the store
   defaultRegistry.stores.clear();
 
@@ -28,13 +36,16 @@ const getStateFromServer = async () => {
 
 const main = async () => {
   const data = await getStateFromServer();
+  const resourcesPlugin = createResourcesPlugin({
+    resourceData: data,
+  });
 
   const App = () => {
     return (
       <Router
-        basePath="/hydration"
+        basePath="/hydration-with-plugins"
         history={myHistory}
-        resourceData={data}
+        plugins={[resourcesPlugin]}
         routes={appRoutes}
       >
         <RouteComponent />

examples/hydration-with-plugins/index.tsx

@@ -8,6 +8,7 @@ import {
   RouteComponent,
   createBrowserHistory,
 } from 'react-resource-router';
+import { createResourcesPlugin } from 'react-resource-router/resources';
 
 const myHistory = createBrowserHistory();
 
@@ -20,6 +21,7 @@ const App = () => {
       history={myHistory}
       onPrefetch={({ route }) => console.log('Prefetching route', route.name)}
       routes={appRoutes}
+      plugins={[createResourcesPlugin({})]}
     >
       <RouteComponent />
     </Router>