Compile away prop spreading

[dominictobias]

One of the least ergonomic and jarring aspects for beginners of Solid compared to React is prop spreading and default assignment. Even if we know about the rules, using splitProps and mergeProps is more verbose and unpleasant.

I wonder if you considered compiling it away:

function MyButton({ children, variation = 'primary', ...attrs }) {
  return <button {...attrs} class={`btn-${variation}`}>{children}</button>
}

The compiler could change this to:

function MyButton(props) {
  const mergedProps = mergeProps({ variation: "primary" }, props)
  const [picked, others] = splitProps(mergedProps, ["children", "variation"])
  return <button {...others} class={`btn-${picked.variation}`}>{picked.children}</button>
}

[dominictobias-bullish]

Vue 3.5 just got something similar in their compiler to make destructing nicer "Reactive Props Destructure" - https://blog.vuejs.org/posts/vue-3-5

[ryansolid]

This comes up every few months. Last time was here: #2152 (comment)

I've given the same answer for the past 6 years and haven't really changed it. People have made compilers on top of Solid that do this but it isn't something that makes sense to do. Read the other thread for more details.