Update dependency @atomico/hooks to v4

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@atomico/hooks (source)	^3.29.0 -> ^4.0.0

---

Release Notes

atomicojs/hooks (@​atomico/hooks)

v4.4.1

Compare Source

v4.4.0: @​atomico/[email protected]

Compare Source

Add a second parameter to useRouter with the intention of regenerating the hook's return.

v4.3.0: @​atomico/[email protected]

Compare Source

@​atomico/use-router@​1.1.0

Now this hook is simpler, it only exposes the following utilities as a module:

1. useRouter: hook for routing
2. redirect: callback for redirecting
3. getPath: callback for getting the path from useRouter

Example of useRouter

const { id, result, path, params, redirect } = useRouter<string>({
	"/": () => "home",
	"/config": () => "config",
});

1. id: path from location.
2. result: return of the callback.
3. params: parameters of the callback.
4. redirect: equivalent to redirect from the module.

v4.2.0: @​atomico/[email protected]

Compare Source

In this version, the useRefValues hook is removed in favor of Atomico's core hook useRefEffect, as it serves the same purpose. This has required updating packages that depended on this hook at the monorepo level.

v4.1.2: Fix: MIT OSS license added

Compare Source

v4.1.1: fix useRefMutationObserver when using references without current

Compare Source

v4.1.0: Support from [email protected]

Compare Source

[!WARNING]
only compatible with versions equal to or greater than [email protected]

@​atomico/use-mutation-observer

1. useMutationObserver no necesita referencia y observa el host.
2. useRefMutationObserver permite asociar una referencia.

@​atomico/use-child-nodes

Es agregado, pero ahora este por defecto observa los niños con useMutationObserver

@​atomico/use-disabled

Actualiza al formato actual de @​atomico/use-mutation-observer

@​atomico/use-render

Simplifica su codigo.

@​atomico/use-parent

Permite capturar por string e instancias.

v4.0.1: fix useSlot version

Compare Source

v4.0.0: 🚀 Say hello to @​atomico/hooks@4, Improvements for better maintenance.

Compare Source

Maintenance improvement

starting from version 4, @​atomico/hooks will be managed as a monorepo. This is done with the aim of:

1. Improving the consumption of these hooks, allowing developers to select the version of the hook to use in their project.
2. Including new hooks more quickly, as they won't break the usage of the @​atomico/hooks package by default. Developers can roll back or update on a per-hook basis rather than for all hooks.

This version breaks some hooks from version 3, such as:

Removed Hooks

1. use-async-effect: Prefer using Atomico's asynchronous API.
2. use-channel: Prefer the core of Atomico, which already has APIs for working with contexts.
3. use-child-nodes: Prefer the useSlot hook, as use-child-node is inaccurate if multiple renders occur on the same web component.
4. use-controller: Prefer Atomico's hooks API (can be reintegrated upon community request; feel free to request it via issue).
5. use-css: Prefer Atomico's core API for handling CSS.
6. use-dollars: Prefer the approach of using slots as templates.
7. use-queue-task: Unused (can be reintegrated upon community request; feel free to request it via issue).
8. use-unique-id-selector: Prefer useId from the core of Atomico.
9. use-script: Prefer using Atomico's asynchronous API.

Renamed Hooks

1. use-history = use-value-history: Facilitates understanding of cumulative values between renders.

---

Message from the author @​UpperCod

We'll be attentive to your experience with this new version of Atomico and @​atomico/hooks. If you have any feedback or questions, feel free to share them. Happy coding!

v3.50.4: Fix default export and use-router types

Compare Source

Issue: https://github.com/atomicojs/hooks/issues/13

This version fixes the use of @​atomico/hooks in webpack

v3.50.3: Fix types

Compare Source

Resolved: Reference to TS compilation error

node_modules/@​atomico/hooks/dist/use-ref-values/use-ref-values.d.ts(7,106): error TS1385: Function type notation must be parenthesized when used in a union type.

v3.50.2: Fixes the dependency on dollars.js.

Compare Source

The dollars.js dependency must be installed if you want to use the useDollars hook

v3.50.1: Fixes lost dependencies.

Compare Source

v3.50.0: New version 🚀, compatible with NodeNext🎉

Compare Source

The next version has improvements thanks to @​Saul-Mirone. Now, the version of @atomico/[email protected] supports:

