Introduce plugins and extract resources as a plugin (#192)

atlassian-labs · Feb 23, 2023 · b735ec4 · b735ec4
1 parent 2fd9c38
commit b735ec4
Show file tree

Hide file tree

Showing 36 changed files with 873 additions and 115 deletions.
diff --git a/examples/basic-routing/index.tsx b/examples/basic-routing/index.tsx
@@ -31,7 +31,7 @@ const appRoutes = [
 
 const App = () => {
   return (
-    <Router routes={appRoutes} history={myHistory} basePath="/basic-routing">
+    <Router basePath="/basic-routing" history={myHistory} routes={appRoutes}>
       <RouteComponent />
     </Router>
   );

diff --git a/examples/hooks/index.tsx b/examples/hooks/index.tsx
@@ -47,7 +47,7 @@ const Title = () => {
 
 const App = () => {
   return (
-    <Router routes={appRoutes} history={myHistory} basePath="/hooks">
+    <Router basePath="/hooks" history={myHistory} routes={appRoutes}>
       <Title />
       <RouteComponent />
     </Router>

diff --git a/examples/hydration-with-plugins/home.tsx b/examples/hydration-with-plugins/home.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { createResource, useResource } from 'react-resource-router';
+
+export const homeResource = createResource({
+  type: 'home',
+  getKey: () => 'breedList',
+  maxAge: 10000,
+  getData: async () => {
+    const response = await fetch('https://dog.ceo/api/breeds/image/random');
+    const result: { message: string } = await response.json();
+
+    return result;
+  },
+});
+
+export const Home = () => {
+  // eslint-disable-next-line
+  const { data, loading, error } = useResource(homeResource);
+
+  return (
+    <div>
+      <h1>Random Dog</h1>
+      <section>
+        {data?.message && <img src={data.message} style={{ width: '400px' }} />}
+      </section>
+    </div>
+  );
+};
diff --git a/examples/hydration-with-plugins/index.html b/examples/hydration-with-plugins/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Example - Hydration</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="bundle.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/examples/hydration-with-plugins/index.tsx b/examples/hydration-with-plugins/index.tsx
@@ -0,0 +1,62 @@
+import { createMemoryHistory } from 'history';
+import React from 'react';
+import { render } from 'react-dom';
+import { defaultRegistry } from 'react-sweet-state';
+
+import { createResourcesPlugin } from '../../src/resources';
+
+import { homeRoute } from './routes';
+
+import {
+  Router,
+  RouteComponent,
+  createBrowserHistory,
+  invokePluginLoad,
+} from 'react-resource-router';
+
+const myHistory = createBrowserHistory();
+
+const appRoutes = [homeRoute];
+
+const getStateFromServer = async () => {
+  const resourcesPlugin = createResourcesPlugin({
+    resourceData: null,
+  });
+
+  invokePluginLoad([resourcesPlugin], {
+    history: createMemoryHistory({ initialEntries: [location] }),
+    routes: appRoutes,
+    basePath: '/hydration-with-plugins',
+  });
+
+  const resourceData = await resourcesPlugin.getSerializedResources();
+
+  // clearing the store
+  defaultRegistry.stores.clear();
+
+  return resourceData;
+};
+
+const main = async () => {
+  const data = await getStateFromServer();
+  const resourcesPlugin = createResourcesPlugin({
+    resourceData: data,
+  });
+
+  const App = () => {
+    return (
+      <Router
+        basePath="/hydration-with-plugins"
+        history={myHistory}
+        plugins={[resourcesPlugin]}
+        routes={appRoutes}
+      >
+        <RouteComponent />
+      </Router>
+    );
+  };
+
+  render(<App />, document.getElementById('root'));
+};
+
+main();
diff --git a/examples/hydration-with-plugins/routes.tsx b/examples/hydration-with-plugins/routes.tsx
@@ -0,0 +1,10 @@
+import { Home, homeResource } from './home';
+
+export const homeRoute = {
+  name: 'home',
+  path: '/',
+  exact: true,
+  component: Home,
+  navigation: null,
+  resources: [homeResource],
+};
diff --git a/examples/hydration/home.tsx b/examples/hydration/home.tsx
@@ -23,7 +23,7 @@ export const Home = () => {
     <div>
       <h1>Random Dog</h1>
       <section>
-        {data?.message && <img style={{ width: '400px' }} src={data.message} />}
+        {data?.message && <img src={data.message} style={{ width: '400px' }} />}
       </section>
     </div>
   );

diff --git a/examples/hydration/index.tsx b/examples/hydration/index.tsx
@@ -32,10 +32,10 @@ const main = async () => {
   const App = () => {
     return (
       <Router
-        routes={appRoutes}
-        history={myHistory}
         basePath="/hydration"
+        history={myHistory}
         resourceData={data}
+        routes={appRoutes}
       >
         <RouteComponent />
       </Router>

diff --git a/examples/routing-with-resources/about.tsx b/examples/routing-with-resources/about.tsx
@@ -35,7 +35,7 @@ export const About = () => {
       <h1>{breedName}</h1>
       <Link to={homeRoute}>Go to home</Link>
       <section>
-        {!loading && <img src={data?.message} alt="A cute dog!" />}
+        {!loading && <img alt="A cute dog!" src={data?.message} />}
       </section>
     </div>
   );

diff --git a/examples/routing-with-resources/home.tsx b/examples/routing-with-resources/home.tsx
@@ -28,7 +28,7 @@ export const Home = () => {
         <ul>
           {breeds.slice(0, 25).map(breed => (
             <li key={breed}>
-              <Link to={aboutRoute} query={{ name: breed }} prefetch="hover">
+              <Link prefetch="hover" query={{ name: breed }} to={aboutRoute}>
                 {breed}
               </Link>
             </li>

diff --git a/examples/routing-with-resources/index.tsx b/examples/routing-with-resources/index.tsx
@@ -16,10 +16,10 @@ const appRoutes = [homeRoute, aboutRoute];
 const App = () => {
   return (
     <Router
-      routes={appRoutes}
-      history={myHistory}
       basePath="/routing-with-resources"
+      history={myHistory}
       onPrefetch={({ route }) => console.log('Prefetching route', route.name)}
+      routes={appRoutes}
     >
       <RouteComponent />
     </Router>

diff --git a/package-lock.json b/package-lock.json
diff --git a/resources/package.json b/resources/package.json
@@ -0,0 +1,5 @@
+{
+  "main": "../build/cjs/resources.js",
+  "module": "../build/esm/resources.js",
+  "types": "../build/esm/resources.d.ts"
+}
diff --git a/src/__tests__/integration.test.tsx b/src/__tests__/integration.test.tsx
@@ -239,6 +239,7 @@ describe('<Router /> client-side integration tests', () => {
 
       expect(router.html()).toBe('loading:cache loading:network');
       await waitForData();
+
       router.update();
       expect(router.html()).toBe('data:cache-1 data:network-1');
 

diff --git a/src/common/types.ts b/src/common/types.ts
@@ -326,3 +326,19 @@ export type FindRouterContextOptions = {
   location: Location;
   basePath?: string;
 };
+
+export type Plugin = {
+  beforeRouteLoad?: (params: {
+    context: RouterContext;
+    nextContext: RouterContext;
+  }) => void;
+  routeLoad?: (params: {
+    context: RouterContext;
+    prevContext?: RouterContext;
+  }) => void;
+  routePrefetch?: (params: {
+    context: RouterContext;
+    nextContext: RouterContext;
+  }) => void;
+  [key: string]: any;
+};
diff --git a/src/common/utils/is-server-environment/index.ts b/src/common/utils/is-server-environment/index.ts
@@ -4,14 +4,15 @@
  */
 const isJsDomEnvironment = () =>
   window.name === 'nodejs' ||
-  navigator.userAgent.includes('Node.js') ||
-  navigator.userAgent.includes('jsdom');
+  navigator?.userAgent.includes('Node.js') ||
+  navigator?.userAgent.includes('jsdom');
 
 export const isServerEnvironment = () => {
   if (
-    typeof process !== 'undefined' &&
-    process.versions != null &&
-    process.versions.node != null
+    typeof window === 'undefined' ||
+    (typeof process !== 'undefined' &&
+      process.versions != null &&
+      process.versions.node != null)
   ) {
     return true;
   }

diff --git a/src/controllers/plugins/index.ts b/src/controllers/plugins/index.ts
@@ -0,0 +1,24 @@
+import { History, Plugin, Routes } from '../../common/types';
+import { findRouterContext } from '../../common/utils';
+
+export const invokePluginLoad = (
+  plugins: Plugin[],
+  {
+    routes,
+    history,
+    basePath,
+  }: {
+    history: History;
+    routes: Routes;
+    basePath?: string;
+  }
+) => {
+  const context = findRouterContext(routes, {
+    location: history.location,
+    basePath,
+  });
+
+  plugins.forEach(p => {
+    p.routeLoad?.({ context });
+  });
+};
diff --git a/src/controllers/plugins/test.ts b/src/controllers/plugins/test.ts
@@ -0,0 +1,28 @@
+import { createMemoryHistory } from 'history';
+
+import { invokePluginLoad } from './index';
+
+describe('invokePluginLoad', () => {
+  it('calls each plugin load method', () => {
+    // (findRouterContext as any).mockReturnValue(firstContextMock);
+    const pluginOne = {
+      routeLoad: jest.fn(),
+    };
+    const pluginTwo = {
+      routeLoad: jest.fn(),
+    };
+
+    const pluginThree = {
+      routeLoad: jest.fn(),
+    };
+
+    invokePluginLoad([pluginOne, pluginTwo, pluginThree], {
+      history: createMemoryHistory(),
+      routes: [],
+    });
+
+    expect(pluginOne.routeLoad).toBeCalled();
+    expect(pluginTwo.routeLoad).toBeCalled();
+    expect(pluginThree.routeLoad).toBeCalled();
+  });
+});