#3748 Add custom template option back to blitz generate command

.changeset/slow-impalas-tap.md

@@ -0,0 +1,6 @@
+---
+"blitz": patch
+"@blitzjs/generator": patch
+---
+
+#3748 Add custom template usage back to toolkit

packages/blitz/package.json

@@ -35,6 +35,7 @@
     "dotenv-expand": "8.0.3",
     "envinfo": "7.8.1",
     "esbuild": "0.14.34",
+    "esbuild-register": "3.3.3",
     "find-up": "4.1.0",
     "fs-extra": "10.0.1",
     "hasbin": "1.2.3",

packages/blitz/src/cli/commands/generate.ts

@@ -15,7 +15,9 @@ import {
   MutationsGenerator,
   ModelGenerator,
   QueryGenerator,
+  addCustomTemplatesBlitzConfig,
 } from "@blitzjs/generator"
+import {log} from "../../logging"
 
 const getIsTypeScript = async () =>
   require("fs").existsSync(require("path").join(process.cwd(), "tsconfig.json"))
@@ -72,6 +74,7 @@ const args = arg(
     "--parent": String,
     "--dry-run": Boolean,
     "--env": String,
+    "--generate-custom-templates": Boolean,
 
     // Aliases
     "-e": "--env",
@@ -198,6 +201,11 @@ const getHelp = async () => {
       For example, this command generates pages under pages/projects/[projectId]/tasks/
 
         > blitz generate all tasks --parent=projects
+
+      # The '--generate-custom-templates' flag will copy the default templates to your app. 
+      This is useful if you want to customize the templates for your app
+
+        > blitz generate --generate-custom-templates
 
       # Database models can also be generated directly from the CLI.
         Model fields can be specified with any generator that generates a database model ("all", "model", "resource").
@@ -213,8 +221,44 @@ const getHelp = async () => {
   }
 }
 
+const createCustomTemplates = async () => {
+  if (args["--generate-custom-templates"]) {
+    const continuePrompt = await prompts({
+      type: "confirm",
+      name: "value",
+      message: `This will copy the default templates to your app/templates folder. Do you want to continue?`,
+    })
+    if (!continuePrompt.value) {
+      process.exit(0)
+    }
+    const templatesPath = await prompts({
+      type: "text",
+      name: "value",
+      message: `Enter the path to save the custom templates folder`,
+      initial: "app/templates",
+    })
+    const templatesPathValue: string = templatesPath.value
+    const isTypeScript = await getIsTypeScript()
+    addCustomTemplatesBlitzConfig(templatesPathValue, isTypeScript)
+    log.success(`🚀 Custom templates path added/updated in app/blitz-server file`)
+    const customTemplatesPath = require("path").join(process.cwd(), templatesPathValue)
+    const fsExtra = await import("fs-extra")
+    const blitzGeneratorPath = require.resolve("@blitzjs/generator")
+    const templateFolder = ["form", "page", "query", "mutation", "queries", "mutations"]
+    for (const template of templateFolder) {
+      await fsExtra.copy(
+        require("path").join(blitzGeneratorPath, "..", "templates", template),
+        require("path").join(customTemplatesPath, template),
+      )
+    }
+    log.success(`🚀 Custom templates created in ${templatesPathValue} directory`)
+    process.exit(0)
+  }
+}
+
 const generate: CliCommand = async () => {
   await getHelp()
+  await createCustomTemplates()
   await determineType()
   if (!selectedModelName) {
     await determineName()
@@ -227,9 +271,20 @@ const generate: CliCommand = async () => {
 
     const generators = generatorMap[selectedType as keyof typeof generatorMap]
 
+    const isTypeScript = await getIsTypeScript()
+    const blitzServerPath = isTypeScript ? "app/blitz-server.ts" : "app/blitz-server.js"
+    const blitzServer = require("path").join(process.cwd(), blitzServerPath)
+    const {register} = require("esbuild-register/dist/node")
+    const {unregister} = register({
+      target: "es6",
+    })
+    const blitzConfig = require(blitzServer).default
+    unregister()
+
     for (const GeneratorClass of generators) {
       const generator = new GeneratorClass({
         destinationRoot: require("path").resolve(),
+        templateDir: blitzConfig?.customTemplates,
         extraArgs: args["_"].slice(3) as string[],
         modelName: singularRootContext,
         modelNames: modelNames(singularRootContext),

packages/blitz/src/types.ts

@@ -6,6 +6,10 @@ export interface RouteUrlObject extends Pick<UrlObject, "pathname" | "query"> {
   pathname: string
 }
 
+export type BlitzServerConfig = {
+  customTemplates?: string
+}
+
 export const isRouteUrlObject = (x: any): x is RouteUrlObject => {
   return typeof x === "object" && "pathname" in x && typeof x.pathname === "string"
 }

packages/generator/src/generator.ts

@@ -16,6 +16,69 @@ import {readdirRecursive} from "./utils/readdir-recursive"
 import prettier from "prettier"
 const debug = require("debug")("blitz:generator")
 
+export const addCustomTemplatesBlitzConfig = (
+  customTemplatesPath: string,
+  isTypeScript: boolean,
+) => {
+  const blitzServer = isTypeScript ? "app/blitz-server.ts" : "app/blitz-server.js"
+  const blitzServerPath = require("path").join(process.cwd(), blitzServer)
+  const userConfigModuleSource = fs.readFileSync(blitzServerPath, {encoding: "utf-8"})
+  const userConfigModule = j(userConfigModuleSource, {parser: customTsParser})
+  const program = userConfigModule.get()
+  const defaultDeclaration = userConfigModule.find(j.ExportDefaultDeclaration)
+  const defaultConfig = defaultDeclaration.paths()[0]?.value
+  if (!defaultConfig) {
+    const config = j.identifier("config")
+    const configVariable = j.variableDeclaration("const", [
+      j.variableDeclarator(
+        config,
+        j.objectExpression([
+          j.objectProperty(j.identifier("customTemplates"), j.literal(customTemplatesPath)),
+        ]),
+      ),
+    ])
+    if (isTypeScript) {
+      const type = j.tsTypeAnnotation(j.tsTypeReference(j.identifier("BlitzServerConfig")))
+      const declaration: any = configVariable?.declarations
+      declaration[0].id.typeAnnotation = type
+      const typeImport = j.importDeclaration(
+        [j.importSpecifier(j.identifier("BlitzServerConfig"))],
+        j.literal("blitz"),
+      )
+      typeImport.importKind = "type"
+      program.node.program.body.unshift(typeImport)
+    }
+    const defaultConfig = j.exportDefaultDeclaration(j.identifier("config"))
+    program.node.program.body.push(configVariable)
+    program.node.program.body.push(defaultConfig)
+  } else {
+    const config = defaultConfig.declaration
+    if (config.type === "Identifier") {
+      const configVariable = userConfigModule.find(j.VariableDeclarator, {id: {name: config.name}})
+      const customTemplates = configVariable.find(j.ObjectProperty, {
+        key: {name: "customTemplates"},
+      })
+      customTemplates.remove()
+      configVariable
+        .find(j.ObjectExpression)
+        .get()
+        .node.properties.push(
+          j.objectProperty(j.identifier("customTemplates"), j.literal(customTemplatesPath)),
+        )
+    } else if (config.type === "ObjectExpression") {
+      const customTemplates = userConfigModule.find(j.ObjectProperty, {
+        key: {name: "customTemplates"},
+      })
+      customTemplates.remove()
+      config.properties.push(
+        j.objectProperty(j.identifier("customTemplates"), j.literal(customTemplatesPath)),
+      )
+    }
+  }
+  const newSource = userConfigModule.toSource()
+  fs.writeFileSync(blitzServerPath, newSource)
+}
+
 export const customTsParser = {
   parse(source: string, options?: Overrides) {
     const babelOptions = getBabelOptions(options)