Github action integration

This Release is part of the integration and boot test of Atomico in the Github Actions environment

New Hooks api and useLayoutEffect support added

New hook api

This change replaces the updated method with clearEffects, hoping with this change to give a better hook test experience, since it introduces a cleaning in stages, this cleaning in stages is designed to support the useLayoutEffect hook.

import { useLayoutEffect, useEffect } from "atomico";
import { createHooks } from "atomico/test-hooks";

const hooks = createHooks();

hooks.load(() => {
    useLayoutEffect(() => {
        console.log("first!");
    });
    useLayoutEffect(() => {
        console.log("last!");
    });
});

// run all useLayoutEffect
const clearLastEffect = hooks.clearEffects();

// run all useEffect
clearLastEffect();

useLayoutEffect

Improves the experience of associating DOM effects dependent on an asynchronous execution, this hook is ideal for computing styles to be processed later by useEffect

atomico/css

This new module adds support to the use of CSSStyleSheet safely and without the need for polyfill, its use is optional, but it guarantees that the CSSStyleSheet instance can be exported and shared between multiple components,

More tests

[email protected]

[email protected]

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 the c 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 by customElements.define, example:

Atomico 0.19.0

Atomico 0.19.0

Improvement for error capture.

The definition of props generates a blocking error to capture by a Promise or tryCatch, this capture gives more information about the error, be it target that emits the error, schema as the structure given for the property, eg:

try {
  targetComponent.myNumber = {};
} catch (e) {
  console.log(e.target);
}

This with the intention of improving the focus towards the component that emits the error

Improvements for props

new support of Type Function

This, like other supported types, has a behavior only as a property, so it does not support properties such as reflect, eg:

MyComponent.props = {
  myFunction: Function
};

document.querySelector("my-component").myFunction = () => "...hi!";

Support for values as options

by declaring the prop as an object, you could define the options property to limit the valid options, eg:

MyComponent.props = {
  myString: {
    type: String,
    options: ["success", "error"]
  }
};

Improvements for typescript

Interface for components and props

This interface improves component definition, allowing to extend the definition of props and error with autocomplete, eg:

import { h, useState, Component } from "atomico";

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

MyComponent.props = {
  myString: {
    type: String,
    options: ["success", "error"]
  }
};

It can be improved through the PropSchema interface, allowing to extend the type of declaration as a rule for the construction of the property, eg:

import { PropSchema } from "atomico";

export const CustomProp: PropSchema<number> = {
  type: Number,
  options: [1, 2, 3, 4],
  value: 1
};

declaration for hooks

All hooks of the model atomico, atomico/use-lazy and atomico/hml now have type definition, eg:

let [count, setCount] = useState(0);

type number will be a rule for count and setCount, the type can be forced using useState<CustomType>()

** More type declaration in index.d.ts**

Improves the propagation of events between web-components

event update

Atomic allows the propagation of events in 2 ways:

prop

When configuring your property you can define the event property, this activates the propagation before each change associated with the property, eg :

function CustomElement(){
    let [checked,setChecked] = useProp("checked");
    return <host onchecked={()=>{

    }}>
        <button onclick={()=>setChecked(!checked)}>toggle<button>
    </host>
}
CustomElement.props = {
    checked : {
        type : Boolean,
        event : true
    }
};

Additional configuration

CustomElement.props = {
  checked: {
    type: Boolean,
    event: {
      type: true,
      bubbles: true
    }
  }
};

useEvent

Create a callback to dispatch an event from within the component.

function CustomElement() {
  let dispatchEvent = useEvent("custom-change", {
    bubbles: true
  });

  return (
    <host>
      <input onchange={dispatchEvent} />
    </host>
  );
}

The objective is to facilitate the use of api customEvent

In order to improve the event propagation experience, the behavior of the propagation core is improved with the objective of allowing to dispatch synchronization events at the time of recycling or composing outside Atomico.

update in props

the use of type Function for props is now obsolete

Some important renames and new hooks

Renames

the static property observables is now called props, in addition to this change, support for shemas eg is added:

function WebComponent() {}

WebComponent.props = {
	fieldOne: Number, // simple form
	fieldTwo: {
		type: Number,
		reflect: true, // it is reflected as an attribute
		value: 0 // initial value
	}
};

new Hooks

These hooks were created in order to improve the use of web-components.

useProps, allows access to a property declared as props, this hooks allows to manipulate the property from inside the function or custom hooks.

let [fieldOne, setFieldOne] = useProp("fieldOne");

useEvent, allows to create a configurable custom-event.

let dispatchEvent = useEvent("my-custom-event", { bubbles: true });

useProvider and useConsumer, creates a state that synchronizes parent and children, regardless of the format of the DOM.

👋🥳🎉 Atomic now is simpler!

Atomico, is simplified in search of a better maintenance and simplicity of package, for it I have applied important changes:

Simpler package

@atomico/core, @atomico/element, @atomico/router and @atomico/lazy, join in the atomico package, this is to share the testing environment (Now Karma) and avoid updating the dependency chained between packages.

1. @atomico/core and @atomico/element is now atomico.
2. @atomico/router is now atomico/router.
3. @atomico/lazy is now atomico/lazy.

Simpler installation

Now you only need one type of project format to manage individual applications, design systems or web-components.

npm init @atomico

Welcome to Atomico, let's create your project

√ name? ... project-name
√ description? ... project-description

Ready!, check the folder ./project-name and ./project-name/README.md

Next step, commands!

  cd project-name
  yarn | npm i

to achieve this the following plugins have been created

@atomico/rollup-plugin-import-css, allows you to import the css, from an external file, you can customize your css using postcss plugins.

@atomico/rollup-plugin-workbox, allows the generation of a service worker configured for the development of PWA, once the bundle is finished.

@atomico/rollup-plugin-input-html, it allows the import of html input using rollup, similar to the parceljs approach, but designed to create applications and distributable design systems such as MJS modules.

** input bundle**

/src
	/web-components
		ui-header
		ui-button
		ui-footer
ui-header.html #script[type=module][src=./src/web-components/ui-header]
ui-button.html #script[type=module][src=./src/web-components/ui-button]
ui-footer.html #script[type=module][src=./src/web-components/ui-footer]

** putput bundle**

/dist
	ui-header.html
	ui-header.js
	ui-button.html
	ui-button.js
	ui-footer.html
	ui-footer.js

readme output, This facilitates the consumption of web-components or applications.