@faasjs/react 0.0.2-beta.95 → 0.0.3-beta.2

package/README.md

@@ -1,9 +1,305 @@
 # @faasjs/react
 
-React 插件
-
-[![License: MIT](https://img.shields.io/npm/l/@faasjs/react.svg)](https://github.com/faasjs/faasjs/blob/master/packages/faasjs/react/LICENSE)
+[![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.
+
+**If you use [SWR](https://swr.vercel.app) or [React Query / TanStack Query](https://tanstack.com/query), please use [`@faasjs/browser`](https://faasjs.com/doc/browser) directly.**
+
+## Install
+
+    npm install @faasjs/react
+
+## Modules
+
+### Classes
+
+- [FaasBrowserClient](classes/FaasBrowserClient.md)
+- [Response](classes/Response.md)
+- [ResponseError](classes/ResponseError.md)
+
+### Type Aliases
+
+- [FaasAction](#faasaction)
+- [FaasData](#faasdata)
+- [FaasDataInjection](#faasdatainjection)
+- [FaasDataWrapperProps](#faasdatawrapperprops)
+- [FaasParams](#faasparams)
+- [FaasReactClientInstance](#faasreactclientinstance)
+- [Options](#options)
+- [ResponseHeaders](#responseheaders)
+
+### Functions
+
+- [FaasDataWrapper](#faasdatawrapper)
+- [FaasReactClient](#faasreactclient)
+- [faas](#faas)
+- [getClient](#getclient)
+- [useFaas](#usefaas)
+
+## Type Aliases
+
+### FaasAction
+
+Ƭ **FaasAction**: `FaasActionPaths` \| `Record`<`string`, `any`\>
+
+___
+
+### FaasData
+
+Ƭ **FaasData**<`T`\>: `T` extends `FaasActionPaths` ? `FaasActions`[`T`][``"Data"``] : `T`
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `T` | `any` |
+
+___
+
+### 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`](#faasaction) |
+
+#### Type declaration
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `action` | `string` | - |
+| `data?` | [`FaasData`](#faasdata)<`PathOrData`\> | use custom data, should work with setData |
+| `fallback?` | `JSX.Element` \| ``false`` | - |
+| `params?` | [`FaasParams`](#faasparams)<`PathOrData`\> | - |
+| `setData?` | `React.Dispatch`<`React.SetStateAction`<[`FaasData`](#faasdata)<`PathOrData`\>\>\> | use custom setData, should work with data |
+| `onDataChange?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>) => `void` | - |
+| `render?` | (`args`: [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>) => `Element` \| `Element`[] | - |
+
+___
+
+### FaasParams
+
+Ƭ **FaasParams**<`T`\>: `T` extends `FaasActionPaths` ? `FaasActions`[`T`][``"Params"``] : `any`
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `T` | `any` |
+
+___
+
+### FaasReactClientInstance
+
+Ƭ **FaasReactClientInstance**: `Object`
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `faas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `params`: [`FaasParams`](#faasparams)<`PathOrData`\>) => `Promise`<[`Response`](classes/Response.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>\> |
+| `useFaas` | <PathOrData\>(`action`: `string` \| `PathOrData`, `defaultParams`: [`FaasParams`](#faasparams)<`PathOrData`\>) => [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\> |
+| `FaasDataWrapper` | <PathOrData\>(`props`: [`FaasDataWrapperProps`](#faasdatawrapperprops)<`PathOrData`\>) => `Element` |
+
+___
+
+### Options
+
+Ƭ **Options**: `RequestInit` & { `beforeRequest?`: (`{
+    action, params, options
+  }`: { `action`: `string` ; `options`: [`Options`](#options) ; `params`: `Record`<`string`, `any`\>  }) => `Promise`<`void`\> \| `void` ; `headers?`: { `[key: string]`: `string`;  } ; `request?`: <PathOrData\>(`url`: `string`, `options`: [`Options`](#options)) => `Promise`<[`Response`](classes/Response.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>\>  }
+
+___
+
+### 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 `Record`<`string`, `any`\> |
+
+#### 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.onError?` | (`action`: `string`, `params`: `Record`<`string`, `any`\>) => (`res`: [`ResponseError`](classes/ResponseError.md)) => `Promise`<`void`\> |
+| `__namedParameters.options?` | [`Options`](#options) |
+
+#### Returns
+
+[`FaasReactClientInstance`](#faasreactclientinstance)
+
+```ts
+const client = FaasReactClient({
+  domain: 'localhost:8080/api'
+})
+```
+
+___
+
+### faas
+
+▸ **faas**<`PathOrData`\>(`action`, `params`): `Promise`<[`Response`](classes/Response.md)<[`FaasData`](#faasdata)<`PathOrData`\>\>\>
+
+Request faas server
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `PathOrData` | extends `Record`<`string`, `any`\> |
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `action` | `string` \| `PathOrData` | {string} action name |
+| `params` | [`FaasParams`](#faasparams)<`PathOrData`\> | {object} action params |
+
+#### Returns
+
+`Promise`<[`Response`](classes/Response.md)<[`FaasData`](#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` | {string} empty string for default domain |
+
+#### Returns
+
+[`FaasReactClientInstance`](#faasreactclientinstance)
+
+```ts
+getClient()
+// or
+getClient('another-domain')
+```
+
+___
+
+### useFaas
+
+▸ **useFaas**<`PathOrData`\>(`action`, `defaultParams`): [`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>
+
+Request faas server with React hook
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `PathOrData` | extends `Record`<`string`, `any`\> |
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `action` | `string` \| `PathOrData` | {string} action name |
+| `defaultParams` | [`FaasParams`](#faasparams)<`PathOrData`\> | {object} initial action params |
+
+#### Returns
+
+[`FaasDataInjection`](#faasdatainjection)<[`FaasData`](#faasdata)<`PathOrData`\>\>
+
+```ts
+function Post ({ id }) {
+  const { data } = useFaas<{ title: string }>('post/get', { id })
+  return <h1>{data.title}</h1>
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,121 @@
+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.
+ */
+type 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>>;
+};
+type FaasDataWrapperProps<PathOrData extends FaasAction> = {
+    render?(args: FaasDataInjection<FaasData<PathOrData>>): JSX.Element | JSX.Element[];
+    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>>>;
+};
+type 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.js

@@ -0,0 +1,169 @@
+"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);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  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);
+  async function faas2(action, params) {
+    if (onError)
+      return client.action(action, params).catch(async (res) => {
+        await onError(action, params)(res);
+        return Promise.reject(res);
+      });
+    return client.action(action, params);
+  }
+  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);
+    (0, import_react.useEffect)(function() {
+      if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
+        setParams(defaultParams);
+      }
+    }, [JSON.stringify(defaultParams)]);
+    (0, import_react.useEffect)(function() {
+      if (options2 == null ? void 0 : options2.skip) {
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      const request = client.action(action, params);
+      setPromise(request);
+      request.then((r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)).catch(async (e) => {
+        if (onError)
+          try {
+            await onError(action, params)(e);
+          } catch (error2) {
+            setError(error2);
+          }
+        else
+          setError(e);
+        return Promise.reject(e);
+      }).finally(() => setLoading(false));
+      return () => setLoading(false);
+    }, [
+      action,
+      JSON.stringify(params),
+      reloadTimes,
+      options2.skip
+    ]);
+    return {
+      action,
+      params,
+      loading,
+      data: (options2 == null ? void 0 : options2.data) || data,
+      error,
+      promise,
+      async reload(params2) {
+        if (params2)
+          setParams(params2);
+        setReloadTimes(reloadTimes + 1);
+        return promise;
+      },
+      setData: (options2 == null ? void 0 : options2.setData) || setData,
+      setLoading,
+      setPromise,
+      setError
+    };
+  }
+  const reactClient = {
+    faas: faas2,
+    useFaas: useFaas2,
+    FaasDataWrapper({
+      action,
+      params,
+      fallback,
+      render,
+      onDataChange,
+      data,
+      setData
+    }) {
+      const request = useFaas2(action, params, {
+        data,
+        setData
+      });
+      const [loaded, setLoaded] = (0, import_react.useState)(false);
+      (0, import_react.useEffect)(function() {
+        if (!loaded && !request.loading)
+          setLoaded(true);
+      }, [request.loading]);
+      (0, import_react.useEffect)(function() {
+        if (onDataChange)
+          onDataChange(request);
+      }, [JSON.stringify(request.data)]);
+      if (loaded)
+        return render(request);
+      return fallback || null;
+    }
+  };
+  clients[domain] = reactClient;
+  return reactClient;
+}
+function getClient(domain) {
+  const client = clients[domain || Object.keys(clients)[0]];
+  if (!client)
+    throw Error("FaasReactClient is not initialized");
+  return client;
+}
+async function faas(action, params) {
+  return getClient().faas(action, params);
+}
+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)(() => {
+    if (client)
+      return;
+    setClient(getClient());
+  }, []);
+  if (!client)
+    return props.fallback || null;
+  return (0, import_react.createElement)(client.FaasDataWrapper, props);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FaasDataWrapper,
+  FaasReactClient,
+  faas,
+  getClient,
+  useFaas
+});

package/dist/index.mjs

@@ -0,0 +1,146 @@
+// src/index.tsx
+import {
+  FaasBrowserClient
+} from "@faasjs/browser";
+import {
+  useState,
+  useEffect,
+  createElement
+} from "react";
+var clients = {};
+function FaasReactClient({
+  domain,
+  options,
+  onError
+}) {
+  const client = new FaasBrowserClient(domain, options);
+  async function faas2(action, params) {
+    if (onError)
+      return client.action(action, params).catch(async (res) => {
+        await onError(action, params)(res);
+        return Promise.reject(res);
+      });
+    return client.action(action, params);
+  }
+  function useFaas2(action, defaultParams, options2) {
+    if (!options2)
+      options2 = {};
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState();
+    const [error, setError] = useState();
+    const [promise, setPromise] = useState();
+    const [params, setParams] = useState(defaultParams);
+    const [reloadTimes, setReloadTimes] = useState(0);
+    useEffect(function() {
+      if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
+        setParams(defaultParams);
+      }
+    }, [JSON.stringify(defaultParams)]);
+    useEffect(function() {
+      if (options2 == null ? void 0 : options2.skip) {
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      const request = client.action(action, params);
+      setPromise(request);
+      request.then((r) => (options2 == null ? void 0 : options2.setData) ? options2.setData(r.data) : setData(r.data)).catch(async (e) => {
+        if (onError)
+          try {
+            await onError(action, params)(e);
+          } catch (error2) {
+            setError(error2);
+          }
+        else
+          setError(e);
+        return Promise.reject(e);
+      }).finally(() => setLoading(false));
+      return () => setLoading(false);
+    }, [
+      action,
+      JSON.stringify(params),
+      reloadTimes,
+      options2.skip
+    ]);
+    return {
+      action,
+      params,
+      loading,
+      data: (options2 == null ? void 0 : options2.data) || data,
+      error,
+      promise,
+      async reload(params2) {
+        if (params2)
+          setParams(params2);
+        setReloadTimes(reloadTimes + 1);
+        return promise;
+      },
+      setData: (options2 == null ? void 0 : options2.setData) || setData,
+      setLoading,
+      setPromise,
+      setError
+    };
+  }
+  const reactClient = {
+    faas: faas2,
+    useFaas: useFaas2,
+    FaasDataWrapper({
+      action,
+      params,
+      fallback,
+      render,
+      onDataChange,
+      data,
+      setData
+    }) {
+      const request = useFaas2(action, params, {
+        data,
+        setData
+      });
+      const [loaded, setLoaded] = useState(false);
+      useEffect(function() {
+        if (!loaded && !request.loading)
+          setLoaded(true);
+      }, [request.loading]);
+      useEffect(function() {
+        if (onDataChange)
+          onDataChange(request);
+      }, [JSON.stringify(request.data)]);
+      if (loaded)
+        return render(request);
+      return fallback || null;
+    }
+  };
+  clients[domain] = reactClient;
+  return reactClient;
+}
+function getClient(domain) {
+  const client = clients[domain || Object.keys(clients)[0]];
+  if (!client)
+    throw Error("FaasReactClient is not initialized");
+  return client;
+}
+async function faas(action, params) {
+  return getClient().faas(action, params);
+}
+function useFaas(action, defaultParams, options) {
+  return getClient().useFaas(action, defaultParams, options);
+}
+function FaasDataWrapper(props) {
+  const [client, setClient] = useState();
+  useEffect(() => {
+    if (client)
+      return;
+    setClient(getClient());
+  }, []);
+  if (!client)
+    return props.fallback || null;
+  return createElement(client.FaasDataWrapper, props);
+}
+export {
+  FaasDataWrapper,
+  FaasReactClient,
+  faas,
+  getClient,
+  useFaas
+};

package/package.json

@@ -1,23 +1,37 @@
 {
   "name": "@faasjs/react",
-  "version": "0.0.2-beta.95",
+  "version": "0.0.3-beta.2",
   "license": "MIT",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "homepage": "https://faasjs.com/doc/react",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/faasjs/faasjs.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/faasjs/faasjs/issues"
+  },
+  "funding": "https://github.com/sponsors/faasjs",
   "scripts": {
-    "prepack": "rm -rf ./lib && rollup -c && mv lib/*/src/* lib/"
+    "build": "tsup src/index.tsx --format esm,cjs",
+    "build:types": "tsup-node src/index.tsx --dts-only"
   },
   "files": [
-    "lib"
+    "dist"
   ],
   "dependencies": {
-    "@faasjs/browser": "^0.0.2-beta.95"
+    "@faasjs/browser": "^0.0.3-beta.2",
+    "@faasjs/types": "^0.0.3-beta.2",
+    "react": "*"
   },
   "devDependencies": {
-    "react": "*",
-    "rollup": "*",
-    "rollup-plugin-typescript2": "*",
-    "typescript": "*"
+    "@types/react": "*"
   },
-  "gitHead": "e5955ed30661b9cb7ddda79cc4f75567113801f0"
+  "engines": {
+    "npm": ">=8.0.0",
+    "node": ">=16.0.0"
+  }
 }

package/lib/index.d.ts

@@ -1,12 +0,0 @@
-import { Response } from '@faasjs/browser';
-export declare function FaasClient({ domain, onError }: {
-    domain: string;
-    onError?(action: string, params: any): (res: any) => any;
-}): {
-    faas<T = any>(action: string, params: any): Promise<Response<T>>;
-    useFaas<T = any>(action: string, params?: any): {
-        loading: boolean;
-        data: T;
-        error: any;
-    };
-};

package/lib/index.js

@@ -1,117 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var Client = _interopDefault(require('@faasjs/browser'));
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-var React = require('react');
-function FaasClient(_a) {
-    var domain = _a.domain, onError = _a.onError;
-    var client = new Client(domain);
-    return {
-        faas: function (action, params) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    if (onError)
-                        return [2 /*return*/, client.action(action, params).catch(onError(action, params))];
-                    return [2 /*return*/, client.action(action, params)];
-                });
-            });
-        },
-        useFaas: function (action, params) {
-            var _a = __read(React.useState(false), 2), loading = _a[0], setLoading = _a[1];
-            var _b = __read(React.useState(), 2), data = _b[0], setData = _b[1];
-            var _c = __read(React.useState(), 2), error = _c[0], setError = _c[1];
-            React.useEffect(function () {
-                setLoading(true);
-                client.action(action, params).then(function (r) {
-                    setData(r === null || r === void 0 ? void 0 : r.data);
-                }).catch(function (e) {
-                    if (onError)
-                        onError(action, params)(e);
-                    setError(e);
-                }).finally(function () { return setLoading(false); });
-            }, [action, JSON.stringify(params)]);
-            return {
-                loading: loading,
-                data: data,
-                error: error
-            };
-        }
-    };
-}
-
-exports.FaasClient = FaasClient;