fix: support receiving events from class api templates

src/__tests__/fixtures/misc/class-api-event-handlers/__snapshots__/misc-native-tag-event-handlers/basic/node.render.expected.html

@@ -0,0 +1,6 @@
+<button>
+  emit 1
+</button>
+<button>
+  emit 2
+</button>

src/__tests__/fixtures/misc/class-api-event-handlers/__snapshots__/misc-native-tag-event-handlers/basic/web.render.expected.html

@@ -0,0 +1,6 @@
+<button>
+  emit 1
+</button>
+<button>
+  emit 2
+</button>

src/__tests__/fixtures/misc/class-api-event-handlers/__snapshots__/misc-native-tag-event-handlers/basic/web.step-0.expected.html

@@ -0,0 +1,6 @@
+<button>
+  emit 1
+</button>
+<button>
+  emit 2
+</button>

src/__tests__/fixtures/misc/class-api-event-handlers/index.test.ts

@@ -0,0 +1,25 @@
+import { spy, resetHistory } from "sinon";
+import fixture from "../../../fixture";
+
+const onValue = spy();
+
+describe("misc native tag event handlers", () => {
+  describe(
+    "basic",
+    fixture("./templates/basic.marko", [
+      { onValue },
+      async ({ expect, fireEvent, screen }) => {
+        expect(onValue).has.not.been.called;
+
+        await fireEvent.click(screen.getByText("emit 1"));
+
+        expect(onValue).has.been.calledOnceWith(1);
+        resetHistory();
+
+        await fireEvent.click(screen.getByText("emit 2"));
+        expect(onValue).has.been.calledOnceWith(2);
+        resetHistory();
+      },
+    ])
+  );
+});

src/__tests__/fixtures/misc/class-api-event-handlers/templates/basic.marko

@@ -0,0 +1,3 @@
+<attrs/{ onValue }/>
+<fancy-button onClick=(() => onValue(1))>emit 1</fancy-button>
+<fancy-button onClick=(() => onValue(2))>emit 2</fancy-button>

src/__tests__/fixtures/misc/class-api-event-handlers/templates/components/fancy-button.marko

@@ -0,0 +1,9 @@
+class {
+  handleClick() {
+    this.emit("click");
+  }
+}
+
+<button onClick("handleClick")>
+  <${input.renderBody}/>
+</button>

src/translate/class-api-custom-tag-handlers.ts

@@ -0,0 +1,29 @@
+import { types as t } from "@marko/compiler";
+import { loadFileForTag } from "@marko/babel-utils";
+import isApi from "../util/is-api";
+const eventNameReg = /^on[A-Z]/;
+
+// Translates all event handlers that are on class api child tags to use the `onEvent(handler)` api.
+// This allows tags api templates to consume events from class api templates.
+export default {
+  MarkoTag(tag: t.NodePath<t.MarkoTag>) {
+    if (isApi(tag, "class")) return;
+    let childFile: t.BabelFile | undefined;
+
+    for (const attr of tag.get("attributes")) {
+      if (
+        attr.isMarkoAttribute() &&
+        !attr.node.arguments &&
+        eventNameReg.test(attr.node.name)
+      ) {
+        if (
+          !(childFile ||= loadFileForTag(tag)) ||
+          isApi(childFile.path, "tags")
+        )
+          return;
+        attr.node.arguments = [attr.node.value];
+        attr.node.value = t.booleanLiteral(true);
+      }
+    }
+  },
+} as t.Visitor;

src/translate/index.ts

@@ -1,5 +1,12 @@
 import { types as t } from "@marko/compiler";
+import classApiCustomTagHandlers from "./class-api-custom-tag-handlers";
 import nativeTagHandlers from "./native-tag-handlers/translate";
 import trackRendering from "./track-rendering/translate";
 import forKeyScope from "./for-key-scope";
-export = [nativeTagHandlers, trackRendering, forKeyScope] as t.Visitor[];
+
+export = [
+  classApiCustomTagHandlers,
+  nativeTagHandlers,
+  trackRendering,
+  forKeyScope,
+] as t.Visitor[];