hiroki0525 / idle-task Goto Github PK

404🙀
https://hiroki0525.github.io/idle-task/

Summary

You don't have to manage caches manually.
Here is an example.

const yourFunction = () => console.log('yourFunction');

// Before
// set `{ cache: false }` because the result isn't needed
setIdleTask(yourFunction, { cache: false });

// After
// this will remove the cache automatically
setIdleTask(yourFunction);

What is the problem?

We must manage caches manually as belows.

// example1
configureIdleTask({ cache: false });

// example2
setIdleTask(yourFunction, { cache: false })

// example3
const taskId = setIdleTask(yourFunction);
const result1 = await forceRunIdleTask(taskId);
const result2 = await forceRunIdleTask(taskId, {
    cache: false,
});

This disgust us.
Ideally, the cache would be deleted when it's no longer needed.

Why is this problem happening?

This is because idle-task is using Map to cache results.

// Map.set(taskId, result);
const taskId = setIdleTask(yourFunction);
// Map.delete(taskId, result);
const result = await forceRunIdleTask(taskId, {
    cache: false,
});

What is the solution?

idle-task will use WeakMap instead of Map .

// taskKey is `Object` because the key of `WeakMap` must be `Object` .
// WeakMap.set(taskKey, result);
let taskKey = setIdleTask(yourFunction);
const result = await forceRunIdleTask(taskId);
// The cached result will be remove automatically because of garbage collection.
taskKey = null;

• #56
• #61
• Add Migration Guide

There are some common cases like

• A mobile menu to be initiated and used when user click on the button
• A search JS overlay need to be initiated and when user input the search, it will start interact with users immediately

I'm looking a way to optimize some UI JS for those and found this together with
https://github.com/GoogleChromeLabs/idlize

Both are nice idea and exactly what I'm approaching. However in both cases, I can not see an interface API which allow to do these when CPU is idle while allow the initialization can be triggered immediately if users interact (and it was not initiated).

Do you have any idea? @hiroki0525 @yuchi @joeinnes @m5r

Summary

timeoutStrategy is forceRun as default.
Here is an example.

configureIdleTask({ timeout: 3000 });
const taskKey = setIdleTask(yourFunction);

// Before
// After 3000 ms,  `idle-task` will throw Error if the task has not been run when the browser is idle.
try {
  const result = await waitForIdleTask(taskKey);
} catch (e) {
  // error handling
}

// After
// After 3000 ms,  `idle-task` will execute the task if it has not been run when the browser is idle.
const result = await waitForIdleTask(taskKey);

What is the problem?

I think that everyone sets forceRun option in most cases.
Here is an example of React.lazy .

import { getResultFromIdleTask, configureIdleTask } from 'idle-task';
import { lazy } from 'react';

configureIdleTask({ timeout: 3000 });

// Wrap `React.lazy`
const lazyWhenIdle = (factory: Parameters<typeof lazy>[0]) => {
  const idleTaskPromise = getResultFromIdleTask(factory);
  return lazy(() => idleTaskPromise);
}

// Problem: It maybe will throw Error.
const YourComponent = lazyWhenIdle(() => import('~/components/YourComponent'));

In this case, It will be solved like belows.

configureIdleTask({ timeout: 3000, timeoutStrategy: 'forceRun' });
// or
const idleTaskPromise = getResultFromIdleTask(factory, { timeoutStrategy: 'forceRun' });

But this disgust us.
Ideally, timeoutStrategy is forceRun as default.

Why is this problem happening?

This is because timeoutStrategy is error as default.

// `timeoutStrategy` is `error`
configureIdleTask({ timeout: 3000 });

What is the solution?

timeoutStrategy will be forceRun instead of error as default.

// `timeoutStrategy` is `forceRun`
configureIdleTask({ timeout: 3000 });

This project uses semantic-release to release, so it is import to add commit message correctly.

To know everyone this, I should add contributing guideline and ci for test that checks commit message.

Hi 👋

TLDR: Does it run in inactive tab?

I'm looking for a solution to the following problem:

Before closing a tab, I need to send an API request from the browser to server to the make a graceful teardown of resources allocated on the server side for the specific browser tab.
I used beforeunload event for that, but this event doesn't emit when the user closes the tab when they are on another tab.
The solution that comes to my mind is to implement some kind of periodic heartbeat from browser to server.

My first thought was to implement it using Web Workers running in the background. After a bit more thinking on this option, it looks like it won't solve my problem.

I wonder, can this library help me to solve my task?

I'm not familiar with the requestIdleCallback browser API.