Working on fixing up the Blitz CLI Tool's Recipe Install feature

[Doc0x1]

Related issue: #4189

I've been working through the Blitz installer files for most of today to come up with a fix for this (this is the first time I've worked to try and contribute to a community driven repository like this, nice to meet you all).

The Problem

1. There's currently an issue (as of Blitz 2.0.3) where, when running blitz install tailwind for example, it will do all the necessary operations, but it will hang at the very end with a "Generating file diff..." message. Pressing enter will then cause it to error out. The error can be seen in the related issue at the top.

This issue (for the Tailwind recipe anyway, haven't checked the other recipes for now) stems from the following lines 36-48 in Tailwind's index.ts recipe file:

.addTransformFilesStep({
      stepId: "importStyles",
      stepName: "Import stylesheets",
      explanation: `Imports the stylesheet we just added into your app`,
      singleFileSearch: paths.app(),
      transform(program) {
        const stylesImport = j.importDeclaration(
          [],
          j.literal(`${paths.appSrcDirectory()}/core/styles/index.css`),
        )
        return addImport(program, stylesImport)
      },
    })

2. For those of you unfamiliar with the new App Router feature that NextJS has implemented, there is no core/styles/index.css location. The way NextJS projects using App Router are setup now simply contains the app, node_modules, and public folders (Unless you select the include in /src option when using create-next-app).

3. Within the /app folder in the new NextJS App Router setup, there is a layout.tsx and page.tsx file, and a globals.css file. This is important to note because of the paths.app() part of the code above. The paths object comes from the `blitz/src/installer/utils/paths.ts file, as you can see below:

export const paths = {
  document() {
    return `${findPageDir()}/_document${ext(true)}`
  },
  app() {
    return `${findPageDir()}/_app${ext(true)}`
  },
  appSrcDirectory() {
    return getAppSourceDir()
  },
  blitzServer() {
    return getBlitzPath("server")
  },
  blitzClient() {
    return getBlitzPath("client")
  },
  entry() {
    return `${findPageDir()}/index${ext(true)}`
  },
  nextConfig() {
    return `next.config.js`
  },
  babelConfig() {
    return `babel.config.js`
  },
  packageJson() {
    return "package.json"
  },
  prismaSchema() {
    return "db/schema.prisma"
  },
}

4. You'll notice app() returns ${findPageDir()}/_app, which isn't a file in NextJS's typical new App Router project layout. This leads to the error with the blitz install command that's mentioned in the issue at the top of all of this, because within blitz/src/installer/executors/file-transform-executor.tsx there's a React useEffect that involves taking in singleFileSearch from the recipe index.ts file, and it then checks the path to see if it exists.

  React.useEffect(() => {
    async function generateDiff() {
      const fileToTransform: string = await filePrompt({
        context: cliArgs,
        globFilter: getExecutorArgument((step as Config).singleFileSearch, cliArgs),
        getChoices: (step as Config).selectTargetFiles,
      })

      setFilePath(fileToTransform)
      const originalFile = fs.readFileSync(fileToTransform).toString("utf-8")

      const newFile = await ((step as Config).transformPlain
        ? stringProcessFile(originalFile, (step as Config).transformPlain!)
        : processFile(originalFile, (step as Config).transform!))

      return createPatch(fileToTransform, originalFile, newFile)
    }

    generateDiff().then(setDiff, setError)
  }, [cliArgs, step])

  // Let the renderer deal with errors from file transformers, otherwise the
  // process would just hang.
  if (error) throw error

  if (!diff) { // <------- This is where it eventually gets hung up at
    return (
      <Box>
        <Text>
          <Spinner />
          Generating file diff...
        </Text>
      </Box>
    )
  }

5. And so, there's no handling for cases where, inside that hook, the file is undefined, and so the hook hangs indefinitely, and errors out on user input.

Any suggestions/ideas/strategies for tackling this would be appreciated

I have my own ideas for how to tackle this problem, but I always like to get input from others, especially those that have more experience working on this repository than I currently do.

Obviously there needs to be a check to figure out what kind of routing the NextJS App is built with/using. In addition to that, graceful error handling is something I'm going to be working to implement here as well.

One idea I've had is changing the app() function in the paths object so that it can check and return the proper location of the relevant location in the files, and possibly adding other functions so that there's less of a need for hard coding things like CSS files

Anyway, let me know what you guys think. Thanks.