Support custom events

Is your feature request related to a problem?

Many web components dispatch custom events like this.dispatchEvent(new CustomEvent('MDCDrawer:opened', {bubbles: true})) but it seems that the Qwik event syntax cannot support those events.

Describe the solution you’d like

Maybe something extending the syntax to onAnyCustomEvent$={() => ...} would be enough.

export const App = component$(() => {
  const state = useStore({
    drawerOpened: false,
  });

  useClientEffect$(async () => {
    await import('@material/mwc-drawer');
  });

  return (
    <Host>
      <mwc-drawer
        type="modal"
        open={state.drawerOpened}
        onMDCDrawer:opened$={() => state.drawerOpened = false}
      >
        <div>
          <p>Drawer content!</p>
        </div>
        <div slot="appContent">
          <button onClick$={() => state.drawerOpened = !state.drawerOpened}>toggle menu</button>
        </div>
      </mwc-drawer>
    </Host>
  );
});

Describe alternatives you’ve considered

I’ve considered to manually register the event listeners on client side hook but it’s a lot of work.

Additional context

No response

[mhevery]

Adding more context.

There are several issues with having custom events:

1. JSX encoding
2. Camel case
3. Type system
4. qwikloader

JSX Encoding

Let’s say you have MDCDrawer:opened event type. The first problem is how to express that in code.

  return <div 
    onClick$={() => null}
    on-kabab-case$={() => null}
    on-MDCDrawer:opened$={() => null}
    document:on-MDCDrawer:opened$={() => null} // <=== Not valid because JSX does not allow double `:`
    >Hello Qwik</div>;
});

produces:

      <div
        on:click="app_component_div_onclick_ry0qi1xao5u.js#App_component_div_onClick_ry0QI1XaO5U"
        on:kabab-case="app_component_div_on_kabab_case_nsx73cvzhz0.js#App_component_div_on_kabab_case_Nsx73CVzHz0"
        on:-m-d-c-drawer:opened="app_component_div_on_mdcdrawer_opened_1_vf1jhz00hgw.js#App_component_div_on_MDCDrawer_opened_1_vF1jhZ00hGw"
      >

there is an additional problem with namespacing as document:on-MDCDrawer:opened$ is not valid JSX because it has double :

Camel Case

Next problem is that MDCDrawer:opened has some upercase characters and attributes are all lowercase. I think this is handled by translating on-MDCDrawer:opened$ to on:-m-d-c-drawer:opened It is not clear to me if qwikloader has code that knows how to translate the extra - to uppercase characters in the event name.

Looking at the code it seems like broadcast has the code to translate to uppercase but not for regular events: https://github.com/BuilderIO/qwik/blob/main/packages/qwik/src/qwikloader.ts#L14

Type System

We need to extend the TypeScript type definition to allow for the new type. This should be straightforward, but I just don’t remember how to re-open an interface definition in TypeScript.

qwikloader

Finally, the qwikloader needs to be told about this event, as by default qwikloader only listens to the events that browsers emit. This can be done by passing explicit set of events here: https://github.com/BuilderIO/qwik/blob/main/packages/qwik/src/server/types.ts#L82

---

So it looks like that the only custom events we can listen to right now are ones which are all lowercase and which don’t have a : in their name.

[manucorporat]

Fixed by https://github.com/BuilderIO/qwik/pull/1212