From e5b8b59e84f63be158bd60b2f85471f15f6f115b Mon Sep 17 00:00:00 2001
From: Omri Maman <maomri1@gmail.com>
Date: Tue, 6 May 2025 16:27:42 +0300
Subject: [PATCH 1/2] Support class function to react props

---
 packages/core/src/transforms/function.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/core/src/transforms/function.ts b/packages/core/src/transforms/function.ts
index 8d7e1e0..bf8b3a9 100644
--- a/packages/core/src/transforms/function.ts
+++ b/packages/core/src/transforms/function.ts
@@ -1,3 +1,5 @@
+import { toCamelCase } from "../utils"
+
 import { Transform } from "./index"
 
 const function_: Transform<(...args: unknown[]) => unknown> = {
@@ -13,6 +15,13 @@ const function_: Transform<(...args: unknown[]) => unknown> = {
         // @ts-expect-error
         return global[value]
       }
+      
+      const functionName = toCamelCase(attribute);
+      //@ts-expect-error
+      if (typeof element !== "undefined" && functionName in element.container) {
+        // @ts-expect-error
+        return element.container[functionName]
+      }
     })()
 
     return typeof fn === "function" ? fn.bind(element) : undefined

From 13af643572bc669442c0826553faa45b1dccb306 Mon Sep 17 00:00:00 2001
From: Omri Maman <maomri1@gmail.com>
Date: Sun, 11 May 2025 23:14:28 +0300
Subject: [PATCH 2/2] test + lint

---
 packages/core/src/transforms/function.ts      |  5 +-
 .../src/react-to-web-component.test.tsx       | 52 +++++++++++++++++++
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/transforms/function.ts b/packages/core/src/transforms/function.ts
index bf8b3a9..3d7e570 100644
--- a/packages/core/src/transforms/function.ts
+++ b/packages/core/src/transforms/function.ts
@@ -15,8 +15,9 @@ const function_: Transform<(...args: unknown[]) => unknown> = {
         // @ts-expect-error
         return global[value]
       }
-      
-      const functionName = toCamelCase(attribute);
+
+      const functionName = toCamelCase(attribute)
+
       //@ts-expect-error
       if (typeof element !== "undefined" && functionName in element.container) {
         // @ts-expect-error
diff --git a/packages/react-to-web-component/src/react-to-web-component.test.tsx b/packages/react-to-web-component/src/react-to-web-component.test.tsx
index 4d89e7e..ea17539 100644
--- a/packages/react-to-web-component/src/react-to-web-component.test.tsx
+++ b/packages/react-to-web-component/src/react-to-web-component.test.tsx
@@ -363,4 +363,56 @@ describe("react-to-web-component 1", () => {
       button.click()
     })
   })
+
+  it("Supports class function to react props", async () => {
+
+    const ClassGreeting: React.FC<{ name: string, sayHello: () => void }> = ({ name, sayHello }) => (
+      <div>
+        <h1 id="class-greeting-text">Hello, {name}</h1>
+        <button id="click-class-greeting" onClick={() => sayHello()}>Click me</button>
+      </div>
+    )
+    
+    const WebClassGreeting = r2wc(ClassGreeting, {
+      props: {
+        name: "string",
+        sayHello: "function",
+      },
+    })
+
+    customElements.define("class-greeting", WebClassGreeting)
+
+    document.body.innerHTML = `<class-greeting name='Christopher'></class-greeting>`
+    
+    const el = document.querySelector("class-greeting") as HTMLElement & { sayHello?: () => void };
+    
+    el.sayHello = function () {
+      const nameElement = el.querySelector("h1") as HTMLElement;
+      nameElement.textContent = "Hello, again";
+    }
+    
+    el.setAttribute("say-hello", "sayHello");
+    
+    await new Promise((resolve, reject) => {
+      const failIfNotClicked = setTimeout(() => {
+        reject()
+      }, 1000)
+
+      setTimeout(() => {
+        const button = document.body?.querySelector(
+          "#click-class-greeting",
+        ) as HTMLButtonElement;
+  
+        button.click()
+
+        setTimeout(() => {
+          const element = document.body.querySelector("h1")
+          expect(element?.textContent).toEqual("Hello, again")
+          clearTimeout(failIfNotClicked)
+          resolve(true)
+        }, 0)
+      }, 0)
+    })
+  })
+
 })