feat(plop): create routing files with plop

Author: jurgenbelien

config/plop/plopfile.mjs

@@ -5,6 +5,7 @@
  * @param {import('plop').NodePlopAPI} plop
  */
 export default function (plop) {
+  plop.setHelper('eq', (a, b) => a === b);
   plop.setHelper('hasRouteLocale', (value) => value.includes('[locale]/'));
   plop.setHelper('routeParams', (value) => {
     // return all params in between [] in value:
@@ -14,9 +15,17 @@ export default function (plop) {
       .map((param) => param.slice(1, -1)) // remove brackets
       .filter((param) => param !== 'locale'); // remove locale param
   });
+  plop.setHelper('trailingParam', (value) =>
+    // Return the trailing param in a route
+    // If the last slug is not a param, this is undefined
+    value.split('/').pop()?.match(/\[(.*?)\]/)?.[1]
+  );
   plop.setHelper('trailingSlash', (value) =>
     value.endsWith('/') ? value : `${value}/`
   );
+  plop.setHelper('toTemplateString', (value) => 
+    `${value.replace(/\[(.*?)\]/g, '${$1}')}`
+  );
 
   plop.setGenerator('api', {
     description: 'create a new API route',
@@ -149,13 +158,20 @@ export default function (plop) {
       {
         type: 'input',
         name: 'route',
-        message: 'Page route (e.g. [locale]/search/ )?',
+        message: 'Page route (e.g. `[locale]/search/`)?',
       },
       {
         type: 'input',
         name: 'name',
         message: 'Model name in DatoCMS? (leave empty if none)',
       },
+      {
+        when: (data) => !!data.name,
+        type: 'confirm',
+        name: 'separateRouting',
+        message: (data) => `Create separate file in routing for \`${plop.getHelper('pascalCase')(data.name)}\`?`,
+        default: false,
+      },
     ],
     actions: [
       {
@@ -169,6 +185,18 @@ export default function (plop) {
         templateFile: 'templates/page/route.query.graphql.hbs',
         skip: (data) => !data.name && 'No DatoCMS model',
       },
+      {
+        type: 'add',
+        path: '../../src/lib/routing/{{ pascalCase name }}Route.fragment.graphql',
+        templateFile: 'templates/page/page.fragment.graphql.hbs',
+        skip: (data) => !data.name && 'No RouteFragment',
+      },
+      {
+        type: 'add',
+        path: '../../src/lib/routing/{{ camelCase name }}.ts',
+        templateFile: 'templates/page/page.ts.hbs',
+        skip: (data) => !data.separateRouting && 'No separate route',
+      },
     ],
   });
 }

config/plop/templates/page/Page.fragment.graphql.hbs

@@ -0,0 +1,29 @@
+fragment {{ pascalCase name }}Route on {{ pascalCase name }}Record {
+  __typename
+  id
+  title
+  {{#each (routeParams route)}}
+  {{#if (eq (trailingParam ../route) this)}}
+  slug
+  {{#if (hasRouteLocale ../route)}}
+  _allSlugLocales {
+    locale
+    value
+  }
+  {{/if}}
+  {{else}}
+  {{this}} {
+    __typename
+    id
+    title
+    slug
+    {{#if (hasRouteLocale ../route)}}
+    _allSlugLocales {
+      locale
+      value
+    }
+    {{/if}}
+  }
+  {{/if}}
+  {{/each}}
+}

config/plop/templates/page/page.ts.hbs

@@ -0,0 +1,28 @@
+{{#if (hasRouteLocale route) }}
+import type { {{ pascalCase name }}RouteFragment, SiteLocale } from '@lib/datocms/types';
+import { getLocalizedSlug } from './lib/slug';
+
+export const get{{ pascalCase name }}Path = ({ locale, record }: { locale?: SiteLocale, record: {{ pascalCase name }}RouteFragment }) => {
+  {{#each (routeParams route) }}
+  {{#if (eq (trailingParam ../route) this) }}
+  const {{this}} = getLocalizedSlug({ locale, record: record })
+  {{else}}
+  const {{this}} = getLocalizedSlug({ locale, record: record.{{this}} });
+  {{/if}}
+  {{/each}}
+  return `{{{ toTemplateString route }}}`;
+};
+{{else}}
+import type { {{ pascalCase name }}RouteFragment } from '@lib/datocms/types';
+
+export const get{{ pascalCase name }}Path = (record: {{ pascalCase name }}RouteFragment) => {
+  {{#each (routeParams route) }}
+  {{#if (eq (trailingParam ../route) this) }}
+  const {{this}} = record.slug;
+  {{else}}
+  const {{this}} = record.{{this}}.slug;
+  {{/if}}
+  {{/each}}
+  return `{{{ toTemplateString route }}}`;
+};
+{{/if}}