The following format is friendly when sharing a webcomponent to NPM using @atomico/exports

β”œβ”€β”€ src
β”‚   β”œβ”€β”€ define.{js,ts,jsx,tsx}
β”‚   β”œβ”€β”€ elements.{js,ts,jsx,tsx}
β”‚   β”œβ”€β”€ define.test.{js,ts,jsx,tsx}
β”‚   └── slots
β”‚       β”œβ”€β”€ my-sub-element-1.{js,jsx,ts,tsx}
β”‚       └── my-sub-element-2.{js,jsx,ts,tsx}
β”œβ”€β”€ index.html
β”œβ”€β”€ .npmignore
β”œβ”€β”€ package.json
└── tsconfig.json

From the previous structure we highlight:

  1. src/define: import the components from src/elements and declare them as customElements

  2. src/elements: groups and export components as CustomElements

Why separate the export of the element from the declaration?

since it improves the customElements definition experience, example:

import "my-component"; // internalmente define el customTag
import { MyElement } from "my-component/elements"; // no define el customTag

Thanks to @atomico/exports this is really easy, example:

exports src/{define,elements}.{ts,tsx} --exports --types

You can see a use case of this structure in @atomico/components

Last updated