New implementation in rendering Constructors and improvement of types

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 Typescript types for function "c"

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

Improves the disconnectedCallback compose

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.

Fix type for Typescript of hook useUpdate

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

New hook useUpdate and type improvement

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

Fix the use of vdom.props.children in context of jsx-runtime

1.13.3

Fix the use of vdom.children

Fix bug for using props.children in Element.children

1.13.2

Fix bug for using props.children in Element.children

Avoid properties with prefix _

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

Add jsxs and jsxDEV for jsx-runtime mode

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

Type error for TS is fixed and the repository is improved

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.