How to pass custom data to expression to evaluate it with a custom "context"?

[gremo]

I've a custom directive named idle. My directive is calling evaluate() when user is either idle or active (interacting with the page).

The problem is that, right now, I'm using the a "trick" to negate ther expression of x-idle:

<div x-data="{ idle: true }" x-idle="idle = !idle" x-text="idle"></div>

It would be good to pass the current state (idle or active) to the evauator. Or, put it in other words, how a directive can interact with the data, or what's the best solution in this case?

/**
 * @param {import('alpinejs').Alpine} Alpine
 */
export default function (Alpine) {
  const events = ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel'];

  Alpine.directive('idle', (el, { expression, modifiers }, { evaluateLater, cleanup }) => {
    const evaluate = evaluateLater(expression);
    const ms = getTimeout(modifiers);

    let isIdle = true;

    let timeout = setTimeout(() => {
      isIdle = true;
    }, ms);

    const onEvent = () => {
      if (isIdle) {
        evaluate(); // User is back here
      }

      isIdle = false;
      clearTimeout(timeout);

      timeout = setTimeout(() => {
        evaluate(); // User is idle here
        isIdle = true;
      }, ms);
    };

    const onVisibility = (event) => {
      if (!document.hidden) {
        onEvent(event);
      }
    };

    events.forEach((event) => {
      window.addEventListener(event, onEvent);
    });
    document.addEventListener('visibilitychange', onVisibility);

    cleanup(() => {
      clearTimeout(timeout);
      events.forEach((event) => {
        window.removeEventListener(event, onEvent);
      });
      document.removeEventListener('visibilitychange', onVisibility);
    });
  });

  function getTimeout(modifiers) {
    if (!modifiers.includes('timeout')) {
      return 3000;
    }

    const timeout = modifiers[modifiers.indexOf('timeout') + 1];

    return Number(timeout);
  }
}

[ekwoka]

The second argument to Evaluatelater.

Oh your title isn't asking the same thing as the post

You can just do Alpine.$data(el) to access the datastack.

What I think you want is just for the user to pass the key to the thing to modify, like how x-model works.

So they could do, in your example x-idle="idle"

And you take that and make a setter method like just

const evaluateGet = evaluateLater(expression)
const getIdle = () => {
  let result;
  evaluateGet(val => result = val)
  return result
}

const evaluateSet = evaluateLater(`${expression} = $idle`)
const setIdle = (val) => evaluateSet(()=>{}, { $idle: value })

Then just call that

setTimeout(() => setIdle(true), 1000)