1. NodeNext at the TypeScript level.
2. Centralization of hooks under the path @atomico/hooks, This seeks to approximate part of the approach of version 4 that considers a monorepo structure

v3.49.1: Fix useSlot

Compare Source

Correctly regenerates the reference

v3.49.0: update only for [email protected]

Compare Source

v3.48.0: Improved typing for useSlot and useProxySlot

Compare Source

Atomico components do not require the use of InstanceType for useSlot and useProxySlot

Before

const myElements = useSlot<InstanceType<typeof MyElement>>(ref);

After

const myElements = useSlot<typeof MyElement>(ref);

v3.47.0: new parameter for useSlot

Compare Source

useSlot

useSlot is a really useful hook since it allows us to capture the ChildNodes associated with the slot, sometimes we filter these nodes on the return of this hook, to improve the performance of useSlot we have added a second parameter that will only be called if the slots change, this second parameter has the purpose of filtering the ChildNodes, example:

const InputElements = useSlot<HTMLInputElement>(refSlot, (node)=>node instanceof HTMLInputElement );

v3.46.1: fix for export types for TS

Compare Source

The Ts configuration had ignored subpaths to generate class type declarations.

v3.46.0: add useDragResize hook

Compare Source

useDragResize

allows to capture the drag and drop of an element in order to execute its resizing, the return of X and Y corresponds to the percentage of the cartesian quadrant coordinate 4, (0...1, 0...1)

Module

import { useDragResize } from "@​atomico/hooks/use-drag-resize";

Syntax

const ref = useRef();
const optionalInitialState= [ 1, 1]; // X, Y;
const [ isDragging, Xcoordinate, Ycoordinate ] = useDragResize(ref,optionalInitialState);

v3.45.0: Resets the coordinate to the observed frequency

Compare Source

This modification alters the return of x and y, depending on the reference to be observed as a container.

v3.44.0: Update @​atomico/exports and add use-parallax

Compare Source

Update @​atomico/exports

Before the @​atomico/exports configuration did not generate compilation of the files, since the code of atomico/hooks was only JS, now the compilation step has been added to allow the use of TS, this does not generate side effects if your project export the hooks according to the package.json#exports.

use-parallax

returns the mouse coordinates based on a 4 quadrant cartesian plane, this allows to achieve mouse position sensitive effects, this hook is optimized to work only if the hook is intercepted.

const { x, y } = useParallax(refHost);

where:

1. refHost: reference to the container to observe the movement of the mouse
2. { x, y }: coordinates, from 0 to 1 according to the location of the Cartesian quadrant

v3.43.1: fix use-responsive-state allowing regenerate state

Compare Source

v3.43.0: enhancement for useRedirect

Compare Source

Now the target attribute, allows useRedirect to ignore the redirect.

v3.42.2: Fix ts spread types

Compare Source

v3.42.1: Fixes the time to observe the resizing of references

Compare Source

v3.42.0: Add third parameter for useRefValues

Compare Source

this parameter moves the effect from the useLayoutEffect cycle to the useEffect cycle.

Example

useRefValues(ref,()=>{
// I run in the useEffect cycle
},true);

v3.41.0: add the useRefIntersectionObserver hook

Compare Source

https://atomico.gitbook.io/doc/atomico/atomico-hooks/use-intersection-observer

v3.40.0: improve the useResponsiveState and useResizeState api

Compare Source

template string mode

useResponsiveState

this hook watches the media query

const value = useResponsiveState`
    default value,
    ${768} 768px
    ${1080} 1080px
`;

useResizeState

this hook observes the width of the webcomponent

const value = useResizeState`
    default value,
    ${768} 768px
    ${1080} 1080px
`;

v3.39.0

Compare Source

Changes

1. Update the version of Atomico : "atomico": "^1.58.0", avoid updating no you are not working with a version equal to or greater than the commented one.
2. add hook useRefValue https://atomico.gitbook.io/doc/atomico/atomico-hooks/use-ref-values

v3.38.0: Add modes for useDebounceState

Compare Source

useDebounceState

Example mode timeout

default mode based on setTimeout

const ms = 100;
const initialState = {};
useDebounceState( ms , initialState,);

Example mode fps

mode based on requestAnimationFrame

const fps = 1;
const initialState = {};
useDebounceState( fps , initialState, "fps");

Example mode idle

mode based on requestIdleCallback

