UNPKG

atomico

Version:

Atomico is a small library for the creation of interfaces based on web-components, only using functions and hooks.

github.com/atomicojs/atomico

atomicojs/atomico

58 lines (37 loc) • 4.19 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
![Atomico](https://raw.githubusercontent.com/atomicojs/atomico/brand/h1.svg) ![Atomico](https://raw.githubusercontent.com/atomicojs/atomico/brand/h2.svg) [![twitter](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/twitter.svg)](https://twitter.com/atomicojs) [![discord](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/discord.svg)](https://discord.gg/7z3rNhmkNE) [![documentation](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc-1.svg)](https://atomico.gitbook.io/doc/) [![playground](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc.svg)](https://stackblitz.com/edit/atomico?file=src%2Fmy-component.tsx) [![npm](https://badgen.net/npm/v/atomico)](http://npmjs.com/atomico) [![gzip](https://badgen.net/bundlephobia/minzip/atomico)](https://bundlephobia.com/result?p=atomico) ## Build interfaces using webcomponents with React-inspired syntax 1. **Scalable and reusable interfaces**: with Atomico the code is simpler and you can apply practices that facilitate the reuse of your code. 2. **Open communication**: with Atomico you can communicate states by events, properties or methods. 3. **Agnostic**: your custom element will work in any web-compatible library, eg React, Vue, Svelte or Angular. 4. **Performance**: Atomico has a comparative performance at Svelte levels, winning the third position in performance according to [webcomponents.dev](https://twitter.com/atomicojs/status/1391775734641745929) in a comparison of 55 libraries among which is React, Vue, Stencil and Lit. ### Atomico is simple and the result will always be a **standard and optimized webcomponent**. ![step-1.1](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-1.1.png) ![step-1.2](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-1.2.png) ![step-2.1](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-2.1.png) ![step-2.2](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-2.2.png) ![step-3.1](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-3.1.png) ![step-3.2](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-3.2.png) ![step-4.1](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-4.1.png) ![step-4.2](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-4.2.png) ## Sponsors Atomico is an open source project which is mainly supported by [@UpperCod](https://twitter.com/uppercod), any donation is well received as it helps to improve Atomico in its maintenance, documentation, support and more 😊. [![sponsors Nicholas Frush](https://raw.githubusercontent.com/atomicojs/atomico/brand/s-nicholas-frush.png)](https://github.com/cawfeecoder) ![](https://raw.githubusercontent.com/atomicojs/atomico/brand/8px.png) [![sponsors Nicholas Frush](https://raw.githubusercontent.com/atomicojs/atomico/brand/s-andrea-reni.png)](https://twitter.com/andreatrakea) ![](https://raw.githubusercontent.com/atomicojs/atomico/brand/8px.png) [![sponsors Nicholas Frush](https://raw.githubusercontent.com/atomicojs/atomico/brand/s-jenna.png)](https://twitter.com/jjenzz) ## Summary Atomico is a modern syntax micro-library created by Matias Trujillo alias [@UpperCod](https://github.com/uppercod), which simplifies the creation of webcomponents by replacing the need to use classes and contexts by functions and scope to support logic, attributes, properties, methods and events. ## Join the team by contributing to Atomico **We will be attentive to all the help you need to generate your contribution.** In the following link [CONTRIBUTING.md](CONTRIBUTING.md) you'll find everything you need to start contributing to Atomico js webcomponents code. Not everything is code, it can also help us improve [Atomico documentation](https://atomico.gitbook.io/doc/). A good starting point to start contributing is to [add](https://github.com/atomicojs/atomico/issues/new/choose) or take a request from the [Atomico Roadmap](https://github.com/atomicojs/atomico/projects/2). By default, all issues will appear in the backlog column in Atomico's roadmap for refinement. **Let's improve Atomico together!**