@r2wc/react-to-web-component 2.0.1 → 2.0.3

package/README.md

@@ -91,8 +91,11 @@ npm install @r2wc/react-to-web-component
 
 ## Examples
 
-* [Greeting](https://codesandbox.io/s/greeting-react-17-u4l3x1)
-* [All the Props](https://codesandbox.io/s/all-the-props-react-17-x09rxo)
+* [Greeting](https://codesandbox.io/s/greeting-md5oih)
+* [All the Props](https://codesandbox.io/s/all-the-props-n8z5hv)
+* [Header Demo](https://codesandbox.io/s/example-header-blog-7k313l)
+* [MUI Button](https://codesandbox.io/s/example-mui-button-qwidh9)
+* [Checklist Demo](https://codesandbox.io/s/example-checklist-blog-y3nqwx)
 
 ## Blog Posts
 
@@ -102,7 +105,17 @@ R2WC with Create React App (CRA) [View Post](https://www.bitovi.com/blog/how-to-
 
 ## How it works
 
-Check out our [full API documentation](../../docs/api.md).
+Check out our [full API documentation](https://github.com/bitovi/react-to-web-component/blob/main/docs/api.md).
+
+Under the hood, `r2wc` creates a `CustomElementConstructor` with custom getters/setters and life cycle methods that keep track of the props that you have defined. When a property is set, its custom setter:
+
+- re-renders the React component inside the custom element.
+- creates an enumerable getter / setter on the instance to save the set value and avoid hitting the proxy in the future.
+
+Also:
+
+- Enumerable properties and values on the custom element are used as the `props` passed to the React component.
+- The React component is not rendered until the custom element is inserted into the page.
 
 # We want to hear from you.
 

package/dist/react-to-web-component.cjs

@@ -1 +1 @@
-"use strict";const c=require("react"),u=require("react-dom"),o=require("@r2wc/core");function s(e,t,n){const r=c.createElement(t,n);return u.render(r,e),{container:e,ReactComponent:t}}function i({container:e,ReactComponent:t},n){const r=c.createElement(t,n);u.render(r,e)}function m({container:e}){u.unmountComponentAtNode(e)}function d(e,t={}){return o(e,t,{mount:s,update:i,unmount:m})}module.exports=d;
+"use strict";const c=require("react"),u=require("react-dom/client"),i=require("@r2wc/core");function s(e,t,r){const n=u.createRoot(e),o=c.createElement(t,r);return n.render(o),{root:n,ReactComponent:t}}function m({root:e,ReactComponent:t},r){const n=c.createElement(t,r);e.render(n)}function l({root:e}){e.unmount()}function a(e,t={}){return i(e,t,{mount:s,update:m,unmount:l})}module.exports=a;

package/dist/react-to-web-component.js

@@ -1,23 +1,23 @@
-import m from "react";
-import o from "react-dom";
-import u from "@r2wc/core";
-function c(e, t, n) {
-  const r = m.createElement(t, n);
-  return o.render(r, e), {
-    container: e,
-    ReactComponent: t
+import o from "react";
+import { createRoot as c } from "react-dom/client";
+import m from "@r2wc/core";
+function f(t, e, r) {
+  const n = c(t), u = o.createElement(e, r);
+  return n.render(u), {
+    root: n,
+    ReactComponent: e
   };
 }
-function f({ container: e, ReactComponent: t }, n) {
-  const r = m.createElement(t, n);
-  o.render(r, e);
+function i({ root: t, ReactComponent: e }, r) {
+  const n = o.createElement(e, r);
+  t.render(n);
 }
-function i({ container: e }) {
-  o.unmountComponentAtNode(e);
+function a({ root: t }) {
+  t.unmount();
 }
-function p(e, t = {}) {
-  return u(e, t, { mount: c, update: f, unmount: i });
+function s(t, e = {}) {
+  return m(t, e, { mount: f, update: i, unmount: a });
 }
 export {
-  p as default
+  s as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r2wc/react-to-web-component",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Convert React components to native Web Components.",
   "homepage": "https://www.bitovi.com/frontend-javascript-consulting/react-consulting",
   "author": "Bitovi",
@@ -45,11 +45,12 @@
     "@r2wc/core": "^1.0.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0"
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

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

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { describe, it, expect, assert } from "vitest"
 import matchers from "@testing-library/jest-dom/matchers"
+import React from "react"
+import PropTypes from "prop-types"
 
 import r2wc from "./react-to-web-component"
 
@@ -14,7 +16,7 @@ const Greeting: React.FC<{ name: string }> = ({ name }) => (
   <h1>Hello, {name}</h1>
 )
 
-describe("react-to-web-component", () => {
+describe("react-to-web-component 1", () => {
   it("basics with react", () => {
     const MyWelcome = r2wc(Greeting)
     customElements.define("my-welcome", MyWelcome)
@@ -26,6 +28,71 @@ describe("react-to-web-component", () => {
     expect(myWelcome.nodeName).toEqual("MY-WELCOME")
   })
 
+  it("works with props array", async () => {
+    function TestComponent({ name }: { name: string }) {
+      return <div>hello, {name}</div>
+    }
+
+    const TestElement = r2wc(TestComponent, { props: ["name"] })
+
+    customElements.define("test-hello", TestElement)
+
+    const body = document.body
+    body.innerHTML = "<test-hello 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>
+    }
+
+    WithProptypes.propTypes = {
+      name: PropTypes.string.isRequired,
+    }
+
+    const WithPropTypesElement = r2wc(WithProptypes)
+
+    customElements.define("with-proptypes", WithPropTypesElement)
+
+    const body = document.body
+    body.innerHTML = "<with-proptypes name='Bavin'></with-proptypes>"
+
+    await flushPromises()
+
+    const div = body.querySelector("div")
+    expect(div?.textContent).toBe("hello, Bavin")
+  })
+
+  it("works with class components", async () => {
+    class TestClassComponent extends React.Component<{ name: string }> {
+      render() {
+        return <div>hello, {this.props.name}</div>
+      }
+    }
+
+    class TestClassElement extends r2wc(TestClassComponent, {
+      props: ["name"],
+    }) {}
+
+    customElements.define("test-class", TestClassElement)
+
+    const body = document.body
+    body.innerHTML = "<test-class name='Bavin'></test-class>"
+
+    await flushPromises()
+
+    const div = body.querySelector("div")
+    const testClassEl = body.querySelector("test-class")
+
+    expect(testClassEl).toBeInstanceOf(TestClassElement)
+    expect(div?.textContent).toBe("hello, Bavin")
+  })
+
   it("works with shadow DOM `options.shadow === 'open'`", async () => {
     expect.assertions(5)
 

package/src/react-to-web-component.ts

@@ -1,12 +1,13 @@
 import type { R2WCOptions } from "@r2wc/core"
+import type { Root } from "react-dom/client"
 
 import React from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 
 import r2wcCore from "@r2wc/core"
 
 interface Context<Props extends object> {
-  container: HTMLElement
+  root: Root
   ReactComponent: React.ComponentType<Props>
 }
 
@@ -15,27 +16,27 @@ function mount<Props extends object>(
   ReactComponent: React.ComponentType<Props>,
   props: Props,
 ): Context<Props> {
-  const element = React.createElement(ReactComponent, props)
+  const root = createRoot(container)
 
-  ReactDOM.render(element, container)
+  const element = React.createElement(ReactComponent, props)
+  root.render(element)
 
   return {
-    container,
+    root,
     ReactComponent,
   }
 }
 
 function update<Props extends object>(
-  { container, ReactComponent }: Context<Props>,
+  { root, ReactComponent }: Context<Props>,
   props: Props,
 ): void {
   const element = React.createElement(ReactComponent, props)
-
-  ReactDOM.render(element, container)
+  root.render(element)
 }
 
-function unmount<Props extends object>({ container }: Context<Props>): void {
-  ReactDOM.unmountComponentAtNode(container)
+function unmount<Props extends object>({ root }: Context<Props>): void {
+  root.unmount()
 }
 
 export default function r2wc<Props extends object>(