From 3ce1656281d46c95094354f6ad63837653d41fe7 Mon Sep 17 00:00:00 2001
From: Chris Qiang <chris@christianto.net>
Date: Tue, 30 Jan 2024 19:46:00 +0700
Subject: [PATCH 1/2] Add React Strict Mode support (#169)

---
 packages/core/src/core.ts                            | 11 ++++++++---
 .../src/react-to-web-component.ts                    | 12 ++++++++++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
index 9d40744..500721b 100644
--- a/packages/core/src/core.ts
+++ b/packages/core/src/core.ts
@@ -8,7 +8,8 @@ type PropNames<Props> = Array<PropName<Props>>
 
 export interface R2WCOptions<Props> {
   shadow?: "open" | "closed"
-  props?: PropNames<Props> | Partial<Record<PropName<Props>, R2WCType>>
+  props?: PropNames<Props> | Partial<Record<PropName<Props>, R2WCType>>,
+  strictMode?: boolean
 }
 
 export interface R2WCRenderer<Props, Context> {
@@ -16,8 +17,9 @@ export interface R2WCRenderer<Props, Context> {
     container: HTMLElement,
     ReactComponent: React.ComponentType<Props>,
     props: Props,
+    strictMode: boolean
   ) => Context
-  update: (context: Context, props: Props) => void
+  update: (context: Context, props: Props, strictMode: boolean) => void
   unmount: (context: Context) => void
 }
 
@@ -136,14 +138,17 @@ export default function r2wc<Props extends R2WCBaseProps, Context>(
     [renderSymbol]() {
       if (!this[connectedSymbol]) return
 
+      const strictMode = options.strictMode || false;
+      
       if (!this[contextSymbol]) {
         this[contextSymbol] = renderer.mount(
           this.container,
           ReactComponent,
           this[propsSymbol],
+          strictMode
         )
       } else {
-        renderer.update(this[contextSymbol], this[propsSymbol])
+        renderer.update(this[contextSymbol], this[propsSymbol], strictMode)
       }
     }
   }
diff --git a/packages/react-to-web-component/src/react-to-web-component.ts b/packages/react-to-web-component/src/react-to-web-component.ts
index fbdb5dc..23d6a2f 100644
--- a/packages/react-to-web-component/src/react-to-web-component.ts
+++ b/packages/react-to-web-component/src/react-to-web-component.ts
@@ -15,10 +15,14 @@ function mount<Props extends object>(
   container: HTMLElement,
   ReactComponent: React.ComponentType<Props>,
   props: Props,
+  strictMode: boolean
 ): Context<Props> {
   const root = createRoot(container)
 
-  const element = React.createElement(ReactComponent, props)
+  let element: React.ReactElement = React.createElement(ReactComponent, props)
+  if (strictMode) {
+    element = React.createElement(React.StrictMode, null, element)
+  }
   root.render(element)
 
   return {
@@ -30,8 +34,12 @@ function mount<Props extends object>(
 function update<Props extends object>(
   { root, ReactComponent }: Context<Props>,
   props: Props,
+  strictMode: boolean
 ): void {
-  const element = React.createElement(ReactComponent, props)
+  let element: React.ReactElement = React.createElement(ReactComponent, props)
+  if (strictMode) {
+    element = React.createElement(React.StrictMode, null, element)
+  }
   root.render(element)
 }
 

From 9f0bca349e33ce76186cb34d25d0662419f93ea5 Mon Sep 17 00:00:00 2001
From: Chris Qiang <chris@christianto.net>
Date: Tue, 30 Jan 2024 19:46:18 +0700
Subject: [PATCH 2/2] Add test for React Strict Mode support (#169)

---
 .../src/react-to-web-component.test.tsx        | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

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 ce99f4e..be1d2d5 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
@@ -46,6 +46,24 @@ describe("react-to-web-component 1", () => {
     expect(div?.textContent).toBe("hello, Bavin")
   })
 
+  it("works with props array in strict mode", async () => {
+    function TestComponent({ name }: { name: string }) {
+      return <div>hello, {name}</div>
+    }
+
+    const TestElement = r2wc(TestComponent, { props: ["name"], strictMode: true })
+
+    customElements.define("test-hello-strict", TestElement)
+
+    const body = document.body
+    body.innerHTML = "<test-hello-strict name='Bavin'></test-hello>"
+
+    await flushPromises()
+
+    const div = body.querySelector("div")
+    expect(div?.textContent).toBe("hello, Bavin")
+  })
+
   it("works with proptypes", async () => {
     function WithProptypes({ name }: { name: string }) {
       return <div>hello, {name}</div>