In the previous article, I wrote about a prompt related to tailwind, src-dir and app.
I teach project-based frontend learning at https://tthroo.com, check it out.
if (
typeof program.importAlias !== 'string' ||
!program.importAlias.length
) {
if (ciInfo.isCI) {
// We don't use preferences here because the default value is @/* regardless of existing preferences
program.importAlias = defaults.importAlias
} else {
const styledImportAlias = blue('import alias')
const { customizeImportAlias } = await prompts({
onState: onPromptState,
type: 'toggle',
name: 'customizeImportAlias',
message: `Would you like to customize the default ${styledImportAlias} (${defaults.importAlias})?`,
initial: getPrefOrDefault('customizeImportAlias'),
active: 'Yes',
inactive: 'No',
})
if (!customizeImportAlias) {
// We don't use preferences here because the default value is @/* regardless of existing preferences
program.importAlias = defaults.importAlias
} else {
const { importAlias } = await prompts({
onState: onPromptState,
type: 'text',
name: 'importAlias',
message: `What ${styledImportAlias} would you like configured?`,
initial: getPrefOrDefault('importAlias'),
validate: (value) =>
/.+\/\*/.test(value)
? true
: 'Import alias must follow the pattern <prefix>/*',
})
program.importAlias = importAlias
preferences.importAlias = importAlias
}
}
}
}
The above code is reponsible for the prompts shown in below 2 images:
Notice that these prompts do not store user preferences since they use a default value for import.
Conclusion:
With this, all the prompts related code is complete. Up next, I will explain how the next app starter project is created.
Don’t forget to check out https://tthroo.com/ to learn how to develop frontend projects.
Top comments (0)