MCPcopy Index your code
hub / github.com/atomicojs/atomico

github.com/atomicojs/atomico @2.4.0

Chat with this repo
repository ↗ · DeepWiki ↗ · release 2.4.0 ↗ · + Follow
374 symbols 848 edges 111 files 18 documented · 5%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

Atomico Atomico

twitter discord documentation playground

npm gzip

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 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 step-1.2

step-2.1 step-2.2

step-3.1 step-3.2

step-4.1 step-4.2

Sponsors

Atomico is an open source project which is mainly supported by @UpperCod, any donation is well received as it helps to improve Atomico in its maintenance, documentation, support and more 😊.

sponsors Nicholas Frush sponsors Nicholas Frush sponsors Nicholas Frush

Summary

Atomico is a modern syntax micro-library created by Matias Trujillo alias @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 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.

A good starting point to start contributing is to add or take a request from the Atomico Roadmap.

By default, all issues will appear in the backlog column in Atomico's roadmap for refinement.

Let's improve Atomico together!

Extension points exported contracts — how you extend this code

MetaProps (Interface)
* metaProps allow to hide the props assigned by Component
types/component.d.ts
Mark (Interface)
(no doc)
types/core.d.ts
Ref (Interface)
(no doc)
types/hooks.d.ts
Hooks (Interface)
(no doc)
types/test-hooks.d.ts
DOMGenericProperties (Interface)
(no doc)
types/dom.d.ts
SVGProperties (Interface)
(no doc)
types/dom-svg.d.ts
IntrinsicElements (Interface)
(no doc)
types/jsx-runtime.d.ts
VNodeGenericSchema (Interface)
(no doc)
types/vnode.d.ts

Core symbols most depended-on inside this repo

html
called by 78
html.js
createElement
called by 72
ssr/document.js
load
called by 45
types/test-hooks.d.ts
createHooks
called by 43
src/hooks/create-hooks.js
c
called by 29
src/element/custom-element.js
cleanEffects
called by 25
types/test-hooks.d.ts
h
called by 18
src/render.js
setProperty
called by 16
src/render.js

Shape

Class 178
Function 147
Interface 26
Method 23

Languages

TypeScript100%

Modules by API surface

ssr/elements.js145 symbols
src/element/custom-element.js13 symbols
src/render.js12 symbols
types/dom.d.ts10 symbols
src/tests/element.test.js10 symbols
src/hooks/create-hooks.js9 symbols
src/element/set-prototype.js8 symbols
ssr/tag.js7 symbols
ssr/document.js7 symbols
src/utils.js7 symbols
src/tests/render.test.js7 symbols
src/element/errors.js7 symbols

For agents

$ claude mcp add atomico \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact