Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
MIT License
Bot releases are hidden (Show)
Published by UpperCod 6 months ago
// 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.
Published by UpperCod 6 months ago
This version applies fixes to improve component unmounting when using useSuspense and code reductions for the context API.
Published by UpperCod 6 months ago
This version has 2 core changes:
Published by UpperCod 7 months ago
Published by UpperCod 7 months ago
Published by UpperCod 7 months ago
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" });
});
Published by UpperCod 7 months ago
Fixes a bug when using contexts in SSR environments.
Thanks to @WickyNilliams for reporting the issue https://github.com/atomicojs/astro/issues/1.
Published by UpperCod 8 months ago
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)
);
Published by UpperCod 8 months ago
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);
Published by UpperCod 8 months ago
Now the type exists as a module at the TS level
Published by UpperCod 8 months ago
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 โ
.
Published by UpperCod 8 months ago
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
Published by UpperCod 8 months ago
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);
});
Published by UpperCod 8 months ago
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>;
Published by UpperCod 9 months ago
Previous support used shadowroot for hydration, now the standard attribute called shadowrootmode is changed
Published by UpperCod 9 months ago
Fix hydration of nested components also hydrated when performing SSR or SSG
Published by UpperCod 10 months ago
This Fix allows you to use moduleResolution Bundler
and NodeNext
at the tsconfig configuration level
Published by UpperCod 11 months ago
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 defaultPublished by UpperCod 12 months ago
This 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.
Published by UpperCod about 1 year ago
Fix only for Typescript when compiling to use the identifier to mark Fragments