# @omegion1npm/quisquam-maiores-provident

> [![Downloads][downloads-badge]][downloads] [![Size][size-badge]][size]

Latest version **1.0.0** (published 2024-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @omegion1npm/quisquam-maiores-provident
pnpm add @omegion1npm/quisquam-maiores-provident
yarn add @omegion1npm/quisquam-maiores-provident
bun add @omegion1npm/quisquam-maiores-provident
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2024-04-25 |
| First published | 2024-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 25 |
| Unpacked size | 18.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | omegion1 |
| Maintainers | ptkhanh1994 |
| Keywords | trim, collection.es6, cli, validate, jsonschema, Reflect.getPrototypeOf, Object.fromEntries, negative, classes, typed array, react pose, ECMAScript 2021, polyfill, ECMAScript 2022, fsevents, create, mixins, 256, take, flag, dotenv, wordwrap, ES2020, Array.prototype.includes, string, nope, fastcopy, ts, BigUint64Array, protocol-buffers, throttle, collection, bundling, Stream, Array.prototype.flatten, Object.assign, npm, styleguide, name, isConcatSpreadable, higher-order, form-validation, compile less, debugger, clone, typedarrays, move, dataView, cors, check, native, pure, terminal, WeakSet, symbols, Array, make, extend, @@toStringTag, weakset, ECMAScript 2017, url, Iterator, querystring, reducer, ECMAScript 2015, typed, lazy, 3d, exec, random, whatwg, babel, dom, es2018, mkdirs, characters, shared, scheme, forms, http, core-js, mkdirp, RFC-6455, launch, apollo, uninstall, es2017, dayjs, drop, structuredClone, setImmediate, properties, date, yup, ava, Array.prototype.findLastIndex, jest, 6to5, spring, deep-clone, AsyncIterator, prefix, compare, monorepo, find-up, rm -rf, enumerable, cache, gdpr, reduce, sham, point-free, 0, key, tty, console, east-asian-width, connect, progress, ECMAScript 5, runtime, middleware, number, packages, JSON-Schema, performant, symlinks, qs, animation, query, codes, matchAll, korean, scheme-validation, macos, find, option, id, auth, ES2018, css, helpers, error, ES2016, ECMAScript 2020, promise, redact, io-ts, _.extend, censor, spec, ES3, web, callbind, eslint, invariant, ReactiveExtensions, jasmine, spinners, stringifier, Observables, extra, equality, linux, zero, parser, escape, names, arguments, ArrayBuffer.prototype.slice, starter, tacit, guid, folder, xhr, gradients css3, module, worker, css variable, arraybuffer, full-width, trimLeft, bluebird, getintrinsic, stream, Uint8ClampedArray, css nesting, fullwidth, Symbol, bind, accessor, read, superagent, configurable, promises, ES2017, hash, object, utility, less css, libphonenumber, tester, mkdir, String.prototype.matchAll, harmony, typedarray, type, commander, write, bootstrap css, every, styled-components, indicator, json, drag, private, setter, toobject, sequence, has, speed, cjk, colour, ie, optimizer, regular expressions, tdd, URLSearchParams, data, WebSocket, rfc4122, three, classnames, ES2019, i18n, CSSStyleDeclaration, spinner, circular, rapid, serialize, exe, readablestream, format, curried, ascii, let, await, width, awesomesauce, channel, -0, redux-toolkit, package, signal, sanitization, internal slot, toSorted, some, phone, nested css, Object, Uint8Array, Rx, forEach, jsonpath, transpile, readable, deterministic, redux, writable, process, ECMAScript 2018, ajax, form, browser, shebang, japanese, assign, rm, Push, throat |

## Links

- npm: https://www.npmjs.com/package/@omegion1npm/quisquam-maiores-provident
- Repository: https://github.com/omegion1npm/quisquam-maiores-provident
- Homepage: https://github.com/omegion1npm/quisquam-maiores-provident/#readme
- Issues: https://github.com/omegion1npm/quisquam-maiores-provident/issues
- npm.io page: https://npm.io/package/@omegion1npm/quisquam-maiores-provident

## Dependencies (25)

- [@omegion1npm/odit-enim-cum-aliquid](https://npm.io/package/@omegion1npm/odit-enim-cum-aliquid.md) ^1.0.0
- [@omegion1npm/quia-non-illo-tempora](https://npm.io/package/@omegion1npm/quia-non-illo-tempora.md) ^1.0.0
- [@omegion1npm/eum-minus-vero-suscipit](https://npm.io/package/@omegion1npm/eum-minus-vero-suscipit.md) ^1.0.0
- [@omegion1npm/neque-quasi-nihil-alias](https://npm.io/package/@omegion1npm/neque-quasi-nihil-alias.md) ^1.0.0
- [@omegion1npm/tempore-quidem-id-eaque](https://npm.io/package/@omegion1npm/tempore-quidem-id-eaque.md) ^1.0.0
- [@omegion1npm/nemo-tempore-cum-voluptas](https://npm.io/package/@omegion1npm/nemo-tempore-cum-voluptas.md) ^1.0.0
- [@omegion1npm/eveniet-ut-illum-veritatis](https://npm.io/package/@omegion1npm/eveniet-ut-illum-veritatis.md) ^1.0.0
- [@omegion1npm/delectus-fuga-libero-facere](https://npm.io/package/@omegion1npm/delectus-fuga-libero-facere.md) ^1.0.0
- [@omegion1npm/minima-odit-natus-accusamus](https://npm.io/package/@omegion1npm/minima-odit-natus-accusamus.md) ^1.0.0
- [@omegion1npm/eligendi-harum-porro-numquam](https://npm.io/package/@omegion1npm/eligendi-harum-porro-numquam.md) ^1.0.0
- [@omegion1npm/id-officiis-expedita-tempora](https://npm.io/package/@omegion1npm/id-officiis-expedita-tempora.md) ^1.0.0
- [@omegion1npm/consequatur-vitae-aperiam-sed](https://npm.io/package/@omegion1npm/consequatur-vitae-aperiam-sed.md) ^1.0.0
- [@omegion1npm/mollitia-dolores-libero-neque](https://npm.io/package/@omegion1npm/mollitia-dolores-libero-neque.md) ^1.0.0
- [@omegion1npm/facere-ullam-excepturi-facilis](https://npm.io/package/@omegion1npm/facere-ullam-excepturi-facilis.md) ^1.0.0
- [@omegion1npm/ab-consequuntur-illum-architecto](https://npm.io/package/@omegion1npm/ab-consequuntur-illum-architecto.md) ^1.0.0
- [@omegion1npm/in-nesciunt-sapiente-praesentium](https://npm.io/package/@omegion1npm/in-nesciunt-sapiente-praesentium.md) ^1.0.0
- [@omegion1npm/itaque-distinctio-eligendi-earum](https://npm.io/package/@omegion1npm/itaque-distinctio-eligendi-earum.md) ^1.0.0
- [@omegion1npm/minima-accusantium-illum-aperiam](https://npm.io/package/@omegion1npm/minima-accusantium-illum-aperiam.md) ^1.0.0
- [@omegion1npm/inventore-quibusdam-impedit-nulla](https://npm.io/package/@omegion1npm/inventore-quibusdam-impedit-nulla.md) ^1.0.0
- [@omegion1npm/explicabo-laborum-asperiores-culpa](https://npm.io/package/@omegion1npm/explicabo-laborum-asperiores-culpa.md) ^1.0.0
- [@omegion1npm/quibusdam-facilis-nesciunt-inventore](https://npm.io/package/@omegion1npm/quibusdam-facilis-nesciunt-inventore.md) ^1.0.0
- [@omegion1npm/harum-laudantium-doloribus-doloremque](https://npm.io/package/@omegion1npm/harum-laudantium-doloribus-doloremque.md) ^1.0.0
- [@omegion1npm/repudiandae-cupiditate-quibusdam-quis](https://npm.io/package/@omegion1npm/repudiandae-cupiditate-quibusdam-quis.md) ^1.0.0
- [@omegion1npm/eveniet-temporibus-dignissimos-temporibus](https://npm.io/package/@omegion1npm/eveniet-temporibus-dignissimos-temporibus.md) ^1.0.0
- [@omegion1npm/distinctio-dignissimos-consequatur-occaecati](https://npm.io/package/@omegion1npm/distinctio-dignissimos-consequatur-occaecati.md) ^1.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2024-04-25

## README

# @omegion1npm/quisquam-maiores-provident

[![Downloads][downloads-badge]][downloads]
[![Size][size-badge]][size]

Async Data Bindings for React

Waitables represent asynchronous functionality that can be observed and controlled in a variety of ways.  Waitables are built on top of Bindings and the concepts in [react-bindings](https://www.npmjs.com/package/react-bindings).

With waitables, we can:

- wait for a value or error to be produced or modified
- re-execute automatically when certain conditions are met, or manually on demand
- prevent execution under certain conditions
- derive values from other synchronously or asynchronously produced values, including from bindings and waitables

## Basic Example

In the following example, we demonstrate creating a waitable function that generates a random value after a 1 second delay.  We also add a button that, when clicked, "hard" resets the waitable.

When a waitable is hard reset, any previous values are cleared and the primary function is re-executed.

We also demonstrate logging and observing changes and using `WaitablesConsumer` to dynamically render content dependent on the waitable's value.

`WaitablesConsumer` supports using different renderers depending on the overall state of the dependencies ("loaded", "loading", or "error").  In the following example, we demonstrate two of the possible state renderer options: "loading" and "loaded" (implicitly represented by the child function).

[Try it Out – CodeSandbox](https://codesandbox.io/s/great-golick-h1z9vu)

```typescript
import React from 'react';
import { useBindingEffect } from 'react-bindings';
import { useWaitableFunction, WaitablesConsumer } from '@omegion1npm/quisquam-maiores-provident';

export const MyComponent = () => {
  const myWaitable = useWaitableFunction(
    async () => {
      // Sleep for 1 second
      await new Promise((resolve) => setTimeout(resolve, 1000));
      // Generate a random 0-99 value
      return { ok: true, value: Math.floor(Math.random() * 100) };
    },
    { id: 'myWaitable' }
  );

  // Getting and logging the value of the waitable.  The value will be undefined because it takes about 1 second to generate since we're
  // sleeping for 1 second in the producer function
  console.log('myWaitable value', myWaitable.value.get()); // myWaitable value undefined

  // Logging the other waitable state information
  console.log('myWaitable error', myWaitable.error.get()); // myWaitable error undefined
  console.log('myWaitable isComplete', myWaitable.isComplete.get()); // myWaitable isComplete false
  // The waitable won't have started execution yet, at least not on the first render of MyComponent
  console.log('myWaitable isBusy', myWaitable.isBusy.get()); // myWaitable isBusy false

  // Registering a callback that will be triggered anytime the value binding changes, while this component is mounted.
  // By default, these calls are debounced.
  useBindingEffect({ value: myWaitable.value }, ({ value }) => {
    console.log('myWaitable value', value);
  });

  const onUpdateClick = () => myWaitable.reset('hard');

  // The rendered component includes a portion that will be automatically rerendered whenever the waitable changes.
  // By default, these rerenders are debounced.
  return (
    <div>
      myWaitable value:&nbsp;
      <WaitablesConsumer dependencies={{ value: myWaitable }} ifLoading={() => 'loading…'}>
        {({ value }) => value}
      </WaitablesConsumer>
      &nbsp;
      <button onClick={onUpdateClick}>Update</button>
    </div>
  );
};
```

Waitables are even more interesting when associated with dynamically loaded content or when they're chained together with other waitables and bindings.

## Another Example

In the following example, we use `fetch` to load data dynamically, setting the value or error of the waitable depending on if the request succeeds or fails.

We also create a second waitable derived from the first waitable and another binding, which we use to choose between rendering the type of the data in all caps or lowercase.

[Try it Out – CodeSandbox](https://codesandbox.io/s/epic-microservice-vmvrdd)

```typescript
import React from 'react';
import { BindingsConsumer, useBinding } from 'react-bindings';
import { useDerivedWaitable, useWaitableFunction, WaitablesConsumer } from '@omegion1npm/quisquam-maiores-provident';

export const MyComponent = () => {
  const myWaitable = useWaitableFunction(
    async () => {
      try {
        const response = await fetch('https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json');
        const data = await response.json();
        if (data !== undefined) {
          return { ok: true, value: data };
        } else {
          return { ok: false, value: { status: response.status } };
        }
      } catch (error) {
        return { ok: false, value: { error } };
      }
    },
    { id: 'myWaitable' }
  );

  const onTryAgainClick = () => myWaitable.reset('hard');

  const allCaps = useBinding(() => false, { id: 'allCaps' });
  const toggleAllCaps = () => allCaps.set(!allCaps.get());

  const myWaitableType = useDerivedWaitable(
    { allCaps, myWaitable },
    ({ allCaps, myWaitable }) => {
      const type: string = typeof myWaitable;
      return allCaps ? type.toLocaleUpperCase() : type.toLocaleLowerCase();
    },
    { id: 'myWaitableType' }
  );

  // The rendered component includes three dynamic portions.
  //
  // The first presents the value of the loaded data as stringified JSON.  If the data isn't loaded yet, it shows a loading message.  If an
  // error has occurred, it shows an error indicator message and a button that lets users retry.
  //
  // The second dynamic portion renders the type of data that was returned, either in all caps or lowercase.
  //
  // The final dynamic portion is the label on the button, which changes to let users know the effect of clicking the button.
  return (
    <>
      <div>
        myWaitable value:&nbsp;
        <WaitablesConsumer
          dependencies={{ value: myWaitable }}
          ifLoading={() => 'loading…'}
          ifError={() => (
            <>
              <span>something went wrong&nbsp;</span>
              <button onClick={onTryAgainClick}>Try Again</button>
            </>
          )}
        >
          {({ value }) => JSON.stringify(value)}
        </WaitablesConsumer>
      </div>
      <div>
        <WaitablesConsumer dependencies={{ type: myWaitableType }}>{({ type }) => <span>&nbsp;({type})</span>}</WaitablesConsumer>
      </div>
      <div>
        <button onClick={toggleAllCaps}>
          <BindingsConsumer bindings={{ allCaps }}>
            {({ allCaps }) => (allCaps ? 'Switch to Lowercase' : 'Switch to Uppercase')}
          </BindingsConsumer>
        </button>
      </div>
    </>
  );
};
```

## Default Value Example

Instead of returning an undefined value by default, your waitables can synchronously or asynchronously compute a more useful default, as
demonstrated in the following example (based on the first example from above):

```typescript
const myWaitable = useWaitableFunction(
  async () => {
    // Sleep for 1 second
    await new Promise((resolve) => setTimeout(resolve, 1000));
    // Generate a random 0-99 value
    return { ok: true, value: Math.floor(Math.random() * 100) };
  },
  { id: 'myWaitable', defaultValue: () => 0 }
);
```

Get creative and consider using waitables with React contexts, inside hooks, and extending them using the `addFields` option.

[API Docs](https://typescript-oss.github.io/@omegion1npm/quisquam-maiores-provident/)

## Thanks

Thanks for checking it out.  Feel free to create issues or otherwise provide feedback.

Be sure to check out our other [TypeScript OSS](https://github.com/TypeScript-OSS) projects as well.

<!-- Definitions -->

[downloads-badge]: https://img.shields.io/npm/dm/@omegion1npm/quisquam-maiores-provident.svg

[downloads]: https://www.npmjs.com/package/@omegion1npm/quisquam-maiores-provident

[size-badge]: https://img.shields.io/bundlephobia/minzip/@omegion1npm/quisquam-maiores-provident.svg

[size]: https://bundlephobia.com/result?p=@omegion1npm/quisquam-maiores-provident

---
_Source: https://npm.io/package/@omegion1npm/quisquam-maiores-provident · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._