[Feature Request] React wrapper in publishing guide

[alangdm]

@lit-labs/react looks to be a nice way of wrapping web components created with any library as React components for compatibility

I was thinking that it might be a good add as an optional suggestion for the web components publishing guide

What do you think?

PS: Slightly related, this other section might also need an update to include export maps?

[daKmoR]

React wrapper

=> should be an optional dedicated guide we can link from the publishing guide (not everyone will need to support react)

Exports

yes I would say exports should be like this

For a single element

Usage:

// only the classes
import { MyElement } from 'my-element'; 

// OR

// execute customElements.define
import 'my-element/define';

Import Map:

"exports": {
  ".": "./src/index.js",
  "define": "./src/my-element.js",
}

For multiple element

Usage:

// only the classes
import { MyElement, SubElement } from 'my-element'; 

// OR

// execute customElements.define for all elements
import 'my-element/define';

// execute customElements.define for a single element
import 'my-element/define-my-element';
import 'my-element/define-sub-element';

Import Map:

"exports": {
  ".": "./src/index.js",
  "define": "./src/define.js",
  "define-my-element": "./src/my-element.js",
  "define-sub-element": "./src/sub-element.js",
}

For clarification the src/define.js should not have any customElements.define in this case but imports the other defines

import 'my-element/define-my-element';
import 'my-element/define-sub-element';

[alangdm]

The exports section looks good to me 👍

As for the React stuff, I was thinking that even something as simple as this could work?

Optional: React wrapper

React can render and pass attributes properly to web components, but it can't pass properties or listen to events declaratively.

A good alternative in case your component will likely be used in React projects is to provide an export which wraps your component in a React component.
The @lit-labs/react package is a good way to easily achieve this.

[daKmoR]

sure good enough for now 👍

feel free to add it via a PR