Move formatting functions to a separate file

redwoodjs · Aug 17, 2022 · b29f87d · b29f87d
1 parent 90b1aac
commit b29f87d
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 99 deletions.
diff --git a/packages/cli/src/commands/generate/helpers.js b/packages/cli/src/commands/generate/helpers.js
@@ -17,7 +17,7 @@ import { pluralize, isPlural, isSingular } from '../../lib/rwPluralize'
 import { yargsDefaults } from '../generate'
 
 /**
- * Returns the path to a custom generator template, if found in the app.
+ * Returns the full path to a custom generator template, if found in the app.
  * Otherwise the default Redwood template.
  */
 export const customOrDefaultTemplatePath = ({

diff --git a/packages/cli/src/commands/generate/scaffold/scaffold.js b/packages/cli/src/commands/generate/scaffold/scaffold.js
@@ -181,6 +181,7 @@ export const files = async ({
       typescript,
     })),
     ...assetFiles(name, tailwind),
+    ...formattingFunctions(name),
     ...layoutFiles(name, pascalScaffoldPath, typescript, templateStrings),
     ...(await pageFiles(
       name,
@@ -236,6 +237,32 @@ const assetFiles = (name, tailwind) => {
   return fileList
 }
 
+const formattingFunctions = (name) => {
+  const outputPath = path.join(
+    getPaths().web.src,
+    'lib',
+    'formattingFunctions.tsx.template'
+  )
+
+  // skip files that already exist on disk, never worry about overwriting
+  if (fs.existsSync(outputPath)) {
+    return
+  }
+
+  const template = generateTemplate(
+    customOrDefaultTemplatePath({
+      side: 'web',
+      generator: 'scaffold',
+      templatePath: path.join('lib', 'formattingFunctions.tsx.template'),
+    }),
+    {
+      name,
+    }
+  )
+
+  return { [outputPath]: template }
+}
+
 const layoutFiles = (
   name,
   pascalScaffoldPath = '',
@@ -487,6 +514,18 @@ const componentFiles = async (
     })
   )
 
+  const formattingFunctionsImports = columns
+    .map((column) => column.displayFunction)
+    .sort()
+    .filter((v, i, a) => a.indexOf(v) === i)
+    .join(', ')
+
+  const listFormattingFunctionsImports = columns
+    .map((column) => column.listDisplayFunction)
+    .sort()
+    .filter((v, i, a) => a.indexOf(v) === i)
+    .join(', ')
+
   await asyncForEach(components, (component) => {
     const outputComponentName = component
       .replace(/Names/, pluralName)
@@ -518,6 +557,8 @@ const componentFiles = async (
         idType,
         intForeignKeys,
         pascalScaffoldPath,
+        listFormattingFunctionsImports,
+        formattingFunctionsImports,
         ...templateStrings,
       }
     )

diff --git a/packages/cli/src/commands/generate/scaffold/templates/components/Name.tsx.template b/packages/cli/src/commands/generate/scaffold/templates/components/Name.tsx.template
@@ -1,11 +1,9 @@
-<% if (columns.some((column) => column.listDisplayFunction === 'formatEnum')) { %>
-import humanize from 'humanize-string'
-<% } %>
-
 import { Link, routes, navigate } from '@redwoodjs/router'
 import { useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
+import { ${formattingFunctionsImports} } from 'src/lib/formattingFunctions'
+
 import type { Delete${singularPascalName}MutationVariables, Find${singularPascalName}ById } from 'types/graphql'
 
 const DELETE_${singularConstantName}_MUTATION = gql`
@@ -16,47 +14,6 @@ const DELETE_${singularConstantName}_MUTATION = gql`
   }
 `
 
-<% if (columns.some((column) => column.listDisplayFunction === 'formatEnum')) { %>
-const formatEnum = (values: string | string[] | null | undefined) => {
-  if (values) {
-    if (Array.isArray(values)) {
-      const humanizedValues = values.map((value) => humanize(value))
-      return humanizedValues.join(', ')
-    } else {
-      return humanize(values as string)
-    }
-  }
-}
-<% } %>
-
-<% if (columns.some((column) => column.listDisplayFunction === 'jsonDisplay')) { %>
-const jsonDisplay = (obj: unknown) => {
-  return (
-    <pre>
-      <code>{JSON.stringify(obj, null, 2)}</code>
-    </pre>
-  )
-}
-<% } %>
-
-<% if (columns.some((column) => column.listDisplayFunction === 'timeTag')) { %>
-const timeTag = (datetime?: string) => {
-  return (
-    datetime && (
-      <time dateTime={datetime} title={datetime}>
-        {new Date(datetime).toUTCString()}
-      </time>
-    )
-  )
-}
-<% } %>
-
-<% if (columns.some((column) => column.listDisplayFunction === 'checkboxInputTag')) { %>
-const checkboxInputTag = (checked: boolean) => {
-  return <input type="checkbox" checked={checked} disabled />
-}
-<% } %>
-
 const ${singularPascalName} = ({ ${singularCamelName} }: Find${singularPascalName}ById) => {
   const [delete${singularPascalName}] = useMutation(DELETE_${singularConstantName}_MUTATION, {
     onCompleted: () => {

diff --git a/packages/cli/src/commands/generate/scaffold/templates/components/Names.tsx.template b/packages/cli/src/commands/generate/scaffold/templates/components/Names.tsx.template
@@ -1,12 +1,9 @@
-<% if (columns.some((column) => column.listDisplayFunction === 'formatEnum')) { %>
-import humanize from 'humanize-string'
-<% } %>
-
 import { Link, routes } from '@redwoodjs/router'
 import { useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
 import { QUERY } from '${importComponentNamesCell}'
+import { ${listFormattingFunctionsImports} } from 'src/lib/formattingFunctions'
 
 import type { Delete${singularPascalName}MutationVariables, Find${pluralPascalName} } from 'types/graphql'
 
@@ -18,55 +15,6 @@ const DELETE_${singularConstantName}_MUTATION = gql`
   }
 `
 
-const MAX_STRING_LENGTH = 150
-
-<% if (columns.some((column) => column.listDisplayFunction === 'formatEnum')) { %>
-const formatEnum = (values: string | string[] | null | undefined) => {
-  if (values) {
-    if (Array.isArray(values)) {
-      const humanizedValues = values.map((value) => humanize(value))
-      return humanizedValues.join(', ')
-    } else {
-      return humanize(values as string)
-    }
-  }
-}
-<% } %>
-
-<% if (columns.some((column) => column.listDisplayFunction === 'truncate')) { %>
-const truncate = (value: string | number) => {
-  const output = value?.toString()
-  if (output?.length > MAX_STRING_LENGTH) {
-    return output.substring(0, MAX_STRING_LENGTH) + '...'
-  }
-  return output ?? ''
-}
-<% } %>
-
-<% if (columns.some((column) => column.listDisplayFunction === 'jsonTruncate')) { %>
-const jsonTruncate = (obj: unknown) => {
-  return truncate(JSON.stringify(obj, null, 2))
-}
-<% } %>
-
-<% if (columns.some((column) => column.listDisplayFunction === 'timeTag')) { %>
-const timeTag = (datetime?: string) => {
-  return (
-    datetime && (
-      <time dateTime={datetime} title={datetime}>
-        {new Date(datetime).toUTCString()}
-      </time>
-    )
-  )
-}
-<% } %>
-
-<% if (columns.some((column) => column.listDisplayFunction === 'checkboxInputTag')) { %>
-const checkboxInputTag = (checked: boolean) => {
-  return <input type="checkbox" checked={checked} disabled />
-}
-<% } %>
-
 const ${pluralPascalName}List = ({ ${pluralCamelName} }: Find${pluralPascalName}) => {
   const [delete${singularPascalName}] = useMutation(DELETE_${singularConstantName}_MUTATION, {
     onCompleted: () => {

diff --git a/packages/cli/src/commands/generate/scaffold/templates/lib/formattingFunctions.tsx.template b/packages/cli/src/commands/generate/scaffold/templates/lib/formattingFunctions.tsx.template
@@ -0,0 +1,44 @@
+import React from 'react'
+
+import humanize from 'humanize-string'
+
+const MAX_STRING_LENGTH = 150
+
+export const formatEnum = (values: string | string[] | null | undefined) => {
+  if (values) {
+    if (Array.isArray(values)) {
+      const humanizedValues = values.map((value) => humanize(value))
+      return humanizedValues.join(', ')
+    } else {
+      return humanize(values as string)
+    }
+  }
+
+  return ''
+}
+
+export const truncate = (value: string | number) => {
+  const output = value?.toString()
+  if (output?.length > MAX_STRING_LENGTH) {
+    return output.substring(0, MAX_STRING_LENGTH) + '...'
+  }
+  return output ?? ''
+}
+
+export const jsonTruncate = (obj: unknown) => {
+  return truncate(JSON.stringify(obj, null, 2))
+}
+
+export const timeTag = (datetime?: string) => {
+  return datetime ? (
+    <time dateTime={datetime} title={datetime}>
+      {new Date(datetime).toUTCString()}
+    </time>
+  ) : (
+    ''
+  )
+}
+
+export const checkboxInputTag = (checked: boolean) => {
+  return <input type="checkbox" checked={checked} disabled />
+}