Refactor fusion-plugin-react-router to make depending on browser history easier

fusion-plugin-react-router/README.md

@@ -174,6 +174,23 @@ app.register(GetStaticContextToken, (ctx: Context) => {
 });
 ```
 
+##### `BrowserHistoryToken`
+
+```js
+import {BrowserHistoryToken} from 'fusion-plugin-react-router';
+```
+
+Token for exposing the browser's history to providers. See "Accessing History" below for more.
+
+
+##### `browserHistoryPlugin`
+
+```jsx
+import {browserHistoryPlugin} from 'fusion-plugin-react-router';
+```
+
+Plugin for exposing the browser's history to providers. See "Accessing History" below for more.
+
 ---
 
 #### Routing Events and Timing Metrics
@@ -220,6 +237,26 @@ app.register(createPlugin({
 }));
 ```
 
+Alternatively, you can access the history on the browser using `BrowserHistoryToken` and `browserHistoryPlugin`.
+
+```js
+import {createPlugin} from 'fusion-core';
+import {BrowserHistoryToken, browserHistoryPlugin} from 'fusion-plugin-react-router';
+
+app.register(BrowserHistoryToken, browserHistoryPlugin);
+app.register(createPlugin({
+  deps: {
+    history: BrowserHistoryToken
+  },
+  provides: ({history}) => {
+    // ...
+  }
+}))
+```
+
+This is useful if you want to get the browser's history within a provider.
+
+
 #### Router
 
 Configures a router and acts as a React context provider for routing concerns. The plugin already provides `<Router>` in the middleware for your application.

fusion-plugin-react-router/__tests__/plugin.js

@@ -19,6 +19,8 @@ import RouterPlugin, {
   RouterProviderToken,
   RouterToken,
   GetStaticContextToken,
+  BrowserHistoryToken,
+  browserHistoryPlugin,
 } from '../src/plugin';
 
 const addRoutePrefix = (ctx, next) => {
@@ -412,6 +414,51 @@ if (__BROWSER__) {
     const simulator = setup(app);
     await simulator.render('/');
   });
+
+  test('Browser History Provider', async () => {
+    const element = <div />;
+
+    const app = getApp(element);
+    const UniversalEvents = getMockEvents({
+      title: '/',
+      page: '/',
+    });
+
+    let middlewareHistory;
+    let providerHistory;
+
+    app.register(UniversalEventsToken, UniversalEvents);
+    app.register(BrowserHistoryToken, browserHistoryPlugin);
+    app.register(
+      createPlugin({
+        deps: {
+          history: BrowserHistoryToken,
+        },
+        provides({history}) {
+          expect(history).toBeTruthy();
+          providerHistory = history;
+        },
+      })
+    );
+
+    app.middleware(
+      {
+        router: RouterToken,
+      },
+      ({router}) => (ctx, next) => {
+        const {history} = router.from(ctx);
+        expect(history).toBeTruthy();
+        middlewareHistory = history;
+        return next();
+      }
+    );
+    const simulator = setup(app);
+    await simulator.render('/');
+
+    expect(middlewareHistory).toBe(providerHistory);
+
+    cleanup();
+  });
 }
 
 function getMockEvents({

fusion-plugin-react-router/src/index.js

@@ -10,6 +10,8 @@ import plugin, {
   RouterProviderToken,
   RouterToken,
   GetStaticContextToken,
+  BrowserHistoryToken,
+  browserHistoryPlugin,
 } from './plugin';
 import * as server from './server';
 import * as browser from './browser';
@@ -20,7 +22,13 @@ declare var __BROWSER__: Boolean;
 
 export default plugin;
 
-export {RouterProviderToken, RouterToken, GetStaticContextToken};
+export {
+  RouterProviderToken,
+  RouterToken,
+  GetStaticContextToken,
+  BrowserHistoryToken,
+  browserHistoryPlugin,
+};
 
 export const BrowserRouter = __BROWSER__
   ? browser.BrowserRouter

fusion-plugin-react-router/src/plugin.js

@@ -18,6 +18,7 @@ import {
   unescape,
   memoize,
   RouteTagsToken,
+  RoutePrefixToken,
 } from 'fusion-core';
 import type {Token, Context, FusionPlugin} from 'fusion-core';
 
@@ -63,6 +64,33 @@ type PluginDepsType = {
 // Preserve browser history instance across HMR
 let browserHistory;
 
+function getBrowserHistory(basename = '') {
+  // Note that for a given client, the route prefix is static.
+  // That makes it safe to do this caching.
+  if (__BROWSER__) {
+    if (!browserHistory || (__DEV__ && typeof window.jsdom !== 'undefined')) {
+      browserHistory = createBrowserHistory({basename});
+    }
+  }
+  return browserHistory;
+}
+
+export const BrowserHistoryToken = createToken<RouterHistoryType>(
+  'BrowserHistory'
+);
+
+type BrowserHistoryDepsType = {
+  prefix: typeof RoutePrefixToken.optional,
+};
+
+export const browserHistoryPlugin = createPlugin<
+  BrowserHistoryDepsType,
+  RouterHistoryType
+>({
+  deps: {prefix: RoutePrefixToken.optional},
+  provides: ({prefix}) => getBrowserHistory(prefix || ''),
+});
+
 const plugin: FusionPlugin<PluginDepsType, HistoryWrapperType> = createPlugin({
   deps: {
     emitter: UniversalEventsToken.optional,
@@ -174,7 +202,7 @@ const plugin: FusionPlugin<PluginDepsType, HistoryWrapperType> = createPlugin({
           !browserHistory ||
           (__DEV__ && typeof window.jsdom !== 'undefined')
         ) {
-          browserHistory = createBrowserHistory({basename: ctx.prefix});
+          browserHistory = getBrowserHistory(ctx.prefix);
         }
         // Expose the history object
         myAPI.history = browserHistory;