English
Guides
@atomico
🗺
Atomico style guide
First thanks for using Atomico 😉, in this guide you will find some useful tips when developing with Atomico, all with the aim that your webcomponents are sustainable and scalable over time.
1. Recommended file structure for webcomponents
you always prefer to keep each component isolated in a directory with names associative to the same component, example:
1
├── my-button
2
│ ├── my-button.{js,jsx,ts,tsx}
3
│ ├── my-button.test.{js,jsx,ts,tsx}
4
│ ├── my-button.stories.js
5
│ └── my-button.md
6
└── my-input
7
├── my-input.{js,jsx,ts,tsx}
8
├── my-input.test.{js,jsx,ts,tsx}
9
├── my-input.stories.js
10
└── my-input.md
Copied!
why? The NPM-oriented
@atomico/exports packaging tool allows automatic export from the recommended structure,@atomico/exports will generate a modern package.json to current standards, automatically generating all (main, types, exports and more) what is necessary for your package to be distributed correctly.2. Component name as function.
1
function myButton() {
2
return <host />;
3
}
4
5
const MyButton = c(myButton);
Copied!
you prefer to use camelCase(
myButton) to declare your function as webcomponent and the resulting customElements from function c in PascalCase (Button).why?
MyButton is the only one that can be instantiated as a constructor of the web component, example:1
// Vanilla JS
2
const node = new MyButton();
3
4
//JSX
5
<MyButton />;
Copied!
3. Prefers the use of static style
1
function component() {
2
return <host shadowDom />;
3
}
4
5
component.styles = css`
6
:host {
7
display: block;
8
}
9
`;
Copied!
This does not rule out the use within the style tag, since it is sometimes the solution to the definition of conditional styles or variables to the logic and outside the scope of the custom properties.
Last modified 2mo ago
Copy link
Edit on GitHub