# @atomico/exports

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).

<figure><img src="https://3886616710-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_3P325_k_Bez-RbDQb-887967055%2Fuploads%2FnSNsfxn1RmJgR4H9qYA6%2Fatomico-exports.png?alt=media&#x26;token=193e2aa9-e1ed-427d-a698-1096180fca7b" alt=""><figcaption></figcaption></figure>

### The objective of Atomico/exports

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

```typescript
import { Button } from "components/dist/button.js"; // ❌
import { Button } from "components/button"; // ✅
```

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

```typescript
import { Button } from "components/button/react"; 
```

### Installation

{% tabs %}
{% tab title="NPM" %}

```bash
npm install -D @atomico/exports
```

{% endtab %}

{% tab title="package.json#scripts" %}

```javascript
{
 /**
  * ⚠️ The --types flag requires the installation of @typescript
  */
 "scripts": {
   "exports": "exports dist/**/* types/**/*"
 }
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
`@atomico/exports` is distributed as ESM, so your `package.json` must define the property `"type":"module"` for its use.
{% endhint %}

{% content-ref url="introduction/atomico-exports" %}
[atomico-exports](https://atomico.gitbook.io/doc/packages/introduction/atomico-exports)
{% endcontent-ref %}

{% content-ref url="introduction/wrapper-for-react" %}
[wrapper-for-react](https://atomico.gitbook.io/doc/packages/introduction/wrapper-for-react)
{% endcontent-ref %}