const timeout = 1;
const initialState = {};
useDebounceState( timeout, initialState, "idle");

v3.37.0: Use render now check if it is in ssr mode

Compare Source

this does not break the above code, but if you want to disable useRender in ssr mode, you must have a version of Atomico greater than or equal to 1.56.0

v3.36.2: Fix peerDependencies of subpackages

Compare Source

v3.36.1: Fix the import of the sub package.json

Compare Source

v3.36.0: new hooks useScript and useAttributes

Compare Source

useScript

const src = "https://code.jquery.com/jquery-3.6.0.min.js";
cons done = ()=> console.log( $ );
const status = useScript(src, done);

where:

1. src: javascript type resource to inject into document.head
2. done: optional , callback when called at the end of the script load
3. status: script load status

useAttributes

const attrs = useAttributes();

Where:

1. attrs: all the attributes defined on the webcomponent but that are not props, to facilitate reading this hook transforms the index to camelCase

v3.35.1: fix null for usePropProxy

Compare Source

v3.35.0: add the usePropProxy hook

Compare Source

usePropProxy

create a proxy as setter and getter on a property associated to the webcomponent instance

this is useful for communicating values from references or watching for mutations before updates

Example

usePropProxy("value",{
    get: ()=> refInput.current?.value
    set: (value)=> refInput.current.value = value
})

v3.34.0: internal enhancement of useCssLightDom

Compare Source

add dependency @​atomico/design-tokens to extend support to firefox and safari

v3.33.6: fix the error by unmounting the style tag

Compare Source

v3.33.5: Fix type usePromise

Compare Source

v3.33.4: fix useHistory, useRouter and useReflectEvent

Compare Source

useHistory: remove the use of Array.at.
useRouter: fix use of composite, to prevent events from nested shadow dom.
useReflectEvent: improves the analysis of reflect events.

v3.33.3: Fix the listener in the useClickCoordinates hook

Compare Source

v3.33.2: fix type of useRedirect

Compare Source

v3.33.1: fix useHistory

Compare Source

v3.33.0: add the useHistory hook

Compare Source

useHistory

stores the first parameter in a list, to keep a history of the values between renders

Example

import { useHistory } from "@​atomico/hooks/use-history";

function component({ value }){
    const history = useHistory( value );

    return <host>
        current: {history.at(-1)}
        previous: {history.at(-2)}
    </host>
}

v3.32.0: Now the parameter for useCssLightDom is of type Sheets

Compare Source

This aligns the behavior of Atomico style sheets from shadowDOM to LightDOM

Example

const sheets = [
    css`:host{color: black}`,
    css`:host{color: orange}`,
];

function component(){
    useCssLightDom(sheets);

    return <host></host>
}

v3.31.0: add the useMediaQuery hook

Compare Source

useMediaQuery

Listen and set the state of a media query expression.

Example

import { useMediaQuery } from "@​atomico/hooks/use-media-query";

function component(){
    const small = useMediaQuery("(max-width: 520px)");

    return <host>{small? "view small": "view large"}</host>;
}

v3.30.2: correctly synchronizes the lists associated to the dynamic slots

Compare Source

v3.30.1: Fix var useHost

Compare Source

v3.30.0: add useProxySlot

Compare Source

useProxySlot

useProxySlot allows you to observe the nodes assigned to a slot and reassign them to another slot dynamically, example:

Input: Suppose we have a component that observe the slot[name="slide"] node

<my-component>
    <img slot="slide" src="slide-1"/>
    <img slot="slide" src="slide-1"/>
    <img slot="slide" src="slide-1"/>
</my-component>

output: thanks to useProxySlot you will be able to modify the assignment of the list nodes without losing the nodes in the process as normally happens with useSlot, example:

<my-component>
    <img slot="slide-1" src="slide-1"/>
    <img slot="slide-2" src="slide-1"/>
    <img slot="slide-3" src="slide-1"/>
</my-component>

Syntax and example

import { useRef } from "atomico";
import { useProxySlot } from "@​atomico/hooks/use-slot";

function component() {
  const ref = useRef();
  const children = useProxySlot(ref);

  return (
    <host shadowDom>
      <slot name="slide" ref={ref} />
      {children.map((child, index) => (
        <slot name={(child.slot = "slide-" + index)} />
      ))}
    </host>
  );
}

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.