Fix scripts npm

2.0.2-beta

2.0.2-beta

This version fixes some bugs from the beta.

1. Fix the boolean type assignment with a default value.
2. Fix the TypeScript types for useSlot and useNodes — they now infer automatically without needing to use InstanceType.
3. DOC A new documentation and examples schema has been added, making integration with AI much easier.

Note

This version is entering the testing phase in real-world applications under controlled environments before being released as latest.

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!

[email protected] 🔧 - fixes types and context synchronization in case of edges

1. Fix first argument to useState at type level, example:

// BEFORE
const [state, setState] = useState<string>(()=>"welcome"); // ❌Typescript announces error
// BEFORE
const [state, setState] = useState<string>(()=>"welcome"); // ✅Typescript announces success

2. Context synchronization

While version 1.79 fixed cases where HTML-based synchronization is privileged, this fix fixes synchronization when using JSX, avoiding 2 renders when connecting to contexts 💪, example:

<MyParent>
    <MyContext>
       <MyChild/>
    </MyContext>
</MyParent>

Using JSX/TSX has better performance when synchronizing contexts,thanks to the fact that MyChild will be receiving the status at the time of mount.

[email protected]

This version applies fixes to improve component unmounting when using useSuspense and code reductions for the context API.

1. Internal fixes for the context API, reducing the code and logic.
2. Internal fixes for the suspense API, properly cleaning up the state upon unmounting.

Say hello to [email protected] 🎉🚀

This version has 2 core changes:

1. Improvements in the context API to achieve state synchronization in extreme and collaborative cases (When using Atomico within other libraries like React, Vue or Angular).
2. Enhancements in the suspense API, now allowing to properly observe and clean up promises resolved in nested components.

Fix : type declarations for refactor to context api

1.78.2

fix: ts

fix: TS, fix GetValueFromContext type

1.78.1

fix:TS

Say hello to [email protected] 🚀, asynchronously friendlier 🤗🤝.

New Features

Now usePromise is also observed by the useSuspense Hook.

With this, you can create interfaces that react from the parent component to the asynchrony of its children.

New hook useProvider

With this new hook, you can set the context instance, for example:

const Theme = createContext({ mode: "light" });

const App = c(() => {
    useProvider(Theme, { mode: "dark" });
});

Internal improvements

1. The context api is improved to synchronize states according to the HTML.

Fix useContext in SSR

Fixes a bug when using contexts in SSR environments.
Thanks to @WickyNilliams for reporting the issue atomicojs/astro#1.