Fix method transforms when shadow DOM is used

Author: bmomberger-bitovi

packages/core/src/core.ts

@@ -1,5 +1,5 @@
 import transforms, { R2WCType } from "./transforms"
-import { toDashedCase, toCamelCase } from "./utils"
+import { toDashedCase } from "./utils"
 
 type PropName<Props> = Exclude<Extract<keyof Props, string>, "container">
 type PropNames<Props> = Array<PropName<Props>>
@@ -106,26 +106,7 @@ export default function r2wc<Props extends R2WCBaseProps, Context>(
         const type = propTypes[prop]
         const transform = type ? transforms[type] : null
 
-        if (type === "method") {
-          const methodName = toCamelCase(attribute)
-
-          Object.defineProperty(this[propsSymbol].container, methodName, {
-            enumerable: true,
-            configurable: true,
-            get() {
-              return this[propsSymbol][methodName]
-            },
-            set(value) {
-              this[propsSymbol][methodName] = value
-              this[renderSymbol]()
-            },
-          })
-
-          //@ts-ignore
-          this[propsSymbol][prop] = transform.parse(value, attribute, this)
-        }
-
-        if (transform?.parse && value) {
+        if (transform?.parse && (value || type === "method")) {
           //@ts-ignore
           this[propsSymbol][prop] = transform.parse(value, attribute, this)
         }
@@ -164,7 +145,7 @@ export default function r2wc<Props extends R2WCBaseProps, Context>(
       const type = propTypes[prop]
       const transform = type ? transforms[type] : null
 
-      if (prop in propTypes && transform?.parse && value) {
+      if (prop in propTypes && transform?.parse && (value || type === "method")) {
         //@ts-ignore
         this[propsSymbol][prop] = transform.parse(value, attribute, this)
 
@@ -207,9 +188,17 @@ export default function r2wc<Props extends R2WCBaseProps, Context>(
           const oldAttributeValue = this.getAttribute(attribute)
 
           if (oldAttributeValue !== attributeValue) {
-            this.setAttribute(attribute, attributeValue)
+            if (attributeValue == null) {
+              this.removeAttribute(attribute)
+            } else {
+              this.setAttribute(attribute, attributeValue)
+            }
           }
         } else {
+          if (prop in propTypes && transform?.parse && (value || type === "method")) {
+            //@ts-ignore
+            this[propsSymbol][prop] = transform.parse(value, attribute, this)
+          }
           this[renderSymbol]()
         }
       },

packages/core/src/transforms/index.ts

@@ -5,9 +5,13 @@ import method_ from "./method"
 import number from "./number"
 import string from "./string"
 
+type R2WCElement = HTMLElement & {
+  container: R2WCElement
+}
+
 export interface Transform<Type> {
-  stringify?: (value: Type, attribute: string, element: HTMLElement) => string
-  parse: (value: string, attribute: string, element: HTMLElement) => Type
+  stringify?: (value: Type, attribute: string, element: R2WCElement) => string
+  parse: (value: string, attribute: string, element: R2WCElement) => Type
 }
 
 const transforms = {

packages/core/src/transforms/method.ts

@@ -2,16 +2,35 @@ import { toCamelCase } from "../utils"
 
 import { Transform } from "./index"
 
+const boundSymbol = Symbol.for("r2wc.bound")
+
 const method_: Transform<(...args: unknown[]) => unknown> = {
-  stringify: (value) => value.name,
   parse: (value, attribute, element) => {
     const fn = (() => {
       const functionName = toCamelCase(attribute)
 
-      //@ts-expect-error
-      if (typeof element !== "undefined" && functionName in element.container) {
-        // @ts-expect-error
-        return element.container[functionName]
+      const r2wcElement = element as typeof element & {
+        container: typeof r2wcElement
+      } & {
+        [k in typeof functionName]: Function
+      }
+
+      if (typeof r2wcElement !== "undefined") {
+        if (
+          typeof r2wcElement !== "undefined"
+          && functionName in r2wcElement && typeof r2wcElement[functionName] !== "undefined"
+        ) {
+          let fn = r2wcElement[functionName]
+          if (!(boundSymbol in r2wcElement[functionName])) {
+            fn = fn.bind(r2wcElement)
+            Object.defineProperty(fn, boundSymbol, { value: true })
+          }
+          return fn
+        } else {
+          return null
+        }
+      } else {
+        return null
       }
     })()
 

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

@@ -364,7 +364,11 @@ describe("react-to-web-component 1", () => {
     })
   })
 
-  it("Supports class function to react props using method transform", async () => {
+  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,
@@ -380,41 +384,46 @@ describe("react-to-web-component 1", () => {
         name: "string",
         sayHello: "method",
       },
+      shadow: shadow as unknown as Exclude<Parameters<typeof r2wc>[1], undefined>['shadow'],
     })
 
-    customElements.define("class-greeting", WebClassGreeting)
+    const tagName = `class-greeting${shadow ? `-${shadow}`: ''}`
 
-    document.body.innerHTML = `<class-greeting name='Christopher'></class-greeting>`
+    customElements.define(tagName, WebClassGreeting)
+
+    document.body.innerHTML = `<${tagName} name='Christopher'></class-greeting>`
 
     const el = document.querySelector<HTMLElement & { sayHello?: () => void }>(
-      "class-greeting",
+      tagName,
     )
 
     if (!el) {
       throw new Error("Element not found")
     }
 
     const sayHello = function (this: HTMLElement) {
-      const nameElement = this.querySelector("h1")
+      const nameElement = this.container.querySelector("h1")
       if (nameElement) {
         nameElement.textContent = "Hello, again"
       }
     }
 
-    el.sayHello = sayHello.bind(el)
+    el.sayHello = sayHello//.bind(el)
+
+    const docRoot = el.container.getRootNode()
 
     await new Promise((resolve, reject) => {
       const failIfNotClicked = setTimeout(() => {
         reject()
       }, 1000)
 
       setTimeout(() => {
-        document
-          .querySelector<HTMLButtonElement>("class-greeting button")
+        docRoot
+          .querySelector<HTMLButtonElement>(`button`)
           ?.click()
 
         setTimeout(() => {
-          const element = document.querySelector("h1")
+          const element = docRoot.querySelector("h1")
           expect(element?.textContent).toEqual("Hello, again")
           clearTimeout(failIfNotClicked)
           resolve(true)
@@ -423,26 +432,26 @@ describe("react-to-web-component 1", () => {
     })
 
     const sayHelloRerendered = function (this: HTMLElement) {
-      const nameElement = this.querySelector("h1")
+      const nameElement = this.container.querySelector("h1")
       if (nameElement) {
         nameElement.textContent = "Hello, again rerendered"
       }
     }
 
-    el.sayHello = sayHelloRerendered.bind(el)
+    el.sayHello = sayHelloRerendered//.bind(el)
 
     await new Promise((resolve, reject) => {
       const failIfNotClicked = setTimeout(() => {
         reject()
       }, 1000)
 
       setTimeout(() => {
-        document
-          .querySelector<HTMLButtonElement>("class-greeting button")
+        docRoot
+          .querySelector<HTMLButtonElement>(`button`)
           ?.click()
 
         setTimeout(() => {
-          const element = document.querySelector<HTMLHeadingElement>("h1")
+          const element = docRoot.querySelector<HTMLHeadingElement>("h1")
           expect(element?.textContent).toEqual("Hello, again rerendered")
           clearTimeout(failIfNotClicked)
           resolve(true)