open-index/open-npm huggingface dataset:
npm package: @richard-better/tsup
Description: Bundle your TypeScript library with no config, powered by esbuild
Author: EGOIST
Latest version: 6.7.0

# tsup

[![npm version](https://badgen.net/npm/v/tsup)](https://npm.im/tsup) [![npm downloads](https://badgen.net/npm/dm/tsup)](https://npm.im/tsup)

Bundle your TypeScript library with no config, powered by [esbuild](https://github.com/evanw/esbuild).

## 👀 What can it bundle?

Anything that's supported by Node.js natively, namely `.js`, `.json`, `.mjs`. And TypeScript `.ts`, `.tsx`. [CSS support is experimental](https://tsup.egoist.dev/#css-support).

## ⚙️ Install

Install it locally in your project folder:

```bash
npm i tsup -D
# Or Yarn
yarn add tsup --dev
```

You can also install it globally but it's not recommended.

## 📖 Usage

### Bundle files

```bash
tsup [...files]
```

Files are written into `./dist`.

You can bundle multiple files in one go:

```bash
tsup src/index.ts src/cli.ts
```

This will output `dist/index.js` and `dist/cli.js`.

## 📚 Documentation

For complete usages, please dive into the [docs](https://tsup.egoist.dev).

For all configuration options, please see [the API docs](https://paka.dev/npm/tsup#module-index-export-Options).

## 💬 Discussions

Head over to the [discussions](https://github.com/egoist/tsup/discussions) to share your ideas.

## Sponsors


<p align="center">
  <a href="https://chromatic.com" target="_blank"><picture>
  <source media="(prefers-color-scheme: dark)" width="500" srcset="https://fastly.jsdelivr.net/gh/egoist-bot/images@main/uPic/Group 2 (2).png">
  <img alt="Ship UIs faster with automated workflows for Storybook"  width="500" src="https://fastly.jsdelivr.net/gh/egoist-bot/images@main/uPic/Group%202%20(1).png">
</picture></a>
</p>

<p align="center">
<a href="https://github.com/sponsors/egoist" target="_blank"><img src="https://sponsors-images.egoist.dev/sponsors.svg" alt="sponsors"></a>
</p>

## Project Stats

![Alt](https://repobeats.axiom.co/api/embed/4ef361ec8445b33c2dab451e1d23784015834c72.svg 'Repobeats analytics image')

## License

MIT &copy; [EGOIST](https://github.com/sponsors/egoist)
npm package: @richard-wang-tw/use-task
Description: This is a customized react hook that makes it easy to combine task(lazy promise) with react suspense
Author: richard-wang-tw
Latest version: 1.0.2

# Introduction

With `useTask`, you can combine `task` with react `<Suspense>`

## What is `Task` ?

```ts
type Task = <A>() => Promise<A>;
```

> `Task<A>` represents an asynchronous computation that yields a value of type `A` and never fails.

## What is `<Suspense>` ?

> `<Suspense>` lets you display a fallback until its children have finished loading.

# Getting Started

## useTask

### Create a task

```tsx
const getTitle = () => new Promise<string>((rs) => rs("Hello"));
const Title = () => {
  return <h1>title</h1>;
};
```

### Add useTask hook in the component

```tsx
import { useTask } from "@richard-wang-tw/use-task";
const Title = () => {
  // the first argument is task
  // the second is unique id of the task
  const title = useTask(getTitle, "getTitle");
  return <h1>{title}</h1>;
};
```

### Wrap the component with `<suspense>`

```tsx
const TitleLoader = () => (
  <Suspense fallback={<h1>Loading</h1>}>
    <Title />
  </Suspense>
);
```

## deleteTaskCache

You can use `deleteTaskCache("getTitle")` on timeout or triggered by user interaction.

This feature allow you to reload data on next render.

# Reference

- [task](https://gcanti.github.io/fp-ts/modules/Task.ts.html)
- [suspense](https://react.dev/reference/react/Suspense)