Changelog

Renaming exported components and props

DevLink now renames exported components and props to ensure that the generated React code has valid, collision-free identifiers. Here is a summary of the changes that it makes:

Components

DevLink sanitizes exported component names to handle:

• Emojis and special characters: My 😀 Component → MyComponent
• Numbers at the start: 123 → UnknownComponent123, 1Component → UnknownComponent1Component
• Reserved words: class → UnknownComponentClass
• Empty or whitespace-only names: "" or " " → UnknownComponent
• Collisions: Multiple components named MyComponent → MyComponent, MyComponent2, MyComponent3

Props

DevLink sanitizes exported prop names to handle:

• Emojis and special characters: 😀 → unknownProp
• Numbers at the start: 123 → unknownProp123, 1prop → unknownProp1Prop
• Reserved words: return → returnProp, private → privateProp
• React reserved props: key → keyProp, ref → refProp
• HTML attributes for component props: class → classProp, for → forProp
• Empty or whitespace-only names: "" or " " → unknownProp

Note: HTML attributes like data-* and aria-* are preserved as-is and not sanitized.

What’s Fixed

This update fixes several critical issues in the previous system:

• No more leading underscores: Previously, names starting with numbers like 123 would become _123 or __123, which violates JavaScript naming conventions
• Better handling of reserved words: Component props named class or for now become classProp and forProp instead of _class and _for
• React conflicts resolved: Props named key or ref now become keyProp and refProp to avoid conflicts with React’s special props
• Fallback for invalid names: Empty or whitespace-only names now get meaningful fallback names instead of breaking

For more information, see What DevLink Exports.