@r2wc/react-to-web-component 1.0.0-alpha.4 → 2.0.0-alpha.1

package/README.md

@@ -91,15 +91,13 @@ npm install @r2wc/react-to-web-component
 
 ## External Examples
 
-Greeting example in a [CodePen](https://codepen.io/bavinedwards/pen/jOveaGm)
-
 Greeting example in [CodeSandbox](https://codesandbox.io/s/sample-greeting-app-ts-qwidh9)
 
 Hello, world example (React17) in [CodeSandbox](https://codesandbox.io/s/hello-world-react17-u4l3x1)
 
 Example with all prop types in [CodeSandbox](https://codesandbox.io/p/sandbox/vite-example-with-numerous-types-gjf87o)
 
-R2WC With Vite Header Example in [CodeSandbox](https://codesandbox.io/p/sandbox/header-example-e4x25q)
+R2WC With Vite Header Example in [CodeSandbox](https://codesandbox.io/p/sandbox/r2wc-header-example-vqzfgo)
 
 ## External Blog Posts
 
@@ -111,7 +109,7 @@ R2WC with Create React App (CRA) [View Post](https://www.bitovi.com/blog/how-to-
 
 Check out our [full API documentation](../../docs/api.md).
 
-`r2wc` creates a constructor function whose prototype is a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This acts as a trap for any property set on instances of the custom element. When a property is set, the proxy:
+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

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 i=require("react"),a=require("react-dom"),E=require("@r2wc/core");var u,r=a;if(process.env.NODE_ENV==="production")u=r.createRoot,r.hydrateRoot;else{var c=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;u=function(e,t){c.usingClientEntryPoint=!0;try{return r.createRoot(e,t)}finally{c.usingClientEntryPoint=!1}}}function _(e,t,o){const n=u(e),s=i.createElement(t,o);return n.render(s),{root:n,ReactComponent:t}}function l({root:e,ReactComponent:t},o){const n=i.createElement(t,o);e.render(n)}function f({root:e}){e.unmount()}function R(e,t={}){return E(e,t,{mount:_,update:l,unmount:f})}module.exports=R;

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

@@ -1,22 +1,36 @@
-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 i from "react";
+import m from "react-dom";
+import f from "@r2wc/core";
+var u, n = m;
+if (process.env.NODE_ENV === "production")
+  u = n.createRoot, n.hydrateRoot;
+else {
+  var c = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  u = function(t, e) {
+    c.usingClientEntryPoint = !0;
+    try {
+      return n.createRoot(t, e);
+    } finally {
+      c.usingClientEntryPoint = !1;
+    }
   };
 }
-function f({ container: e, ReactComponent: t }, n) {
-  const r = m.createElement(t, n);
-  o.render(r, e);
+function E(t, e, o) {
+  const r = u(t), a = i.createElement(e, o);
+  return r.render(a), {
+    root: r,
+    ReactComponent: e
+  };
+}
+function _({ root: t, ReactComponent: e }, o) {
+  const r = i.createElement(e, o);
+  t.render(r);
 }
-function i({ container: e }) {
-  o.unmountComponentAtNode(e);
+function l({ root: t }) {
+  t.unmount();
 }
-function p(e, t = {}) {
-  return u(e, t, { mount: c, update: f, unmount: i });
+function p(t, e = {}) {
+  return f(t, e, { mount: E, update: _, unmount: l });
 }
 export {
   p as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r2wc/react-to-web-component",
-  "version": "1.0.0-alpha.4",
+  "version": "2.0.0-alpha.1",
   "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-alpha.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>(