Handle relative route template (#1276)

* Add tests around extractTemplates 404 handling

* Resolves relative route.template against ROOT

This ensure that given a relative `route.template`, extractTemplates
behavior remains intact while also supporting absolute `route.template`.

See
#1253 (comment)
for details

* Update documentation for route.template

docs/config.md

@@ -47,7 +47,7 @@ A route is an `object` that represents a unique location in your site and is the
 It supports the following properties:
 
 - `path: String` - The **path** of the URL to match for this route, **excluding search parameters and hash fragments, relative to your `siteRoot + basePath` (if this is a child route, also relative to this route's parent path)**
-- `template: String` - The path of the component to be used to render this route. (Relative to the root of your project)
+- `template: String` - The path of the component to be used to render this route. (Relative to the root of your project or absolute)
 - `getData: async Function(resolvedRoute, { dev }) => Object` - An async function that returns or resolves an object of any necessary data for this route to render.
   - Arguments
     - `resolvedRoute: Object` - This is the resolved route this function is handling.

packages/react-static/src/static/__tests__/extractTemplates.test.js

@@ -0,0 +1,64 @@
+import extractTemplates from '../extractTemplates'
+
+const config = {
+  paths: {
+    ROOT: process.cwd(),
+  },
+}
+
+test('a 404 route is required when the build is not incremental', async () => {
+  expect.assertions(1)
+  try {
+    await extractTemplates({
+      config,
+      routes: [],
+      incremental: false,
+    })
+  } catch (error) {
+    expect(error.message).toBeTruthy()
+  }
+})
+
+test('a 404 route is not required when the build is incremental', async () => {
+  expect.assertions(1)
+  try {
+    const state = await extractTemplates({
+      config,
+      routes: [],
+      incremental: true,
+    })
+    expect(state).toBeTruthy()
+  } catch (_error) {
+    throw new Error()
+  }
+})
+
+test('the 404 template is the first one', async () => {
+  const state = await extractTemplates({
+    config,
+    routes: [
+      { path: '/', template: './src/templates/Homepage' },
+      { path: '404', template: './src/templates/404' },
+    ],
+  })
+
+  expect(state.templates[0]).toContain('src/templates/404')
+})
+
+test('relative routes path resolves against the ROOT', async () => {
+  const { templates } = await extractTemplates({
+    config,
+    routes: [{ path: '404', template: './src/templates/NotFound' }],
+  })
+
+  expect(templates[0]).toBe(`${config.paths.ROOT}/src/templates/NotFound`)
+})
+
+test('absolute routes path are kept intact', async () => {
+  const { templates } = await extractTemplates({
+    config,
+    routes: [{ path: '404', template: '/home/src/templates/NotFound' }],
+  })
+
+  expect(templates[0]).toBe('/home/src/templates/NotFound')
+})

packages/react-static/src/static/extractTemplates.js

@@ -17,13 +17,14 @@ export default (async function extractTemplates(state) {
       return
     }
 
-    route.template = slash(path.resolve(config.paths.ARTIFACTS, route.template))
+    route.template = slash(path.resolve(config.paths.ROOT, route.template))
 
     // Check if the template has already been added
     const index = templates.indexOf(route.template)
     if (index === -1) {
       // If it's new, add it
       if (route.path === '404') {
+        // Make sure 404 template is the first one
         templates.unshift(route.template)
         notFoundPending = false
       } else {
@@ -39,7 +40,6 @@ export default (async function extractTemplates(state) {
     )
   }
 
-  // Make sure 404 template is the first one
   return {
     ...state,
     templates,