Monorepo

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}
├── README.md
├── 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