Feliz icon indicating copy to clipboard operation
Feliz copied to clipboard

Enhance Handling of F# Record Types as Props in ReactComponent Attribute

Open lukaszkrzywizna opened this issue 1 month ago • 4 comments

Issue:

When using Feliz with F# and Fable, passing F# record types as props in React components results in unexpected behavior. The record type, which Fable translates into a JavaScript object with a specific prototype, loses its prototype once processed by React.createElement. This leads to the absence of expected methods and properties on the prototype.

Illustration of simple record transformation:

image

Differences in objects with and without the ReactComponent attribute:

image

Current Workaround by Users:

Currently, a practical workaround for users is to manually wrap the record into an anonymous object. This method involves encapsulating the record as a single property within an anonymous props object, which preserves the prototype through the React component lifecycle.

Example of wrapping the record:

image image

Proposed Solution for Feliz:

I propose that Feliz should either:

  1. Automatically wrap F# record types in an anonymous object when detected as props, thus preserving the prototype integrity.
  2. Implement a warning or error system that alerts developers when a record type is used as props, guiding them towards safer practices or the recommended workaround.

@Zaid-Ajaj @MangelMaxime I'm interested in what you think.

lukaszkrzywizna avatar May 15 '24 09:05 lukaszkrzywizna