Optimizer should replace all usages of $() with some special syntax. (inlinedQrl)

[slender yarrow]

Hi there!
I'm trying to pass callback to change the value of the Signal by child component.

const HeaderItem = component$<{
  link: TLink;
  onClickQrl: PropFunction<(prop: TBackground) => void>;
}>(({ link: { href, text } }) => {
  const container = useSignal<HTMLElement>();
  return (
    <li
      onClick$={() => {
        if (container.value !== undefined) {
          console.log({ width: container.value.offsetHeight });
        }
        // onClick({ width: 10, height: 10, left: 0 })
      }}
    >
      <a ref={container} href={href}>
        {text}
      </a>
    </li>
  );
});

const LinksHandler = component$<{ links: TLink[] }>(({ links }) => {
  const fillProps = useSignal<TBackground>();
  const linksAggregate = links.map((l) => (
    <HeaderItem
      onClickQrl={$(() => {
        console.log("works");
      })}
      key={l.href}
      link={l}
    />
  ));
  // TODO prefetching
  return (
    <>
      <ul>
        {linksAggregate}
        <button onClick$={$(toggleContact)}>Contact</button>
      </ul>
      <div style={fillProps.value}> background </div>
    </>
  );
});

Error:

9:37:27 PM [vite] Internal server error: Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.

What's wrong with my code?
Runtime: Bun

It's a bit confusing but I found out that you should just name your anonymous function:

const LinksHandler = component$<{ links: TLink[] }>(({ links }) => {
  const fillProps = useSignal<TBackground>();
  const callbackQrl = $(() => {
    console.log("works");
  });
  const linksAggregate = links.map((l) => (
    <HeaderItem onClickQrl={callbackQrl} key={l.href} link={l} />
  ));
  // TODO prefetching
  return (
    <>
      <ul>
        {linksAggregate}
        <button onClick$={$(toggleContact)}>Contact</button>
      </ul>
      <div style={fillProps.value}> background </div>
    </>
  );
});

[wintry plaza]

Actually this is a small bug. If you name the prop ending in $ it will work fine. So this should work:

const HeaderItem = component$<{
  link: TLink;
  onClick$: PropFunction<(prop: TBackground) => void>;
}>(({ link: { href, text } }) => {
  const container = useSignal<HTMLElement>();
  return (
    <li
      onClick$={() => {
        if (container.value !== undefined) {
          console.log({ width: container.value.offsetHeight });
        }
        // QRLs return Promises
        return onClick({ width: 10, height: 10, left: 0 })
      }}
    >
      <a ref={container} href={href}>
        {text}
      </a>
    </li>
  );
});

const LinksHandler = component$<{ links: TLink[] }>(({ links }) => {
  const fillProps = useSignal<TBackground>();
  const linksAggregate = links.map((l) => (
    <HeaderItem
      onClick$={() => {
        console.log("works");
      }}
      key={l.href}
      link={l}
    />
  ));
  // TODO prefetching
  return (
    <>
      <ul>
        {linksAggregate}
        <button onClick$={$(toggleContact)}>Contact</button>
      </ul>
      <div style={fillProps.value}> background </div>
    </>
  );
});

BTW, the onClick$ you're passing isn't an event handler, it gets different props, so it's a little bit confusing to name it that way. How about onSelected$ ?