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

package/README.md

@@ -2,10 +2,12 @@
 
 `@r2wc/react-to-web-component` converts [React](https://reactjs.org/) components to [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)! It lets you share React components as native elements that **don't** require mounted being through React. The custom element acts as a wrapper for the underlying React component. Use these custom elements with any project that uses HTML even in any framework (vue, svelte, angular, ember, canjs) the same way you would use standard HTML elements.
 
+> Note: This package only works with the React 16 and 17. If you are using React 18, use version 2.0 or later.
+
 `@r2wc/react-to-web-component`:
 
 - Works in all modern browsers. (Edge needs a [customElements polyfill](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements)).
-- Is `1.11KB` minified and gzipped.
+- Is `1.26KB` minified and gzipped.
 
 ## Need help or have questions?
 
@@ -46,8 +48,6 @@ Now we can use `<web-greeting>` like any other HTML element!
 </body>
 ```
 
-Note that by using React 18, `r2wc` will use the new root API. If your application needs the legacy API, please use React 17
-
 In the above case, the web-greeting custom element is not making use of the `name` property from our `Greeting` component.
 
 ## Working with Attributes
@@ -89,17 +89,12 @@ To install from npm:
 npm install @r2wc/react-to-web-component
 ```
 
-## External Examples
-
-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)
+## Examples
 
-R2WC With Vite Header Example in [CodeSandbox](https://codesandbox.io/p/sandbox/r2wc-header-example-vqzfgo)
+* [Greeting](https://codesandbox.io/s/greeting-react-17-u4l3x1)
+* [All the Props](https://codesandbox.io/s/all-the-props-react-17-x09rxo)
 
-## External Blog Posts
+## Blog Posts
 
 R2WC with Vite [View Post](https://www.bitovi.com/blog/react-everywhere-with-vite-and-react-to-webcomponent)
 
@@ -109,17 +104,6 @@ R2WC with Create React App (CRA) [View Post](https://www.bitovi.com/blog/how-to-
 
 Check out our [full API documentation](../../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.
 
 Come chat with us about open source in our Bitovi community [Discord](https://discord.gg/J7ejFsZnJ4).

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

@@ -1 +1 @@
-"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;
+"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;

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

@@ -1,36 +1,22 @@
-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;
-    }
+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
   };
 }
-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 f({ container: e, ReactComponent: t }, n) {
+  const r = m.createElement(t, n);
+  o.render(r, e);
 }
-function l({ root: t }) {
-  t.unmount();
+function i({ container: e }) {
+  o.unmountComponentAtNode(e);
 }
-function p(t, e = {}) {
-  return f(t, e, { mount: E, update: _, unmount: l });
+function p(e, t = {}) {
+  return u(e, t, { mount: c, update: f, unmount: i });
 }
 export {
   p as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r2wc/react-to-web-component",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0",
   "description": "Convert React components to native Web Components.",
   "homepage": "https://www.bitovi.com/frontend-javascript-consulting/react-consulting",
   "author": "Bitovi",
@@ -11,7 +11,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/bitovi/react-to-webcomponent.git"
+    "url": "git+https://github.com/bitovi/react-to-web-component.git"
   },
   "type": "module",
   "main": "./dist/react-to-web-component.cjs",
@@ -42,15 +42,14 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@r2wc/core": "^1.0.0-alpha.0"
+    "@r2wc/core": "^1.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "prop-types": "^15.8.1"
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^16.0.0 || ^17.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0"
   }
 }

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

@@ -1,8 +1,6 @@
 /* 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"
 
@@ -16,7 +14,7 @@ const Greeting: React.FC<{ name: string }> = ({ name }) => (
   <h1>Hello, {name}</h1>
 )
 
-describe("react-to-web-component 1", () => {
+describe("react-to-web-component", () => {
   it("basics with react", () => {
     const MyWelcome = r2wc(Greeting)
     customElements.define("my-welcome", MyWelcome)
@@ -28,71 +26,6 @@ describe("react-to-web-component 1", () => {
     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,13 +1,12 @@
 import type { R2WCOptions } from "@r2wc/core"
-import type { Root } from "react-dom/client"
 
 import React from "react"
-import { createRoot } from "react-dom/client"
+import ReactDOM from "react-dom"
 
 import r2wcCore from "@r2wc/core"
 
 interface Context<Props extends object> {
-  root: Root
+  container: HTMLElement
   ReactComponent: React.ComponentType<Props>
 }
 
@@ -16,27 +15,27 @@ function mount<Props extends object>(
   ReactComponent: React.ComponentType<Props>,
   props: Props,
 ): Context<Props> {
-  const root = createRoot(container)
-
   const element = React.createElement(ReactComponent, props)
-  root.render(element)
+
+  ReactDOM.render(element, container)
 
   return {
-    root,
+    container,
     ReactComponent,
   }
 }
 
 function update<Props extends object>(
-  { root, ReactComponent }: Context<Props>,
+  { container, ReactComponent }: Context<Props>,
   props: Props,
 ): void {
   const element = React.createElement(ReactComponent, props)
-  root.render(element)
+
+  ReactDOM.render(element, container)
 }
 
-function unmount<Props extends object>({ root }: Context<Props>): void {
-  root.unmount()
+function unmount<Props extends object>({ container }: Context<Props>): void {
+  ReactDOM.unmountComponentAtNode(container)
 }
 
 export default function r2wc<Props extends object>(