Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
// BEFORE
const [state, setState] = useState<string>(()=>"welcome"); // ❌Typescript announces error
// BEFORE
const [state, setState] = useState<string>(()=>"welcome"); // ✅Typescript announces success
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.
This version applies fixes to improve component unmounting when using useSuspense and code reductions for the context API.
This version has 2 core changes:
With this, you can create interfaces that react from the parent component to the asynchrony of its children.
With this new hook, you can set the context instance, for example:
const Theme = createContext({ mode: "light" });
const App = c(() => {
useProvider(Theme, { mode: "dark" });
});
Fixes a bug when using contexts in SSR environments. Thanks to @WickyNilliams for reporting the issue https://github.com/atomicojs/astro/issues/1.
This allows fixing the filter by instanceof a nidel of typescript types, example:
import { Mark } from "atomico";
Array.from(element.childNodes).filter(
(el) => !(el instanceof Mark)
);
This new property allows working with slots in manual assignment mode in an agile way. For example:
import { c } from "atomico";
import { useChildNodes } from "@atomico/use-child-nodes";
const MyComponent = c(() => {
const childNodes = useChildNodes();
return (
<host shadowDom={{ slotAssignment: "manual" }}>
{childNodes
.filter((el) => el instanceof HTMLElement)
.map((child: HTMLElement) => (
<slot assignNode={child}></slot>
))}
</host>
);
});
customElements.define("my-component", MyComponent);
Now the type exists as a module at the TS level