Miss any of our Open RFC calls?Watch the recordings here! »

atomico

0.8.5 • Public • Published

Atomico

logo

CircleCI npm gzip

Small library for the creation of interfaces based on web-components, only using functions and hooks, if you want to try Atomico and you need help tell me in Twitter Uppercod 🤓.

example

  1. Installation, npm init @atomico
  2. Hooks
    1. useState
    2. useEffect
    3. useReducer
    4. useMemo
    5. useRef
    6. useHost
  3. Modules
    1. atomico/lazy
    2. atomico/router
  4. Examples
    1. small Store, PWA
    2. Small ToDo, 4kB
  5. Observables
    1. Types of observables
  6. Styling a web-component

Installation

Atomico has a project generator, you can initialize using npm init @atomico.

npm init @atomico
 
Welcome to Atomico, let's create your project
 
√ name? ... project-name
√ description? ... project-description
 
Ready!, check the folder ./project-name and ./project-name/README.md
 
Next step, commands!
 
  cd project-name
  yarn | npm i

Alternatively, if you have an existing project you can incorporate Atomico simply using, JS pragma used by Atomico is defined as part of the module exporting h orcreateELement.

npm install atomico

⚠️ Remember Atomico is a modern package, which is distributed and maintained as an MJS module

Hooks

What are hooks?

Hooks, allows to add states and effects(life cycle) to functional components, allowing to reuse the logic between components in a simple and scalable way.

Why use hooks?

  1. Reuse of logic between components, unlike a class its components will not require belonging to the context of this.

  2. Simpler and less code, when using hooks your component will not require a declaration as a class, bringing as a benefit less code as your application scales.

useState

let [state, setState] = useState(initialState);

setState function, allows controlling one or more states associated with a component, the declarationlet [state, setState], is equivalent to:

  1. state : current state
  2. setState : status updater, if setState receives a function as a parameter it will receive and must return the next state.

Example

function WebComponent() {
    let [state, setState] = useState(0);
    return (
        <host>
            <h1>example counter</h1>
            <button onClick={() => setState(state + 1)}>Increment</button>
        </host>
    );
}

🔗 Example in codesanbox

useEffect

useEffect(afterRender);

useEffect function allows you to add side effects to a component.

function WebComponent() {
    useEffect(() => {
        document.head.title = "web-component mounted";
        return () => (document.head.title = "web-component unmounted");
    }, []);
 
    return (
        <host>
            <h1>example useEffect</h1>
        </host>
    );
}

useEffect, supports a second matrix of type of parameter, this allows to compare between renders the immutability of the parameters of the array, if there is a change useEffect will be executed again, the previous example will execute the function only when the component has been mounted.

🔗 Example in codesanbox

useReducer

let [state, dispatch] = useReducer(reducer, initialState);

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

const initialState = { count: 0 };
 
function reducer(state, action) {
    switch (action.type) {
        case "increment":
            return { count: state.count + 1 };
        case "decrement":
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}
 
function WebComponent() {
    let [state, dispatch] = useReducer(reducer, initialState);
    return (
        <host>
            Count: {state.count}
            <button onClick={() => dispatch({ type: "increment" })}>+</button>
            <button onClick={() => dispatch({ type: "decrement" })}>-</button>
        </host>
    );
}

useMemo

let memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo will only recalculate the stored value when one of the dependencies has changed. This optimization helps avoid costly calculations in each render.

useRef

let ref = useRef(initialValue);

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

useHost

let ref = useHost();

Returns a ref object, which allows to extract extract the web-component, it is ideal for the construction of hooks that interact with web-components directly.

Observables

The observables are a layer of the statico method observedAttributes characteristic of web-components. using a key object and value you can define attributes and properties, the key format of the observable is camelCase, which Atomico will transform into a valid attribute, examplemyPropertywill be the attributemy-property.

import { h, customElement } from "atomico";
 
function WebComponent({ message, showMessage }) {
    return <host>my {showMessage && message}!</host>;
}
 
WebComponent.observables = {
    message: String,
    showMessage: Boolean
};
 
customElement("web-component", WebComponent);

Example of use from HTML

<web-component show-message message="Atomico"></web-component>

Example of use from the JS

let wc = document.querySelector("web-component");
 
wc.showMessage = true;
wc.message = "Atomico";

Types of observables

The types are defined by the use of primitive constructors, eg String, Number or Object.

Type Description
String -
Number -
Boolean It is reflected, this status is shown as an attribute in the web-component
Object -
Array -
Promise -
Function If this one comes from an attribute Atomico will look for the callback in window

Styling a web-component

To nest encapsulated styles within the web-component, you must enable the use of shadowDom, use <host shadowDom>.

Tag style

Style generation can be declared inside the <style> tag, this form allows the generation of dynamic styles.

import { h, customElement, css } from "atomico";
 
function WebComponent() {
    return (
        <host shadowDom>
            <style>{`
                :host {
                    color: red;
                }
            `}</style>
            hello!
        </host>
    );
}
 
customElement("web-component", WebComponent);

Import css

You can import using the plugins @atomico/rollup-plugin-import-css, css in flat format, preprocessed by postcss, by default this already delivered minified.

import { h, customElement, css } from "atomico";
import style from "./style.css";
 
function WebComponent() {
    return (
        <host shadowDom>
            <style>{style}</style>
            hello!
        </host>
    );
}
 
customElement("web-component", WebComponent);

CSSStyleSheet

Atomico supports the definition of styles created by the CSSStyleSheet constructor.

import { h, customElement, css } from "atomico";
 
function WebComponent() {
    return <host shadowDom>hello!</host>;
}
 
WebComponent.styles = [
    css`
        :host {
            color: red;
        }
    `
];
 
customElement("web-component", WebComponent);

Install

npm i [email protected]

Version

0.8.5

License

ISC

Unpacked Size

144 kB

Total Files

54

Last publish

Collaborators

  • avatar