@faasjs/react 0.0.2-beta.360 → 0.0.2-beta.364

package/README.md

@@ -1,9 +1,268 @@
 # @faasjs/react
 
-React 插件
-
 [![License: MIT](https://img.shields.io/npm/l/@faasjs/react.svg)](https://github.com/faasjs/faasjs/blob/main/packages/faasjs/react/LICENSE)
 [![NPM Stable Version](https://img.shields.io/npm/v/@faasjs/react/stable.svg)](https://www.npmjs.com/package/@faasjs/react)
 [![NPM Beta Version](https://img.shields.io/npm/v/@faasjs/react/beta.svg)](https://www.npmjs.com/package/@faasjs/react)
 
-https://faasjs.com/guide/excel/react.html
+React plugin for FaasJS.
+
+## Install
+
+    npm install @faasjs/react
+
+## Modules
+
+### Classes
+
+- [FaasBrowserClient](classes/FaasBrowserClient.md)
+- [Response](classes/Response.md)
+- [ResponseError](classes/ResponseError.md)
+
+### Type aliases
+
+- [FaasDataInjection](#faasdatainjection)
+- [FaasDataWrapperProps](#faasdatawrapperprops)
+- [FaasReactClientInstance](#faasreactclientinstance)
+- [Options](#options)
+- [ResponseHeaders](#responseheaders)
+
+### Functions
+
+- [FaasDataWrapper](#faasdatawrapper)
+- [FaasReactClient](#faasreactclient)
+- [faas](#faas)
+- [getClient](#getclient)
+- [useFaas](#usefaas)
+
+## Type aliases
+
+### FaasDataInjection
+
+Ƭ **FaasDataInjection**<`Data`\>: `Object`
+
+Injects FaasData props.
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `Data` | `any` |
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `action` | `string` \| `any` |
+| `data` | `Data` |
+| `error` | `any` |
+| `loading` | `boolean` |
+| `params` | `Record`<`string`, `any`\> |
+| `promise` | `Promise`<[`Response`](classes/Response.md)<`Data`\>\> |
+| `setData` | `React.Dispatch`<`React.SetStateAction`<`Data`\>\> |
+| `setError` | `React.Dispatch`<`React.SetStateAction`<`any`\>\> |
+| `setLoading` | `React.Dispatch`<`React.SetStateAction`<`boolean`\>\> |
+| `setPromise` | `React.Dispatch`<`React.SetStateAction`<`Promise`<[`Response`](classes/Response.md)<`Data`\>\>\>\> |
+| `reload` | (`params?`: `Record`<`string`, `any`\>) => `Promise`<[`Response`](classes/Response.md)<`Data`\>\> |
+
+___
+
+### FaasDataWrapperProps
+
+Ƭ **FaasDataWrapperProps**<`PathOrData`\>: `Object`
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `PathOrData` | extends `FaasAction` |
+
+#### Type declaration
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `action` | `string` | - |
+| `data?` | `FaasData`<`PathOrData`\> | use custom data, should work with setData |
+| `fallback?` | `JSX.Element` \| ``false`` | - |
+| `params?` | `FaasParams`<`PathOrData`\> | - |
+| `setData?` | `React.Dispatch`<`React.SetStateAction`<`FaasData`<`PathOrData`\>\>\> | use custom setData, should work with data |
+| `onDataChange?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>) => `void` | - |
+| `render?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>) => `Element` \| `Element`[] | - |
+
+___
+
+### FaasReactClientInstance
+
+Ƭ **FaasReactClientInstance**: `Object`
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `FaasDataWrapper` | <PathOrData\>(`props`: [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\>) => `Element` |
+| `faas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `params`: `FaasParams`<`PathOrData`\>) => `Promise`<[`Response`](classes/Response.md)<`FaasData`<`PathOrData`\>\>\> |
+| `useFaas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `defaultParams`: `FaasParams`<`PathOrData`\>) => [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\> |
+
+___
+
+### Options
+
+Ƭ **Options**: `RequestInit` & { `headers?`: { [key: string]: `string`;  } ; `beforeRequest?`: (`__namedParameters`: { `action`: `string` ; `options`: [`Options`](#options) ; `params`: `Record`<`string`, `any`\>  }) => `void` \| `Promise`<`void`\>  }
+
+___
+
+### ResponseHeaders
+
+Ƭ **ResponseHeaders**: `Object`
+
+#### Index signature
+
+▪ [key: `string`]: `string`
+
+## Functions
+
+### FaasDataWrapper
+
+▸ **FaasDataWrapper**<`PathOrData`\>(`props`): `JSX.Element`
+
+A data wrapper for react components
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `PathOrData` | extends `FaasAction` |
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\> |
+
+#### Returns
+
+`JSX.Element`
+
+```ts
+<FaasDataWrapper<{
+  id: string
+  title: string
+}>
+  action='post/get'
+  params={ { id: 1 } }
+  render={ ({ data }) => <h1>{ data.title }</h1> }
+/>
+```
+
+___
+
+### FaasReactClient
+
+▸ **FaasReactClient**(`__namedParameters`): [`FaasReactClientInstance`](#faasreactclientinstance)
+
+Before use faas, you should initialize a FaasReactClient.
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `__namedParameters` | `Object` |
+| `__namedParameters.domain` | `string` |
+| `__namedParameters.options?` | [`Options`](#options) |
+| `__namedParameters.onError?` | (`action`: `string`, `params`: `Record`<`string`, `any`\>) => (`res`: [`ResponseError`](classes/ResponseError.md)) => `Promise`<`void`\> |
+
+#### Returns
+
+[`FaasReactClientInstance`](#faasreactclientinstance)
+
+```ts
+const client = FaasReactClient({
+  domain: 'localhost:8080/api'
+})
+```
+
+___
+
+### faas
+
+▸ **faas**<`PathOrData`\>(`action`, `params`): `Promise`<[`Response`](classes/Response.md)<`FaasData`<`PathOrData`\>\>\>
+
+Request faas server
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `PathOrData` | extends `FaasAction` |
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `action` | `string` \| `PathOrData` | action name |
+| `params` | `FaasParams`<`PathOrData`\> | action params |
+
+#### Returns
+
+`Promise`<[`Response`](classes/Response.md)<`FaasData`<`PathOrData`\>\>\>
+
+```ts
+faas<{ title: string }>('post/get', { id: 1 }).then(res => {
+  console.log(res.data.title)
+})
+```
+
+___
+
+### getClient
+
+▸ **getClient**(`domain?`): [`FaasReactClientInstance`](#faasreactclientinstance)
+
+Get FaasReactClient instance
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `domain?` | `string` | empty string for default domain |
+
+#### Returns
+
+[`FaasReactClientInstance`](#faasreactclientinstance)
+
+```ts
+getClient()
+// or
+getClient('another-domain')
+```
+
+___
+
+### useFaas
+
+▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`): [`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>
+
+Request faas server with React hook
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `PathOrData` | extends `FaasAction` |
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `action` | `string` \| `PathOrData` | action name |
+| `defaultParams` | `FaasParams`<`PathOrData`\> | initial action params |
+
+#### Returns
+
+[`FaasDataInjection`](#faasdatainjection)<`FaasData`<`PathOrData`\>\>
+
+```ts
+function Post ({ id }) {
+  const { data } = useFaas<{ title: string }>('post/get', { id })
+  return <h1>{data.title}</h1>
+}
+```

package/dist/index.d.ts

@@ -2,6 +2,9 @@ import { Response, Options, ResponseError } from '@faasjs/browser';
 export { FaasBrowserClient, Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
 import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 
+/**
+ * Injects FaasData props.
+ */
 declare type FaasDataInjection<Data = any> = {
     action: string | any;
     params: Record<string, any>;
@@ -16,7 +19,7 @@ declare type FaasDataInjection<Data = any> = {
     setError: React.Dispatch<React.SetStateAction<any>>;
 };
 declare type FaasDataWrapperProps<PathOrData extends FaasAction> = {
-    render?(args: FaasDataInjection<FaasData<PathOrData>>): JSX.Element;
+    render?(args: FaasDataInjection<FaasData<PathOrData>>): JSX.Element | JSX.Element[];
     fallback?: JSX.Element | false;
     action: string;
     params?: FaasParams<PathOrData>;
@@ -31,14 +34,79 @@ declare type FaasReactClientInstance = {
     useFaas: <PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>) => 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;
-declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData> & {
-    client?: FaasReactClientInstance;
-}): JSX.Element;
+/**
+ * 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>): 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, getClient };
+export { FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasReactClient, FaasReactClientInstance, faas, getClient, useFaas };

package/dist/index.js

@@ -26,7 +26,9 @@ var src_exports = {};
 __export(src_exports, {
   FaasDataWrapper: () => FaasDataWrapper,
   FaasReactClient: () => FaasReactClient,
-  getClient: () => getClient
+  faas: () => faas,
+  getClient: () => getClient,
+  useFaas: () => useFaas
 });
 var import_browser = require("@faasjs/browser");
 var import_react = require("react");
@@ -37,7 +39,7 @@ function FaasReactClient({
   onError
 }) {
   const client = new import_browser.FaasBrowserClient(domain, options);
-  async function faas(action, params) {
+  async function faas2(action, params) {
     if (onError)
       return client.action(action, params).catch(async (res) => {
         await onError(action, params)(res);
@@ -45,7 +47,7 @@ function FaasReactClient({
       });
     return client.action(action, params);
   }
-  function useFaas(action, defaultParams, options2) {
+  function useFaas2(action, defaultParams, options2) {
     if (!options2)
       options2 = {};
     const [loading, setLoading] = (0, import_react.useState)(true);
@@ -100,8 +102,8 @@ function FaasReactClient({
     };
   }
   const reactClient = {
-    faas,
-    useFaas,
+    faas: faas2,
+    useFaas: useFaas2,
     FaasDataWrapper({
       action,
       params,
@@ -111,7 +113,7 @@ function FaasReactClient({
       data,
       setData
     }) {
-      const request = useFaas(action, params, {
+      const request = useFaas2(action, params, {
         data,
         setData
       });
@@ -138,8 +140,14 @@ function getClient(domain) {
     throw Error("FaasReactClient is not initialized");
   return client;
 }
+async function faas(action, params) {
+  return getClient().faas(action, params);
+}
+function useFaas(action, defaultParams) {
+  return getClient().useFaas(action, defaultParams);
+}
 function FaasDataWrapper(props) {
-  const [client, setClient] = (0, import_react.useState)(props.client);
+  const [client, setClient] = (0, import_react.useState)();
   (0, import_react.useEffect)(() => {
     if (client)
       return;
@@ -154,5 +162,7 @@ module.exports = __toCommonJS(src_exports);
 0 && (module.exports = {
   FaasDataWrapper,
   FaasReactClient,
-  getClient
+  faas,
+  getClient,
+  useFaas
 });

package/dist/index.mjs

@@ -14,7 +14,7 @@ function FaasReactClient({
   onError
 }) {
   const client = new FaasBrowserClient(domain, options);
-  async function faas(action, params) {
+  async function faas2(action, params) {
     if (onError)
       return client.action(action, params).catch(async (res) => {
         await onError(action, params)(res);
@@ -22,7 +22,7 @@ function FaasReactClient({
       });
     return client.action(action, params);
   }
-  function useFaas(action, defaultParams, options2) {
+  function useFaas2(action, defaultParams, options2) {
     if (!options2)
       options2 = {};
     const [loading, setLoading] = useState(true);
@@ -77,8 +77,8 @@ function FaasReactClient({
     };
   }
   const reactClient = {
-    faas,
-    useFaas,
+    faas: faas2,
+    useFaas: useFaas2,
     FaasDataWrapper({
       action,
       params,
@@ -88,7 +88,7 @@ function FaasReactClient({
       data,
       setData
     }) {
-      const request = useFaas(action, params, {
+      const request = useFaas2(action, params, {
         data,
         setData
       });
@@ -115,8 +115,14 @@ function getClient(domain) {
     throw Error("FaasReactClient is not initialized");
   return client;
 }
+async function faas(action, params) {
+  return getClient().faas(action, params);
+}
+function useFaas(action, defaultParams) {
+  return getClient().useFaas(action, defaultParams);
+}
 function FaasDataWrapper(props) {
-  const [client, setClient] = useState(props.client);
+  const [client, setClient] = useState();
   useEffect(() => {
     if (client)
       return;
@@ -129,5 +135,7 @@ function FaasDataWrapper(props) {
 export {
   FaasDataWrapper,
   FaasReactClient,
-  getClient
+  faas,
+  getClient,
+  useFaas
 };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@faasjs/react",
-  "version": "0.0.2-beta.360",
+  "version": "0.0.2-beta.364",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "homepage": "https://faasjs.com/doc/react.html",
+  "homepage": "https://faasjs.com/doc/react",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/faasjs/faasjs.git",
@@ -23,8 +23,8 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/browser": "^0.0.2-beta.360",
-    "@faasjs/types": "^0.0.2-beta.360",
+    "@faasjs/browser": "^0.0.2-beta.364",
+    "@faasjs/types": "^0.0.2-beta.364",
     "react": "*"
   },
   "devDependencies": {