Welcome to Atomico 2 (Beta)🎉.

This version includes BREAKING CHANGES for a faster, more mature, and easier development experience.

With this release, we achieved:

1. Unifying the component syntax into a single format.
2. Improving interactions with forms.
3. Adding new hooks that will boost the creation of your web components.

Unifying the component syntax into a single format

At first, Atomico offered 3 different ways to write components. We decided to stick with just one, so learning is simple and sustainable. In fact, you probably already know this syntax, but now it has a new superpower: the form property.

import { c, css } from "atomico";

const MyComponent = c(({ message }) => <host shadowDom>{message}</host>, {
    // Want to work with forms or the ElementInternals API? Easy, just use 👇
    form: true,
    // Bring your components to life with easy-to-declare reactivity.
    props: { message: String },
    // Style it however you want 💅.
    styles: css`
        :host {
            font-size: 2rem;
        }
    `
});

This syntax isn’t new for Atomico users, but now it has a new config: the form property.

Interacting with forms

Atomico now makes it easier to work with forms, expanding your component’s lifecycle with new hooks 🎣🎉.

useFormProps()

This hook syncs 2 props (by default name and value). The idea is to help your component behave just like a regular input.

To use this hook, your config should look something like this:

import { c, useFormProps } from "atomico";

const MyInput = c(
    () => {
        const [value, setValue] = useFormProps();
        return (
            <host shadowDom>
                <input
                    oninput={({ currentTarget }) => {
                        setValue(currentTarget);
                    }}
                />
            </host>
        );
    },
    {
        form: true,
        props: {
            name: String,
            value: String
        }
    }
);

useFormValidity()

This hook makes form validation easier. With Atomico, you can build your own validations or delegate them to other inputs. For example:

import { c, useFormProps, useRef } from "atomico";
import { delegateValidity } from "atomico/utils";

const MyInput = c(
    () => {
        const [value = "", setValue] = useFormProps();
        const ref = useRef<HTMLInputElement>();
        const [, validity] = useFormValidity(
            () => delegateValidity(ref.current),
            [value]
        );
        return (
            <host shadowDom>
                <span>{!validity.valid && "🔴"}</span>
                <input
                    ref={ref}
                    required
                    minLength={3}
                    oninput={({ currentTarget }) => {
                        setValue(currentTarget);
                    }}
                />
            </host>
        );
    },
    {
        form: true,
        props: {
            name: String,
            value: String
        }
    }
);

The biggest advantage of this hook is that it stays in sync with the form, even if your component hasn’t interacted with it yet.

useFormValue()

This hook lets you set a value at the form level, but without the automatic rules of useFormProps. It’s perfect for more complex interactions where you decide:

1. What the name is.
2. When the value is set.
3. If you want to reset the value on your own terms.
4. Custom hooks: this hook is friendly for creating form values without needing to know the props.

import { useFormValue } from "atomico";

const [value, setValue] = useFormValue();

useFormSubmit()

This hook lets you listen for the submit event at the form level.

import { useFormSubmit } from "atomico";

useFormSubmit(() => {
    console.log("Form submit!");
});

useFormAssociated

Lets you know if your component has been associated with a form.

useFormAssociated((form: HTMLFormElement) => {});

useFormDisabled

Lets you know if your component has been disabled for interactions by a parent.

useFormDisabled((disabled: boolean) => {});

useFormReset

Lets you know when the form has been reset.

useFormReset(() => {});

New hooks

Form hooks aren’t the only new thing. Now, at Atomico’s core, you also get:

useRender

This hook is a classic from @atomico/hooks and is now part of the core. It’s useful for rendering fragments in the Light DOM when your component uses shadowDom.

useRender(() => <img src={url} />, [url]);

useSlot

Another classic from @atomico/hooks, now in the core. It’s handy for getting the list of nodes associated with a slot.

const children = useSlot(ref); // ChildNode[]

return (
    <host shadowDom>
        <slot ref={ref} />{" "}
    </host>
);

useListener

This hook lets you listen to events from a reference.

useListener(ref, "click", (event) => {
    console.log("Click", event.target);
});

New event property type

import { event } from "atomico";

const MyButton = c(
    ({ clickOnMyButton }) => {
        return (
            <host>
                <button onclick={clickOnMyButton}>Click</button>
            </host>
        );
    },
    {
        props: {
            clickOnMyButton: event()
        }
    }
);

The goal is to give you an easy way to create custom events that you can dispatch whenever you want.

BREAKING CHANGES

SSR

SSR is no longer part of the core. We want a core that’s free from SSR, which will be developed separately as a new package.

html<host/>

The html tag is removed from the core, but you can use it as an extra package. We want a core that supports just one syntax: JSX, paving the way for a future rendering optimizer.

useReducer

With Atomico, state complexity is usually handled with just 2 hooks: useState and useProp.
If you feel you need to bring back this hook, open an issue and let us know!