@r2wc/react-to-web-component 2.0.4 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r2wc/react-to-web-component",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "Convert React components to native Web Components.",
   "homepage": "https://www.bitovi.com/open-source/react-to-web-component",
   "author": "Bitovi",
@@ -42,7 +42,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@r2wc/core": "^1.0.0"
+    "@r2wc/core": "^1.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/react-to-web-component.test.tsx

@@ -363,4 +363,91 @@ describe("react-to-web-component 1", () => {
       button.click()
     })
   })
+
+  it("Supports class function to react props using method transform", async () => {
+    const ClassGreeting: React.FC<{ name: string; sayHello: () => void }> = ({
+      name,
+      sayHello,
+    }) => (
+      <div>
+        <h1>Hello, {name}</h1>
+        <button onClick={sayHello}>Click me</button>
+      </div>
+    )
+
+    const WebClassGreeting = r2wc(ClassGreeting, {
+      props: {
+        name: "string",
+        sayHello: "method",
+      },
+    })
+
+    customElements.define("class-greeting", WebClassGreeting)
+
+    document.body.innerHTML = `<class-greeting name='Christopher'></class-greeting>`
+
+    const el = document.querySelector<HTMLElement & { sayHello?: () => void }>(
+      "class-greeting",
+    )
+
+    if (!el) {
+      throw new Error("Element not found")
+    }
+
+    const sayHello = function (this: HTMLElement) {
+      const nameElement = this.querySelector("h1")
+      if (nameElement) {
+        nameElement.textContent = "Hello, again"
+      }
+    }
+
+    el.sayHello = sayHello.bind(el)
+
+    await new Promise((resolve, reject) => {
+      const failIfNotClicked = setTimeout(() => {
+        reject()
+      }, 1000)
+
+      setTimeout(() => {
+        document
+          .querySelector<HTMLButtonElement>("class-greeting button")
+          ?.click()
+
+        setTimeout(() => {
+          const element = document.querySelector("h1")
+          expect(element?.textContent).toEqual("Hello, again")
+          clearTimeout(failIfNotClicked)
+          resolve(true)
+        }, 0)
+      }, 0)
+    })
+
+    const sayHelloRerendered = function (this: HTMLElement) {
+      const nameElement = this.querySelector("h1")
+      if (nameElement) {
+        nameElement.textContent = "Hello, again rerendered"
+      }
+    }
+
+    el.sayHello = sayHelloRerendered.bind(el)
+
+    await new Promise((resolve, reject) => {
+      const failIfNotClicked = setTimeout(() => {
+        reject()
+      }, 1000)
+
+      setTimeout(() => {
+        document
+          .querySelector<HTMLButtonElement>("class-greeting button")
+          ?.click()
+
+        setTimeout(() => {
+          const element = document.querySelector<HTMLHeadingElement>("h1")
+          expect(element?.textContent).toEqual("Hello, again rerendered")
+          clearTimeout(failIfNotClicked)
+          resolve(true)
+        }, 0)
+      }, 0)
+    })
+  })
 })