Nonsense Parser Microframework
Wondering what’s next for npm?Check out our public roadmap! »

atomico
TypeScript icon, indicating that this package has built-in type declarations

1.12.3 • Public • Published

Atomico

npm gzip

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

import { c } from "atomico";

function myComponent({ message }) {
    return <host>Hello, {message}</host>;
}

myComponent.props = { message: String };

customElements.define("my-component", c(myComponent));

Links:

  1. What is Atomico?
  2. Documentation
    1. 🧬 Props(Properties)
    2. 🧩 Virtual-dom
    3. 🎣 Hooks
  3. Resources
    1. Brand

What is Atomico?

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, example:

import { c, useProp } from "atomico";

function myComponent() {
    const [count, setCount] = useProp("count");
    const increment = () => setCount(count + 1);
    return <host increment={increment}>count: {count}</host>;
}

myComponent.props = {
    count: { type: Number, value: 0 },
};

customElements.define("my-component", c(myComponent));

Where:

  1. myComponent: Function that represents the webcomponent.

  2. const [count, setCount] = useProp("count"): Hook function similar to useState, but with the difference that useProp reflects the property status of the component.

  3. const increment = () => setCount(count + 1);: Function that increases the state.

  4. <host increment={increment}>: Virtual-dom represented the incremental method.

  5. myComponent.props.count : Object, defines the behavior of the count property.

    1. type: Number : Declare count as type number.
    2. value: 0: Declares that the initial state of count is0.

Install

npm i atomico

DownloadsWeekly Downloads

56

Version

1.12.3

License

MIT

Unpacked Size

57.7 kB

Total Files

30

Last publish

Collaborators

  • avatar