From e5b8b59e84f63be158bd60b2f85471f15f6f115b Mon Sep 17 00:00:00 2001 From: Omri Maman 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 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 }) => ( +
+

Hello, {name}

+ +
+ ) + + const WebClassGreeting = r2wc(ClassGreeting, { + props: { + name: "string", + sayHello: "function", + }, + }) + + customElements.define("class-greeting", WebClassGreeting) + + document.body.innerHTML = `` + + 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) + }) + }) + })