Changelog

Renaming exported custom attributes

Similar to how it renames exported components and props, DevLink now renames or filters out exported custom attributes to ensure that the exported React code is valid.

• HTML5 standard names such as tabindex and maxlength are capitalized according to React standards, in this example tabIndex and maxLength
• Attributes that have a React equivalent, such as class and for, are converted to the React equivalent, in this example className and htmlFor
• Attributes that match event handler names such as onClick and onMouseOver are filtered out, regardless of case
• Attributes that start with numbers are filtered out
• Attributes that are incomplete, such as data- and aria- are filtered out
• Attributes named with an empty string are filtered out
• Attributes containing invalid characters, such as my-😀-attr, are filtered out
• Any other invalid HTML5 attributes are filtered out

DevLink prints a warning to your CLI console, and adds JSDoc Invalid Attribute comments, when it filters out attributes due to these rules, except when removing attributes with an empty string as their name. For example, this exported code shows a warning about a custom attribute that was filtered out:

1
/**
2
 * ComponentWithInvalidAttributes
3
 *
4
 * @warning
5
 * The component could not be fully exported:
6
 * - Invalid attribute: \`onClick\`
7
 */
8
export function ComponentWithInvalidAttributes() {
9
  return <Builtin.Block tag="div" data-testid="my-block" aria-label="My Block" />;
10
}

For more information, see What DevLink Exports.

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.