@faasjs/react 2.7.0 → 2.8.1

package/README.md

@@ -61,12 +61,13 @@ const client = FaasReactClient({
 
 ## Functions
 
-- [FaasDataWrapper](functions/FaasDataWrapper.md)
-- [FaasReactClient](functions/FaasReactClient.md)
-- [OptionalWrapper](functions/OptionalWrapper.md)
 - [createSplitedContext](functions/createSplitedContext.md)
 - [createSplittingContext](functions/createSplittingContext.md)
 - [faas](functions/faas.md)
+- [FaasDataWrapper](functions/FaasDataWrapper.md)
+- [FaasReactClient](functions/FaasReactClient.md)
 - [getClient](functions/getClient.md)
+- [OptionalWrapper](functions/OptionalWrapper.md)
 - [useConstant](functions/useConstant.md)
 - [useFaas](functions/useFaas.md)
+- [withFaasData](functions/withFaasData.md)

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { FaasAction as FaasAction$1, FaasParams as FaasParams$1, FaasData as FaasData$1 } from '@faasjs/types';
+import { FaasAction, FaasParams, FaasData } from '@faasjs/types';
 export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Options, ResponseError, Response as Response$1 } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
@@ -119,6 +119,7 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
   data?: FaasData<PathOrData>
   /** use custom setData, should work with data */
   setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>
+  domain?: string
 }
 
 type useFaasOptions<PathOrData extends FaasAction> = {
@@ -153,6 +154,7 @@ type FaasReactClientOptions = {
 declare function FaasReactClient({ domain, options, onError, }: FaasReactClientOptions): FaasReactClientInstance;
 /**
  * Get FaasReactClient instance
+ *
  * @param domain {string} empty string for default domain
  * @returns {FaasReactClientInstance}
  *
@@ -178,7 +180,7 @@ declare function getClient(domain?: string): FaasReactClientInstance;
  * })
  * ```
  */
-declare function faas<PathOrData extends FaasAction$1>(action: string | PathOrData, params: FaasParams$1<PathOrData>): Promise<Response$1<FaasData$1<PathOrData>>>;
+declare function faas<PathOrData extends FaasAction>(action: string | PathOrData, params: FaasParams<PathOrData>): Promise<Response$1<FaasData<PathOrData>>>;
 /**
  * Request faas server with React hook
  *
@@ -194,28 +196,7 @@ declare function faas<PathOrData extends FaasAction$1>(action: string | PathOrDa
  * }
  * ```
  */
-declare function useFaas<PathOrData extends FaasAction$1>(action: string | PathOrData, defaultParams: FaasParams$1<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<FaasData$1<PathOrData>>;
-/**
- * A data wrapper for react components
- *
- * @returns {JSX.Element}
- *
- * @example
- * ```tsx
- * <FaasDataWrapper<{
- *   id: string
- *   title: string
- * }>
- *   action='post/get'
- *   params={ { id: 1 } }
- *   render={ ({ data }) => <h1>{ data.title }</h1> }
- * />
- * ```
- */
-declare function FaasDataWrapper<PathOrData extends FaasAction$1>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
-declare namespace FaasDataWrapper {
-    var whyDidYouRender: boolean;
-}
+declare function useFaas<PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<FaasData<PathOrData>>;
 
 interface ErrorBoundaryProps {
     children?: ReactNode;
@@ -240,6 +221,20 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
     render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 }
 
+declare function FaasDataWrapper<PathOrData extends FaasAction>({ action, params, fallback, render, children, onDataChange, data, setData, domain, }: FaasDataWrapperProps<PathOrData>): JSX.Element;
+declare namespace FaasDataWrapper {
+    var whyDidYouRender: boolean;
+}
+/**
+ * HOC to wrap a component with FaasDataWrapper
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = withFaasData(({ data }) => <div>{data.name}</div>, { action: 'test', params: { a: 1 } })
+ * ```
+ */
+declare function withFaasData<PathOrData extends FaasAction, TComponentProps extends FaasDataInjection<PathOrData> = FaasDataInjection<PathOrData>>(Component: React.FC<TComponentProps & Record<string, any>>, faasProps: FaasDataWrapperProps<PathOrData>): React.FC<Omit<TComponentProps, keyof FaasDataInjection> & Record<string, any>>;
+
 type OptionalWrapperProps<TWrapper extends ComponentType<{
     children: ReactNode;
 }> = any> = {
@@ -270,4 +265,4 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, OptionalWrapper, type OptionalWrapperProps, createSplitedContext, createSplittingContext, faas, getClient, useConstant, useFaas, type useFaasOptions };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, OptionalWrapper, type OptionalWrapperProps, createSplitedContext, createSplittingContext, faas, getClient, useConstant, useFaas, type useFaasOptions, withFaasData };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { FaasAction as FaasAction$1, FaasParams as FaasParams$1, FaasData as FaasData$1 } from '@faasjs/types';
+import { FaasAction, FaasParams, FaasData } from '@faasjs/types';
 export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Options, ResponseError, Response as Response$1 } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
@@ -119,6 +119,7 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
   data?: FaasData<PathOrData>
   /** use custom setData, should work with data */
   setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>
+  domain?: string
 }
 
 type useFaasOptions<PathOrData extends FaasAction> = {
@@ -153,6 +154,7 @@ type FaasReactClientOptions = {
 declare function FaasReactClient({ domain, options, onError, }: FaasReactClientOptions): FaasReactClientInstance;
 /**
  * Get FaasReactClient instance
+ *
  * @param domain {string} empty string for default domain
  * @returns {FaasReactClientInstance}
  *
@@ -178,7 +180,7 @@ declare function getClient(domain?: string): FaasReactClientInstance;
  * })
  * ```
  */
-declare function faas<PathOrData extends FaasAction$1>(action: string | PathOrData, params: FaasParams$1<PathOrData>): Promise<Response$1<FaasData$1<PathOrData>>>;
+declare function faas<PathOrData extends FaasAction>(action: string | PathOrData, params: FaasParams<PathOrData>): Promise<Response$1<FaasData<PathOrData>>>;
 /**
  * Request faas server with React hook
  *
@@ -194,28 +196,7 @@ declare function faas<PathOrData extends FaasAction$1>(action: string | PathOrDa
  * }
  * ```
  */
-declare function useFaas<PathOrData extends FaasAction$1>(action: string | PathOrData, defaultParams: FaasParams$1<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<FaasData$1<PathOrData>>;
-/**
- * A data wrapper for react components
- *
- * @returns {JSX.Element}
- *
- * @example
- * ```tsx
- * <FaasDataWrapper<{
- *   id: string
- *   title: string
- * }>
- *   action='post/get'
- *   params={ { id: 1 } }
- *   render={ ({ data }) => <h1>{ data.title }</h1> }
- * />
- * ```
- */
-declare function FaasDataWrapper<PathOrData extends FaasAction$1>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
-declare namespace FaasDataWrapper {
-    var whyDidYouRender: boolean;
-}
+declare function useFaas<PathOrData extends FaasAction>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<FaasData<PathOrData>>;
 
 interface ErrorBoundaryProps {
     children?: ReactNode;
@@ -240,6 +221,20 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
     render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 }
 
+declare function FaasDataWrapper<PathOrData extends FaasAction>({ action, params, fallback, render, children, onDataChange, data, setData, domain, }: FaasDataWrapperProps<PathOrData>): JSX.Element;
+declare namespace FaasDataWrapper {
+    var whyDidYouRender: boolean;
+}
+/**
+ * HOC to wrap a component with FaasDataWrapper
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = withFaasData(({ data }) => <div>{data.name}</div>, { action: 'test', params: { a: 1 } })
+ * ```
+ */
+declare function withFaasData<PathOrData extends FaasAction, TComponentProps extends FaasDataInjection<PathOrData> = FaasDataInjection<PathOrData>>(Component: React.FC<TComponentProps & Record<string, any>>, faasProps: FaasDataWrapperProps<PathOrData>): React.FC<Omit<TComponentProps, keyof FaasDataInjection> & Record<string, any>>;
+
 type OptionalWrapperProps<TWrapper extends ComponentType<{
     children: ReactNode;
 }> = any> = {
@@ -270,4 +265,4 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, OptionalWrapper, type OptionalWrapperProps, createSplitedContext, createSplittingContext, faas, getClient, useConstant, useFaas, type useFaasOptions };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, OptionalWrapper, type OptionalWrapperProps, createSplitedContext, createSplittingContext, faas, getClient, useConstant, useFaas, type useFaasOptions, withFaasData };

package/dist/index.js

@@ -44,6 +44,48 @@ function createSplittingContext(defaultValue) {
   };
 }
 var createSplitedContext = createSplittingContext;
+function FaasDataWrapper({
+  action,
+  params,
+  fallback,
+  render,
+  children,
+  onDataChange,
+  data,
+  setData,
+  domain
+}) {
+  const request = getClient(domain).useFaas(action, params, {
+    data,
+    setData
+  });
+  const [loaded, setLoaded] = react.useState(false);
+  react.useEffect(() => {
+    if (!loaded && !request.loading) setLoaded(true);
+  }, [request.loading]);
+  react.useEffect(() => {
+    if (onDataChange) onDataChange(request);
+  }, [JSON.stringify(request.data)]);
+  const child = react.useMemo(() => {
+    if (loaded) {
+      if (children) return react.cloneElement(children, request);
+      if (render) return render(request);
+    }
+    return fallback || null;
+  }, [
+    loaded,
+    request.action,
+    request.params,
+    request.data,
+    request.error,
+    request.loading
+  ]);
+  return child;
+}
+FaasDataWrapper.whyDidYouRender = true;
+function withFaasData(Component2, faasProps) {
+  return (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props }) });
+}
 var clients = {};
 function FaasReactClient({
   domain,
@@ -157,49 +199,11 @@ function FaasReactClient({
     };
   }
   useFaas2.whyDidYouRender = true;
-  function FaasDataWrapper2({
-    action,
-    params,
-    fallback,
-    render,
-    children,
-    onDataChange,
-    data,
-    setData
-  }) {
-    const request = useFaas2(action, params, {
-      data,
-      setData
-    });
-    const [loaded, setLoaded] = react.useState(false);
-    react.useEffect(() => {
-      if (!loaded && !request.loading) setLoaded(true);
-    }, [request.loading]);
-    react.useEffect(() => {
-      if (onDataChange) onDataChange(request);
-    }, [JSON.stringify(request.data)]);
-    const child = react.useMemo(() => {
-      if (loaded) {
-        if (children) return react.cloneElement(children, request);
-        if (render) return render(request);
-      }
-      return fallback || null;
-    }, [
-      loaded,
-      request.action,
-      request.params,
-      request.data,
-      request.error,
-      request.loading
-    ]);
-    return child;
-  }
-  FaasDataWrapper2.whyDidYouRender = true;
   const reactClient = {
     id: client.id,
     faas: faas2,
     useFaas: useFaas2,
-    FaasDataWrapper: FaasDataWrapper2
+    FaasDataWrapper: (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, { domain, ...props })
   };
   clients[domain] = reactClient;
   return reactClient;
@@ -220,16 +224,6 @@ async function faas(action, params) {
 function useFaas(action, defaultParams, options) {
   return getClient().useFaas(action, defaultParams, options);
 }
-function FaasDataWrapper(props) {
-  const [client, setClient] = react.useState();
-  react.useEffect(() => {
-    if (client) return;
-    setClient(getClient());
-  }, []);
-  if (!client) return props.fallback || null;
-  return /* @__PURE__ */ jsxRuntime.jsx(client.FaasDataWrapper, { ...props });
-}
-FaasDataWrapper.whyDidYouRender = true;
 var ErrorBoundary = class extends react.Component {
   constructor(props) {
     super(props);
@@ -284,3 +278,4 @@ exports.faas = faas;
 exports.getClient = getClient;
 exports.useConstant = useConstant;
 exports.useFaas = useFaas;
+exports.withFaasData = withFaasData;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useRef, createContext, useState, useEffect, Component, cloneElement, useContext, useCallback, useMemo } from 'react';
+import { useRef, createContext, useState, useEffect, useMemo, cloneElement, Component, useContext, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
@@ -42,6 +42,48 @@ function createSplittingContext(defaultValue) {
   };
 }
 var createSplitedContext = createSplittingContext;
+function FaasDataWrapper({
+  action,
+  params,
+  fallback,
+  render,
+  children,
+  onDataChange,
+  data,
+  setData,
+  domain
+}) {
+  const request = getClient(domain).useFaas(action, params, {
+    data,
+    setData
+  });
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    if (!loaded && !request.loading) setLoaded(true);
+  }, [request.loading]);
+  useEffect(() => {
+    if (onDataChange) onDataChange(request);
+  }, [JSON.stringify(request.data)]);
+  const child = useMemo(() => {
+    if (loaded) {
+      if (children) return cloneElement(children, request);
+      if (render) return render(request);
+    }
+    return fallback || null;
+  }, [
+    loaded,
+    request.action,
+    request.params,
+    request.data,
+    request.error,
+    request.loading
+  ]);
+  return child;
+}
+FaasDataWrapper.whyDidYouRender = true;
+function withFaasData(Component2, faasProps) {
+  return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
+}
 var clients = {};
 function FaasReactClient({
   domain,
@@ -155,49 +197,11 @@ function FaasReactClient({
     };
   }
   useFaas2.whyDidYouRender = true;
-  function FaasDataWrapper2({
-    action,
-    params,
-    fallback,
-    render,
-    children,
-    onDataChange,
-    data,
-    setData
-  }) {
-    const request = useFaas2(action, params, {
-      data,
-      setData
-    });
-    const [loaded, setLoaded] = useState(false);
-    useEffect(() => {
-      if (!loaded && !request.loading) setLoaded(true);
-    }, [request.loading]);
-    useEffect(() => {
-      if (onDataChange) onDataChange(request);
-    }, [JSON.stringify(request.data)]);
-    const child = useMemo(() => {
-      if (loaded) {
-        if (children) return cloneElement(children, request);
-        if (render) return render(request);
-      }
-      return fallback || null;
-    }, [
-      loaded,
-      request.action,
-      request.params,
-      request.data,
-      request.error,
-      request.loading
-    ]);
-    return child;
-  }
-  FaasDataWrapper2.whyDidYouRender = true;
   const reactClient = {
     id: client.id,
     faas: faas2,
     useFaas: useFaas2,
-    FaasDataWrapper: FaasDataWrapper2
+    FaasDataWrapper: (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { domain, ...props })
   };
   clients[domain] = reactClient;
   return reactClient;
@@ -218,16 +222,6 @@ async function 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 /* @__PURE__ */ jsx(client.FaasDataWrapper, { ...props });
-}
-FaasDataWrapper.whyDidYouRender = true;
 var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -272,4 +266,4 @@ var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
 };
 OptionalWrapper.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, OptionalWrapper, createSplitedContext, createSplittingContext, faas, getClient, useConstant, useFaas };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, OptionalWrapper, createSplitedContext, createSplittingContext, faas, getClient, useConstant, useFaas, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -34,7 +34,7 @@
     "dist"
   ],
   "dependencies": {
-    "@faasjs/browser": "2.7.0"
+    "@faasjs/browser": "2.8.1"
   },
   "peerDependencies": {
     "react": "*"