🤖Wrapper for React

Atomico allows distributing webcomponnets with extended react support, automatically creating wrappers for each component and import paths for react.

For this to be possible you must follow the following rules.

Rules

1. The file that declares the customElement must export the customElement.

Example 1

import {Component} from "./component";
export {Component} from "./component";

customElements.define("my-component", MyComponent);

Example 2

import {c} from "./my-component";

function component(){
    return <host></host>;
}

export const Component = c(c);

customElements.define("my-component", Component);

2. Compile your components using your favorite bundle tool.

3. Point via expressions to the files generated by your bundle tool

exports ./dist/**/* ./types/**/* --wrappers

The result of this process will be:

1. The association of exports for React inside the package.json

2. The creation of the files of use for React, if the component is created with Atomico adds support to types.

Example

Monorepo of Atomico and React - StackBlitzStackBlitz