feat(plugin): support custom template args per page

Author: mohatt

README.md

@@ -440,7 +440,7 @@ These are the functions exposed by the plugin.
 
 ### createAdvancedPage
 
-> `({ route: string, params?: object, pagination?: object, ...context: any[] }): void`
+> `({ route: string, params?: object, templateArgs?: object, pagination?: object, ...context: any[] }): void`
 
 Creates page(s) based on given input parameters. _Note: This function can only be called within [Page helpers](#page-helpers)._
 

src/node/__tests__/__fixtures__/create-pages.ts

@@ -275,6 +275,30 @@ export default <
       })
     },
   },
+  {
+    title: 'correctly creates pages (dynamic-template-args)',
+    pages: [
+      {
+        id: 'page-id',
+        template: '/path/to/page.js',
+        helper,
+        routes: [{ name: 'page', path: '/pages/:page' }],
+      },
+    ],
+    helper: ({ createAdvancedPage }) => {
+      for (const slug of ['hello', 'world']) {
+        createAdvancedPage({
+          route: 'page',
+          params: {
+            page: slug,
+          },
+          templateArgs: {
+            contentPath: `content/${slug}.mdx`,
+          },
+        })
+      }
+    },
+  },
   {
     title: 'correctly creates pages (dynamic-page)',
     pages: [

src/node/__tests__/__snapshots__/create-pages.ts.snap

@@ -162,6 +162,33 @@ exports[`createPages > 'correctly creates pages (dynamic-page)' > createPage 1`]
 
 exports[`createPages > 'correctly creates pages (dynamic-page)' > routes.json 1`] = `"[{"name":"page","path":"/pages/:page","scopes":{}}]"`;
 
+exports[`createPages > 'correctly creates pages (dynamic-template-args)' > createPage 1`] = `
+[
+  [
+    {
+      "component": "/path/to/page.js?contentPath=content%2Fhello.mdx",
+      "context": {
+        "id": "page-id",
+        "page": "hello",
+      },
+      "path": "/pages/hello",
+    },
+  ],
+  [
+    {
+      "component": "/path/to/page.js?contentPath=content%2Fworld.mdx",
+      "context": {
+        "id": "page-id",
+        "page": "world",
+      },
+      "path": "/pages/world",
+    },
+  ],
+]
+`;
+
+exports[`createPages > 'correctly creates pages (dynamic-template-args)' > routes.json 1`] = `"[{"name":"page","path":"/pages/:page","scopes":{}}]"`;
+
 exports[`createPages > 'correctly creates pages (home-about)' > createPage 1`] = `
 [
   [

src/node/api.ts

@@ -149,6 +149,13 @@ export interface CreateAdvancedPageProps {
    */
   params?: RouteParams
 
+  /**
+   * Additional arguments to be passed to the page template.
+   */
+  templateArgs?: {
+    [k: string]: string | number
+  }
+
   /**
    * Optional pagination settings for paginated pages.
    */

src/node/lib/pages-creator.ts

@@ -106,7 +106,13 @@ export default class PagesCreator {
   /**
    * Creates a Gatsby page with optional pagination.
    */
-  private createPage({ route, params = {}, pagination, ...context }: CreateAdvancedPageProps) {
+  private createPage({
+    route,
+    params = {},
+    templateArgs,
+    pagination,
+    ...context
+  }: CreateAdvancedPageProps) {
     const { currentPage } = this
     if (typeof route !== 'string' || !route) {
       throw new PageHelperError('Route name', ' must be a non-empty string')
@@ -117,9 +123,15 @@ export default class PagesCreator {
       throw new PageHelperError(`Unrecognized route "${route}"`)
     }
 
+    const template = currentPage.template
+    const templateQuery =
+      templateArgs &&
+      new URLSearchParams(Object.entries(templateArgs).map(([k, v]) => [k, String(v)])).toString()
+    const templateUrl = templateQuery ? `${template}?${templateQuery}` : template
+
     const gatsbyPage: Page = {
       path: routeNode.pathGenerator(params),
-      component: currentPage.template,
+      component: templateUrl,
       context: {
         id: currentPage.id,
         ...params,

test/setup-test.ts

@@ -1,4 +1,4 @@
-// Use virtual file system for testing (see test/__mocks__/fs)
+// Use virtual file system for testing (see /__mocks__/fs)
 vi.mock('fs')
 vi.mock('fs/promises')