atomico

now cloned nodes are not regenerated on every render

Happy New Year

cloneNode

Allows to clone a node from the virtualDOM, example:

const Div = document.createElement("div");

Div.innerHTML = `<h1>Div!</h1>`;

function component() {
  return (
    <host>
      <Div cloneNode onclick={console.log} />
      <Div cloneNode onclick={console.log} />
      <Div cloneNode onclick={console.log} />
      <Div cloneNode onclick={console.log} />
      <Div cloneNode onclick={console.log} />
    </host>
  );
}

The objective of this feature is to retrieve slot and use it as a template from the webcomponent.

staticNode

Allows to declare a node within the scope of the component as static, this optimizes the diff process.

function component() {
  return (
    <host>
      <h1 staticNode onclick={console.log}>
        i am static node!
      </h1>
    </host>
  );
}

Utils module

module aims to give recurring utilities associated with Atomico, but not binding to the core, the added utilities are:

serialize

import { serialize } from "atomico/utils";

<div class={serialize(checked && "checked", focus && "focus")}/>

Filter the parameters and join in a string only those that are considered different from "" | false | 0 | null | undefined.

checkIncompatibility

import { checkIncompatibility } from "atomico/utils";

const check = checkIncompatibility();

check.length && alert("Please add the following polyfill "+ check);

check Atomico's leveraged compatibility with the current browser

css (minor)

In version 1.34.5 it was changed to the use of .raw to support the use of special characters within the CSS, now if the definition of raw does not exist it will use the initial argument.

In some environments (web-test-runner) a double import is generated, this double import breaks the constants of the Symbol type module, by using Symbol.for the ID reference is retrieved to identify the internal references

When importing a component created with Atomico and using this constructor as a reference, the bug ts: 2749 occurs

Now it is verified if the component to reference is from Atomico to correctly resolve the node

Now Atomico builds the associated type as props correctly in this cases:

import {c} from "atomico";

function component(){
    return <host></host>;
}

interface Data{
   type: string
}

component.props = {
    data:{
        type: Object,
        value: ():Data=>({type:"a"})
    }
}

Not in all cases, atomico patched the static nodes when detecting a virtual-dom change, this is incorrect since the reference that pointed to the static template was modified and when it was reused it broke the referential dom, this has been corrected.

This improvement changes the behavior of the Component type, now allowing to associate an interface of parameters that generate a strict contract when building the component, example:

import { c, Component } from "atomico";

const component: Component<{ value: string }> = (props) => {
  return <host shadowDom></host>;
};

component.props = {
  value: String,
};

export const C = c(component);

Validation is strict

With this improvement, the events subscribed from the template are configurable, example:

Syntax

//handleEvent
function handler(event){}

// AddEventListenerOptions
handler.capture = true;
handler.once = true;
handler.passive = true;

<host onclick={handler}/>

Example

<host onclick={Object.assign(
    (event)=>console.log(event),
   {capture: true}
)}/>

Notes

The configuration is only associated at the moment of creating the event for the first time, the updates to rerender do not modify the subscription.

Atomico has a render that privileges the use of property, but now with the prefix $<atribute> you can force the use of attributes, example:

host`<my-component $value="my value"></my-component>`;

<my-component $value="my value"></my-component>

Atomico now scans the css list recursively to generate a single list

component.styles .styles = [
        css`
            :host {
                font-size: 1px;
            }
        `,
        [
            css`
                :host {
                    display: block;
                }
            `,
            [
                css`
                    :host {
                        border: 10px solid black;
                    }
                `,
            ],
        ],
];

Type error only for Typescript when using c function

improvements is at the type level, now Atomic adds more support for types that improve the experience with JSDoc, by default most types will be inferred automatically, the lists below allow to improve the types in strict environments.

UseProp

Define the return type of useProp and force the use of the updater, example:

/**@type {import("atomico").UseProp<string>} */
const [id, setId] = useProp("id");

UseState

Define the return type of useState and force the use of the updater, example:

/**@type {import("atomico").UseState<string>} */
const [id, setId] = useState();

If you use the default state this is unnecessary.

UseReducer

Define the return type of useReducer and force the use of the updater, example:

/**@type {import("atomico").UseReducer<string, "load" | "error">} */
const [state, setReducer] = useReduce();

UseHost

Redefine the default current, example:

/**@type {import("atomico").UseHost<MyCustomElement>} */
const host = useHost();

UseEvent

allows to build the detail for the event

/**@type {import("atomico").UseEvent<"load"|"error">} */
const dispatch = useEvent("myEvent");

dispatch("load");

DOMEvent<Name:string, Target?: Element >

DOMCustomEvent<Detail: any, Target?: Element>

DOMEvent type

Sometimes native DOM events are listened to from a webcomponent, although there are constructors to associate this event, they do not construct the target, DOMEvent will allow you to define the native event you occupy and fill in the target.

Syntax

DOMEvent< eventName: string, target?: Element>

Exampel

import { DOMEvent, html } from "atomico";

function component() {
  return html`<host>
    <my-checkbox
      onchange=${(event: DOMEvent<"change", HTMLInputElement>) => {
        event.preventDefault();
        console.log({
          name: event.target.name,
          value: event.target.value,
        });
      }}
    ></my-checkbox>
  </host>`;
}