Comment on page
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 fromsrc/elementsand declare them as customElements - 2.
src/elements: groups and export components as CustomElements
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 modified 1yr ago