DEV Community: Matias Trujillo

How to consume promises with webcomponents? 🤓

Matias Trujillo — Tue, 31 Jan 2023 04:12:00 +0000

Atomico brings the functional syntax of React to web components to make things simpler, today I would like to show you solving how to consume promise in just 3 steps.

Step 1

import the useAsync hook from Atomico.

import { useAsync } from "atomico";

Step 2

Abstract your promise into a callback.

const getUsers = () => fetch("/api/users").then((res) => res.json());

Step 3

Finally in your webcomponent created with Atomico add the useAsync hook and consume the promise.

function myComponent() {
  const users = usyAsync(getUsers);

  return (
    <host>
      <h1>Users({users.length})</h1>
      <ul>
        {users.map((user) => (
          <li>{user.name}</li>
        ))}
      </ul>
    </host>
  );
}

And that's it 🎉, you are already consuming promises with Atomico, remember that this way does not allow us to observe the resolution status, since with the useAsync hook we seek to delegate that process to a parent component (This is known as suspense 🤓)

Why Atomico js webcomponents?

Matias Trujillo — Fri, 12 Aug 2022 19:24:44 +0000

First of all, what is Atomico? 🤔

Atomico is a small library to create interfaces and applications through webcomponents with a syntax similar to React Hooks.

Now why use Atomico? 🤓

Atomico has a size as a module of 4 kB but being bundled JS its size is less than 2.5kB (GZIP)🤯, resulting in an incredibly light code.

We will show the benefits of Atomico through a comparison, we have used as a basis for this comparison the existing counter webcomponents in webcomponents.dev of Atomico, Lit, Preact and React as a base.

With this comparison we get to know:

📦 JS Size (Library + Component) sent to browser
🏃 Load time of the first render of 1000 components in the browser.
✍️ Lines of code written to solve the webcomponent.

We invite you to read the full article on 👉 atomicojs.dev/why

A naturally asynchronous store 🤓

Matias Trujillo — Tue, 19 Apr 2022 17:20:49 +0000

In this article you will learn about @atomico/store, a naturally asynchronous, predictable and finite state manager. but first some code 👇.

Preview

interface State {
  api: string;
  loading: boolean;
  products: { id: number; title: string; price: number };
}

const initialState = (state: State) => ({
  api: "",
  loading: false,
  products: [],
});

async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}

const store = new Store(initialState, {
  actions: { getProducts },
});

The above code solves the following goals:

Asynchrony management.
Finitely predictable asynchrony.
Modularity and composition.

Asynchrony management

Application events and service calls are naturally asynchronous, with @atomico/store you can use asynchronous functions or asynchronous generators to define the update cycle.

update cycle? By this I mean the states that occur sequentially when dispatching the action, example:

async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}

The previous action will generate 2 states when dispatched:

state 1:{loading: true, products:[]}
state 2: {loading: false, products:[...product]}

The advantage of this is that the process is clearly observable by the store and by whoever dispatches the action.

Finitely predictable asynchrony

Every action in @atomico/store is wrapped in a promise that defines when it ends its cycle, this will let you execute actions sequentially, example:

await store.actions.orderyBy();
await store.actions.insert({ id: 1000 });
await store.actions.updateAll();

Modularity and composition

@atomico/store allows to decouple the actions and the state of the store, for a better modularization , example:

actions.js

export interface State {
  api: string;
  loading: boolean;
  products: { id: number; title: string; price: number };
}

export const initialState = (state: State) => ({
  api: "",
  loading: false,
  products: [],
});

export async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}

store.js

import * as Actions from "./actions";

export default new Store(Actions.initialStore, { actions: { Actions } });

Example

@atomico/store is AtomicoJS project.

AtomicoJS? Open source project for the creation of interfaces based on webcomponents, @atomico/store was created with Atomico, a library of only 3kB that will allow you to create webcomponents with a functional approach, we invite you to learn more about Atomico and its tools that will improve your experience with webcomponents.

