Qwik: Functions passed as props are not suffixed with $

[k-schneider]

I am interested in helping provide a fix!

No

Which generators are impacted?

• All
• Angular
• HTML
• Preact
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/playground/?code=KYDwDg9gTgLgBAE2AMwIYFcA29noHYDGMAlhHnALICeAwhALaR7B4wAUYUEYAzgJRwA3gCg4cKMBjoo5NqLFwAPACN0MGGThkamYgQDWAXkGduPAHTbdBgL5wA9AD55fANzCbQA%3D

Expected Behaviour

Function props are suffixed with $ so that you can pass functions directly:

export default component$(() => {
  return (
    <Button onClick$={() => console.log("Hello")} />
  );
});

Actual Behaviour

The functions are not suffixed, so you have to create QRL's manually to be able to pass them into the generated components.

export default component$(() => {
  const clickHandler = $(() => {
    console.log("Hello");
  });

  return (
    <Button onClick={clickHandler} />
  );
});

Additional Information

This format for Qwik event handlers is discussed further here:

https://qwik.dev/docs/components/events/