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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r2wc/react-to-web-component",
-  "version": "2.0.4",
+  "version": "2.1.1",
   "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.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

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

@@ -4,6 +4,8 @@ import PropTypes from "prop-types"
 import React from "react"
 import { describe, it, expect, assert } from "vitest"
 
+import { R2WCElement } from "@r2wc/core"
+
 import r2wc from "./react-to-web-component"
 
 expect.extend(matchers)
@@ -363,4 +365,98 @@ describe("react-to-web-component 1", () => {
       button.click()
     })
   })
+
+  it.each([[undefined], ["open"], ["closed"]])(
+    `Supports class function to react props using method transform: (shadow: %s)`,
+    async (shadow) => {
+      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",
+        },
+        shadow: shadow as unknown as Exclude<
+          Parameters<typeof r2wc>[1],
+          undefined
+        >["shadow"],
+      })
+
+      const tagName = `class-greeting${shadow ? `-${shadow}` : ""}`
+
+      customElements.define(tagName, WebClassGreeting)
+
+      document.body.innerHTML = `<${tagName} name='Christopher'></class-greeting>`
+
+      const el = document.querySelector<
+        R2WCElement & { sayHello?: () => void }
+      >(tagName)
+
+      if (!el) {
+        throw new Error("Element not found")
+      }
+
+      const sayHello = function (this: R2WCElement) {
+        const nameElement = this.container.querySelector("h1")
+        if (nameElement) {
+          nameElement.textContent = "Hello, again"
+        }
+      }
+
+      el.sayHello = sayHello
+
+      const docRoot = el.container.getRootNode() as Document | DocumentFragment
+
+      await new Promise((resolve, reject) => {
+        const failIfNotClicked = setTimeout(() => {
+          reject()
+        }, 1000)
+
+        setTimeout(() => {
+          docRoot.querySelector<HTMLButtonElement>(`button`)?.click()
+
+          setTimeout(() => {
+            const element = docRoot.querySelector("h1")
+            expect(element?.textContent).toEqual("Hello, again")
+            clearTimeout(failIfNotClicked)
+            resolve(true)
+          }, 0)
+        }, 0)
+      })
+
+      const sayHelloRerendered = function (this: R2WCElement) {
+        const nameElement = this.container.querySelector("h1")
+        if (nameElement) {
+          nameElement.textContent = "Hello, again rerendered"
+        }
+      }
+
+      el.sayHello = sayHelloRerendered
+
+      await new Promise((resolve, reject) => {
+        const failIfNotClicked = setTimeout(() => {
+          reject()
+        }, 1000)
+
+        setTimeout(() => {
+          docRoot.querySelector<HTMLButtonElement>(`button`)?.click()
+
+          setTimeout(() => {
+            const element = docRoot.querySelector<HTMLHeadingElement>("h1")
+            expect(element?.textContent).toEqual("Hello, again rerendered")
+            clearTimeout(failIfNotClicked)
+            resolve(true)
+          }, 0)
+        }, 0)
+      })
+    },
+  )
 })