👐 I invite you to join the Atomicojs community and learn more about our projects! 👇

This is Formilk

Matias Trujillo — Tue, 12 Apr 2022 04:08:32 +0000

Formilk is a system of configurable webcomponents created by UpperCod, with formilk you can speed up your design system creation process, associating your design tokens to formilk using custom-properties.

motivations

Formilk was born from the need to:

be subtly aesthetic.
be easily configurable.
be agnostically friendly.

Subtly aesthetic

Easily configurable

All formilk tokens can be managed at root level, for this the following css rule would be enough to modify the color of the buttons

:root{
    --fm--color-button-60: black;
    --fm--color-button-10: white;
}

But there is something much better in Formilk, the tokens are related by group and inheritance, but that is for another article.

Agnostically friendly

This is the best part of Formilk, well the previous one was already good, but this is amazing (or so I think).

Formilk is created with Atomico JS and it is agnostically friendly, this means that at the level of webcomponents Atomico gives additional support to libraries like React and Preact, in the following example you will see the use of React TSX + Formilk

This is Agnostic friendly, Formilk is the example of how you can create components for React without using React and best of all your components will work in any library or HTML

Message

All this Formilk magic is thanks to Atomico JS and its tools:

@atomico/desing-tokens: library to sustainably apply layout tokens to your webcomponent system.
@atomico/hooks: more than 40 utilities like hooks
@atomico/exports: exports all of Formilk, compiling, generating the exports, types, and wrappers for React and Preact.
@atomico/react: extend the webcomponents to react and preact respecting all the rules defined in your component created with Atomico.

👐 I invite you to join the Atomicojs community and learn more about our projects! 👇

More scalable applications only using forms and webcomponents

Matias Trujillo — Sat, 02 Apr 2022 19:16:21 +0000

I present to you @atomico/magic-form a set of webcomponents created with AtomicoJS that centralizes form submission to build scalable applications using traditional forms.

Traditional forms? I mean the use of the <form> tag, example:

<form actio="myAction">
  <input type="name" />
  <button>submit</button>
</form>

Now let's add some of the magic of MagicForm.

<MagicFormProvider
  actions={{
    async myAction(form: HTMLFormElement) {
      return myApi(new FormData(form));
    },
  }}
>
  <MagicForm>
    <form actio="myAction">
      <input type="name" />
      <button>submit</button>
    </form>
  </MagicForm>
</MagicFormProvider>

In the above code we have added 2 components:

MagicFormProvider: centralizes the actions of nested MagicForms.

MagicForm: identifies the form to be observed by MagicFormProvider, this component also allows knowing the status of the sending and the return of the myAction function through the onChangeState event

The benefits of using MagicForm are:

1. Reusable Actions

Thanks to MagicFormProvider we can easily reuse the actions between forms, example:

<MagicFormProvider
  actions={{
    async myAction(form: HTMLFormElement) {
      return myApi(new FormData(form));
    },
  }}
>
  <MagicForm>
    <form actio="myAction">
      <input type="name" />
      <button>submit</button>
    </form>
  </MagicForm>
  <MagicForm>
    <form actio="myAction">
      <input type="name" />
      <button>submit</button>
    </form>
  </MagicForm>
</MagicFormProvider>;

2. Observe the status of the form

The form submission process can be observed through the onChangeState event, this will allow you to know the submission status and the action response:

<MagicForm
  onChangeState={({ currentTarget }) => {
    console.log(currentTarget.state);
  }}
>
  <form actio="myAction">
    <input type="name" />
    <button>submit</button>
  </form>
</MagicForm>

3. Microfrontend

If MagicFormProvider does not find the dispatched action among its actions, it will continue to bubble until the next MagicFormProvider, this allows you to have multiple islands with isolated and reusable actions, example:

<MagicFormProvider actions={{
    async login(){...}
}}>
    <MagicFormProvider actions={actionsClient}>
        <PageClient/>
    </MagicFormProvider>
    <MagicFormProvider actions={actionsAdmin}>
        <PageAdmin/>
    </MagicFormProvider>
