pleshevskiy/react-rest-request
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: build to commonjs

Browse source
This commit is contained in:
Dmitriy Pleshevskiy 2021-07-05 07:41:11 +03:00
parent 0f34ac9182
commit 56af2e57aa
11 changed files with 127 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
target/client.js
View file

@ -1,3 +1,4 @@
"use strict";
var __rest = (this && this.__rest) || function (s, e) { var __rest = (this && this.__rest) || function (s, e) {
var t = {}; var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@ -9,16 +10,18 @@ var __rest = (this && this.__rest) || function (s, e) {
} }
return t; return t;
}; };
import invariant from 'tiny-invariant'; Object.defineProperty(exports, "__esModule", { value: true });
import { methodCanContainBody } from './endpoint'; exports.Client = void 0;
import { formDataFromObject, isFunction, urlSearchParamsFromObject } from './misc'; const tiny_invariant_1 = require("tiny-invariant");
export class Client { const endpoint_1 = require("./endpoint");
const misc_1 = require("./misc");
class Client {
constructor(config) { constructor(config) {
this.config = config; this.config = config;
} }
prepareRequest(props) { prepareRequest(props) {
var _a; var _a;
const requestCanContainBody = methodCanContainBody(props.method); const requestCanContainBody = endpoint_1.methodCanContainBody(props.method);
const defaultBaseUrl = (_a = window) === null || _a === void 0 ? void 0 : _a.location.href; const defaultBaseUrl = (_a = window) === null || _a === void 0 ? void 0 : _a.location.href;
const sourceUrl = /https?:\/\//.test(props.url) ? const sourceUrl = /https?:\/\//.test(props.url) ?
props.url props.url
@ -28,15 +31,15 @@ export class Client {
} }
const url = new URL(sourceUrl, defaultBaseUrl); const url = new URL(sourceUrl, defaultBaseUrl);
if (!requestCanContainBody) { if (!requestCanContainBody) {
invariant(!(props.variables instanceof FormData), `Method ${props.method} cannot contain body`); tiny_invariant_1.default(!(props.variables instanceof FormData), `Method ${props.method} cannot contain body`);
url.search = urlSearchParamsFromObject(props.variables).toString(); url.search = misc_1.urlSearchParamsFromObject(props.variables).toString();
} }
const headers = new Headers(props.headers); const headers = new Headers(props.headers);
if (requestCanContainBody && !headers.has('content-type')) { if (requestCanContainBody && !headers.has('content-type')) {
headers.set('content-type', 'application/json'); headers.set('content-type', 'application/json');
} }
const contentType = headers.get('content-type'); const contentType = headers.get('content-type');
const body = !requestCanContainBody ? (undefined) : contentType === 'application/json' ? (JSON.stringify(props.variables)) : contentType === 'multipart/form-data' ? (props.variables instanceof FormData ? (props.variables) : (formDataFromObject(props.variables))) : ( const body = !requestCanContainBody ? (undefined) : contentType === 'application/json' ? (JSON.stringify(props.variables)) : contentType === 'multipart/form-data' ? (props.variables instanceof FormData ? (props.variables) : (misc_1.formDataFromObject(props.variables))) : (
/* TODO: need to add more content-type of body */ /* TODO: need to add more content-type of body */
undefined); undefined);
return new Request(url.toString(), { return new Request(url.toString(), {
@ -78,7 +81,7 @@ export class Client {
url: res.url, url: res.url,
error: 'error' in res ? res.error : undefined, error: 'error' in res ? res.error : undefined,
canceled: 'canceled' in res ? res.canceled : false, canceled: 'canceled' in res ? res.canceled : false,
data: isFunction(transformResponseData) ? transformResponseData(data) : data, data: misc_1.isFunction(transformResponseData) ? transformResponseData(data) : data,
}; };
}) })
.then((res) => { .then((res) => {
@ -89,3 +92,4 @@ export class Client {
}); });
} }
} }
exports.Client = Client;

2
target/client_hook.d.ts vendored
View file

@ -1 +1 @@
export declare function useClient(): import("./client").Client[]; export declare function useClient(): readonly [import("./client").Client];

