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 for babel-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
import f from "fetch.macro"; const fetchByUrl = f("/api/v1/ping");	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.

Input

Output

import { fetchText } from "fetch.macro";
const fetchProject = fetchText`/api/v1/user/:id/project/:projectId/:others`;

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.

Input

Output

import { fetchJson } from "fetch.macro";
const fetchProject = fetchJson`/api/v1/user/:id/project/:projectId/:others`;

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.

Input

Output

import { fetchBlob } from "fetch.macro";
const fetchProject = fetchBlob`/api/v1/user/:id/project/:projectId/:others`;

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.

Input

Output

import { fetchFormData } from "fetch.macro";
const fetchProject = fetchFormData`/api/v1/user/:id/project/:projectId/:others`;

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.

Input

Output

import { fetchArrayBuffer } from "fetch.macro";
const fetchProject = fetchArrayBuffer`/api/v1/user/:id/project/:projectId/:others`;

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.

Input

Output

import { fetchClone } from "fetch.macro";
const fetchProject = fetchClone`/api/v1/user/:id/project/:projectId/:others`;

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] ↑

_RiN 🤔 🚇 🔧 💻	_{Ryan Aunur Rassyid} 💡	_{Rivaldi Putra} 💡	_{Ibrahim Hanif} 💻 💡	_Mudassir 💻 💡	_{Ahmad Muwaffaq} 💻 💡	_{Abdullah Ammar} 💻 💡
_{Afrian Junior} 💻 💡

License

MIT

New Features

Hacktoberfest has arrived

At this project we want to deliver new feature, the new feature is based on fetch specification at whatwag - See here

Example Usage

import { fetchText, fetchJson, fetchBlob, fetchArrayBuffer, fetchFormData } from 'fetch.macro'

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

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

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

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

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

Todo

This is lists for new API at fetch.macro modules.

Before start the contrbution, we have been provide code flag for make our easy to write code implementation or test case.

This the line of code related with this issue and step to contributed:

Write Reference name - reference name is import module name (e.g: fetchText) - See Here
Write Member Expression implementation - (e.g: .then(r => r.json)) - See Here
Apply transformation - See here
~~Write little documentation at README.md - Example: fetchText~~ (Skip this step, go to step 5., write documentation about api in test case)
Write Test Case in fetch.test.js - See here

fetchText - #23
fetchJson - #24
fetchBlob - #28
fetchArrayBuffer #34
fetchFormData - #31
fetchClone - Basically just Response.clone - This is low priority but no problem to include as the new features - @fzn0x - Thanks to @afrianjunior

Thanks for you contribution and happy hacking

r17x / fetch.macro Goto Github PK

fetch.macro's Introduction

fetch.macro

Usage

SWC

Vite

Example

Basic

Nested

API

default

fetchText

fetchJson

fetchBlob

fetchFormData

fetchArrayBuffer

fetchClone

Contributors

License

fetch.macro's People

Contributors

Stargazers

Watchers

Forkers

fetch.macro's Issues

New Features

Example Usage

Todo

Describe alternatives you've considered

Additional context

Recommend Projects

Recommend Topics

Recommend Org