diff --git a/src/createElements.js b/src/createElements.js new file mode 100644 index 00000000..dd85c906 --- /dev/null +++ b/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 ; + }); +} diff --git a/src/index.js b/src/index.js index c95bf688..77fdaf09 100644 --- a/src/index.js +++ b/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'; diff --git a/src/resolveElements.js b/src/resolveElements.js index 16d69a66..777f8de7 100644 --- a/src/resolveElements.js +++ b/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 ; - }); -} - export default async function* resolveElements(match) { const routeMatches = getRouteMatches(match);