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

Boolean type correction in customElement

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.

Type breaking for AtomicoElement

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.

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.

Fix text concatenation in text variables caused by fragment replacement, This prevented concatenating texts within nodes, example:

<span>{"a"}{"b"}</span>

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));

This fixes the error of defining the props with strict types with value "", example:

myComponent.propObject = "";
console.log(myComponent.propObject); // null

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.

Example

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.

Reduce the amount of node moves when sorting lists with key assignment

This improvement optimizes the process of detecting differences between node lists, this improvement brings a reduction in the size of Atomico

rendering Constructors

Recommended export example

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:

1. The constructor infers the types of the props, so it improves the experience of JSX autocompletion or error detection in Typescript.
2. It doesn't matter if you change the name of the tagName associated with the constructor, Atomico instantiates the tag using new.

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.

Improve the return of the function c, it now builds this according to the functional component.

Improves

return of the constructor instance generated by "c" (this)

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:

No inheritance

function component(){}
component.props = { show : Boolean };

const Component = c(component);

const instanceComponent = new  Component;

instanceComponent.show ; // ts: boolean.

instanceComponent.unmounted; // ts: Promise<void>

With inheritance

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

Props

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
  }
}

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.

The return is now correct, allowing TS to infer the useUpdate callback

useUpdate

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.

Syntax

const update = useUpdate();

Where:

• update : callback to dispatch the update request.

Example.

1. useState

types

1. The types are for the JSX construction, now the tag supports the rx and ry attribute.
2. type useUpdate

Prevent setProperty from defining properties that start with the prefix _, eliminated errors by compiling jsx in development mode.

This update only helps the JSX compiler when using jsx-runtime, adding support for the jsxs and jsxDEV functions.

Ts types now correctly reflect the documented api.

Repository improvements

1. Initial README update by modifying the links to the new gitbook documentation.
2. The external links are updated linking to the new Atomico landing.
3. Brand assets are now in the brand branch.