feat: add description prompt and validation for project scaffolding

__tests__/cli.spec.ts

@@ -60,22 +60,22 @@
 it('prompts for the framework if none supplied when target dir is current directory', () => {
   fs.mkdirSync(genPath, { recursive: true })
   const { stdout } = run(['.'], { cwd: genPath })
   expect(stdout).toContain('Select a framework:')
 })
 
 it('prompts for the framework if none supplied', () => {
   const { stdout } = run([projectName])
   expect(stdout).toContain('Select a framework:')
 })
 
 it('prompts for the framework on not supplying a value for --template', () => {
   const { stdout } = run([projectName, '--template'])
   expect(stdout).toContain('Select a framework:')
 })
 
 it('prompts for the framework on supplying an invalid template', () => {
   const { stdout } = run([projectName, '--template', 'unknown'])
   expect(stdout).toContain(
     `"unknown" isn't a valid template. Please choose from below:`,
   )
 })
@@ -104,29 +104,43 @@
   const { stdout } = run([projectName, '--template', 'vue'], {
     cwd: __dirname,
   })
   const generatedFiles = fs.readdirSync(genPath).sort()
+  const generatedPackage = JSON.parse(
+    fs.readFileSync(path.join(genPath, 'package.json'), 'utf-8'),
+  )
 
   // Assertions
   expect(stdout).toContain(`Scaffolding project in ${genPath}`)
   expect(templateFiles).toEqual(generatedFiles)
