add the useHistory hook

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>
}

Now the parameter for useCssLightDom is of type Sheets

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>
}

add the useMediaQuery hook

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>;
}

correctly synchronizes the lists associated to the dynamic slots

3.30.2

correctly synchronizes the lists associated to the dynamic slots

Fix var useHost

3.30.1

fix var

add useProxySlot

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>
  );
}

add the useClickPress hook

The useClickPress hook will allow you to execute a callback with acceleration according to the click time, for example in the input type number we have 2 buttons by default, an up arrow and a down arrow, these allow us to modify the input value, either:

1. Increase the value before a click in a unit.
2. Increase the value by more than one unit according to the click pressure time.

Example

import { useClickPress } from "@atomico/hooks/use-click-press";

function counter() {
  const refButton = useRef();

  const [value, setValue] = useProp("value");

  const increment = () => setValue((value) => value + 1);

  useClickPress(refButton, increment);

  return (
    <host>
      <h1>value: {value}</h1>
      <button ref={refButton}>Increment</button>
    </host>
  );
}

counter.props = { value: { type: Number, value: 0 } };

Api change in hook use-css-light-dom

The purpose of this update is:

1. Simplify CSS injection in the lightDOM.
2. Be consistent in syntax with that provided in ShadowDOM.
3. Reduce the dependencies to inject the CSS in the lightDOM.

import { css } from "atomico";
import { useCssLightDom } from "@atomico/hooks/use-css-light-dom";

const sheet = css`
  :host {
    width: 200px;
    height: 200px;
    background: black;
  }
`;

function component() {
  useCssLightDom(sheet);
  return <host></host>;
}

Prefer the use of css in shadowDOM, as this hook does not achieve absolute scope.

Add new hook useUniqueIdSelector

the useUniqueIdSelector hook creates a unique id on mount, ideal for creating selectors exposed in the lightDOM, example:

import { useUniqueIdSelector } from "@atomico/hooks/use-unique-id-selector";

function component() {
  const selectorId = useUniqueIdSelector();

  return (
    <host>
      <input id={selectorId} />
      <style>{`${selectorId}{ background: black }`}</style>
    </host>
  );
}

fix useReflectEvent

The bug was the emission of 2 events if the destination target was heard, the way of capturing is corrected and thus avoiding a double emission of the event in the destination target.