Support createAsyncCallback in play function

[Peter Chen]

Hello bros, thanks for creating this great repo.

I met a problem that I want to run the loki after the play function. To show the target tooltip.

I think it's nice if we support this function in play funciton.

the createAsyncCallback can only be called in component itself. It's a bit invasive method

[Leonardo Guarnieri de Bastiani]

Related to #133

[Peter Chen]

I thinks this is not relative.. The logic is js controlled. So the pesudo plugin will not work

it just work in css level

[Leonardo Guarnieri de Bastiani]

Comparing to this snippet #359 (comment)
I see a difference here

const asyncCallback = createAsyncCallback();
// ...
finally {
  asyncCallback();
}

I think you need another call after it has been created in your code snippet

[Peter Chen]

Comparing to this snippet #359 (comment) I see a difference here

const asyncCallback = createAsyncCallback();
// ...
finally {
  asyncCallback();
}

I think you need another call after it has been created in your code snippet

ohhhh thx for your help. I will have a try tomorrow!

[Peter Chen]

@leobastiani thx bro, but I tried to call asyncCallback function like the snippet. I got this error, it seems the promise is not be solved properly..

[Peter Chen]

    await userEvent.hover(group);

I think the loki currently not support the await test function. It back to work after I remove this line

[Peter Chen]

@oblador Hello boss, could you please have I look 👀

[Leonardo Guarnieri de Bastiani]

I hope I give you a clue saying that I managed to make it work after applying this comment #359 (comment)

I'm also using await canvas.findByText(...) and await userEvent.hover(...) like you are trying

[Peter Chen]

I hope I give you a clue saying that I managed to make it work after applying this comment #359 (comment)

I'm also using await canvas.findByText(...) and await userEvent.hover(...) like you are trying

ohhh thx, I got the meaning. I'll have a try tommorow!

[Leonardo Guarnieri de Bastiani]

Try to create and share here a demo repo reproducing this issue if you wish ❤️

[Peter Chen]

That's my implementation, if it helps:

import createAsyncCallback from '@loki/create-async-callback';
import isLokiRunning from '@loki/is-loki-running';

const waitForDocumentLoaded = () => {
  if (document.readyState === 'loading') {
    return new Promise<void>((resolve) => {
      document.addEventListener('DOMContentLoaded', () => resolve());
    });
  }

  return Promise.resolve();
};

const enablePointerEvents = () => {
  const styleElement = document.createElement('style');

  document.documentElement.appendChild(styleElement);
  styleElement.sheet?.insertRule('* {pointer-events: auto !important}');
};

type Params = {
  canvasElement: HTMLElement;
};

export const decoratePlayFunctionForLoki =
  <T extends (params: Params) => Promise<void>>(target: T) =>
  async (context: Params) => {
    const lokiRunning = isLokiRunning();
    const asyncCallback = createAsyncCallback();

    if (lokiRunning) {
      await waitForDocumentLoaded();

      enablePointerEvents();
    }

    try {
      await target(context);
    } finally {
      asyncCallback();
    }
  };

and use it like this in stories.tsx

  play: decoratePlayFunctionForLoki(async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    const group = canvas.getByText('G');

    await userEvent.hover(group);
  }),