</MagicFormProvider>

Beautiful isn't it? but how to use it

Webcomponent
AtomicoJS: Atomico is a powerful library that allows you to create web components like MagicForm
React and Preact

Webcomponent

<magic-form-provider>
  <magic-form>
    <form action="user">
      <input type="text" name="name" />
      <input type="text" name="email" />
      <button>Create user</button>
    </form>
  </magic-form>
</magic-form-provider>
<script>
  await customElements.whenDefined("magic-form-provider");

   document.querySelector("magic-form-provider").actions = {
     async add(form) {
       return fetch("./my-api", {
         method: "post",
         body: new FormData(form),
       }).then((res) => res.json());
     },
   };
</script>

Atomico Js

import { MagicForm, MagicFormProvider } from "@atomico/magic-form";

function component() {
  return (
    <host>
      <MagicFormProvider
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </host>
  );
}

React and Preact

To use this webcomponents in React or Preact you must install @atomico/react, remember that for its use in Preact you must change the module from "@atomico/magic-form/react" to "@atomico/magic-form/preact"

import { MagicForm, MagicFormProvider } from "@atomico/magic-form/react";

export function App() {
  return (
    <>
      <MagicFormProvider
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </>
  );
}

MagicForm is AtomicoJS project.

AtomicoJS? Open source project for the creation of interfaces based on webcomponents, MagicForm was created with Atomico, a library of only 3kB that will allow you to create webcomponents with a functional approach, we invite you to learn more about Atomico and its tools that will improve your experience with webcomponents.

👐 I invite you to join the Atomicojs community and learn more about our projects! 👇

Types, autocompletion, and more for Webcomponents!

Matias Trujillo — Thu, 06 Jan 2022 03:50:57 +0000

Let's first start from the basis that webcomponents are amazing 😎 and that our application with webcomponents will look great in HTML or JS, example:

<my-awesome-app>
  <my-awesome-header></my-awesome-header>
  <my-awesome-content></my-awesome-content>
  <my-awesome-footer></my-awesome-footer>
</my-awesome-app>

Right? I personally think that's fine, but I know you will hate that there is no default support for:

Import origins: know the origin of the component
Types: I really love that our favorite editor or typescript alerts us that something is apparently wrong
Autocomplete: tell me that it is not pleasant to know what properties and attributes we can declare with just typing a key.

If I know that these can be supported by adding extensions to your editor and json manifests, that is, more maintenance for who uses it and who maintains it, but what if all that will work with nothing more than an editor like visual study code and a tsconfig.json file.

Welcome to Atomico pro mode

Atomico is a library of only 3 kB to create webcomponents with a functional approach inspired by React, this is a webcomponent with Atomico👇:

// IMPORT
import { Props, c, css } from "atomico";

// WEBCOMPONENT
function myComponent({ message }: Props<typeof myComponent.props>) {
  return <host shadowDom>{message}</host>;
}

// WEBCOMPONENT PROPERTIES AND ATTRIBUTES
myComponent.props = {
  message: String,
};

// WEBCOMPONENT APPEARANCE
myComponent.styles = css`
  :host {
    font-size: 30px;
  }
`;

// CUSTOM ELEMENT
export const MyComponent = c(myComponent);

// DEFINITION OF THE WEBCOMPONENT AS A TAG
customElements.define("my-component", MyComponent);

from that we can conclude that:

Yes, none of this, classes and methods.
Typescript support.
If you know React, you already know 90% Atomico.
Your webcomponents will be simple and small than with other libraries

but where are the benefits of that code, we have done nothing more than create a webcomponent, now the magic of Atomico:

import { MyComponent } from "./component";

function myAwesomeApp() {
  return <host>
    <MyComponent message="hello atomico!">
  </host>;
}

What is happening there? ☝️

you are importing the customElement.
you are instantiating the customElement.