10
target/client_hook.js
View file

@ -1,5 +1,9 @@
import { useRequestContext } from './request_context'; "use strict";
export function useClient() { Object.defineProperty(exports, "__esModule", { value: true });
const { client } = useRequestContext(); exports.useClient = void 0;
const request_context_1 = require("./request_context");
function useClient() {
const { client } = request_context_1.useRequestContext();
return [client]; return [client];
} }
exports.useClient = useClient;

13
target/endpoint.js
View file

@ -1,4 +1,7 @@
export var Method; "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.methodWithoutEffects = exports.methodCanContainBody = exports.Method = void 0;
var Method;
(function (Method) { (function (Method) {
Method["HEAD"] = "HEAD"; Method["HEAD"] = "HEAD";
Method["GET"] = "GET"; Method["GET"] = "GET";
@ -6,10 +9,12 @@ export var Method;
Method["POST"] = "POST"; Method["POST"] = "POST";
Method["PATCH"] = "PATCH"; Method["PATCH"] = "PATCH";
Method["DELETE"] = "DELETE"; Method["DELETE"] = "DELETE";
})(Method || (Method = {})); })(Method = exports.Method || (exports.Method = {}));
export function methodCanContainBody(method) { function methodCanContainBody(method) {
return [Method.POST, Method.PATCH, Method.PUT].includes(method); return [Method.POST, Method.PATCH, Method.PUT].includes(method);
} }
export function methodWithoutEffects(method) { exports.methodCanContainBody = methodCanContainBody;
function methodWithoutEffects(method) {
return [Method.HEAD, Method.GET].includes(method); return [Method.HEAD, Method.GET].includes(method);
} }
exports.methodWithoutEffects = methodWithoutEffects;

26
target/index.js
View file

