Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
MIT License
Bot releases are visible (Hide)
Published by UpperCod over 3 years ago
This problem only exists since version> = 1.18. *. when using static virtual-dom. Now the use of static nodes is processed correctly avoiding additional analysis if the reference already exists
Published by UpperCod over 3 years ago
Version 1.9. * Generated an error due to the new format that associates ""
as null for certain types,
Now the transformation from string to value according to type happens only within method attributeChangedCallback
, the types in the props remain strict to facilitate the debugging and testing experience.
This only affects when using tsc to generate static types of the function c> = 1.18. *, Since it alters the order of the parameters for AtomicoElement, this is in order to give visibility to the constructor that is associated with the function c from the IDE.
Static types must be regenerated for versions> = 1.20.0.
Published by UpperCod over 3 years ago
Ts did not correctly infer the type of structured declarations, since value was an optional parameter and extends did not apply correctly. Now check if the object has value
to build the type from this parameter or from type
.
Published by UpperCod over 3 years ago
Fix text concatenation in text variables caused by fragment replacement, This prevented concatenating texts within nodes, example:
<span>{"a"}{"b"}</span>
Published by UpperCod over 3 years ago
Internal improvements but that expose the Mark export to identify the fragment marker when needing to reconer or retrieve a fragment manually.
import {Mark} from "atomico";
const childNodes = [...document.querySelector("my-component").childNodes].filter(child=>!(child instanceof Mark));
Published by UpperCod over 3 years ago
This fixes the error of defining the props with strict types with value "", example:
myComponent.propObject = "";
console.log(myComponent.propObject); // null
Published by UpperCod over 3 years ago
Published by UpperCod over 3 years ago
Internal render process. Improvement in the association of references in static nodes to support an internal system of cloning of DOM trees.
This new version may affect external libraries that associate static instances.
import { c } from "atomico";
const rawTree = (
<div>
<img src="./image.jpg" />
</div>
);
function component(show) {
return <host>{show && rawTree}</host>;
}
previous versions: Atomico compared the 2 vnodes to being different created the DOM.
now: Atomico compares the versions as they are different, it regenerates the DOM but if it saves a reference of its state (It only happens when they are static nodes), it clones the reference of the tree avoiding the complete regeneration.
Published by UpperCod over 3 years ago
Reduce the amount of node moves when sorting lists with key assignment
Published by UpperCod over 3 years ago
This improvement optimizes the process of detecting differences between node lists, this improvement brings a reduction in the size of Atomico
Published by UpperCod over 3 years ago
function myComponent() {
return <host />;
}
myComponent.props = { value: String };
export const MyComponent = c(myComponent);
Previous to this version, the use of the tagName associated with the customElement is applied, this prevents JSX from constructing the types without first using a global declaration making maintenance more complex. this is still valid.
import { MyComponent } from "./my-component.jsx";
//⚠️ use only customElements.define in the root file of your JS, this is just an example.
customElements.define("my-component", MyComponent);
function component() {
return (
<host>
<my-component></my-component>
</host>
);
}
New JSX declaration, this allows to use the return constructor of c
to associate the Tag instance, allowing to eliminate the leverage on the tagName.
import { MyComponent } from "./my-component.jsx";
//⚠️ use only customElements.define in the root file of your JS, this is just an example.
customElements.define("my-component", MyComponent);
function component() {
return (
<host>
<MyComponent ></MyComponent >
</host>
);
}
Advantage:
Rule : Always remember to associate the Name tag of the Constructor in a higher file before the execution of the webcomponent render, in order to avoid the error due to instability.
Published by UpperCod over 3 years ago
Improve the return of the function c, it now builds this according to the functional component.
The instance of the customElement returned by atomic now has the methods and properties managed by the functional component with the class inheritance given as the second parameter to the c
function, example:
function component(){}
component.props = { show : Boolean };
const Component = c(component);
const instanceComponent = new Component;
instanceComponent.show ; // ts: boolean.
instanceComponent.unmounted; // ts: Promise<void>
const Component = c(component, HTMLImageElement);
const instanceComponent = new Component;
instanceComponent.show ; // ts: boolean.
instanceComponent.unmounted; // ts: Promise<void>
instanceComponent.src; // ts: string
instanceComponent
associate Props<typeof component.props> & HostContext
It is a meta property of the return of c and allows to build the Api for React JSX, example:
import {Component} from "./component";
declare namespace JSX {
interface IntrinsicElements {
"my-element": Component.Props
}
}
Published by UpperCod over 3 years ago
This improvement is thanks to the detection of a bug, This bug has been detected thanks to the user MaConstanza_, it is a rare problem and it was detected when using a slot polyfill in LightDOM situations. This fixes the behavior dispatched by component unmounted.
Published by UpperCod over 3 years ago
The return is now correct, allowing TS to infer the useUpdate callback
Published by UpperCod over 3 years ago
useUpdate is an internal Atomico hook that allows to request an update of the webcomponent, this hook is used by useState and useReducer.
This hook is now exposed to improve the construction of the hook api externally.
const update = useUpdate();
Where:
update
: callback to dispatch the update request.Published by UpperCod over 3 years ago
Published by UpperCod over 3 years ago
Published by UpperCod over 3 years ago
Prevent setProperty from defining properties that start with the prefix _
, eliminated errors by compiling jsx in development mode.
Published by UpperCod over 3 years ago
This update only helps the JSX compiler when using jsx-runtime, adding support for the jsxs and jsxDEV functions.
Published by UpperCod over 3 years ago
Ts types now correctly reflect the documented api.