uifork 0.0.10 → 0.0.11

package/cli.js

@@ -6,6 +6,7 @@ const { UISwitcherScaffold } = require("./lib/init");
 const { VersionSync } = require("./lib/watch");
 const { VersionPromoter } = require("./lib/promote");
 const { findComponentManager } = require("./lib/cli-helpers");
+const { getVersionComponentIdentifier } = require("./lib/component-naming");
 
 function showHelp() {
   console.log(`
@@ -230,8 +231,7 @@ switch (command) {
 
       const displayVersion = targetVersion.replace(/^v/, "").replace(/_/g, ".").toUpperCase();
 
-      const importSuffix = manager.versionToImportSuffix(fileVersion);
-      const componentName = `${manager.componentName}${importSuffix}`;
+      const componentName = getVersionComponentIdentifier(manager.componentName, fileVersion);
 
       let templateContent;
       if (extension === ".tsx" || extension === ".jsx") {
@@ -413,10 +413,11 @@ export default function ${componentName}() {
 
       const sourceContent = fs.readFileSync(sourceFilePath, "utf8");
 
-      const importSuffix = manager.versionToImportSuffix(fileVersion);
-      const newImportSuffix = manager.versionToImportSuffix(targetFileVersion);
-      const oldComponentName = `${manager.componentName}${importSuffix}`;
-      const newComponentName = `${manager.componentName}${newImportSuffix}`;
+      const oldComponentName = getVersionComponentIdentifier(manager.componentName, fileVersion);
+      const newComponentName = getVersionComponentIdentifier(
+        manager.componentName,
+        targetFileVersion,
+      );
 
       const updatedContent = sourceContent.replace(
         new RegExp(oldComponentName, "g"),

package/lib/component-naming.js

@@ -0,0 +1,30 @@
+function toPascalCaseIdentifier(name) {
+  const chunks = String(name || "").match(/[a-zA-Z0-9]+/g) || [];
+  const identifier = chunks
+    .map((chunk) => `${chunk.charAt(0).toUpperCase()}${chunk.slice(1)}`)
+    .join("");
+
+  if (!identifier) {
+    return "Component";
+  }
+
+  if (!/^[A-Za-z_$]/.test(identifier)) {
+    return `Component${identifier}`;
+  }
+
+  return identifier;
+}
+
+function versionToImportSuffix(versionStr) {
+  return `V${versionStr.charAt(0).toUpperCase()}${versionStr.slice(1)}`;
+}
+
+function getVersionComponentIdentifier(componentName, versionStr) {
+  return `${toPascalCaseIdentifier(componentName)}${versionToImportSuffix(versionStr)}`;
+}
+
+module.exports = {
+  getVersionComponentIdentifier,
+  toPascalCaseIdentifier,
+  versionToImportSuffix,
+};

package/lib/init.js

@@ -1,6 +1,7 @@
 const fs = require("fs");
 const path = require("path");
 const { VersionSync } = require("./watch");
+const { toPascalCaseIdentifier } = require("./component-naming");
 
 class UISwitcherScaffold {
   constructor(filePath, shouldWatch = true) {
@@ -14,6 +15,7 @@ class UISwitcherScaffold {
 
     const parsedPath = path.parse(this.originalFilePath);
     this.componentName = parsedPath.name;
+    this.componentIdentifier = toPascalCaseIdentifier(this.componentName);
     this.parentDir = parsedPath.dir;
     this.originalExtension = parsedPath.ext; // Preserve .tsx or .ts
     this.v1File = path.join(this.parentDir, `${this.componentName}.v1${this.originalExtension}`);
@@ -38,11 +40,11 @@ class UISwitcherScaffold {
  * Manual edits to labels/descriptions are preserved, but structure changes may be overwritten.
  * To stop versioning this component, run: npx uifork promote ${this.componentName} <version-id>
  */
-import ${this.componentName}V1 from "${v1ImportPath}"
+import ${this.componentIdentifier}V1 from "${v1ImportPath}"
 
 export const VERSIONS = {
   "v1": {
-    render: ${this.componentName}V1,
+    render: ${this.componentIdentifier}V1,
     label: "",
   },
 }
@@ -65,7 +67,7 @@ export const VERSIONS = {
 import { ForkedComponent } from "uifork"
 import { VERSIONS } from "${versionsImportPath}"
 
-export default function ${this.componentName}(props: any) {
+export default function ${this.componentIdentifier}(props: any) {
   return (
     <ForkedComponent
       id="${this.componentName}"
@@ -124,7 +126,7 @@ export { VERSIONS }
         `4. Add new versions by creating ${this.componentName}.v2${this.originalExtension}, ${this.componentName}.v1_1${this.originalExtension}, etc.`,
       );
       console.log(
-        `5. Import the component: import ${this.componentName} from './${this.componentName}'`,
+        `5. Import the component: import ${this.componentIdentifier} from './${this.componentName}'`,
       );
       // Start watching automatically
       new VersionSync(this.parentDir);
@@ -134,7 +136,7 @@ export { VERSIONS }
         `4. Add new versions by creating ${this.componentName}.v2${this.originalExtension}, ${this.componentName}.v1_1${this.originalExtension}, etc.`,
       );
       console.log(
-        `5. Import the component: import ${this.componentName} from './${this.componentName}'`,
+        `5. Import the component: import ${this.componentIdentifier} from './${this.componentName}'`,
       );
     }
   }

package/lib/promote.js

@@ -1,5 +1,10 @@
 const fs = require("fs");
 const path = require("path");
+const {
+  getVersionComponentIdentifier,
+  toPascalCaseIdentifier,
+  versionToImportSuffix,
+} = require("./component-naming");
 
 class VersionPromoter {
   constructor(componentPath, versionId) {
@@ -190,8 +195,13 @@ class VersionPromoter {
     // Clean up the version content - remove version-specific naming if needed
     // The component name in the version file might be like ComponentNameV2
     // We want to replace it with just ComponentName
+    const baseComponentIdentifier = toPascalCaseIdentifier(this.componentName);
     const importSuffix = this.versionToImportSuffix(this.versionIdToFileVersion(this.versionId));
-    const versionedComponentName = `${this.componentName}${importSuffix}`;
+    const versionedComponentName = getVersionComponentIdentifier(
+      this.componentName,
+      this.versionIdToFileVersion(this.versionId),
+    );
+    const legacyVersionedComponentName = `${this.componentName}${importSuffix}`;
 
     let cleanedContent = versionContent;
 
@@ -200,25 +210,41 @@ class VersionPromoter {
     // 1. export default function ComponentNameV2
     cleanedContent = cleanedContent.replace(
       new RegExp(`export default function ${versionedComponentName}\\b`, "g"),
-      `export default function ${this.componentName}`,
+      `export default function ${baseComponentIdentifier}`,
+    );
+    cleanedContent = cleanedContent.replace(
+      new RegExp(`export default function ${legacyVersionedComponentName}\\b`, "g"),
+      `export default function ${baseComponentIdentifier}`,
     );
 
     // 2. function ComponentNameV2 (in case it's not exported yet)
     cleanedContent = cleanedContent.replace(
       new RegExp(`function ${versionedComponentName}\\b`, "g"),
-      `function ${this.componentName}`,
+      `function ${baseComponentIdentifier}`,
+    );
+    cleanedContent = cleanedContent.replace(
+      new RegExp(`function ${legacyVersionedComponentName}\\b`, "g"),
+      `function ${baseComponentIdentifier}`,
     );
 
     // 3. const ComponentNameV2 = (arrow function)
     cleanedContent = cleanedContent.replace(
       new RegExp(`const ${versionedComponentName}\\s*=`, "g"),
-      `const ${this.componentName} =`,
+      `const ${baseComponentIdentifier} =`,
+    );
+    cleanedContent = cleanedContent.replace(
+      new RegExp(`const ${legacyVersionedComponentName}\\s*=`, "g"),
+      `const ${baseComponentIdentifier} =`,
     );
 
     // 4. Any other references to the versioned component name
     cleanedContent = cleanedContent.replace(
       new RegExp(`\\b${versionedComponentName}\\b`, "g"),
-      this.componentName,
+      baseComponentIdentifier,
+    );
+    cleanedContent = cleanedContent.replace(
+      new RegExp(`\\b${legacyVersionedComponentName}\\b`, "g"),
+      baseComponentIdentifier,
     );
 
     // Write the cleaned content to the wrapper file
@@ -230,7 +256,7 @@ class VersionPromoter {
 
   versionToImportSuffix(versionStr) {
     // Convert 1_2 to V1_2 for import names
-    return `V${versionStr.charAt(0).toUpperCase()}${versionStr.slice(1)}`;
+    return versionToImportSuffix(versionStr);
   }
 
   promote() {

package/lib/watch.js

@@ -7,6 +7,10 @@ const WebSocket = require("ws");
 const cors = require("cors");
 const { exec } = require("child_process");
 const { VersionPromoter } = require("./promote");
+const {
+  getVersionComponentIdentifier,
+  versionToImportSuffix,
+} = require("./component-naming");
 
 /**
  * ComponentManager - Manages a single component's versions
@@ -90,7 +94,7 @@ class ComponentManager {
   }
 
   versionToImportSuffix(versionStr) {
-    return `V${versionStr.charAt(0).toUpperCase()}${versionStr.slice(1)}`;
+    return versionToImportSuffix(versionStr);
   }
 
   generateImportName(fileName) {
@@ -98,7 +102,7 @@ class ComponentManager {
     const match = fileName.match(versionPattern);
     if (!match) return null;
     const versionStr = match[1];
-    return `${this.componentName}${this.versionToImportSuffix(versionStr)}`;
+    return getVersionComponentIdentifier(this.componentName, versionStr);
   }
 
   generateVersionKey(fileName) {
@@ -903,8 +907,7 @@ class VersionSync {
 
       const displayVersion = targetVersion.replace(/^v/, "").replace(/_/g, ".").toUpperCase();
 
-      const importSuffix = manager.versionToImportSuffix(fileVersion);
-      const componentName = `${manager.componentName}${importSuffix}`;
+      const componentName = getVersionComponentIdentifier(manager.componentName, fileVersion);
 
       let templateContent;
       if (extension === ".tsx" || extension === ".jsx") {
@@ -1029,10 +1032,11 @@ export default function ${componentName}() {
 
       const sourceContent = fs.readFileSync(sourceFilePath, "utf8");
 
-      const importSuffix = manager.versionToImportSuffix(fileVersion);
-      const newImportSuffix = manager.versionToImportSuffix(targetFileVersion);
-      const oldComponentName = `${manager.componentName}${importSuffix}`;
-      const newComponentName = `${manager.componentName}${newImportSuffix}`;
+      const oldComponentName = getVersionComponentIdentifier(manager.componentName, fileVersion);
+      const newComponentName = getVersionComponentIdentifier(
+        manager.componentName,
+        targetFileVersion,
+      );
 
       let updatedContent = sourceContent.replace(
         new RegExp(oldComponentName, "g"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uifork",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "CLI tool and React components for managing UI component versions and switching between them",
   "keywords": [
     "ab-testing",