+  expect(generatedPackage.name).toBe(projectName)
+  expect(generatedPackage.description).toBe(
+    'A browser extension built with CRXJS.',
+  )
 })
 
 it('successfully scaffolds a project with subfolder based on react starter template', () => {
   const { stdout } = run([`subfolder/${projectName}`, '--template', 'react'], {
     cwd: __dirname,
   })
   const generatedFiles = fs.readdirSync(genPathWithSubfolder).sort()
+  const generatedPackage = JSON.parse(
+    fs.readFileSync(path.join(genPathWithSubfolder, 'package.json'), 'utf-8'),
+  )
 
   // Assertions
   expect(stdout).toContain(`Scaffolding project in ${genPathWithSubfolder}`)
   expect(templateFilesReact).toEqual(generatedFiles)
+  expect(generatedPackage.name).toBe(projectName)
+  expect(generatedPackage.description).toBe(
+    'A browser extension built with CRXJS.',
+  )
 })
 
 it('works with the -t alias', () => {
   const { stdout } = run([projectName, '-t', 'vue'], {
     cwd: __dirname,
   })
   const generatedFiles = fs.readdirSync(genPath).sort()
 
   // Assertions
   expect(stdout).toContain(`Scaffolding project in ${genPath}`)

__tests__/utils.spec.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { isValidDescription } from '../src/utils'
+
+describe('isValidDescription', () => {
+  it('accepts descriptions up to 132 characters', () => {
+    expect(isValidDescription('a'.repeat(132))).toBe(true)
+  })
+
+  it('rejects descriptions longer than 132 characters', () => {
+    expect(isValidDescription('a'.repeat(133))).toBe(false)
+  })
+})

src/index.ts

@@ -18,6 +18,7 @@ import {
   generateBanner,
   isEmpty,
   isGitHubUrl,
+  isValidDescription,
   isValidPackageName,
   pkgFromUserAgent,
   toValidPackageName,
@@ -120,6 +121,20 @@ async function init() {
     packageName = packageNameResult
   }
 
+  const packageDescriptionResult = await prompts.text({
+    message: 'Extension description (you can edit this anytime in package.json):',
+    defaultValue: 'A browser extension built with CRXJS.',
+    placeholder: 'A browser extension built with CRXJS.',
+    validate(description) {
+      if (!isValidDescription(description)) {
+        return 'Description must be non-blank and 132 characters or fewer'
+      }
+    },
+  })
+  if (prompts.isCancel(packageDescriptionResult))
+    return cancel()
+  const packageDescription = packageDescriptionResult
+
   // 4. Choose a framework and variant
   let template = argTemplate
   let hasInvalidArgTemplate = false
@@ -180,6 +195,7 @@ async function init() {
     if (fs.existsSync(pkgPath)) {
       const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
       pkg.name = packageName
+      pkg.description = packageDescription
       fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`)
     }
     s.stop('Cloning completed successfully')
@@ -213,6 +229,7 @@ async function init() {
     )
 
     pkg.name = packageName
+    pkg.description = packageDescription
 
     write('package.json', `${JSON.stringify(pkg, null, 2)}\n`)
   }

src/utils.ts

@@ -23,6 +23,10 @@ export function isValidPackageName(projectName: string) {
   )
 }
 
+// Chrome webstore limit reference: https://developer.chrome.com/docs/extensions/reference/manifest#required-web-store
+export function isValidDescription(description: string): boolean {
+  return description.trim().length > 0 && description.length <= 132
+}
 export function toValidPackageName(projectName: string) {
   return projectName
     .trim()

templates/react-ts/manifest.config.ts

@@ -4,6 +4,7 @@ import pkg from './package.json'
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
+  description: pkg.description,
   version: pkg.version,
   icons: {
     48: 'public/logo.png',

templates/react-ts/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "1.0.0",
   "private": true,
+  "description": "A browser extension built with CRXJS.",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",

templates/react/manifest.config.js

@@ -4,6 +4,7 @@ import pkg from './package.json'
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
+  description: pkg.description,
   version: pkg.version,
   icons: {
     48: 'public/logo.png',

templates/react/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "1.0.0",
   "private": true,
+  "description": "A browser extension built with CRXJS.",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

templates/solid-ts/manifest.config.ts

@@ -4,6 +4,7 @@ import pkg from './package.json'
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
+  description: pkg.description,
   version: pkg.version,
   icons: {
     48: 'public/logo.png',

templates/solid-ts/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "1.0.0",
   "private": true,
+  "description": "A browser extension built with CRXJS.",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",

templates/solid/manifest.config.js

@@ -4,6 +4,7 @@ import pkg from './package.json'
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
+  description: pkg.description,
   version: pkg.version,
   icons: {
     48: 'public/logo.png',

templates/solid/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "1.0.0",
   "private": true,
+  "description": "A browser extension built with CRXJS.",
   "scripts": {
     "dev": "vite",
     "build": "vite build"

templates/svelte-ts/manifest.config.ts

@@ -4,6 +4,7 @@ import pkg from './package.json'
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
+  description: pkg.description,
   version: pkg.version,
   icons: {
     48: 'public/logo.png',

templates/svelte-ts/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "1.0.0",
   "private": true,
+  "description": "A browser extension built with CRXJS.",
   "scripts": {
     "dev": "vite",
     "build": "vite build"

templates/svelte/manifest.config.js

@@ -4,6 +4,7 @@ import pkg from './package.json'
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
+  description: pkg.description,
   version: pkg.version,
   icons: {
     48: 'public/logo.png',

templates/svelte/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "1.0.0",
   "private": true,
+  "description": "A browser extension built with CRXJS.",
   "scripts": {
     "dev": "vite",
     "build": "vite build"

templates/vanilla-ts/manifest.config.ts

@@ -4,6 +4,7 @@ import pkg from './package.json'
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
+  description: pkg.description,
   version: pkg.version,
   icons: {
     48: 'public/logo.png',

templates/vanilla-ts/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "1.0.0",
   "private": true,
+  "description": "A browser extension built with CRXJS.",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build"

templates/vanilla/manifest.config.js

@@ -4,6 +4,7 @@ import pkg from './package.json'
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
+  description: pkg.description,
   version: pkg.version,
   icons: {
     48: 'public/logo.png',

templates/vanilla/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "1.0.0",
   "private": true,
+  "description": "A browser extension built with CRXJS.",
   "scripts": {
     "dev": "vite",
     "build": "vite build"

templates/vue-ts/manifest.config.ts

@@ -4,6 +4,7 @@ import pkg from './package.json'
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
+  description: pkg.description,
   version: pkg.version,
   icons: {
     48: 'public/logo.png',

templates/vue-ts/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "1.0.0",
   "private": true,
+  "description": "A browser extension built with CRXJS.",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build"

templates/vue/manifest.config.js

@@ -4,6 +4,7 @@ import pkg from './package.json'
 export default defineManifest({
   manifest_version: 3,
   name: pkg.name,
+  description: pkg.description,
   version: pkg.version,
   icons: {
     48: 'public/logo.png',

templates/vue/package.json

@@ -3,6 +3,7 @@
   "type": "module",
   "version": "1.0.0",
   "private": true,
+  "description": "A browser extension built with CRXJS.",
   "scripts": {
     "dev": "vite",
     "build": "vite build"