@faasjs/react 2.6.1 → 2.8.0

package/README.md

@@ -54,6 +54,7 @@ const client = FaasReactClient({
 - [FaasParams](type-aliases/FaasParams.md)
 - [FaasReactClientInstance](type-aliases/FaasReactClientInstance.md)
 - [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)
+- [OptionalWrapperProps](type-aliases/OptionalWrapperProps.md)
 - [Options](type-aliases/Options.md)
 - [ResponseHeaders](type-aliases/ResponseHeaders.md)
 - [useFaasOptions](type-aliases/useFaasOptions.md)
@@ -62,9 +63,11 @@ const client = FaasReactClient({
 
 - [FaasDataWrapper](functions/FaasDataWrapper.md)
 - [FaasReactClient](functions/FaasReactClient.md)
+- [OptionalWrapper](functions/OptionalWrapper.md)
 - [createSplitedContext](functions/createSplitedContext.md)
 - [createSplittingContext](functions/createSplittingContext.md)
 - [faas](functions/faas.md)
 - [getClient](functions/getClient.md)
 - [useConstant](functions/useConstant.md)
 - [useFaas](functions/useFaas.md)
+- [withFaasData](functions/withFaasData.md)

package/dist/index.d.mts

@@ -1,9 +1,9 @@
-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';
 import * as react from 'react';
-import { ReactNode, ReactElement, Component } from 'react';
+import { ReactNode, ReactElement, Component, ComponentProps, ComponentType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -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,4 +221,48 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
     render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 }
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, createSplitedContext, createSplittingContext, faas, getClient, useConstant, useFaas, type useFaasOptions };
+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(MyComponent, { action: 'test', params: { a: 1 } })
+ * ```
+ */
+declare function withFaasData<TComponent extends React.FC<any>, PathOrData extends FaasAction>(Component: TComponent, faasProps: FaasDataWrapperProps<PathOrData>): (props: Omit<ComponentProps<TComponent>, "data">) => react_jsx_runtime.JSX.Element;
+
+type OptionalWrapperProps<TWrapper extends ComponentType<{
+    children: ReactNode;
+}> = any> = {
+    condition: boolean;
+    Wrapper: TWrapper;
+    wrapperProps?: ComponentProps<TWrapper>;
+    children: ReactNode;
+};
+/**
+ * A wrapper component that conditionally wraps its children with a provided wrapper component.
+ *
+ * @example
+ * ```tsx
+ * import { OptionalWrapper } from '@faasjs/react'
+ *
+ * const Wrapper = ({ children }: { children: React.ReactNode }) => (
+ *   <div className='wrapper'>{children}</div>
+ * )
+ *
+ * const App = () => (
+ *   <OptionalWrapper condition={true} Wrapper={Wrapper}>
+ *     <span>Test</span>
+ *   </OptionalWrapper>
+ * )
+ * ```
+ */
+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, withFaasData };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-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';
 import * as react from 'react';
-import { ReactNode, ReactElement, Component } from 'react';
+import { ReactNode, ReactElement, Component, ComponentProps, ComponentType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -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,4 +221,48 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
     render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 }
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, createSplitedContext, createSplittingContext, faas, getClient, useConstant, useFaas, type useFaasOptions };
+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(MyComponent, { action: 'test', params: { a: 1 } })
+ * ```
+ */
+declare function withFaasData<TComponent extends React.FC<any>, PathOrData extends FaasAction>(Component: TComponent, faasProps: FaasDataWrapperProps<PathOrData>): (props: Omit<ComponentProps<TComponent>, "data">) => react_jsx_runtime.JSX.Element;
+
+type OptionalWrapperProps<TWrapper extends ComponentType<{
+    children: ReactNode;
+}> = any> = {
+    condition: boolean;
+    Wrapper: TWrapper;
+    wrapperProps?: ComponentProps<TWrapper>;
+    children: ReactNode;
+};
+/**
+ * A wrapper component that conditionally wraps its children with a provided wrapper component.
+ *
+ * @example
+ * ```tsx
+ * import { OptionalWrapper } from '@faasjs/react'
+ *
+ * const Wrapper = ({ children }: { children: React.ReactNode }) => (
+ *   <div className='wrapper'>{children}</div>
+ * )
+ *
+ * const App = () => (
+ *   <OptionalWrapper condition={true} Wrapper={Wrapper}>
+ *     <span>Test</span>
+ *   </OptionalWrapper>
+ * )
+ * ```
+ */
+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, 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);
@@ -268,13 +262,20 @@ var ErrorBoundary = class extends react.Component {
 };
 ErrorBoundary.whyDidYouRender = true;
 ErrorBoundary.whyDidYouRender = true;
+var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
+  console.debug("[OptionalWrapper] %s %s", Wrapper.name, condition);
+  return condition ? /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+OptionalWrapper.whyDidYouRender = true;
 
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasDataWrapper = FaasDataWrapper;
 exports.FaasReactClient = FaasReactClient;
+exports.OptionalWrapper = OptionalWrapper;
 exports.createSplitedContext = createSplitedContext;
 exports.createSplittingContext = createSplittingContext;
 exports.faas = faas;
 exports.getClient = getClient;
 exports.useConstant = useConstant;
 exports.useFaas = useFaas;
+exports.withFaasData = withFaasData;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { useRef, createContext, useState, useEffect, Component, cloneElement, useContext, useCallback, useMemo } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+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';
 
 // src/constant.ts
@@ -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);
@@ -266,5 +260,10 @@ var ErrorBoundary = class extends Component {
 };
 ErrorBoundary.whyDidYouRender = true;
 ErrorBoundary.whyDidYouRender = true;
+var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
+  console.debug("[OptionalWrapper] %s %s", Wrapper.name, condition);
+  return condition ? /* @__PURE__ */ jsx(Wrapper, { ...wrapperProps, children }) : /* @__PURE__ */ jsx(Fragment, { children });
+};
+OptionalWrapper.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, 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.6.1",
+  "version": "2.8.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -17,7 +17,7 @@
       }
     }
   },
-  "homepage": "https://faasjs.com/doc/react",
+  "homepage": "https://faasjs.com/doc/react/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/faasjs/faasjs.git",
@@ -34,7 +34,7 @@
     "dist"
   ],
   "dependencies": {
-    "@faasjs/browser": "2.6.1"
+    "@faasjs/browser": "2.8.0"
   },
   "peerDependencies": {
     "react": "*"