Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
Repara la issue #127 detectada por @is-jonreeves, In summary: In node@20, an error was generated when trying to move the .github and .vscode folders that were included in Atomico as a package. In , we have fixed these folders and files in the package ✅.
This is a Fix for the new component format introduced in version 1.76, fixes the use of Host to declare meta properties and events
Thanks to @WickyNilliams who detected that:
useProp
did not correctly reflect the state of the prop in v1.76 #126useContext
did not reflect the state of the context when declaring the consumer before using customElements.defined.[!IMPORTANT] The use of context preferably requires a synchronous order of customElements.defined declarations or the use of customElements.whenDefined if the parent working as the provider fails to transmit information to the children. Example:
// Synchronous declaration example
customElements.define("my-context", MyContext);
customElements.define("my-parent", MyParent);
customElements.define("my-child", MyChild);
// customElements.whenDefined example
customElements.whenDefined("my-parent").then(() => {
customElements.define("my-child", CounterValue);
});
export const MyComponent = c(
({ message }) => <host shadowDom>{message}</host>,
{
props: { message: String },
styles: css`
:host {
font-size: 3rem;
}
`,
}
);
customElements.define("my-component", MyComponent);
This form is more compact than the ones already known, but with slight advantages:
Component
or Props
to build props; everything is inferred automatically.Component
and Props
.References maintain their usual behavior, but now they allow maintaining an observer model for the change of current
, for example:
import { createRef, useRefEffect } from "atomico";
const ref = createRef({ x: 0, y: 0 });
window.addEventListener("mousemove", ({ pageX, pageY }) => {
ref.current = { x: pageX, y: pageY };
});
function component() {
useRefEffect(() => {
console.log(ref.current);
}, [ref]);
}
useRefEffect
is created to safely observe changes in references.New hook capable of observing changes in one or more references.
function component() {
useRefEffect(() => {
console.log(ref.current);
}, [ref]);
}
Now Atomico is able to determine which types per instance come assigned with a default value. This is to maintain consistency in validation of instance props.
import { useHost, c } from "core";
export function myComponent() {
const { current } = useHost<typeof MyComponent>();
return (
<host>
<button
onclick={() => {
current.count++;
current.message?.toLocaleLowerCase();
}}
>
increment
</button>
</host>
);
}
myComponent.props = {
count: { type: Number, value: 0 },
};
export const MyComponent = c(myComponent);
Now customTypes respect assigned values and distinguish a value to be used from JSX and a value to be used from the instance.
Now customType takes precedence over the type associated with value.
import { Props, c, createType, useRef } from "core";
function myComponent({ date }: Props<typeof myComponent>) {
return <host shadowDom>{date.toLocaleDateString()}</host>;
}
const TypeDate = createType((value: Date | string) =>
value instanceof Date ? value : new Date(value)
);
myComponent.props = {
date: { type: TypeDate, value: new Date() },
};
const MyComponent = c(myComponent);
<MyComponent
onclick={({ currentTarget }) => {
currentTarget.date.toLocaleDateString();
}}
date={"December 17, 1995 03:24:00"}
>
...
</MyComponent>;
Previous support used shadowroot for hydration, now the standard attribute called shadowrootmode is changed
Fix hydration of nested components also hydrated when performing SSR or SSG
This Fix allows you to use moduleResolution Bundler
and NodeNext
at the tsconfig configuration level
This version of Atomico brings small but valuable improvements, we invite you to enjoy this new version and to share any new ideas or issues with us.
Thanks to @efoken, you can now configure the association of Shadow DOM with your web component, for example, in the use of delegateFocus
.
<host shadowDom={{ delegatesFocus: true }}/>
display: contents
by defaultThis problem only occurred when using useAsync, Fixes the association of the render and side effects to it(useEffect, useLayoutEffect, css ) after waiting for the suspense.
Fix only for Typescript when compiling to use the identifier to mark Fragments