@ -1,7 +1,19 @@
export * from './endpoint'; "use strict";
export * from './client'; var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
export * from './client_hook'; if (k2 === undefined) k2 = k;
export * from './lazy_request_hook'; Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
export * from './request_hook'; }) : (function(o, m, k, k2) {
export * from './request_context'; if (k2 === undefined) k2 = k;
export * from './reducer'; o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", { value: true });
__exportStar(require("./endpoint"), exports);
__exportStar(require("./client"), exports);
__exportStar(require("./client_hook"), exports);
__exportStar(require("./lazy_request_hook"), exports);
__exportStar(require("./request_hook"), exports);
__exportStar(require("./request_context"), exports);
__exportStar(require("./reducer"), exports);

62
target/lazy_request_hook.js
View file

@ -1,24 +1,27 @@
import React from 'react'; "use strict";
import invariant from 'tiny-invariant'; Object.defineProperty(exports, "__esModule", { value: true });
import isEqual from 'lodash.isequal'; exports.useLazyRequest = void 0;
import { useClient } from './client_hook'; const react_1 = require("react");
import { methodWithoutEffects } from './endpoint'; const tiny_invariant_1 = require("tiny-invariant");
import { INITIAL_REQUEST_STATE, requestReducer } from './reducer'; const lodash_isequal_1 = require("lodash.isequal");
import { useRequestContext } from './request_context'; const client_hook_1 = require("./client_hook");
import { isFunction } from './misc'; const endpoint_1 = require("./endpoint");
const reducer_1 = require("./reducer");
const request_context_1 = require("./request_context");
const misc_1 = require("./misc");
; ;
export function useLazyRequest(endpoint, config) { function useLazyRequest(endpoint, config) {
const [client] = useClient(); const [client] = client_hook_1.useClient();
const { defaultHeaders } = useRequestContext(); const { defaultHeaders } = request_context_1.useRequestContext();
const [state, dispatch] = React.useReducer(requestReducer, INITIAL_REQUEST_STATE); const [state, dispatch] = react_1.default.useReducer(reducer_1.requestReducer, reducer_1.INITIAL_REQUEST_STATE);
const [prevHandlerConfig, setPrevHandlerConfig] = React.useState(null); const [prevHandlerConfig, setPrevHandlerConfig] = react_1.default.useState(null);
const abortControllerRef = React.useRef(new AbortController()); const abortControllerRef = react_1.default.useRef(new AbortController());
const transformResponseData = React.useCallback((data) => { const transformResponseData = react_1.default.useCallback((data) => {
return isFunction(endpoint.transformResponseData) ? return misc_1.isFunction(endpoint.transformResponseData) ?
endpoint.transformResponseData(data) endpoint.transformResponseData(data)
: data; : data;
}, [endpoint]); }, [endpoint]);
const handler = React.useCallback((handlerConfig) => { const handler = react_1.default.useCallback((handlerConfig) => {
var _a; var _a;
if ((state === null || state === void 0 ? void 0 : state.loading) || (state === null || state === void 0 ? void 0 : state.isCanceled)) { if ((state === null || state === void 0 ? void 0 : state.loading) || (state === null || state === void 0 ? void 0 : state.isCanceled)) {
return Promise.resolve(null); return Promise.resolve(null);
@ -26,28 +29,28 @@ export function useLazyRequest(endpoint, config) {
let params; let params;
let endpointUrl; let endpointUrl;
let isSameRequest = true; let isSameRequest = true;
if (isFunction(endpoint.url)) { if (misc_1.isFunction(endpoint.url)) {
params = (_a = handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.params) !== null && _a !== void 0 ? _a : config === null || config === void 0 ? void 0 : config.params; params = (_a = handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.params) !== null && _a !== void 0 ? _a : config === null || config === void 0 ? void 0 : config.params;
invariant(params, 'Endpoint required params'); tiny_invariant_1.default(params, 'Endpoint required params');
endpointUrl = endpoint.url(params); endpointUrl = endpoint.url(params);
isSameRequest = !!(state === null || state === void 0 ? void 0 : state.prevParams) && isEqual(state.prevParams, params); isSameRequest = !!(state === null || state === void 0 ? void 0 : state.prevParams) && lodash_isequal_1.default(state.prevParams, params);
} }
else { else {
endpointUrl = endpoint.url; endpointUrl = endpoint.url;
} }
const variables = Object.assign(Object.assign({}, config === null || config === void 0 ? void 0 : config.variables), handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.variables); const variables = Object.assign(Object.assign({}, config === null || config === void 0 ? void 0 : config.variables), handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.variables);
const headers = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultHeaders), endpoint.headers), config === null || config === void 0 ? void 0 : config.headers), handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.headers); const headers = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultHeaders), endpoint.headers), config === null || config === void 0 ? void 0 : config.headers), handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.headers);
const shouldReturnCachedValue = (methodWithoutEffects(endpoint.method) const shouldReturnCachedValue = (endpoint_1.methodWithoutEffects(endpoint.method)
&& state.isCalled && state.isCalled
&& isSameRequest && isSameRequest
&& (state === null || state === void 0 ? void 0 : state.prevVariables) && isEqual(state.prevVariables, variables) && (state === null || state === void 0 ? void 0 : state.prevVariables) && lodash_isequal_1.default(state.prevVariables, variables)
&& (state === null || state === void 0 ? void 0 : state.prevHeaders) && isEqual(state.prevHeaders, headers) && (state === null || state === void 0 ? void 0 : state.prevHeaders) && lodash_isequal_1.default(state.prevHeaders, headers)
&& !(handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.force)); && !(handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.force));
if (shouldReturnCachedValue) { if (shouldReturnCachedValue) {
return Promise.resolve(state.data); return Promise.resolve(state.data);
} }
const onCompletes = [config === null || config === void 0 ? void 0 : config.onComplete, handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.onComplete].filter(isFunction); const onCompletes = [config === null || config === void 0 ? void 0 : config.onComplete, handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.onComplete].filter(misc_1.isFunction);
const onFailures = [config === null || config === void 0 ? void 0 : config.onFailure, handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.onFailure].filter(isFunction); const onFailures = [config === null || config === void 0 ? void 0 : config.onFailure, handlerConfig === null || handlerConfig === void 0 ? void 0 : handlerConfig.onFailure].filter(misc_1.isFunction);
dispatch({ type: 'call', headers, variables, params }); dispatch({ type: 'call', headers, variables, params });
setPrevHandlerConfig(handlerConfig !== null && handlerConfig !== void 0 ? handlerConfig : {}); setPrevHandlerConfig(handlerConfig !== null && handlerConfig !== void 0 ? handlerConfig : {});
return client return client
@ -66,20 +69,20 @@ export function useLazyRequest(endpoint, config) {
return null; return null;
}); });
}, [state, config, client, endpoint, defaultHeaders, transformResponseData]); }, [state, config, client, endpoint, defaultHeaders, transformResponseData]);
const refetchRequest = React.useCallback(() => { const refetchRequest = react_1.default.useCallback(() => {
if (prevHandlerConfig != null) { if (prevHandlerConfig != null) {
handler(Object.assign({}, prevHandlerConfig)); handler(Object.assign({}, prevHandlerConfig));
} }
}, [handler, prevHandlerConfig]); }, [handler, prevHandlerConfig]);
const cancelRequest = React.useCallback(() => { const cancelRequest = react_1.default.useCallback(() => {
dispatch({ type: 'cancel' }); dispatch({ type: 'cancel' });
abortControllerRef.current.abort(); abortControllerRef.current.abort();
abortControllerRef.current = new AbortController(); abortControllerRef.current = new AbortController();
}, []); }, []);
const clearRequestStore = React.useCallback(() => { const clearRequestStore = react_1.default.useCallback(() => {
dispatch({ type: 'clearStore' }); dispatch({ type: 'clearStore' });
}, []); }, []);
React.useEffect(() => cancelRequest, [cancelRequest]); react_1.default.useEffect(() => cancelRequest, [cancelRequest]);
return [ return [
handler, handler,
{ {
@ -94,3 +97,4 @@ export function useLazyRequest(endpoint, config) {
}, },
]; ];
} }
exports.useLazyRequest = useLazyRequest;