Yes, Atomico supports the instance of webcomponents using the customElement, to support import sources, types and autocompletion without restrictions.

Example autocomplete

Example types

Simple but really useful especially if you are creating applications or design systems based on web components😉.

This is just one of the many features that Atomico offers today, I invite you to learn more about this project and have fun with Atomico, bye Bye!

How to apply Design Tokens in WebComponents with customProperties

Matias Trujillo — Sun, 05 Sep 2021 05:28:50 +0000

Let's start by imagining that you already have your design system with the design tokens already identified in a tool such as Adobe XD, Figma or another and now you are in your last step developing the code and it looks like this:

class MyAwesomeButton extends AnyLibrarie {
  static styles = css`
    button {
      background: var(--my-awesome-ds-button-background);
      color: var(--my-awesome-ds-button-color);
      border: var(--my-awesome-ds-button-border);
    }
  `;
  render() {
    return html`<button><slot></slot></button>`;
  }
}

is this correct? maybe, can it be better? Of course with properly implemented Design Tokens(Heck if I was wrong correct me in the comments).

From here I will use Atomico a 3kB library to create WebComponents using functions, do you have to know Atomico to continue?, No, since we will write standard JS and use only 3 functions:

c: transform your function into a custom elements.
html: create our HTML template
css: create our CSS.

Let's continue!

How to improve your design tokens?

First create an archive called tokens.js and write the following code

import { css } from "atomico";

export const tokensInput = css`
  :host {
    --background: var(--my-awesome-ds-input--background, black);
    --color: var(--my-awesome-ds-input--color, white);
    --border: var(--my-awesome-ds-input--border, 1px solid tomato);
  }
`;

With the above code you have gained something amazing✨:

You simplified the name of the internal custom properties to be used by your components. Every component that imports tokensInput must not know that ugly prefix --my-awesome-ds-input--background, for your components it will only be --background 😎
Instance-level customization of your component.

Before continuing I want to highlight the name of our tokensInput variable is not called tokensButton and this will depend on your design system, for me the properties between the button and the input are usually generic.

How to use your design tokens?

Step 1, import dependencies

import { c, html, css } from "atomico";
import { tokensInput, tokensColors } from "../tokens";

Step 2, create our component

function button() {
  return html`<host shadowDom>
    <button><slot /></button>
  </host>`;
}

Step 3, associate our tokens and use them

button.styles = [
  tokensInput,
  tokensColor,
  css`
    button {
      background: var(--background);
      color: var(--color);
      border: var(--border);
    }
  `,
];

Now our code looks like this

import { c, html, css } from "atomico";
import { tokensInput, tokensColors } from "../tokens";

function button() {
  return html`<host shadowDom>
    <button><slot /></button>
  </host>`;
}

button.styles = [
  tokensInput,
  tokensColor,
  css`
    button {
      background: var(--background);
      color: var(--color);
      border: var(--border);
    }
  `,
];

customElements.define("my-awesome-button", c(button));

There is something beautiful in using this technique that I share with you and it is that the custom-properties of the component are not leveraged to a prefix of our design system at the component level, thus achieving a more sustainable code, example:

<my-awesome-button style="--background: gold"></my-awesome-button>

The above is only introductory, I invite you to learn more about Atomico and the entire stack of useful tools at the time of developing with webcomponents.

De React ⚛️ a webComponents con Atomico

Matias Trujillo — Wed, 22 May 2019 02:38:09 +0000

👋 Hoy Atomico luce distinto al año 2017, ahora Atomico es más poderoso, rapido, declarativo y estable. Te invito a revisar este articulo actualizado en la documentación de Atomico

Atomico es un proyecto OSS personal que busca simplificar la creación de WebComponents a base de JSX, Virtual-dom, Hooks con tan solo 2.7kB 🤯. Este articulo es un introducción a lo simple 🤓 que es crear webComponents con Atomico

Pequeñas diferencias entre React y Atomico

Atomico se basa en parte del api de React, como :

