Flags

--wrappers

You will add the build files to the exports property inside the package.json.

--dist <string>

default wrappers, modifies the output directory for the files generated by

--main <fileName>

Of all the exported files, it will associate the one censored with the name of the file as the main one for the export of the package.json. Main file does not require extension or path

--tmp

Generate a temporary package.tmp.json, to share in case of bugs

--watch

Associate the use of watch with esbuild, ignoring the type parsing and exports.

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.

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

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

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

Atomico export is a solution that parses the output of compilers like vite, esbuild, typescript, rollup or other bundle tool.

Atomico export is also compatible with uncompiled code (standard Javascript).

The objective of Atomico/exports

1. Make your package look elegant when imported by other applications, example:

2. Create wrappers for React/Preact/Vue of webcomponents created with Atomico

Installation