code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

Hide undefined properties in object props rendering for cleaner code examples

Open deeeeno opened this issue 7 months ago • 0 comments

📝 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

deeeeno avatar Jul 28 '25 09:07 deeeeno