Next.js Codebase Analysis <> create-next-app <> index.ts explained - Part 1.16

#opensource #react #javascript #nextjs

In the previous article, I wrote about a prompt related to ESLint.

In this article, I will explain more prompts seeking user input about tailwind, src-dir and app.

if (
      // Check if there is an argument --tailwind passed
      !process.argv.includes('--tailwind') &&
      !process.argv.includes('--no-tailwind')
    ) {
      // Skip the prompt, if this package runs in CI
      // ciInfo is from https://www.npmjs.com/package/ci-info
      if (ciInfo.isCI) {
        program.tailwind = getPrefOrDefault('tailwind')
      } else {
        // tw? why not styledTw like in the esLint?
        const tw = blue('Tailwind CSS')
        // This is the prompt configuration that shows you the tailwind prompt
        // in the CLI
        const { tailwind } = await prompts({
          onState: onPromptState,
          type: 'toggle',
          name: 'tailwind',
          message: `Would you like to use ${tw}?`,
          initial: getPrefOrDefault('tailwind'),
          active: 'Yes',
          inactive: 'No',
        })
        program.tailwind = Boolean(tailwind)
        preferences.tailwind = Boolean(tailwind)
      }
    }

    // the above comments apply to the below prompts, I am keeping my 
    // comments DRY
    if (
      !process.argv.includes('--src-dir') &&
      !process.argv.includes('--no-src-dir')
    ) {
      if (ciInfo.isCI) {
        program.srcDir = getPrefOrDefault('srcDir')
      } else {
        const styledSrcDir = blue('`src/` directory')
        const { srcDir } = await prompts({
          onState: onPromptState,
          type: 'toggle',
          name: 'srcDir',
          message: `Would you like to use ${styledSrcDir}?`,
          initial: getPrefOrDefault('srcDir'),
          active: 'Yes',
          inactive: 'No',
        })
        program.srcDir = Boolean(srcDir)
        preferences.srcDir = Boolean(srcDir)
      }
    }

    if (!process.argv.includes('--app') && !process.argv.includes('--no-app')) {
      if (ciInfo.isCI) {
        program.app = getPrefOrDefault('app')
      } else {
        const styledAppDir = blue('App Router')
        const { appRouter } = await prompts({
          onState: onPromptState,
          type: 'toggle',
          name: 'appRouter',
          message: `Would you like to use ${styledAppDir}? (recommended)`,
          initial: getPrefOrDefault('app'),
          active: 'Yes',
          inactive: 'No',
        })
        program.app = Boolean(appRouter)
      }
    }

Since these prompts are repeated and have almost the same code except for the varying arguments, it is possible to refactor these prompts into a function, though I would rather deal with a json object as argument to this function since these function depends on too many params such as argument passed, prompt message, name etc.,

Conclusion:

I found a variable name that was just “tw” instead of styledTw but in other prompts, it is prepended with “styled”. I guess no code is too perfect.

I am building a platform that explains best practices used in open source by elite programmers. Join the waitlist and I will send you the link to the tutorials once they are ready.

If you have any questions, feel free to reach out to me at ramu.narasinga@gmail.com