@faasjs/ant-design 6.11.0 → 6.12.0

package/README.md

@@ -45,6 +45,7 @@ type FaasItemProps = {
 - [ErrorBoundary](functions/ErrorBoundary.md)
 - [faas](functions/faas.md)
 - [FaasDataWrapper](functions/FaasDataWrapper.md)
+- [FaasReactClient](functions/FaasReactClient.md)
 - [Form](functions/Form.md)
 - [FormItem](functions/FormItem.md)
 - [idToTitle](functions/idToTitle.md)
@@ -103,6 +104,7 @@ type FaasItemProps = {
 - [FaasDataWrapperRef](type-aliases/FaasDataWrapperRef.md)
 - [FaasItemType](type-aliases/FaasItemType.md)
 - [FaasItemTypeValue](type-aliases/FaasItemTypeValue.md)
+- [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)
 - [FormSubmitProps](type-aliases/FormSubmitProps.md)
 - [LoadingProps](type-aliases/LoadingProps.md)
 - [setDrawerProps](type-aliases/setDrawerProps.md)

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var react = require('@faasjs/react');
 var cssinjs = require('@ant-design/cssinjs');
+var react = require('@faasjs/react');
 var antd = require('antd');
 var reactRouterDom = require('react-router-dom');
 var lodashEs = require('lodash-es');
@@ -14,7 +14,40 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var dayjs2__default = /*#__PURE__*/_interopDefault(dayjs2);
 
-// src/index.ts
+// src/App.tsx
+function Loading(props) {
+  if (props.loading === false) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        ...props.style || {},
+        ...!props.size || props.size === "large" ? {
+          margin: "20vh auto",
+          textAlign: "center"
+        } : {}
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, { size: props.size || "large" })
+    }
+  );
+}
+Loading.whyDidYouRender = true;
+function FaasDataWrapper(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.FaasDataWrapper,
+    {
+      fallback: props.loading || /* @__PURE__ */ jsxRuntime.jsx(Loading, { ...props.loadingProps }),
+      ...props
+    }
+  );
+}
+FaasDataWrapper.whyDidYouRender = true;
+function withFaasData(Component, faasProps) {
+  return react.withFaasData(Component, {
+    fallback: faasProps.loading || /* @__PURE__ */ jsxRuntime.jsx(Loading, { ...faasProps.loadingProps }),
+    ...faasProps
+  });
+}
 var zh = {
   lang: "zh",
   blank: "\u7A7A",
@@ -54,7 +87,7 @@ var ConfigContext = react$1.createContext({
   theme: baseTheme
 });
 function ConfigProvider(props) {
-  const [theme2, setTheme] = react$1.useState(baseTheme);
+  const [theme2, setTheme] = react$1.useState();
   react.useEqualEffect(() => {
     const lang = props.theme?.lang || (!props.theme?.lang && /^zh/i.test(navigator.language) ? "zh" : "en");
     if (lang === "zh") {
@@ -182,9 +215,9 @@ function App(props) {
   const { drawer, drawerProps, setDrawerProps } = useDrawer();
   const styleProviderProps = react.useEqualMemo(
     () => ({
-      ...props.styleProviderProps,
       hashPriority: "high",
-      transformers: [cssinjs.legacyLogicalPropertiesTransformer]
+      transformers: [cssinjs.legacyLogicalPropertiesTransformer],
+      ...props.styleProviderProps
     }),
     [props.styleProviderProps]
   );
@@ -211,21 +244,38 @@ function App(props) {
                 modalProps,
                 setModalProps
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(ConfigProvider, { ...props.faasConfigProviderProps, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { ...props.errorBoundaryProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
-                react.OptionalWrapper,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ConfigProvider,
                 {
-                  condition: typeof document !== "undefined" && props.browserRouterProps !== false,
-                  Wrapper: reactRouterDom.BrowserRouter,
-                  wrapperProps: props.browserRouterProps,
-                  children: [
-                    messageContextHolder,
-                    notificationContextHolder,
-                    modal,
-                    drawer,
-                    props.browserRouterProps !== false ? /* @__PURE__ */ jsxRuntime.jsx(RoutesApp, { children: props.children }) : props.children
-                  ]
+                  ...props.faasConfigProviderProps,
+                  faasClientOptions: {
+                    onError: (action) => async (res) => {
+                      if ("message" in res && res.message.includes("AbortError"))
+                        return;
+                      console.error(`[FaasJS][${action}]`, res);
+                      messageApi.error(
+                        "message" in res ? res.message : "Unknown error"
+                      );
+                    },
+                    ...props.faasConfigProviderProps ? props.faasConfigProviderProps.faasClientOptions : {}
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { ...props.errorBoundaryProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    react.OptionalWrapper,
+                    {
+                      condition: typeof document !== "undefined" && props.browserRouterProps !== false,
+                      Wrapper: reactRouterDom.BrowserRouter,
+                      wrapperProps: props.browserRouterProps,
+                      children: [
+                        messageContextHolder,
+                        notificationContextHolder,
+                        modal,
+                        drawer,
+                        props.browserRouterProps !== false ? /* @__PURE__ */ jsxRuntime.jsx(RoutesApp, { children: props.children }) : props.children
+                      ]
+                    }
+                  ) })
                 }
-              ) }) })
+              )
             }
           )
         }
