Add React 19 to available peerDependencies

Our test suite passes with React 19 so we've added it to the available peerDependencies.

Add React 19 to available peerDependencies

Our test suite passes with React 19 so we've added it to the available peerDependencies.

Change r2wc externals to match react-dom/client

PR #135 addressed some difficulties and unnecessary React warnings in the browser.

React 18 Support

This release updates react-to-web-component to support React 18 and removes support for React 16 and 17.

#103

React 16 and 17 are still supported by the legacy version of react-to-web-component (published as react-to-webcomponent on NPM)

2.0.0 Release!

Simplified API, Typescript support, and more! See https://www.bitovi.com/blog/react-to-web-component-v2 for all the new features.

The API for react-to-web-component is now easier than ever! No more need to pass in React and ReactDOM as they are now treated as peer dependencies. The use of PropTypes has also been replaced with a dedicated props object when creating the Web component. See the example below.

import r2wc from "@r2wc/react-to-web-component"

const WebGreeting = r2wc(Greeting, {props: ["name"] })  // or { props: { name: "string" } }

customElements.define("web-greeting", WebGreeting)

Drop PropTypes requirement, Add option for attribute typing

Features:

• Add option for specifying attribute types so it will automatically be converted from the string to the appropriate type. (Number, Object, Function, ref, etc) #50
• Remove PropTypes requirement
• Ensure preact 10 is supported (all tests run against preact 10 too now)
• Begin convert to TypeScript
  • NOTE: use // @ts-ignore on the line before calling reactToWebComponent() to disable type checking if you're in a TS environment. Typing will be implemented properly before stable release.

Example ignoring TS if you want to start using this alpha release:

customElements.define(
  "react-counter",
  // @ts-ignore
  reactToWebComponent(Counter, React, ReactDOMClient, {...})
);

Bug Fixes:

• None

Other:

• Test improvements / fixed intermittently failing tests
• Update docs to use functional components in the examples

React 18 Support

Summary since 1.5.0 (10/16/2020) up to and including 1.7.2 (08/03/2022)

Features:

• convert camelCase props into dashed-attributes and add option to convert dashed-attributes to camelCase react props #17
• React 18 support
• improved documentation

Bug Fixes:

• Shadow only attached when mode is open
• unmount react component on disconnect #19

Other:

• Add MIT license file #4
• more robust CI and testing

Shadow DOM

• Adding options parameter to allow for further enhancements
• Adding options.shadow option, which creating and attaches shadow DOM, rather than light DOM
• Adding additional docs for shadow DOM option
• Setting up CI and ESLint

#8 and #9

Edge

Works in Edge browser.

Preact and property descriptors

This makes sure Preact works and also makes it so properties specified by Component.propTypes are going to return a property descriptor.

For example:

class Greeting extends React.Component { }
Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

var MyGreeting = reactToWebComponent(Greeting, React, ReactDOM)
customElements.define("my-greeting", MyGreeting);

var myGreeting = new MyGreeting();

Object.getOwnPropertyDescriptor( myGreeting.prototype, "name" ) //-> {writable: true}

This was important for CanJS so it could know that the property was writable.