Fix relative resolution

3.26.3

the relative resolution

fix the useRedirect hook

now it captures the events in descending order and uses path to explore the node

fix return of matches

3.26.1

fix id path

useRouter improvement

useRouter used to observe the change of the routes through an immutable object, this is improved and now immutability is not necessary to observe the routes

Before

const router = useMemo(()=>({"/":()=>"home!"}));
useRouter({"/":()=>"home!"});

After

useRouter({"/":()=>"home!"});

fix params useFormInputRadio

3.25.1

fix params useFormInputRadio

add hooks useFormInputRadio and useFormInputHidden

useFormInputRadio

reflects input radio in forms, this hook requires the declaration of the props checked: Boolean and name: String.

Example

import { useFormInputRadio } from "@atomico/hooks/use-form";

function myInputRadio() {
  useFormInputRadio(
    <input
      required
      onchange={(event) => {
        console.log(event.target.checked);
      }}
    />
  );

  return (
    <host shadowDom>
      <slot />
    </host>
  );
}

myInputRadio.props = {
  name: String,
  checked: {
    type: Boolean,
    reflect: true,
    event: {
      type: "change",
      bubbles: true,
    },
  },
};

The input will be rendered in the lightDOM, this is synchronized at the form level, so the checked state will change according to this hook

useFormInputHidden

Its objective is to reflect a value on the form through an input[type="hidden"]

function component() {
  useFormValue("field", "20");
  return <host shadowDom></host>;
}

⚠️ useFormInputHidden removes support for useFormValue

Add new hook useListenerState and move Atomico as peerDependencies

useListenerState

useListenerState aims that the listener is defined as state, example:

import { useListenerState } from "@atomico/hooks/use-listener";

function component() {
  const ref = useRef();
  const myProperty = useListenerState(
    ref,
    "myCustomEvent",
    (event) => event.target.myProperty
  );
  return (
    <host>
      <h1>My property - {myProperty}</h1>
      <web-component ref={ref}></web-component>
    </host>
  );
}

What is useListenerState useful for? It is normal for a webcomponent to emit an event when a property changes, this makes it easier to observe these changes

Atomico as peerDependencies

The objective of this is to avoid atomico as a duplicate package, now it is the responsibility of the developer to maintain the version of use between dependencies

Processes the change of current in the reference for certain hooks

Example useListener, now before the change of current it regenerates the capture of the event.

useFormSubmitter improvement

useFormSubmitter

Add a third argument to the return, this third argument allows the form to be submitted.

const [,, submit] = useFormSubmitter(refForm);

Replace formData Object with the package @uppercod/form-tools.

add useFormSubmitter

useFormSubmitter

It allows the fast submission of forms using Fetch, useFormSubmitter will catch the submit event and send to the destination url.

import { useRef } from "atomico";
import { useFormSubmitter } from "@atomico/hooks/use-form-submitter";

function component() {
  const refForm = useRef();
  const [result, status] = useFormSubmitter(refForm);
  return (
    <host>
      <form ref={refForm} action="/new-post">
        <input type="text" name="title" />
        <input type="text" name="content" />
        <button disabled={status === "pending"}>Submit</button>
      </form>
    </host>
  );
}

useFormSubbmiter accepts a 2 parameter that allows modifying the sending behavior:

• action: define the destination url
• request: Configuration for fetch
• formData: callback, processes the data to be sent by submit.
• submit: callback, send the data to the server.

The behavior of the form can be modified by altering said parameters, below is an example of how to implement supabase to add rows with useFormData.

import { useRef } from "atomico";
import {
  useFormSubmitter,
  formDataToObject,
} from "@atomico/hooks/use-form-submitter";
import { supabase } from "./supabase.js";

function component() {
  const refForm = useRef();

  const [result, status] = useFormSubmitter(refForm, {
    formData: formDataToObject({
      author: "uppercod",
    }),
    async submit(data, { action }) {
      const { data, error } = await supabase.from(action).insert(data);
      if (error) throw error;
      return data;
    },
  });

  return (
    <host>
      <form ref={refForm} action="posts">
        <input type="text" name="title" />
        <input type="text" name="content" />
        <button disabled={status === "pending"}>Submit</button>
      </form>
    </host>
  );
}