Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
MIT License
Bot releases are hidden (Show)
Published by UpperCod over 2 years ago
Published by UpperCod over 2 years ago
Published by UpperCod over 2 years ago
Published by UpperCod over 2 years ago
this to facilitate the optimization of modules by third-party tools
Published by UpperCod over 2 years ago
Published by UpperCod over 2 years ago
Published by UpperCod over 2 years ago
Published by UpperCod over 2 years ago
Published by UpperCod over 2 years ago
undefined children generated an error before Array.flat
Published by UpperCod over 2 years ago
import "atomico/ssr";
import { html } from "atomico";
import "./components";
const dom = html`<my-component>
<h1>SSR</h1>
</my-component>` ;
dom.render() // serialized html
template[shadowroot=open]
.Published by UpperCod over 2 years ago
Atomico's useReducer api is aligned with React, now useReducer accepts the third parameter to initialize state, this is thanks to @ofhouse
Atomico's coverage was low, but this was inaccurate, I've updated @web/test-runner, and this has raised the coverage to 99.89 %
Published by UpperCod over 2 years ago
Published by UpperCod over 2 years ago
These new types make the Meta type obsolete, with these it is sought to improve the declaration of Types at the Typescript level.
ยฟwhy deprecate Meta?, Although meta pursued similar objectives, individualizing the behavior of types depended on meta objects that were complex to identify according to the context of use, whether as function return or in props, now Host and Meta have independent objectives, this improves maintenance and helps to incorporate specific functionalities for each type.
It improves the declaration of the host context, through Host you will be able to define events and methods of the scope or of the props.
import { Host } from "atomico";
interface Context {
onCustomEvent: Event;
myMethod(): any;
}
function component(): Host<Context> {
return <host></host>;
}
Mejora la declaraciรณn de Props, perotiemido definir tipos espesificos y estrictos sobre la prop.
import { Type } from "atomico";
function component() {
return <host></host>;
}
component.props = {
size: String as Type<"small" | "normal" | "medium">,
};
patch:
{ type: Function, value:()=>{} }
declaration is fixed at the type levelPublished by UpperCod over 2 years ago
This new function is part of the atomico/test-dom
model and allows to listen to an event as a promise which will be the result once the event is dispatched, example:
it("async", async () => {
let eventExpect;
setTimeout(() => {
window.dispatchEvent((eventExpect = new Event("click")));
});
const event = await asyncEventListener(window, "click");
expect(eventExpect).to.equal(event);
});
Object as Meta<myObject>
.Published by UpperCod over 2 years ago
fixed based on 1.49.0 syntax
Published by UpperCod over 2 years ago
Meta by itself does not manage to centralize the type declaration, to fix this its use must be separated into:
MetaEvents< DOMEvent<"myEvent"> >
Number as MetaType< 1 | 2 | 3 >
For the moment Meta will continue to be supported as it was established for versions before 1.49.0
Meta< DOMEvent<"myEvent"> >
Help!: If you know how to centralize through the Meta type MetaEvents and MetaType please let me know
Published by UpperCod over 2 years ago
Now you can use meta on props, to force the type of the value strictly, for Typescript and autocompletion, example:
import { Meta } from "atomico";
function component() {
return <host />;
}
component.props = {
value: Number as Meta<1 | 2 | 3>,
load: Function as Meta<(value: number) => Promise<any>>,
};
Meta for props had to be patched in v1.49.1
This improves validation when using Typescript and autocompletion of props in JSX either in Atomico or Atomico within React
Now the Atomico render is not leveraged to the customElement, this will allow us to work on a next render without breaking the stability of Atomico.
Published by UpperCod over 2 years ago
Allows you to rebuild parameters as JSX types of an Element, this is useful for non-Atomico libraries looking for React compatibility, eg @atomico/react
.
import { JSXElement } from "atomico";
import { MyElement } from "./my-element";
function ReactComponent(props: JSXElement<typeof MyElement > ){
console.log(props)
}
JSXElement is a type proxy to the DOM
Published by UpperCod over 2 years ago
Reflect the functional component's props as part of the class created by the c
function, example:
function component(){
return <host></host>
}
component.props = { myProp: String }
const Component = c(component);
Component.props; // { myProp: String }
The purpose of this feature is to provide a declarative structure for third-party APIs within the return of c
.
Type that facilitates the autocompletion of Listeners outside of JSX, example:
import { DOMListener } from "atomico";
function component(){
const listener:DOMListener<MouseEvent> = ( event )=>{
console.log(event);
}
listener.capture = true;
return <host onclick={listener}/>
}
Published by UpperCod over 2 years ago
Fix c function type error in ts when trying to register a component defined using the Component type.