@@ -288,39 +338,6 @@ function cloneUnionFaasItemElement(element, props) {
     props
   );
 }
-function Loading(props) {
-  if (props.loading === false) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        ...props.style || {},
-        ...!props.size || props.size === "large" ? {
-          margin: "20vh auto",
-          textAlign: "center"
-        } : {}
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, { size: props.size || "large" })
-    }
-  );
-}
-Loading.whyDidYouRender = true;
-function FaasDataWrapper(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.FaasDataWrapper,
-    {
-      fallback: props.loading || /* @__PURE__ */ jsxRuntime.jsx(Loading, { ...props.loadingProps }),
-      ...props
-    }
-  );
-}
-FaasDataWrapper.whyDidYouRender = true;
-function withFaasData(Component, faasProps) {
-  return react.withFaasData(Component, {
-    fallback: faasProps.loading || /* @__PURE__ */ jsxRuntime.jsx(Loading, { ...faasProps.loadingProps }),
-    ...faasProps
-  });
-}
 function DescriptionItemContent(props) {
   const [computedProps, setComputedProps] = react$1.useState();
   react$1.useEffect(() => {
@@ -1565,6 +1582,10 @@ function useThemeToken() {
   return config.token;
 }
 
+Object.defineProperty(exports, "FaasReactClient", {
+  enumerable: true,
+  get: function () { return react.FaasReactClient; }
+});
 Object.defineProperty(exports, "faas", {
   enumerable: true,
   get: function () { return react.faas; }

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-import { FaasReactClientOptions, ErrorBoundaryProps, FaasDataWrapperProps as FaasDataWrapperProps$1, FaasDataInjection as FaasDataInjection$1 } from '@faasjs/react';
-export { ErrorBoundaryProps, FaasDataWrapperRef, faas, useFaas } from '@faasjs/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StyleProviderProps } from '@ant-design/cssinjs';
 import { DrawerProps as DrawerProps$1, ModalProps as ModalProps$1, ConfigProviderProps as ConfigProviderProps$1, DescriptionsProps, FormItemProps as FormItemProps$1, InputProps, SelectProps, RadioProps, InputNumberProps, SwitchProps, DatePickerProps, FormInstance, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, FormProps as FormProps$1, ButtonProps, TabsProps as TabsProps$1, GlobalToken } from 'antd';
@@ -7,8 +5,10 @@ import { MessageInstance } from 'antd/es/message/interface';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { BrowserRouterProps, RouteProps } from 'react-router-dom';
 import * as react from 'react';
-import { CSSProperties, JSX, Dispatch, SetStateAction, ReactNode, ReactElement, FC, LazyExoticComponent, ComponentType } from 'react';
+import { JSX, CSSProperties, Dispatch, SetStateAction, ReactNode, ReactElement, FC, LazyExoticComponent, ComponentType } from 'react';
 export { lazy } from 'react';
+import { FaasDataWrapperProps as FaasDataWrapperProps$1, FaasDataInjection as FaasDataInjection$1, FaasReactClientOptions, ErrorBoundaryProps } from '@faasjs/react';
+export { ErrorBoundaryProps, FaasDataWrapperRef, FaasReactClient, FaasReactClientOptions, faas, useFaas } from '@faasjs/react';
 import * as antd_es_modal_PurePanel from 'antd/es/modal/PurePanel';
 import * as antd_es_modal_useModal from 'antd/es/modal/useModal';
 import * as antd_es_modal_confirm from 'antd/es/modal/confirm';
@@ -24,6 +24,65 @@ import * as antd_es_form_hooks_useFormInstance from 'antd/es/form/hooks/useFormI
 import * as antd_es_form_Form from 'antd/es/form/Form';
 import { Tab } from 'rc-tabs/es/interface';
 
+type LoadingProps = {
+    style?: React.CSSProperties;
+    size?: 'small' | 'default' | 'large';
+    loading?: boolean;
+    children?: React.ReactNode;
+};
+/**
+ * Loading component based on Spin
+ *
+ * @example
+ * ```tsx
+ * <Loading /> // display loading
+ *
+ * <Loading loading={ !remoteData }>
+ *   <div>{remoteData}</div>
+ * </Loading>
+ * ```
+ */
+declare function Loading(props: LoadingProps): react_jsx_runtime.JSX.Element;
+declare namespace Loading {
+    var whyDidYouRender: boolean;
+}
+
+type FaasDataInjection<T = any> = Partial<FaasDataInjection$1<T>>;
+interface FaasDataWrapperProps<T = any> extends FaasDataWrapperProps$1<T> {
+    loadingProps?: LoadingProps;
+    loading?: JSX.Element;
+}
+
+/**
+ * FaasDataWrapper component with Loading
+ *
+ * @example
+ * ```tsx
+ * function MyComponent (props: FaasDataInjection) {
+ *   return <div>{ props.data }</div>
+ * }
+ *
+ * function MyPage () {
+ *   return <FaasDataWrapper action="test" params={{ a: 1 }}>
+ *     <MyComponent />
+ *   </FaasDataWrapper>
+ * }
+ * ```
+ */
+declare function FaasDataWrapper<T = any>(props: FaasDataWrapperProps<T>): JSX.Element;
+declare namespace FaasDataWrapper {
+    var whyDidYouRender: boolean;
+}
+/**
+ * HOC to wrap a component with FaasDataWrapper and Loading
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = withFaasData(({ data }) => <div>{data.name}</div>, { action: 'test', params: { a: 1 } })
+ * ```
+ */
+declare function withFaasData<PathOrData extends FaasActionUnionType, 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>>>;
+
 interface ConfigProviderProps {
     faasClientOptions?: FaasReactClientOptions;
     children: React.ReactNode;
@@ -238,65 +297,6 @@ declare namespace Blank {
     var whyDidYouRender: boolean;
 }
 
-type LoadingProps = {
-    style?: React.CSSProperties;
-    size?: 'small' | 'default' | 'large';
-    loading?: boolean;
-    children?: React.ReactNode;
-};
-/**
- * Loading component based on Spin
- *
- * @example
- * ```tsx
- * <Loading /> // display loading
- *
- * <Loading loading={ !remoteData }>
- *   <div>{remoteData}</div>
- * </Loading>
- * ```
- */
-declare function Loading(props: LoadingProps): react_jsx_runtime.JSX.Element;
-declare namespace Loading {
-    var whyDidYouRender: boolean;
-}
-
-type FaasDataInjection<T = any> = Partial<FaasDataInjection$1<T>>;
-interface FaasDataWrapperProps<T = any> extends FaasDataWrapperProps$1<T> {
-    loadingProps?: LoadingProps;
-    loading?: JSX.Element;
-}
-
-/**
- * FaasDataWrapper component with Loading
- *
- * @example
- * ```tsx
- * function MyComponent (props: FaasDataInjection) {
- *   return <div>{ props.data }</div>
- * }
- *
- * function MyPage () {
- *   return <FaasDataWrapper action="test" params={{ a: 1 }}>
- *     <MyComponent />
- *   </FaasDataWrapper>
- * }
- * ```
- */
-declare function FaasDataWrapper<T = any>(props: FaasDataWrapperProps<T>): JSX.Element;
-declare namespace FaasDataWrapper {
-    var whyDidYouRender: boolean;
-}
-/**
- * HOC to wrap a component with FaasDataWrapper and Loading
- *
- * @example
- * ```tsx
- * const MyComponent = withFaasData(({ data }) => <div>{data.name}</div>, { action: 'test', params: { a: 1 } })
- * ```
- */
-declare function withFaasData<PathOrData extends FaasActionUnionType, 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>>>;
-
 interface ExtendDescriptionTypeProps<T = any> {
     children?: UnionFaasItemElement<T>;
     render?: UnionFaasItemRender<T>;

package/dist/index.mjs

@@ -1,16 +1,49 @@
-import { createSplittingContext, useEqualEffect, FaasReactClient, useEqualCallback, ErrorBoundary as ErrorBoundary$1, useEqualMemo, OptionalWrapper, FaasDataWrapper as FaasDataWrapper$1, withFaasData as withFaasData$1, faas } from '@faasjs/react';
-export { faas, useFaas } from '@faasjs/react';
 import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
-import { Drawer as Drawer$1, Modal as Modal$1, Form as Form$1, message, notification, ConfigProvider as ConfigProvider$1, Typography, Spin, Descriptions, Input, Button, Row, Col, DatePicker, Switch, Select, InputNumber, Radio, Result, Skeleton, Table as Table$1, Tabs as Tabs$1, theme, Alert, Space } from 'antd';
+import { createSplittingContext, FaasDataWrapper as FaasDataWrapper$1, withFaasData as withFaasData$1, useEqualEffect, FaasReactClient, useEqualCallback, ErrorBoundary as ErrorBoundary$1, useEqualMemo, OptionalWrapper, faas } from '@faasjs/react';
+export { FaasReactClient, faas, useFaas } from '@faasjs/react';
+import { Drawer as Drawer$1, Modal as Modal$1, Form as Form$1, Spin, message, notification, ConfigProvider as ConfigProvider$1, Typography, Descriptions, Input, Button, Row, Col, DatePicker, Switch, Select, InputNumber, Radio, Result, Skeleton, Table as Table$1, Tabs as Tabs$1, theme, Alert, Space } from 'antd';
 import { BrowserRouter, useNavigate, Routes as Routes$1, Route, useLocation } from 'react-router-dom';
 import { defaultsDeep, cloneDeep, isNil, uniqBy } from 'lodash-es';
 import { createContext, useState, useContext, cloneElement, createElement, isValidElement, useEffect, Suspense } from 'react';
 export { lazy } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import dayjs2 from 'dayjs';
 import { PlusOutlined, MinusCircleOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
 
-// src/index.ts
+// src/App.tsx
+function Loading(props) {
+  if (props.loading === false) return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        ...props.style || {},
+        ...!props.size || props.size === "large" ? {
+          margin: "20vh auto",
+          textAlign: "center"
+        } : {}
+      },
+      children: /* @__PURE__ */ jsx(Spin, { size: props.size || "large" })
+    }
+  );
+}
+Loading.whyDidYouRender = true;
+function FaasDataWrapper(props) {
+  return /* @__PURE__ */ jsx(
+    FaasDataWrapper$1,
+    {
+      fallback: props.loading || /* @__PURE__ */ jsx(Loading, { ...props.loadingProps }),
+      ...props
+    }
+  );
+}
+FaasDataWrapper.whyDidYouRender = true;
+function withFaasData(Component, faasProps) {
+  return withFaasData$1(Component, {
+    fallback: faasProps.loading || /* @__PURE__ */ jsx(Loading, { ...faasProps.loadingProps }),
+    ...faasProps
+  });
+}
 var zh = {
   lang: "zh",
   blank: "\u7A7A",
@@ -50,7 +83,7 @@ var ConfigContext = createContext({
   theme: baseTheme
 });
 function ConfigProvider(props) {
-  const [theme2, setTheme] = useState(baseTheme);
+  const [theme2, setTheme] = useState();
   useEqualEffect(() => {
     const lang = props.theme?.lang || (!props.theme?.lang && /^zh/i.test(navigator.language) ? "zh" : "en");
     if (lang === "zh") {
@@ -178,9 +211,9 @@ function App(props) {
   const { drawer, drawerProps, setDrawerProps } = useDrawer();
   const styleProviderProps = useEqualMemo(
     () => ({
-      ...props.styleProviderProps,
       hashPriority: "high",
-      transformers: [legacyLogicalPropertiesTransformer]
+      transformers: [legacyLogicalPropertiesTransformer],
+      ...props.styleProviderProps
     }),
     [props.styleProviderProps]
   );
@@ -207,21 +240,38 @@ function App(props) {
                 modalProps,
                 setModalProps
               },
-              children: /* @__PURE__ */ jsx(ConfigProvider, { ...props.faasConfigProviderProps, children: /* @__PURE__ */ jsx(ErrorBoundary, { ...props.errorBoundaryProps, children: /* @__PURE__ */ jsxs(
-                OptionalWrapper,
+              children: /* @__PURE__ */ jsx(
+                ConfigProvider,
                 {
-                  condition: typeof document !== "undefined" && props.browserRouterProps !== false,
-                  Wrapper: BrowserRouter,
-                  wrapperProps: props.browserRouterProps,
-                  children: [
-                    messageContextHolder,
-                    notificationContextHolder,
-                    modal,
-                    drawer,
-                    props.browserRouterProps !== false ? /* @__PURE__ */ jsx(RoutesApp, { children: props.children }) : props.children
-                  ]
+                  ...props.faasConfigProviderProps,
+                  faasClientOptions: {
+                    onError: (action) => async (res) => {
+                      if ("message" in res && res.message.includes("AbortError"))
+                        return;
+                      console.error(`[FaasJS][${action}]`, res);
+                      messageApi.error(
+                        "message" in res ? res.message : "Unknown error"
+                      );
+                    },
+                    ...props.faasConfigProviderProps ? props.faasConfigProviderProps.faasClientOptions : {}
+                  },
+                  children: /* @__PURE__ */ jsx(ErrorBoundary, { ...props.errorBoundaryProps, children: /* @__PURE__ */ jsxs(
+                    OptionalWrapper,
+                    {
+                      condition: typeof document !== "undefined" && props.browserRouterProps !== false,
+                      Wrapper: BrowserRouter,
+                      wrapperProps: props.browserRouterProps,
+                      children: [
+                        messageContextHolder,
+                        notificationContextHolder,
+                        modal,
+                        drawer,
+                        props.browserRouterProps !== false ? /* @__PURE__ */ jsx(RoutesApp, { children: props.children }) : props.children
+                      ]
+                    }
+                  ) })
                 }
-              ) }) })
+              )
             }
           )
         }
@@ -284,39 +334,6 @@ function cloneUnionFaasItemElement(element, props) {
     props
   );
 }
-function Loading(props) {
-  if (props.loading === false) return /* @__PURE__ */ jsx(Fragment, { children: props.children });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        ...props.style || {},
-        ...!props.size || props.size === "large" ? {
-          margin: "20vh auto",
-          textAlign: "center"
-        } : {}
-      },
-      children: /* @__PURE__ */ jsx(Spin, { size: props.size || "large" })
-    }
-  );
-}
-Loading.whyDidYouRender = true;
-function FaasDataWrapper(props) {
-  return /* @__PURE__ */ jsx(
-    FaasDataWrapper$1,
-    {
-      fallback: props.loading || /* @__PURE__ */ jsx(Loading, { ...props.loadingProps }),
-      ...props
-    }
-  );
-}
-FaasDataWrapper.whyDidYouRender = true;
-function withFaasData(Component, faasProps) {
-  return withFaasData$1(Component, {
-    fallback: faasProps.loading || /* @__PURE__ */ jsx(Loading, { ...faasProps.loadingProps }),
-    ...faasProps
-  });
-}
 function DescriptionItemContent(props) {
   const [computedProps, setComputedProps] = useState();
   useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "6.11.0",
+  "version": "6.12.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -30,7 +30,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/react": ">=6.11.0",
+    "@faasjs/react": ">=6.12.0",
     "antd": "*",
     "@ant-design/icons": "*",
     "lodash-es": "*",
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@types/lodash-es": "*",
-    "@faasjs/react": ">=6.11.0",
+    "@faasjs/react": ">=6.12.0",
     "antd": "*",
     "@ant-design/icons": "*",
     "lodash-es": "*",