fetch.macro
fetch.macro copied to clipboard
Allows you to build fetcher function by URL at compile-time.
fetch.macro
Allows you to build fetcher function
by URL at compile-time.
f("/api/ping")
↓ ↓ ↓ ↓ ↓ ↓
(opts) => fetch("/api/ping", opts)
Usage • API • Contributors
Usage
[Back to the Table of Contents] ↑
Simply install and configure babel-plugin-macros
and then use fetch.macro
.
Some project that build with
create-react-app
doesn't need extra setup forbabel-plugin-macros
.
SWC
🚧 [Under Development] This is section for using
fetch.macro
as swc-plugin.
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.
// next.config.js
module.exports = {
experimental: {
swcPlugins: [["fetch.macro/swc"]],
},
};
Vite
To be able to use these macros in your Vite project, you only need install vite-plugin-babel-macros
and add some configuration in vite.config.js
. And it just work.
$ npm i -D vite-plugin-babel-macros
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
:
import f from "fetch.macro";
const fetchByUrl = f("/api/v1/ping");
Babel will produce the following Output
:
const fetchByUrl = (opts) => fetch("/api/v1/ping", opts);
It also works as a tagged template
literal:
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
:
import f from "fetch.macro";
const fetchProject = f`/api/v1/user/:id/project/:projectId/:others`;
Babel will produce the following Output
:
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 |
|
|
fetchText
It will be produce a code for fetch function with URL by input and return response text.
Input | Output |
|
|
fetchJson
It will be produce a code for fetch function with URL by input and return response json.
Input | Output |
|
|
fetchBlob
It will be produce a code for fetch function with URL by input and return response blob.
Input | Output |
|
|
fetchFormData
It will be produce a code for fetch function with URL by input and return response formData.
Input | Output |
|
|
fetchArrayBuffer
It will be produce a code for fetch function with URL by input and return response arrayBuffer.
Input | Output |
|
|
fetchClone
It will be produce a code for fetch function with URL by input and return response cloned data.
Input | Output |
|
|
Contributors
[Back to the Table of Contents] ↑
RiN 🤔 🚇 🔧 💻 |
Ryan Aunur Rassyid 💡 |
Rivaldi Putra 💡 |
Ibrahim Hanif 💻 💡 |
Mudassir 💻 💡 |
Ahmad Muwaffaq 💻 💡 |
Abdullah Ammar 💻 💡 |
Afrian Junior 💻 💡 |
License
MIT