15
target/misc.js
View file

@ -1,10 +1,15 @@
export function isObject(val) { "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.urlSearchParamsFromObject = exports.formDataFromObject = exports.isFunction = exports.isObject = void 0;
function isObject(val) {
return Object.prototype.toString.call(val) === '[object Object]'; return Object.prototype.toString.call(val) === '[object Object]';
} }
export function isFunction(val) { exports.isObject = isObject;
function isFunction(val) {
return typeof val === 'function'; return typeof val === 'function';
} }
export function formDataFromObject(obj) { exports.isFunction = isFunction;
function formDataFromObject(obj) {
const formData = new FormData(); const formData = new FormData();
Object.entries(obj) Object.entries(obj)
.filter(([_, value]) => value !== undefined) .filter(([_, value]) => value !== undefined)
@ -23,7 +28,8 @@ export function formDataFromObject(obj) {
}); });
return formData; return formData;
} }
export function urlSearchParamsFromObject(obj) { exports.formDataFromObject = formDataFromObject;
function urlSearchParamsFromObject(obj) {
const searchParams = new URLSearchParams(); const searchParams = new URLSearchParams();
Object.entries(obj) Object.entries(obj)
.filter(([_, value]) => value !== undefined) .filter(([_, value]) => value !== undefined)
@ -40,3 +46,4 @@ export function urlSearchParamsFromObject(obj) {
}); });
return searchParams; return searchParams;
} }
exports.urlSearchParamsFromObject = urlSearchParamsFromObject;

10
target/reducer.js
View file

