atomicojs / atomico

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
https://atomicojs.dev
MIT License
1.16k stars 43 forks source link

1.0.0-beta #36

Closed UpperCod closed 4 years ago

UpperCod commented 4 years ago

Atomico@1.0.0-beta

This new version stabilizes the api by introducing various changes and tests to guarantee the future stability of Atomico.

Break!

custom Element is replaced by thec function.

the c function is only limited just create the Element to be registered by customElements.define, example:

import { h, c } from "atomico";

const MyComponent = () => <host />;

const HTMLMyComponent = c(MyComponent);

customElements.define("my-component", HTMLMyComponent);

This function also allows modifying the class to be used as the basis for the Atomico component, example:

const HTMLMyComponent = c(MyComponent, HTMLAnchorElement);

Improvements

Support is added to methods.

Using the host tag you can define methods that work with the scope of the web component, example:

const MyComponent = () => {
  const myMethod = () => console.log("hi!");
  return <host myMethod={myMethod}>...</host>;
};

// After registration

let myComponent = document.querySelector("my-component");

await myComponent.updated;

myComponent.myMethod();

Security

  1. The nodes of the style tag are grouped and sanitized.
  2. The vdom nodes now have an origin marker to avoid injecting objects. eate the Element to be registered bycustomElements.define, example: