🚀 New version of atomico@1.73.0 with improvements in the development experience 💻 🎉
new features at atomic@1.73.0
List of new features
- Custom Type Support
- Adding the use of the new operator to create an instance of an uncovered attribute.
- Eliminating the atomico/core module at the types level.
- Add support for AbortController to the useAsync, useSuspense, and usePromise hooks.
- Default value assignment whenever values equal to
null | undefined
Custom Type Support
With Atomico, you can now create your own types, enabling you to, for example:
- Receive multiple input types and reduce them to a single value. Example:
const TypeImport = createType((value: string | Promise<any>) =>
typeof value === 'string' ? import(value) : value
);The above TypeImport type will always give you a value derived from dynamic imports.
- Serialize non-serializable values for Atomico
interface User {
id: number;
nickname: string;
role: 'admin' | 'client';
}
const TypeUser = createType(
(value: User | string): User =>
typeof value === 'string' ? JSON.parse(value) : value,
(value) => value.role
);The TypeUser type above allows receiving inputs as either an object or a string and always returns a User object. When reflected as an attribute, it will reflect the role property of the user object.
Adding the use of the new operator to create an instance of an uncovered attribute.
When Atomico receives an attribute, it parses its value according to the type. However, this analysis only covers types like String, Boolean, Number, Object, and Array. Now, Atomico allows transforming a string value into the associated type using the 'new' operator. Example:
component.props = {
startDate: Date,
};The above declaration used to result in an error since a string is not of type Date. Now, Atomico internally instantiates the Date type, using the input value as an argument.
New way of working with value.
Previously, the 'value' defined only the initial value of the component's prop, but now it sets the default value. Example:
function myComponent({ theme }: Props<typeof myComponent>) {
return <host shadowDom>{theme}</host>;
}
myComponent.props = {
theme: {
type: String,
value: (): 'primary' | 'secondary' => 'primary',
},
};
const MyComponent = c(myComponent);Now, if we set <MyComponent theme={null}/>, it will be changed to primary.
This also implies that when inferring props, they come as both existing and optional at the function level. Example:
Before
function myComponent(props: Props<typeof myComponent>) {
const double = props?.value ? props?.value * 2 : 0;
return <host>{double}</host>;
}
myComponent.props = {
value: { type: Number, value: 0 },
};Now at atomic@1.73.0
function myComponent(props: Props<typeof myComponent>) {
const double = props.value * 2;
return <host>{double}</host>;
}
myComponent.props = {
value: { type: Number, value: 0 },
};AbortController Support for useAsync, useSuspense, and usePromise hooks.
Atomico now introduces a new hook called useAbortController, which allows aborting the execution of asynchronous calls, example:
import { useAsync, useAbortController } from 'atomico';
async function getUser(id: number, signal: AbortSignal) {
return fetch(`/id/${id}`, { signal });
}
function myComponent({ userId }: Props<typeof myComponent>) {
const { signal } = useAbortController([userId]);
const user = useAsync(getUser, [userId, signal]);
return <host>{user.name}</host>;
}
myComponent.props = { userId: { type: Number, value: 0 } };The significant advantage of using useAbortController is the automatic cancellation of asynchronous processes that depend on it when modifying the arguments provided to useAbortController (similar to useEffect).
Eliminating the atomico/core module at the types level.
At times, when using auto-import, VS Code might infer atomico/core as a valid path. This has been removed to enhance code editor auto-completion.