@faasjs/react 6.3.1 → 6.4.0

package/README.md

@@ -83,6 +83,7 @@ npm install @faasjs/react react
 - [FaasData](type-aliases/FaasData.md)
 - [FaasDataInjection](type-aliases/FaasDataInjection.md)
 - [FaasDataWrapperProps](type-aliases/FaasDataWrapperProps.md)
+- [FaasDataWrapperRef](type-aliases/FaasDataWrapperRef.md)
 - [FaasParams](type-aliases/FaasParams.md)
 - [FaasReactClientInstance](type-aliases/FaasReactClientInstance.md)
 - [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)

package/dist/index.cjs

@@ -151,40 +151,46 @@ function useStateRef(initialValue) {
   }, [state]);
   return [state, setState, ref];
 }
-function FaasDataWrapper(props) {
-  const request = getClient(props.baseUrl).useFaas(
-    props.action,
-    props.params,
-    {
-      data: props.data,
-      setData: props.setData
-    }
-  );
-  const [loaded, setLoaded] = react.useState(false);
-  react.useEffect(() => {
-    if (!request.loading) setLoaded((prev) => prev === false ? true : prev);
-  }, [request.loading]);
-  useEqualEffect(() => {
-    if (props.onDataChange) props.onDataChange(request);
-  }, [request.data]);
-  const child = useEqualMemo(() => {
-    if (loaded) {
-      if (props.children) return react.cloneElement(props.children, request);
-      if (props.render) return props.render(request);
-    }
-    return props.fallback || null;
-  }, [
-    loaded,
-    request.action,
-    request.params,
-    request.data,
-    request.error,
-    request.loading
-  ]);
-  return child;
-}
-FaasDataWrapper.displayName = "FaasDataWrapper";
-FaasDataWrapper.whyDidYouRender = true;
+var fixedForwardRef = react.forwardRef;
+var FaasDataWrapper = fixedForwardRef(
+  (props, ref) => {
+    const request = getClient(props.baseUrl).useFaas(
+      props.action,
+      props.params,
+      {
+        data: props.data,
+        setData: props.setData
+      }
+    );
+    const [loaded, setLoaded] = react.useState(false);
+    react.useImperativeHandle(ref, () => request, [request]);
+    useEqualEffect(() => {
+      if (!request.loading) setLoaded((prev) => prev === false ? true : prev);
+    }, [request.loading]);
+    useEqualEffect(() => {
+      if (props.onDataChange) props.onDataChange(request);
+    }, [request.data]);
+    const child = useEqualMemo(() => {
+      if (loaded) {
+        if (props.children) return react.cloneElement(props.children, request);
+        if (props.render) return props.render(request);
+      }
+      return props.fallback || null;
+    }, [
+      loaded,
+      request.action,
+      request.params,
+      request.data,
+      request.error,
+      request.loading
+    ]);
+    return child;
+  }
+);
+Object.assign(FaasDataWrapper, {
+  displayName: "FaasDataWrapper",
+  whyDidYouRender: true
+});
 function withFaasData(Component2, faasProps) {
   return (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props }) });
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
+import { FaasActionUnionType, FaasAction, FaasParams, FaasData } from '@faasjs/types';
 export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
