@faasjs/react 0.0.3-beta.85 → 0.0.3-beta.87

package/dist/index.d.mts

@@ -0,0 +1,122 @@
+import { Response, Options, ResponseError } from '@faasjs/browser';
+export { FaasBrowserClient, Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
+import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
+export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
+
+/**
+ * Injects FaasData props.
+ */
+interface FaasDataInjection<Data = any> {
+    action: string | any;
+    params: Record<string, any>;
+    loading: boolean;
+    data: Data;
+    error: any;
+    promise: Promise<Response<Data>>;
+    reload(params?: Record<string, any>): Promise<Response<Data>>;
+    setData: React.Dispatch<React.SetStateAction<Data>>;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>;
+    setError: React.Dispatch<React.SetStateAction<any>>;
+}
+interface FaasDataWrapperProps<PathOrData extends FaasAction> {
+    render?(args: FaasDataInjection<FaasData<PathOrData>>): JSX.Element | JSX.Element[];
+    children?: React.ReactElement<Partial<FaasDataInjection>>;
+    fallback?: JSX.Element | false;
+    action: string;
+    params?: FaasParams<PathOrData>;
+    onDataChange?(args: FaasDataInjection<FaasData<PathOrData>>): void;
+    /** use custom data, should work with setData */
+    data?: FaasData<PathOrData>;
+    /** use custom setData, should work with data */
+    setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
+}
+interface FaasReactClientInstance {
+    faas: <PathOrData extends FaasAction>(action: string | PathOrData, params: FaasParams<PathOrData>) => Promise<Response<FaasData<PathOrData>>>;
+    useFaas: <PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>, options?: {
+        data?: FaasData<PathOrData>;
+        setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
+        skip?: boolean;
+    }) => FaasDataInjection<FaasData<PathOrData>>;
+    FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
+}
+/**
+ * Before use faas, you should initialize a FaasReactClient.
+ *
+ * @param props.domain {string} The domain of your faas server
+ * @param props.options {Options} The options of client
+ * @returns {FaasReactClientInstance}
+ *
+ * ```ts
+ * const client = FaasReactClient({
+ *   domain: 'localhost:8080/api'
+ * })
+ * ```
+ */
+declare function FaasReactClient({ domain, options, onError }: {
+    domain: string;
+    options?: Options;
+    onError?: (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void>;
+}): FaasReactClientInstance;
+/**
+ * Get FaasReactClient instance
+ * @param domain {string} empty string for default domain
+ * @returns {FaasReactClientInstance}
+ *
+ * ```ts
+ * getClient()
+ * // or
+ * getClient('another-domain')
+ * ```
+ */
+declare function getClient(domain?: string): FaasReactClientInstance;
+/**
+ * Request faas server
+ *
+ * @param action {string} action name
+ * @param params {object} action params
+ * @returns {Promise<Response<any>>}
+ *
+ * ```ts
+ * faas<{ title: string }>('post/get', { id: 1 }).then(res => {
+ *   console.log(res.data.title)
+ * })
+ * ```
+ */
+declare function faas<PathOrData extends FaasAction>(action: string | PathOrData, params: FaasParams<PathOrData>): Promise<Response<FaasData<PathOrData>>>;
+/**
+ * Request faas server with React hook
+ * @param action {string} action name
+ * @param defaultParams {object} initial action params
+ * @returns {FaasDataInjection<any>}
+ *
+ * ```ts
+ * function Post ({ id }) {
+ *   const { data } = useFaas<{ title: string }>('post/get', { id })
+ *   return <h1>{data.title}</h1>
+ * }
+ * ```
+ */
+declare function useFaas<PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>, options?: {
+    data?: FaasData<PathOrData>;
+    setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
+    skip?: boolean;
+}): FaasDataInjection<FaasData<PathOrData>>;
+/**
+ * A data wrapper for react components
+ * @returns {JSX.Element}
+ *
+ * ```ts
+ * <FaasDataWrapper<{
+ *   id: string
+ *   title: string
+ * }>
+ *   action='post/get'
+ *   params={ { id: 1 } }
+ *   render={ ({ data }) => <h1>{ data.title }</h1> }
+ * />
+ * ```
+ */
+declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
+
+export { FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas };

