Error Generating React Wrappers with Custom Event Types

[binlabs]

Hey Burton, I'm trying to generate React wrappers using customElementReactWrapperPlugin for my component that has events which extend from the native event class. I was trying to base my custom event types on the Truly Custom Events article you wrote on dev.to.

The code for a minimal reproduction is shown below, or you can see it in-full here:

// my-component/events.ts
export class SearchCancelEvent extends Event {
  constructor() {
    super('universal-search-cancel', {
      bubbles: true,
      composed: true,
    });
  }
}

// my-component/my-component.ts
import { html, LitElement } from "lit";
import { SearchCancelEvent } from "./events";

export class MyComponent extends LitElement {
  override firstUpdated() {
    this.dispatchEvent(new SearchCancelEvent());
  }
  override render() {
    return html``;
  }
}

Unfortunately, when running the repro on StackBlitz, analyzer just hangs and never finishes and can't seem to even be cancelled with CTRL+C, so if you want to see the error you'll probably have to clone it locally.

Here is the error that occurs when running the analyzer:

TypeError: Cannot read properties of undefined (reading 'replace')
    at toPascalCase (file:///Users/my-username/Development/Personal/cem-react-wrapper-event-error/node_modules/custom-element-react-wrappers/dist/index.js:131:16)
    at createEventName (file:///Users/my-username/Development/Personal/cem-react-wrapper-event-error/node_modules/custom-element-react-wrappers/dist/index.js:161:39)
    at file:///Users/my-username/Development/Personal/cem-react-wrapper-event-error/node_modules/custom-element-react-wrappers/dist/index.js:561:18
    at Array.map (<anonymous>)
    at getEventNames (file:///Users/my-username/Development/Personal/cem-react-wrapper-event-error/node_modules/custom-element-react-wrappers/dist/index.js:558:29)
    at file:///Users/my-username/Development/Personal/cem-react-wrapper-event-error/node_modules/custom-element-react-wrappers/dist/index.js:471:20
    at Array.forEach (<anonymous>)
    at generateReactWrappers (file:///Users/my-username/Development/Personal/cem-react-wrapper-event-error/node_modules/custom-element-react-wrappers/dist/index.js:470:14)
    at packageLinkPhase (file:///Users/my-username/Development/Personal/cem-react-wrapper-event-error/node_modules/custom-element-react-wrappers/dist/index.js:831:7)
    at file:///Users/my-username/Development/Personal/cem-react-wrapper-event-error/node_modules/@custom-elements-manifest/analyzer/src/create.js:80:25

Here is what the wrappers plugin is seeing from the manifest when it's trying get the event names by mapping over component.events:

{
  kind: "class",
  description: "",
  name: "MyComponent",
  members: [
  ],
  events: [
    {
      type: {
        text: "SearchCancelEvent",
      },
    },
  ],
  superclass: {
    name: "LitElement",
    package: "lit",
  },
  tagName: "my-component",
  customElement: true,
  modulePath: "src/components/my-component/my-component.ts",
  definitionPath: "src/components/my-component/index.ts",
}

Because the event doesn't end up with a name property, it errors out in toPascalCase().

I'll probably try switching over to CustomEvent for the time being, unless you are able to see something I've done wrong.

Let me know if there's anything I can do to help.

[binlabs]

A couple of hours after submitting this issue, it occurred to me that because these events aren't making it to the manifest in a format that the plugin can parse, that this is probably an issue with the CEM analyzer and NOT with the plugin.

If that's the case, feel free to close.

Still, any advice would be appreciated. I wonder if I could write my own CEM plugin that adds support for parsing events the way I have them.

[break-stuff]

No, I think there may be a bug in the plugin.

[break-stuff]

I just released a new version of the package as part of the WC Toolkit. Are you able to try it out and see if this fixes your problem?

[break-stuff]

Ah, actually, I think I see the issue. It looks like the analyzer can parse the dispatch directly to get the event name. You should be able to document it using a JSDoc tag.

[binlabs]

Just changed from the old package to v1 of the wctoolkit react wrapper package - same error. Just pushed it up the repro repo in case you want to mess with it.

I can use a JSDoc tag and that works, but then I end up with two instances of each event in the manifest: the correct one with the event name from the JSDoc tag, and then the one where it only has the type name which ends up erroring on this plugin.

I need to dig in to the analyzer config and see if there's some way I can get it to ignore the latter and only use the JSDoc tags for events.

PS: Happy new year, and thanks for all the great tools!

[break-stuff]

You can use the @internal JSDoc tag on the event in the component to have the analyzer ignore it.

[binlabs]

Just opened a PR in the new repo that will fix this error until something else is figured out: wc-toolkit/react-wrappers#6

Feel free to close it if you wanted to go down a different path - just wanted to try contributing to get myself more familiar with CEM plugins.