@ -1,4 +1,7 @@
export const INITIAL_REQUEST_STATE = { "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.requestReducer = exports.INITIAL_REQUEST_STATE = void 0;
exports.INITIAL_REQUEST_STATE = {
data: null, data: null,
response: undefined, response: undefined,
fetchError: undefined, fetchError: undefined,
@ -9,7 +12,7 @@ export const INITIAL_REQUEST_STATE = {
prevVariables: undefined, prevVariables: undefined,
prevParams: undefined, prevParams: undefined,
}; };
export function requestReducer(state, action) { function requestReducer(state, action) {
switch (action.type) { switch (action.type) {
case 'call': { case 'call': {
return Object.assign(Object.assign({}, state), { response: undefined, fetchError: undefined, isCanceled: false, loading: true, isCalled: true, prevHeaders: action.headers, prevVariables: action.variables, prevParams: action.params }); return Object.assign(Object.assign({}, state), { response: undefined, fetchError: undefined, isCanceled: false, loading: true, isCalled: true, prevHeaders: action.headers, prevVariables: action.variables, prevParams: action.params });
@ -24,7 +27,8 @@ export function requestReducer(state, action) {
return Object.assign(Object.assign({}, state), { isCanceled: true, fetchError: undefined }); return Object.assign(Object.assign({}, state), { isCanceled: true, fetchError: undefined });
} }
case 'clearStore': { case 'clearStore': {
return INITIAL_REQUEST_STATE; return exports.INITIAL_REQUEST_STATE;
} }
} }
} }
exports.requestReducer = requestReducer;

21
target/request_context.js
View file

@ -1,11 +1,16 @@
import React from 'react'; "use strict";
import invariant from 'tiny-invariant'; Object.defineProperty(exports, "__esModule", { value: true });
const RequestContext = React.createContext(null); exports.useRequestContext = exports.RequestProvider = void 0;
export function RequestProvider({ client, defaultHeaders, children }) { const react_1 = require("react");
return (React.createElement(RequestContext.Provider, { value: { client, defaultHeaders } }, children)); const tiny_invariant_1 = require("tiny-invariant");
const RequestContext = react_1.default.createContext(null);
function RequestProvider({ client, defaultHeaders, children }) {
return (react_1.default.createElement(RequestContext.Provider, { value: { client, defaultHeaders } }, children));
} }
export function useRequestContext() { exports.RequestProvider = RequestProvider;
const context = React.useContext(RequestContext); function useRequestContext() {
invariant(context, 'useRequestContext() must be a child of <RequestProvider />'); const context = react_1.default.useContext(RequestContext);
tiny_invariant_1.default(context, 'useRequestContext() must be a child of <RequestProvider />');
return context; return context;
} }
exports.useRequestContext = useRequestContext;

22
target/request_hook.js
View file

@ -1,15 +1,19 @@
import React from 'react'; "use strict";
import invariant from 'tiny-invariant'; Object.defineProperty(exports, "__esModule", { value: true });
import { methodWithoutEffects } from './endpoint'; exports.useRequest = void 0;
import { useLazyRequest } from './lazy_request_hook'; const react_1 = require("react");
export function useRequest(endpoint, config) { const tiny_invariant_1 = require("tiny-invariant");
invariant(methodWithoutEffects(endpoint.method), `You cannot use useRequest with ${endpoint.method} method`); const endpoint_1 = require("./endpoint");
const [handler, state] = useLazyRequest(endpoint, config); const lazy_request_hook_1 = require("./lazy_request_hook");
const skip = React.useMemo(() => { var _a; return (_a = config === null || config === void 0 ? void 0 : config.skip) !== null && _a !== void 0 ? _a : false; }, [config]); function useRequest(endpoint, config) {
React.useEffect(() => { tiny_invariant_1.default(endpoint_1.methodWithoutEffects(endpoint.method), `You cannot use useRequest with ${endpoint.method} method`);
const [handler, state] = lazy_request_hook_1.useLazyRequest(endpoint, config);
const skip = react_1.default.useMemo(() => { var _a; return (_a = config === null || config === void 0 ? void 0 : config.skip) !== null && _a !== void 0 ? _a : false; }, [config]);
react_1.default.useEffect(() => {
if (!skip) { if (!skip) {
handler(); handler();
} }
}, [skip, handler]); }, [skip, handler]);
return state; return state;
} }
exports.useRequest = useRequest;

2
tsconfig.json
View file

@ -2,7 +2,7 @@
"compilerOptions": { "compilerOptions": {
"rootDir": "src", "rootDir": "src",
"outDir": "target", "outDir": "target",
"module": "esnext", "module": "commonjs",
"target": "es6", "target": "es6",
"lib": ["dom", "es2020"], "lib": ["dom", "es2020"],
"jsx": "react", "jsx": "react",