# frame-q

> browsers frame design tool - task scheduler

Latest version **1.0.0** (published 2020-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install frame-q
pnpm add frame-q
yarn add frame-q
bun add frame-q
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-01-21 |
| First published | 2020-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >= 0.4.0 |
| Dependencies | 0 |
| Unpacked size | 27.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pawel Przezwanski |
| Maintainers | pprzezwanski |
| Keywords | event loop, frame, requestAnimationFrame, raf, scheduler, async |

## Links

- npm: https://www.npmjs.com/package/frame-q
- npm.io page: https://npm.io/package/frame-q

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-01-21

## README

# frame-q · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/pprzezwanski/frame-q/blob/master/LICENSE)

Promise based task scheduler that prevents overlapping of main tasks with microtasks and animation tasks and thus giving precise controll over the frame. Its 'add' method returns a promise that will resolve when the tasks reaches its turn in the tasks que. The return value of that task function is resolve value of the promise and if function returns a promise it will be resolve value. This hack lets comfortably redirect microtasks to requestAnimationFrame que.

[See living example on ho-gi.com](http://ho-gi.com).

## Easily helps preveting reflows

## Really simple yet powerfull API:

* **.add method:** fq.add(function) covers almost all cases with its few powerfull options, like 'frameEnd', 'frameStart' and 'priority'
* **.wait method:** fq.wait(milliseconds) is substitute for setTimeout.
* **.addAnimation:** fq.addAnimation(function) is shortcut for .add with priority 'animation'

## Installation

```
$ npm install frame-q
```

## Usage 

```javascript
import fq from frame-q;

// to deal with reflows:

fq.add(() => {
  const el = document.querySelector('.el');
  return el.getBoundingClientRect();
}, frameEnd: true).then(rect = fq.add(() => {
  doSmth(rect);
}))
  
// to deal with microtasks: 
  
fq.add(() => {
  do smth;
  return another;
})
  .then(() => fq.add(() => somePromise))
  .then(() => fq.add(() => {
    do smthElse;
    return yetAnotherPromise
  }))
  .then(() => fq.add(() => {
    do smthFinal;
  }))

```


## Documentation

Not ready yet.

## Contributing

frame-q for sure needs more development and any suggestions including pull-requests are more than wellcome.

## Inspiration

Frame-q was inspired by sob.js but is significantly different in almost every detail

## License

Frame-q is [MIT licensed](./LICENSE).
Copyright (c) 2018-2019 Pawel Przezwanski <[http://ho-gi.com/](http://ho-gi.com/)>

---
_Source: https://npm.io/package/frame-q · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._