Feature: Strict Mode Support

packages/core/src/core.ts

@@ -8,16 +8,18 @@ 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> {
   mount: (
     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)
       }
     }
   }

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>

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)
 }