Hide undefined properties in object props rendering for cleaner code examples
📝 Description Currently, when Code Connect renders object-type props, properties with undefined values are still displayed in code examples, resulting in unnecessarily verbose and cluttered code snippets.
🔍 Current Behavior
// Currently generated code
<InputComponent
input1={{placeholder: "000", disabled: undefined, readOnly: undefined, value: "010"}}
/>
✨ Expected Behavior
// Improved code (undefined properties excluded)
<InputComponent
input1={{placeholder: "000", value: "010"}}
/>
💡 Use Case
figma.connect(InputComponent, "figma-url", {
props: {
disabled: figma.enum('state', { disabled: true }),
readOnly: figma.enum('state', { readonly: true }),
placeholder: figma.enum('state', { placeholder: '000' }),
value: figma.enum('state', { typing: '010' })
},
example: ({ disabled, readOnly, placeholder, value }) => (
<InputComponent
input={{disabled, readOnly, placeholder, value}}
/>
)
})
In conditional states where only some properties are defined, showing only the defined properties would be clearer and more practical for developers.
🔧 Proposed Solution Modify the object rendering section in the _fcc_renderPropValue function to filter out properties with undefined values:
🎯 Benefits Improved Readability: Shows only properties that are actually used Practicality: Generates clean code that developers would actually write Consistency: Aligns with existing behavior where top-level props return empty string when undefined Backward Compatibility: Doesn't break existing functionality significantly