package/dist/index.d.ts

@@ -1,12 +1,7 @@
 import { Response, Options, ResponseError } from '@faasjs/browser';
 export { FaasBrowserClient, Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
-
-interface FaasActions {
-}
-type FaasActionPaths = keyof FaasActions;
-type FaasAction = FaasActionPaths | Record<string, any>;
-type FaasParams<T = any> = T extends FaasActionPaths ? FaasActions[T]['Params'] : any;
-type FaasData<T = any> = T extends FaasActionPaths ? FaasActions[T]['Data'] : T;
+import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
+export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 
 /**
  * Injects FaasData props.
@@ -124,4 +119,4 @@ declare function useFaas<PathOrData extends FaasAction>(action: string | PathOrD
  */
 declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
 
-export { FaasAction, FaasData, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasParams, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas };
+export { FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas };

package/dist/index.js

@@ -1,42 +1,16 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
+
+var browser = require('@faasjs/browser');
+var react = require('react');
 
 // src/index.tsx
-var src_exports = {};
-__export(src_exports, {
-  FaasBrowserClient: () => import_browser.FaasBrowserClient,
-  FaasDataWrapper: () => FaasDataWrapper,
-  FaasReactClient: () => FaasReactClient,
-  faas: () => faas,
-  getClient: () => getClient,
-  useFaas: () => useFaas
-});
-module.exports = __toCommonJS(src_exports);
-var import_browser = require("@faasjs/browser");
-var import_react = require("react");
 var clients = {};
 function FaasReactClient({
   domain,
   options,
   onError
 }) {
-  const client = new import_browser.FaasBrowserClient(domain, options);
+  const client = new browser.FaasBrowserClient(domain, options);
   async function faas2(action, params) {
     if (onError)
       return client.action(action, params).catch(async (res) => {
@@ -48,19 +22,19 @@ function FaasReactClient({
   function useFaas2(action, defaultParams, options2) {
     if (!options2)
       options2 = {};
-    const [loading, setLoading] = (0, import_react.useState)(true);
-    const [data, setData] = (0, import_react.useState)();
-    const [error, setError] = (0, import_react.useState)();
-    const [promise, setPromise] = (0, import_react.useState)();
-    const [params, setParams] = (0, import_react.useState)(defaultParams);
-    const [reloadTimes, setReloadTimes] = (0, import_react.useState)(0);
-    const [fails, setFails] = (0, import_react.useState)(0);
-    (0, import_react.useEffect)(function() {
+    const [loading, setLoading] = react.useState(true);
+    const [data, setData] = react.useState();
+    const [error, setError] = react.useState();
+    const [promise, setPromise] = react.useState();
+    const [params, setParams] = react.useState(defaultParams);
+    const [reloadTimes, setReloadTimes] = react.useState(0);
+    const [fails, setFails] = react.useState(0);
+    react.useEffect(function() {
       if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
         setParams(defaultParams);
       }
     }, [JSON.stringify(defaultParams)]);
-    (0, import_react.useEffect)(function() {
+    react.useEffect(function() {
       if (!action || (options2 == null ? void 0 : options2.skip)) {
         setLoading(false);
         return;
@@ -71,7 +45,7 @@ function FaasReactClient({
         const request = client.action(action, options2.params || params, { signal: controller.signal });
         setPromise(request);
         request.then((r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)).catch(async (e) => {
-          if ((e == null ? void 0 : e.message) === "The user aborted a request.")
+          if ((e == null ? void 0 : e.message) === "The user aborted a request." || (e == null ? void 0 : e.message) === "Aborted")
             return;
           if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
             console.warn(`FaasReactClient: ${e.message} retry...`);
@@ -136,18 +110,18 @@ function FaasReactClient({
         data,
         setData
       });
-      const [loaded, setLoaded] = (0, import_react.useState)(false);
-      (0, import_react.useEffect)(function() {
+      const [loaded, setLoaded] = react.useState(false);
+      react.useEffect(function() {
         if (!loaded && !request.loading)
           setLoaded(true);
       }, [request.loading]);
-      (0, import_react.useEffect)(function() {
+      react.useEffect(function() {
         if (onDataChange)
           onDataChange(request);
       }, [JSON.stringify(request.data)]);
       if (loaded) {
         if (children)
-          return (0, import_react.cloneElement)(children, request);
+          return react.cloneElement(children, request);
         if (render)
           return render(request);
       }
@@ -170,22 +144,23 @@ function useFaas(action, defaultParams, options) {
   return getClient().useFaas(action, defaultParams, options);
 }
 function FaasDataWrapper(props) {
-  const [client, setClient] = (0, import_react.useState)();
-  (0, import_react.useEffect)(() => {
+  const [client, setClient] = react.useState();
+  react.useEffect(() => {
     if (client)
       return;
     setClient(getClient());
   }, []);
   if (!client)
     return props.fallback || null;
-  return (0, import_react.createElement)(client.FaasDataWrapper, props);
+  return react.createElement(client.FaasDataWrapper, props);
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  FaasBrowserClient,
-  FaasDataWrapper,
-  FaasReactClient,
-  faas,
-  getClient,
-  useFaas
+
+Object.defineProperty(exports, 'FaasBrowserClient', {
+  enumerable: true,
+  get: function () { return browser.FaasBrowserClient; }
 });
+exports.FaasDataWrapper = FaasDataWrapper;
+exports.FaasReactClient = FaasReactClient;
+exports.faas = faas;
+exports.getClient = getClient;
+exports.useFaas = useFaas;

package/dist/index.mjs

@@ -1,13 +1,8 @@
+import { FaasBrowserClient } from '@faasjs/browser';
+export { FaasBrowserClient } from '@faasjs/browser';
+import { useState, useEffect, createElement, cloneElement } from 'react';
+
 // src/index.tsx
-import {
-  FaasBrowserClient
-} from "@faasjs/browser";
-import {
-  useState,
-  useEffect,
-  createElement,
-  cloneElement
-} from "react";
 var clients = {};
 function FaasReactClient({
   domain,
@@ -49,7 +44,7 @@ function FaasReactClient({
         const request = client.action(action, options2.params || params, { signal: controller.signal });
         setPromise(request);
         request.then((r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)).catch(async (e) => {
-          if ((e == null ? void 0 : e.message) === "The user aborted a request.")
+          if ((e == null ? void 0 : e.message) === "The user aborted a request." || (e == null ? void 0 : e.message) === "Aborted")
             return;
           if (!fails && typeof (e == null ? void 0 : e.message) === "string" && e.message.indexOf("Failed to fetch") >= 0) {
             console.warn(`FaasReactClient: ${e.message} retry...`);
@@ -158,11 +153,5 @@ function FaasDataWrapper(props) {
     return props.fallback || null;
   return createElement(client.FaasDataWrapper, props);
 }
-export {
-  FaasBrowserClient,
-  FaasDataWrapper,
-  FaasReactClient,
-  faas,
-  getClient,
-  useFaas
-};
+
+export { FaasDataWrapper, FaasReactClient, faas, getClient, useFaas };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "0.0.3-beta.85",
+  "version": "0.0.3-beta.87",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,13 +16,13 @@
   },
   "funding": "https://github.com/sponsors/faasjs",
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts --clean"
+    "build": "tsup src/index.tsx --config ../../tsup.config.json"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@faasjs/browser": "^0.0.3-beta.85"
+    "@faasjs/browser": "^0.0.3-beta.87"
   },
   "peerDependencies": {
     "react": "*"