Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Qwik: Functions passed as props are not suffixed with $  #1645

Copy link
Copy link
@k-schneider

Description

@k-schneider
Issue body actions

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/

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.