Factor out createElements from resolveElements

src/createElements.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import warning from 'warning';
+
+import { isResolved } from './ResolverUtils';
+
+export default function createElements(routeMatches, Components, matchData) {
+  return routeMatches.map((match, i) => {
+    const { route } = match;
+
+    const Component = Components[i];
+    const data = matchData[i];
+
+    const isComponentResolved = isResolved(Component);
+    const areDataResolved = isResolved(data);
+
+    if (route.render) {
+      // Perhaps undefined here would be more correct for "not ready", but
+      // Relay uses null in RelayReadyStateRenderer, so let's follow that
+      // convention.
+      return route.render({
+        match,
+        Component: isComponentResolved ? Component : null,
+        props: areDataResolved ? { ...match, data } : null,
+        data: areDataResolved ? data : null,
+      });
+    }
+
+    if (!isComponentResolved || !areDataResolved) {
+      // Can't render.
+      return undefined;
+    }
+
+    if (!Component) {
+      // Note this check would be wrong on potentially unresolved data.
+      warning(
+        data === undefined,
+        `Route ${i} has data, but no render method or component.`,
+      );
+
+      // Nothing to render.
+      return null;
+    }
+
+    return <Component {...match} data={data} />;
+  });
+}

src/index.js

@@ -4,6 +4,7 @@ export createBaseRouter from './createBaseRouter';
 export createBrowserRouter from './createBrowserRouter';
 export createConnectedLink from './createConnectedLink';
 export createConnectedRouter from './createConnectedRouter';
+export createElements from './createElements';
 export createFarceRouter from './createFarceRouter';
 export createMatchEnhancer from './createMatchEnhancer';
 export createRender from './createRender';

src/resolveElements.js

@@ -1,53 +1,10 @@
 import isPromise from 'is-promise';
-import React from 'react';
-import warning from 'warning';
 
+import createElements from './createElements';
 import {
   checkResolved, getComponents, getRouteMatches, getRouteValues, isResolved,
 } from './ResolverUtils';
 
-function createElements(routeMatches, Components, matchData) {
-  return routeMatches.map((match, i) => {
-    const { route } = match;
-
-    const Component = Components[i];
-    const data = matchData[i];
-
-    const isComponentResolved = isResolved(Component);
-    const areDataResolved = isResolved(data);
-
-    if (route.render) {
-      // Perhaps undefined here would be more correct for "not ready", but
-      // Relay uses null in RelayReadyStateRenderer, so let's follow that
-      // convention.
-      return route.render({
-        match,
-        Component: isComponentResolved ? Component : null,
-        props: areDataResolved ? { ...match, data } : null,
-        data: areDataResolved ? data : null,
-      });
-    }
-
-    if (!isComponentResolved || !areDataResolved) {
-      // Can't render.
-      return undefined;
-    }
-
-    if (!Component) {
-      // Note this check would be wrong on potentially unresolved data.
-      warning(
-        data === undefined,
-        `Route ${i} has data, but no render method or component.`,
-      );
-
-      // Nothing to render.
-      return null;
-    }
-
-    return <Component {...match} data={data} />;
-  });
-}
-
 export default async function* resolveElements(match) {
   const routeMatches = getRouteMatches(match);