react-html-element - npm Package Compare versions

Comparing version 3.0.0-react-17.1 to 3.0.0-react-17.2

CHANGELOG.md

		@@ -0,1 +1,12 @@
		# [3.0.0-react-17.2](https://github.com/WTW-IM/react-html-element/compare/v3.0.0-react-17.1...v3.0.0-react-17.2) (2021-02-04)


		### Docs

		* describing why this is useful with React 17 ([c12ca21](https://github.com/WTW-IM/react-html-element/commit/c12ca21c9d0cff0c8636593d15889c641034205a))

		### Fix

		* ensuring we only load the HTML 5 Adapter when we need it ([871755f](https://github.com/WTW-IM/react-html-element/commit/871755fc4b78fc557e77bf3b7bd6048480b3a34d))

		# [3.0.0-react-17.1](https://github.com/WTW-IM/react-html-element/compare/v2.2.0...v3.0.0-react-17.1) (2021-02-04)
		@@ -2,0 +13,0 @@

dist/index.d.ts

		@@ -1,3 +0,2 @@
		import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
		import ReactHTMLElement from './ReactHTMLElement';
		export default ReactHTMLElement;

dist/index.js

		@@ -6,4 +6,8 @@ "use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		require("@webcomponents/webcomponentsjs/custom-elements-es5-adapter");
		if (window.customElements) {
		// eslint-disable-next-line global-require
		require('@webcomponents/webcomponentsjs/custom-elements-es5-adapter');
		}
		// eslint-disable-next-line import/first
		var ReactHTMLElement_1 = __importDefault(require("./ReactHTMLElement"));
		exports.default = ReactHTMLElement_1.default;

package.json

		{
		"name": "react-html-element",
		"version": "3.0.0-react-17.1",
		"version": "3.0.0-react-17.2",
		"description": "An HTMLElement extension that provides a simple setup for Web Components using React.",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -6,9 +6,10 @@ # react-html-element

		## The Problem
		## NOTE:

		The [React documentation around using React in Web Components](https://reactjs.org/docs/web-components.html#using-react-in-your-web-components) presents a case where you can create Web Components using React, but when explored, utilizing React in Web Components presents some significant functionality issues, as detailed in [this issue](https://github.com/facebook/react/issues/9242). Namely, complex React apps rendered in Web Components lose their functionality.
		This package works with React at version 17. For version 16, [see the react-16
		branch of this repo](tree/react-16).

		## The Solution
		## What is it?

		`react-html-element` seamlessly creates the glue needed to utilize React in your Web Components without losing functionality.
		`react-html-element` gives a few quality of life improvements over simply

		@@ -54,3 +55,3 @@ ## Installation
		connectedCallback(): void {
		ReactDOM.render(<Incrementer />, this.mountPoint);
		this.render(<Incrementer />);
		}
		@@ -62,17 +63,11 @@ }

		The key pieces of code are `... extends ReactHTMLElement` and `this.mountPoint`.
		The key pieces of code are `... extends ReactHTMLElement` and `this.render`,
		which mounts our app to its designated `mountPoint`, [as described below](#thismountpoint-and-using-custom-templates).

		> ### Polyfills
		>
		> One thing to remember is that you will need to load [the webcomponentsjs polyfills](https://www.webcomponents.org/polyfills) for `ReactHTMLElement` to work in all browsers. Be sure to include [the ES5 adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs), as we currently transpile `ReactHTMLElement` down to ES5. The polyfills should be in the `<head>`, and should look something like this:
		> One thing to remember is that you will need to load [the webcomponentsjs polyfills](https://www.webcomponents.org/polyfills) for `ReactHTMLElement` to work in all browsers.
		>
		> ```html
		> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
		> <script>
		> if (!window.customElements) {
		> document.write('<!--');
		> }
		> </script>
		> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/custom-elements-es5-adapter.js"></script>
		> <!--- We use the closing bracket of this comment to close off the above opening comment, if it gets written -->
		> ```
		@@ -119,3 +114,3 @@ >
		connectedCallback(): void {
		ReactDOM.render(<Incrementer />, this.mountPoint);
		this.render(<Incrementer />);
		}
		@@ -143,7 +138,6 @@
		connectedCallback() {
		ReactDOM.render(
		this.render(
		<StyleSheetManager target={this.shadow}>
		<App />
		</StyleSheetManager>,
		this.mountPoint
		</StyleSheetManager>
		);
		@@ -157,3 +151,4 @@ }
		template or `<div></div>`. If this initialization has already occurred, it will
		simply return the previously created Shadow Root.
		simply return the previously created Shadow Root. `this.mountPoint` utilizes
		`this.shadow` as part of its work to generate the Shadow Root.

		@@ -160,0 +155,0 @@ We use `this.shadow` for the styles instead of simply using `this.mountPoint` because of unmounting. If stylesheets are a child of `this.mountPoint`, ReactDOM will throw an error when you try to unmount. (`unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.`) This error is a little cryptic, but the bottom line is that ReactDOM expects that everything inside the mounted node was generated by React itself. When we use the same node to place our styles, it breaks that expectation. Using the `this.shadow` will cause the styles to be placed as a first-child of the Shadow DOM, but not inside the same component where our app is mounted.

react-html-element - npm Package Compare versions

Improved metrics

Worsened metrics