Hooks: @atomico/core entrega soporte a los siguientes hooks, useState, useEffect, useMemo, useRef y useReducer.
HoCs: Este patrón funciona dentro de Componentes de alto orden, con la intención de asilar lógica invisible para el DOM, como Router o Lazy, el uso de este patrón no queda expuesto en este articulo.

Para enseñar mejor las diferencias y como migrar un componente de React a WebComponent usaremos un ejemplo simple.

Código de ejemplo

Importación

para unir Atomico con WebComponents, ud requerida 2 packages:

@atomico/core: package que integra soporte sobre, virtual-dom, Hooks, HoCs y mas.
@atomico/element : package que utiliza el render de atomico sobre WebComponents.

Componente a WebComponent

La mayor diferencia entre las funciones function Component y function WebComponent es el uso del tag Fragment(<></>) vs Host(<host></host>) El tag host de Atomico apunta al mismo contenedor, para ganar manipulación mas expresiva sobre atributos, propiedades y eventos del WebComponent.

El tag Host siembre deberá ser el retorno de un WebComponent creado con Atomico, si ud no retorna este tag, Atomico asume que generara un desmontaje del componente de forma interna.

Render a CustomElement

Esta pequeña diferencia permite una declaración global de su función como webComponent en su documento, pudiendo ser usado desde React, Vue o HTML.

Observables 🧐

los obserbables son la capa de Atomico para la definición de propiedades y atributos del WebComponent, ante cada mutación de estos se forzara una renderización sobre el nuevo estado de estos observables.

Aun me encuentro escribiendo este articulo 👷, espero que sea de su agrado y si tiene observaciones no dude en comentar 🤓, si busca probar Atomico visite el siguiente repositorio @atomico/core

Create web components without using a class with Atomico

Matias Trujillo — Tue, 12 Feb 2019 06:46:17 +0000

WebComponents with Atomico

Atomico was born to simplify the development of webcomponents by applying a functional approach and completely eliminating the visibility of this! Yes goodbye classes. Show me 👇

💪 A very powerful syntax

// IMPORT
import { c, html, css } from "atomico";

// WEBCOMPONENT
function component({ message }) {
  return html`<host shadowDom>${message}</host>`;
}

// WEBCOMPONENT PROPERTIES AND ATTRIBUTES
component.props = {
  message: String,
};

// WEBCOMPONENT APPEARANCE
component.styles = css`
  :host {
    font-size: 30px;
  }
`;

// DEFINITION OF THE WEBCOMPONENT AS A TAG
customElements.define("my-component", c(component));

Let's analyze the code in parts ...

Import

import { c, html, css } from "atomico";

What have we imported?

c: Function that transforms the functional component into a standard customElement.
html: Function to declare the template of our component, you can also use JSX.
css: Function that allows creating the CSSStyleSheet (CSS) for our component as long as it declares the shadowDom.

Webcomponent

function component({ message }) {
  return html`<host shadowDom>${message}</host>`;
}

Our component function receives all the props (Properties and Attributes) declared in component.props, the component function declares all the logic and template of the webcomponent. An important rule within Atomico is "every component created with Atomico must always return the tag".

Reactive properties and attributes of the webcomponent

Atomico detects the prop (Properties and Attributes) of the component thanks to the association of the props object, this through the use of index and value allows you to define:

index: Name of the property and attribute.
value: type of the prop.

component.props = {
  message: String,
};

From the example we can infer that Atomico will create in our webcomponent a property and attribute called message and this can only receive values of the String type.

Appearance of the webcomponent.

Atomico detects the static styles of your component thanks to the association of the styles property:

component.styles = css`
  :host {
    font-size: 30px;
  }
`;

styles accepts individual or list CSSStyleSheet (CSS) values, the return from the css function is a standard CSSStyleSheet, so it can be shared outside of Atomico.

Definition of your webcomponent

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

To create our standard customElement we will have to deliver our functional component to the c function of the Atomico module, the c function will generate as a return a customElement that can be defined or extended.