fix: validate project named passed as CLI option, allow and escape kebab-case project name (#327)

* transform kebab-case to PascalCase

* simplify

* improve dx

* changeset

* self review

Author: mdjastrzebski

.changeset/healthy-grapes-hang.md

@@ -0,0 +1,5 @@
+---
+'@rnef/create-app': patch
+---
+
+fix: validate project named passed as CLI option, allow and escape kebab-case project name.

packages/create-app/src/lib/bin.ts

@@ -29,6 +29,10 @@ import {
   parsePackageInfo,
   parsePackageManagerFromUserAgent,
 } from './utils/parsers.js';
+import {
+  normalizeProjectName,
+  validateProjectName,
+} from './utils/project-name.js';
 import {
   confirmOverrideFiles,
   printByeMessage,
@@ -65,8 +69,12 @@ export async function run() {
 
   printWelcomeMessage();
 
-  const projectName =
+  let projectName =
     (options.dir || options.name) ?? (await promptProjectName());
+  if (validateProjectName(projectName)) {
+    projectName = await promptProjectName(projectName);
+  }
+
   const { targetDir } = parsePackageInfo(projectName);
   const absoluteTargetDir = resolveAbsolutePath(targetDir);
 
@@ -124,7 +132,8 @@ export async function run() {
   }
 
   renameCommonFiles(absoluteTargetDir);
-  replacePlaceholder(absoluteTargetDir, projectName);
+  replacePlaceholder(absoluteTargetDir, normalizeProjectName(projectName));
+  // For package.json name we can use any valid name (kebab-case, PascalCase, etc).
   rewritePackageJson(absoluteTargetDir, projectName);
   createConfig(
     absoluteTargetDir,

packages/create-app/src/lib/utils/__tests__/project-name.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { normalizeProjectName } from '../project-name.js';
+
+describe('normalizeProjectName', () => {
+  it('handles kebab-case', () => {
+    expect(normalizeProjectName('hello')).toBe('Hello');
+    expect(normalizeProjectName('hello-world')).toBe('HelloWorld');
+    expect(normalizeProjectName('hello-world-long-name')).toBe(
+      'HelloWorldLongName'
+    );
+  });
+
+  it('handles PascalCase', () => {
+    expect(normalizeProjectName('Hello')).toBe('Hello');
+    expect(normalizeProjectName('HelloWorld')).toBe('HelloWorld');
+    expect(normalizeProjectName('HelloWorldLongName')).toBe(
+      'HelloWorldLongName'
+    );
+  });
+
+  it('should handle edge cases', () => {
+    expect(normalizeProjectName('')).toBe('');
+    expect(normalizeProjectName('-')).toBe('');
+    expect(normalizeProjectName('--')).toBe('');
+  });
+});

packages/create-app/src/lib/utils/edit-template.ts

@@ -3,9 +3,9 @@ import * as path from 'node:path';
 import { renameFile, walkDirectory } from './fs.js';
 
 /**
- * Placeholder name used in template, that should be replaced with project name.
+ * Placeholder name used in template, that should be replaced with normalized project name.
  */
-const DEFAULT_PLACEHOLDER_NAME = 'HelloWorld';
+const PLACEHOLDER_NAME = 'HelloWorld';
 
 /**
  * Rename common files that cannot be put into template literaly, e.g. .gitignore.
@@ -24,38 +24,41 @@ export function renameCommonFiles(projectPath: string) {
  * - Rename paths containing placeholder
  * - Replace placeholder in text files
  */
-export function replacePlaceholder(projectPath: string, projectName: string) {
-  if (projectName === DEFAULT_PLACEHOLDER_NAME) {
+export function replacePlaceholder(
+  projectPath: string,
+  normalizedName: string
+) {
+  if (normalizedName === PLACEHOLDER_NAME) {
     return;
   }
 
   for (const filePath of walkDirectory(projectPath).reverse()) {
     if (!fs.statSync(filePath).isDirectory()) {
-      replacePlaceholderInTextFile(filePath, projectName);
+      replacePlaceholderInTextFile(filePath, normalizedName);
     }
 
-    if (path.basename(filePath).includes(DEFAULT_PLACEHOLDER_NAME)) {
-      renameFile(filePath, DEFAULT_PLACEHOLDER_NAME, projectName);
+    if (path.basename(filePath).includes(PLACEHOLDER_NAME)) {
+      renameFile(filePath, PLACEHOLDER_NAME, normalizedName);
     } else if (
-      path.basename(filePath).includes(DEFAULT_PLACEHOLDER_NAME.toLowerCase())
+      path.basename(filePath).includes(PLACEHOLDER_NAME.toLowerCase())
     ) {
       renameFile(
         filePath,
-        DEFAULT_PLACEHOLDER_NAME.toLowerCase(),
-        projectName.toLowerCase()
+        PLACEHOLDER_NAME.toLowerCase(),
+        normalizedName.toLowerCase()
       );
     }
   }
 }
 
-function replacePlaceholderInTextFile(filePath: string, projectName: string) {
+function replacePlaceholderInTextFile(
+  filePath: string,
+  normalizedName: string
+) {
   const fileContent = fs.readFileSync(filePath, 'utf8');
   const replacedFileContent = fileContent
-    .replaceAll(DEFAULT_PLACEHOLDER_NAME, projectName)
-    .replaceAll(
-      DEFAULT_PLACEHOLDER_NAME.toLowerCase(),
-      projectName.toLowerCase()
-    );
+    .replaceAll(PLACEHOLDER_NAME, normalizedName)
+    .replaceAll(PLACEHOLDER_NAME.toLowerCase(), normalizedName.toLowerCase());
 
   if (fileContent !== replacedFileContent) {
     fs.writeFileSync(filePath, replacedFileContent, 'utf8');

packages/create-app/src/lib/validate-project-name.ts renamed to packages/create-app/src/lib/utils/project-name.ts

@@ -1,4 +1,8 @@
-const NAME_REGEX = /^[$A-Z_][0-9A-Z_$]*$/i;
+/**
+ * Allow for alphanumeric, hyphen (kebab-case), and underscore (_).
+ * Has to start with a letter.
+ */
+const NAME_REGEX = /^[A-Z][0-9A-Z_-]*$/i;
 
 // ref: https://docs.oracle.com/javase/tutorial/java/nutsandbolts/_keywords.html
 const javaKeywords = [
@@ -62,13 +66,29 @@ export function validateProjectName(name: string) {
   }
 
   if (!name.match(NAME_REGEX)) {
-    return `Invalid project name: "${name}". Please use a valid identifier name (alphanumeric).`;
+    return `Invalid project name: "${name}". Please use a valid identifier name (alphanumeric, hyphen, underscore).`;
   }
 
   const lowerCaseName = name.toLowerCase();
   if (reservedNames.includes(lowerCaseName)) {
-    return "Invalid project name: Can't use reserved name. Please use another name.";
+    return `Invalid project name: "${name}". Can't use reserved name. Please use another name.`;
   }
 
-  return;
+  return undefined;
+}
+
+/**
+ * Transform project name to PascalCase. The input name can be in either kebab-case or PascalCase.
+ *
+ * @param name - Project name
+ * @returns PascalCase project name
+ */
+export function normalizeProjectName(name: string) {
+  if (!name) return '';
+
+  return name
+    .split('-')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
 }

packages/create-app/src/lib/utils/prompts.ts

@@ -13,7 +13,7 @@ import {
 import { vice } from 'gradient-string';
 import path from 'path';
 import type { TemplateInfo } from '../templates.js';
-import { validateProjectName } from '../validate-project-name.js';
+import { validateProjectName } from './project-name.js';
 import { getRnefVersion } from './version.js';
 
 export function printHelpMessage(
@@ -74,9 +74,10 @@ export function printByeMessage(
   outro('Success 🎉.');
 }
 
-export function promptProjectName(): Promise<string> {
+export function promptProjectName(name?: string): Promise<string> {
   return promptText({
     message: 'What is your app named?',
+    initialValue: name,
     validate: validateProjectName,
   });
 }

scripts/verdaccio-publish.mjs

@@ -9,7 +9,7 @@ const ROOT_DIR = path.join(__dirname, '..');
 const VERDACCIO_REGISTRY_URL = `http://localhost:4873`;
 const VERDACCIO_STORAGE_PATH = '/tmp/verdaccio-storage';
 
-const loader = spinner();
+const loader = spinner({ indicator: 'timer' });
 
 async function run() {
   intro('Verdaccio: publishing all packages');