Function getReactComponentName

packages/backend/src/html/htmlMain.ts:180–209

(node: any)

// Get a valid React component name from a layer name
export function getReactComponentName(node: any): string {
  // Use uniqueName if available, otherwise use name
  const name: string = node?.uniqueName || node?.name;

  // Default name if nothing valid is provided
  if (!name || name.trim() === "") {
    return "App";
  }

  // Convert to PascalCase
  let componentName = name
    .replace(/[^a-zA-Z0-9_]/g, " ") // Replace non-alphanumeric chars with spaces
    .split(/\s+/) // Split by spaces
    .map((part) =>
      part ? part.charAt(0).toUpperCase() + part.slice(1).toLowerCase() : "",
    )
    .join("");

  // Ensure it starts with uppercase letter (React component convention)
  componentName =
    componentName.charAt(0).toUpperCase() + componentName.slice(1);

  // Ensure it's a valid identifier - if it starts with a number, prefix with 'Component'
  if (/^[0-9]/.test(componentName)) {
    componentName = "Component" + componentName;
  }

  // If we ended up with nothing valid, use the default
  return componentName || "App";
}

// Get a Svelte-friendly component name
export function getSvelteElementName(