open-index/open-npm huggingface dataset:
npm package: @mjkhonline/e-query
Description: an easy and effortless API calls manager to reduce and optimize your API calls, on the client.
Author: Mohammad Javad Khademian
Latest version: 0.1.0-beta.1

<h1 align="center" >
<img src="https://raw.githubusercontent.com/mjkhonline/e-query/main/docs/public/logo.png" width="100" height="100" alt="e-query logo" />
<br />
E-Query
</h1>

<p align="center">an easy and effortless API calls manager to reduce and optimize your API calls, on the client</p>

***

Visit [E-Query Docs](https://e-query.js.org/) for detailed instructions.

## 💡 What is E-Query?

E-Query is a library for managing API calls in your client application. It's written in TypeScript, and it's fully typed. It's also framework-agnostic, so you can use it with Vue, React, Angular, Svelte, Next, Nuxt, or even vanilla JavaScript.

### ✅ What it can do?

✔️ manage API calls

✔️ prevent unnecessary fetch

✔️ optimise & improve performance

✔️ retry calls on error

✔️ deactivate call on window hidden

✔️ refetch on window refocus

✔️ make different instances

✔️ customizable

✔️ get API call status

### 🤔 What E-Query is not?

It's not a state management library, it's not a data fetching library, and it's not a caching library. And it has no opinion about how you manage them.

## Installation
Use npm or yarn to add e-query to your project.

```npm
npm i @mjkhonline/e-query
```

```yarn
yarn add @mjkhonline/e-query
```

## Usage
Import eQuery and create an instance of it. Pass in your default options to the constructor.
You can find the list of all available options [here](https://e-query.js.org/options.html).

```js
import eQuery from '@mjkhonline/e-query'

const eq = new eQuery({
  // pass instance level options
  staleTime: 30 * 1000 // 30 seconds  
})
```

Then wrap your API calls with `useQuery`. This invokes your API call's function and returns the promise returned by it.

```js
eq.useQuery('your-query-key',
    () => fetch('https://example.com/somedata'),
    { // query level options
      staleTime: 60 * 1000, // 1 minute
      deactivateOnWindowHidden: true  
    }
)
```

use `getQuery` to inquire about the status of your API call.
You can find the list of all available exposed data [here](https://e-query.js.org/get-query.html#exposed-data).

```js
const { isLoading, isFailed, fetchedAt } = eq.getQuery('your-query-key')
```

## Documentation

[e-query.js.org](https://e-query.js.org/)

## License

[MIT](http://opensource.org/licenses/MIT)
npm package: @mjl-/tuit
Description: typed ui toolkit for the web
Author: Mechiel Lukkien
Latest version: 0.0.4

# Tuit

NOTE: *experimental*. subject to change. a lot.

Tuit is an experimental typescript ui toolkit library. The goal is
a UI toolkit helps you create applications that are small, fast,
reliable and easy to develop, specially the aim is to prevent whole
classes of programming errors by extensively using the typing support
provided by typescript.

Concepts that make it different from the popular frameworks:

- Use typescript as possible, including for styling. No need for
  CSS (or processors), HTML or special DSLs and their compilers. Use
  typesafety to prevent bugs.
- No virtual DOM and diffing. You create classes that manage their
  own DOM and typically export one root DOM element. This probably
  means a bit more work for you as programmer, but does prevent
  unwanted surprises.
- Provide user-friendly user interfaces: Use transition animations
  to show data is being loaded (first a slow fade out, then quick
  fade in when content is ready, if it takes too long a loader with
  cancel-button is shown). On failure to load, show an error message
  and give user the option to retry. This is all provided by duit.
- Use modern browser layout engine techniques like flex to render
  UI "widgets", especially nested scrollable UI elements.
- Store UI state in the URL (hash) so URL sharing, page refreshes
  and standard browser back/forward buttons work as expected.

Tuit only works in the major evergreen browsers.


## Todo

- make a quickstart app to show how to use this.
- list: mention there are no items if that's the case
- list: remember the UI's that were created. need to invalidate on change of the object.
- find a way to make this somewhat responsive. eg splits turning vertical and fixed-size when below certain screen width. turn lists of items into tables when the space allows.
- implement date-picker
- more standard components. tables, with search, file uploads, quick forms, etc. look at bootstrap, semantic-ui and material design for inspiration.
- turn more components into ts ui? like button.
- more demo's. like a mail client, sql client.
- show proper errors on invalid forms, eg missing required fields.
- add possibility to add form validation function that results in clear error messages.
- expand form fields with help explanation.
- think about how to use icons. web fonts are nice but too big. can we convert font to something in js? eg svg, or drawn on canvas. then we need a build tool that generates the file with just what we need, and we include that in the ts build.
- :hover pseudostyles get recreated many times
- add disabled style for buttons
- use typescripts strictBindCallApply
- make another test app and see how hard this is to use, and especially how much the types actually help you.
- figure out how to do icons. svg? colors? ideally in a dynamically loaded js?