this to facilitate the optimization of modules by third-party tools

undefined children generated an error before Array.flat

SSR 🎉

Example

import "atomico/ssr";
import { html } from "atomico";
import "./components";

const dom = html`<my-component>
    <h1>SSR</h1>
</my-component>` ;

dom.render() // serialized html

Observations

1. The support is distributed as a module, so the environment of use requires ESM module support.
2. To hydrate the shadow DOM it is required that the browser support template[shadowroot=open].
3. This support is early but is still being developed as part of the CORE, for alignment with the next Atomico versions.

useReducer

Atomico's useReducer api is aligned with React, now useReducer accepts the third parameter to initialize state, this is thanks to @ofhouse

Internal

Atomico's coverage was low, but this was inaccurate, I've updated @web/test-runner, and this has raised the coverage to 99.89 %

1. the logic that evaluates Text vs Mark now uses instanceof, this expands the use of Atomico with happy-dom
2. atomico/test-dom, improves the capture of global hooks

New types for typescript

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.

Host

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

Type

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:

1. the use of the { type: Function, value:()=>{} } declaration is fixed at the type level

asyncEventListener

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

Patch

1. Fix Meta type when defining Object as Meta<myObject>.

fixed based on 1.49.0 syntax

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

Expands the use of meta to props

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

Universal render

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.

minor changes

1. if statement compression
2. Fix type props for Typescript by defining a prop of type Function

JSXElement

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.

Usage

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

Property static-props

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 DOMListener

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

Fix c function type error in ts when trying to register a component defined using the Component type.