Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/r17x/fetch.macro

Allows you to build fetcher function by URL at compile-time.
https://github.com/r17x/fetch.macro

babel-plugin babel-plugin-macros create-react-app fetch hacktoberfest javascript nextjs swc-plugin vite-plugin webpack

Last synced: 3 days ago
JSON representation

Allows you to build fetcher function by URL at compile-time.

Host: GitHub
URL: https://github.com/r17x/fetch.macro
Owner: r17x
License: mit
Created: 2022-09-07T21:48:16.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-10-28T02:12:27.000Z (7 days ago)
Last Synced: 2024-10-28T06:06:06.475Z (7 days ago)
Topics: babel-plugin, babel-plugin-macros, create-react-app, fetch, hacktoberfest, javascript, nextjs, swc-plugin, vite-plugin, webpack
Language: Nix
Homepage:
Size: 3.06 MB
Stars: 31
Watchers: 2
Forks: 9
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        


fetch.macro

Allows you to build fetcher function by URL at compile-time.


`f("/api/ping")`

↓ ↓ ↓ ↓ ↓ ↓

`(opts) => fetch("/api/ping", opts)`



  Usage  • 

  API  • 

  Contributors 





---



[![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/r17x/fetch.macro/release/main)](https://github.com/r17x/fetch.macro/actions/workflows/release.yml?query=branch%3Amain+)

[![Codecov branch](https://img.shields.io/codecov/c/github/r17x/fetch.macro/main)](https://app.codecov.io/gh/r17x/fetch.macro)

[![npm](https://img.shields.io/npm/v/fetch.macro)](https://www.npmjs.com/package/fetch.macro/v/latest)

[![npm downloads](https://img.shields.io/npm/dw/fetch.macro)](https://www.npmjs.com/package/fetch.macro/v/latest)

[![License](https://img.shields.io/github/license/r17x/fetch.macro)](https://github.com/r17x/fetch.macro/blob/main/LICENSE)

[![GitHub contributors (via allcontributors.org)](https://img.shields.io/github/all-contributors/r17x/fetch.macro/main)](https://github.com/r17x/fetch.macro#contributors)



## Usage

[\[Back to the Table of Contents\] ↑](#toc)

Simply install and configure [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros) and then use `fetch.macro`.

> Some project that build with `create-react-app` doesn't need extra setup for `babel-plugin-macros`.

### SWC

> 🚧 [Under Development] This is section for using `fetch.macro` as [swc-plugin](https://swc.rs/).

You can also use fetch.macro in a swc-based project (e.g: Next.js) by using the SWC plugins.

Due to how the plugins loaded, you have to pass **rootDir** option pointing to the root directory of your project (where your node_modules directory lives). Typically it's enough to pass \_\_dirname.

```javascript

// next.config.js

module.exports = {

  experimental: {

    swcPlugins: [["fetch.macro/swc"]],

  },

};

```

### Vite

To be able to use these macros in your [Vite](https://vitejs.dev/) project, you only need install [`vite-plugin-babel-macros`](https://github.com/itsMapleLeaf/vite-plugin-babel-macros) and add some configuration in `vite.config.js`. And it just work.

    $ npm i -D vite-plugin-babel-macros

```js

import MacrosPlugin from "vite-plugin-babel-macros";

export default {

  // ...

  plugins: [

    // ...

    MacrosPlugin(),

  ],

};

```

### Example

#### Basic

Run one of the following command inside your project directory to install the package:

    $ npm i fetch.macro

    or

    $ yarn add fetch.macro

Given the following `Input`:

```javascript

import f from "fetch.macro";

const fetchByUrl = f("/api/v1/ping");

```

Babel will produce the following `Output`:

```javascript

const fetchByUrl = (opts) => fetch("/api/v1/ping", opts);

```

It also works as a `tagged template` literal:

```javascript

import f from "fetch.macro";

const fetchByUrl = f`/api/v1/ping`;

```

That will produce the same output as the function version.

#### Nested

Given the following `Input`:

```javascript

import f from "fetch.macro";

const fetchProject = f`/api/v1/user/:id/project/:projectId/:others`;

```

Babel will produce the following `Output`:

```javascript

const fetchProject = ({ id, projectId, others, ...opts }) =>

  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts);

```

## API

### default

It will be produce a code for fetch function with URL by input and return response that need to be manual handle the response.

Input

Output

```javascript

import f from "fetch.macro";

const fetchByUrl = f("/api/v1/ping");

```

```javascript

const fetchByUrl = (opts) => fetch("/api/v1/ping", opts);

```

### fetchText

It will be produce a code for fetch function with URL by input and return [**response text**](https://webidl.spec.whatwg.org/#idl-USVString).

Input

Output

```javascript

import { fetchText } from "fetch.macro";

const fetchProject = fetchText`/api/v1/user/:id/project/:projectId/:others`;

```

```javascript

const fetchProject = ({ id, projectId, others, ...opts }) =>

  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.text());

```

### fetchJson

It will be produce a code for fetch function with URL by input and return [**response json**](https://fetch.spec.whatwg.org/#dom-body-json).

Input

Output

```javascript

import { fetchJson } from "fetch.macro";

const fetchProject = fetchJson`/api/v1/user/:id/project/:projectId/:others`;

```

```javascript

const fetchProject = ({ id, projectId, others, ...opts }) =>

  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.json());

```

### fetchBlob

It will be produce a code for fetch function with URL by input and return [**response blob**](https://fetch.spec.whatwg.org/#dom-body-blob).

Input

Output

```javascript

import { fetchBlob } from "fetch.macro";

const fetchProject = fetchBlob`/api/v1/user/:id/project/:projectId/:others`;

```

```javascript

const fetchProject = ({ id, projectId, others, ...opts }) =>

  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.blob());

```

### fetchFormData

It will be produce a code for fetch function with URL by input and return [**response formData**](https://fetch.spec.whatwg.org/#dom-body-formdata).

Input

Output

```javascript

import { fetchFormData } from "fetch.macro";

const fetchProject = fetchFormData`/api/v1/user/:id/project/:projectId/:others`;

```

```javascript

const fetchProject = ({ id, projectId, others, ...opts }) =>

  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.formData());

```

### fetchArrayBuffer

It will be produce a code for fetch function with URL by input and return [**response arrayBuffer**](https://fetch.spec.whatwg.org/#dom-body-arraybuffer).

Input

Output

```javascript

import { fetchArrayBuffer } from "fetch.macro";

const fetchProject = fetchArrayBuffer`/api/v1/user/:id/project/:projectId/:others`;

```

```javascript

const fetchProject = ({ id, projectId, others, ...opts }) =>

  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.arrayBuffer());

```

### fetchClone

It will be produce a code for fetch function with URL by input and return [**response cloned data**](https://developer.mozilla.org/en-US/docs/Web/API/Response/clone).

Input

Output

```javascript

import { fetchClone } from "fetch.macro";

const fetchProject = fetchClone`/api/v1/user/:id/project/:projectId/:others`;

```

```javascript

const fetchProject = ({ id, projectId, others, ...opts }) =>

  fetch(`/api/v1/user/${id}/project/${projectId}/${others}`, opts).then((r) => r.clone());

```

## Contributors

[\[Back to the Table of Contents\] ↑](#toc)

  

    

      
_RiN
🤔 🚇 🔧 💻

      
_{Ryan Aunur Rassyid}
💡

      
_{Rivaldi Putra}
💡

      
_{Ibrahim Hanif}
💻 💡

      
_Mudassir
💻 💡

      
_{Ahmad Muwaffaq}
💻 💡

      
_{Abdullah Ammar}
💻 💡

    

    

      
_{Afrian Junior}
💻 💡

    

  

## License

[MIT](./LICENSE)