@@ -225,9 +225,9 @@ declare function useStateRef<T = any>(initialValue?: T): [T, Dispatch<SetStateAc
 /**
  * Injects FaasData props.
  */
-type FaasDataInjection<PathOrData extends FaasAction = any> = {
-    action: PathOrData | string;
-    params: Record<string, any>;
+type FaasDataInjection<PathOrData extends FaasActionUnionType = any> = {
+    action: FaasAction<PathOrData>;
+    params: FaasParams<PathOrData>;
     loading: boolean;
     reloadTimes: number;
     data: FaasData<PathOrData>;
@@ -244,11 +244,11 @@ type FaasDataInjection<PathOrData extends FaasAction = any> = {
     setPromise: React.Dispatch<React.SetStateAction<Promise<Response<FaasData<PathOrData>>>>>;
     setError: React.Dispatch<React.SetStateAction<any>>;
 };
-type FaasDataWrapperProps<PathOrData extends FaasAction> = {
+type FaasDataWrapperProps<PathOrData extends FaasActionUnionType> = {
     render?(args: FaasDataInjection<PathOrData>): JSX.Element | JSX.Element[];
     children?: React.ReactElement<Partial<FaasDataInjection<PathOrData>>>;
     fallback?: JSX.Element | false;
-    action: PathOrData | string;
+    action: FaasAction<PathOrData>;
     params?: FaasParams<PathOrData>;
     onDataChange?(args: FaasDataInjection<PathOrData>): void;
     /** use custom data, should work with setData */
@@ -256,12 +256,10 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
     /** use custom setData, should work with data */
     setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
     baseUrl?: BaseUrl;
+    ref?: React.Ref<FaasDataWrapperRef<PathOrData>>;
 };
-declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
-declare namespace FaasDataWrapper {
-    var displayName: string;
-    var whyDidYouRender: boolean;
-}
+type FaasDataWrapperRef<PathOrData extends FaasActionUnionType = any> = FaasDataInjection<PathOrData>;
+declare const FaasDataWrapper: <PathOrData extends FaasActionUnionType = any>(props: FaasDataWrapperProps<PathOrData> & react.RefAttributes<FaasDataWrapperRef<PathOrData>>) => React.ReactElement | null;
 /**
  * HOC to wrap a component with FaasDataWrapper
  *
@@ -270,7 +268,7 @@ declare namespace FaasDataWrapper {
  * const MyComponent = withFaasData(({ data }) => <div>{data.name}</div>, { action: 'test', params: { a: 1 } })
  * ```
  */
-declare function withFaasData<PathOrData extends FaasAction, TComponentProps extends Required<FaasDataInjection<PathOrData>> = Required<FaasDataInjection<PathOrData>>>(Component: React.FC<TComponentProps & Record<string, any>>, faasProps: FaasDataWrapperProps<PathOrData>): React.FC<Omit<TComponentProps, keyof FaasDataInjection<PathOrData>> & Record<string, any>>;
+declare function withFaasData<PathOrData extends FaasAction, TComponentProps extends Required<FaasDataInjection<PathOrData>> = Required<FaasDataInjection<PathOrData>>>(Component: React.FC<TComponentProps>, faasProps: FaasDataWrapperProps<PathOrData>): React.FC<Omit<TComponentProps, keyof FaasDataInjection<PathOrData>> & Record<string, any>>;
 
 type useFaasOptions<PathOrData extends FaasAction> = {
     params?: FaasParams<PathOrData>;
@@ -301,7 +299,7 @@ type useFaasOptions<PathOrData extends FaasAction> = {
  * }
  * ```
  */
-declare function useFaas<PathOrData extends FaasAction>(action: PathOrData | string, defaultParams: FaasParams<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<PathOrData>;
+declare function useFaas<PathOrData extends FaasActionUnionType>(action: FaasAction<PathOrData>, defaultParams: FaasParams<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<PathOrData>;
 declare namespace useFaas {
     var whyDidYouRender: boolean;
 }
@@ -323,9 +321,9 @@ type FaasReactClientOptions = {
 };
 type FaasReactClientInstance = {
     id: string;
-    faas: <PathOrData extends FaasAction>(action: PathOrData | string, params: FaasParams<PathOrData>, options?: Options) => Promise<Response<FaasData<PathOrData>>>;
-    useFaas: <PathOrData extends FaasAction>(action: PathOrData | string, defaultParams: FaasParams<PathOrData>, options?: useFaasOptions<PathOrData>) => FaasDataInjection<PathOrData>;
-    FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
+    faas: <PathOrData extends FaasActionUnionType>(action: FaasAction<PathOrData>, params: FaasParams<PathOrData>, options?: Options) => Promise<Response<FaasData<PathOrData>>>;
+    useFaas: <PathOrData extends FaasActionUnionType>(action: FaasAction<PathOrData>, defaultParams: FaasParams<PathOrData>, options?: useFaasOptions<PathOrData>) => FaasDataInjection<PathOrData>;
+    FaasDataWrapper<PathOrData extends FaasActionUnionType>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
     onError?: OnError;
     browserClient: FaasBrowserClient;
 };
@@ -373,7 +371,7 @@ declare function getClient(host?: string): FaasReactClientInstance;
  * })
  * ```
  */
-declare function faas<PathOrData extends FaasAction>(action: PathOrData | string, params: FaasParams<PathOrData>, options?: Options): Promise<Response<FaasData<PathOrData>>>;
+declare function faas<PathOrData extends FaasActionUnionType>(action: FaasAction<PathOrData>, params: FaasParams<PathOrData>, options?: Options): Promise<Response<FaasData<PathOrData>>>;
 
 interface ErrorBoundaryProps {
     children?: ReactNode;
@@ -626,4 +624,4 @@ declare const FormContextProvider: <NewT extends FormContextProps<Record<string,
 }) => react.ReactNode;
 declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>() => Readonly<NewT>;
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, type FaasDataWrapperRef, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormLang, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useMemo, useEffect, useCallback, useState, createContext, cloneElement, Component, useContext } from 'react';
+import { useState, useImperativeHandle, cloneElement, forwardRef, useRef, useMemo, useEffect, useCallback, createContext, Component, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
@@ -149,40 +149,46 @@ function useStateRef(initialValue) {
   }, [state]);
   return [state, setState, ref];
 }
-function FaasDataWrapper(props) {
-  const request = getClient(props.baseUrl).useFaas(
-    props.action,
-    props.params,
-    {
-      data: props.data,
-      setData: props.setData
-    }
-  );
-  const [loaded, setLoaded] = useState(false);
-  useEffect(() => {
-    if (!request.loading) setLoaded((prev) => prev === false ? true : prev);
-  }, [request.loading]);
-  useEqualEffect(() => {
-    if (props.onDataChange) props.onDataChange(request);
-  }, [request.data]);
-  const child = useEqualMemo(() => {
-    if (loaded) {
-      if (props.children) return cloneElement(props.children, request);
-      if (props.render) return props.render(request);
-    }
-    return props.fallback || null;
-  }, [
-    loaded,
-    request.action,
-    request.params,
-    request.data,
-    request.error,
-    request.loading
-  ]);
-  return child;
-}
-FaasDataWrapper.displayName = "FaasDataWrapper";
-FaasDataWrapper.whyDidYouRender = true;
+var fixedForwardRef = forwardRef;
+var FaasDataWrapper = fixedForwardRef(
+  (props, ref) => {
+    const request = getClient(props.baseUrl).useFaas(
+      props.action,
+      props.params,
+      {
+        data: props.data,
+        setData: props.setData
+      }
+    );
+    const [loaded, setLoaded] = useState(false);
+    useImperativeHandle(ref, () => request, [request]);
+    useEqualEffect(() => {
+      if (!request.loading) setLoaded((prev) => prev === false ? true : prev);
+    }, [request.loading]);
+    useEqualEffect(() => {
+      if (props.onDataChange) props.onDataChange(request);
+    }, [request.data]);
+    const child = useEqualMemo(() => {
+      if (loaded) {
+        if (props.children) return cloneElement(props.children, request);
+        if (props.render) return props.render(request);
+      }
+      return props.fallback || null;
+    }, [
+      loaded,
+      request.action,
+      request.params,
+      request.data,
+      request.error,
+      request.loading
+    ]);
+    return child;
+  }
+);
+Object.assign(FaasDataWrapper, {
+  displayName: "FaasDataWrapper",
+  whyDidYouRender: true
+});
 function withFaasData(Component2, faasProps) {
   return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -30,10 +30,10 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/browser": "6.3.1"
+    "@faasjs/browser": "6.4.0"
   },
   "devDependencies": {
-    "@faasjs/browser": "6.3.1",
+    "@faasjs/browser": "6.4.0",
     "@types/react": "*",
     "react": "*"
   },