npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

atomico

v1.79.2

Published

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

Downloads

30,123

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!