@faasjs/react 1.5.0 → 1.7.0

package/README.md

@@ -70,5 +70,6 @@ const client = FaasReactClient({
 - [faas](functions/faas.md)
 - [getClient](functions/getClient.md)
 - [signal](functions/signal.md)
+- [useConstant](functions/useConstant.md)
 - [useFaas](functions/useFaas.md)
 - [useSignalState](functions/useSignalState.md)

package/dist/index.d.mts

@@ -8,6 +8,11 @@ import * as _preact_signals_core from '@preact/signals-core';
 export { batch, computed, effect, signal as originSignal } from '@preact/signals-react';
 export { useSignal as originUseSignal, useComputed, useSignalEffect, useSignals } from '@preact/signals-react/runtime';
 
+/**
+ * Returns a constant value that is created by the given function.
+ */
+declare function useConstant<T>(fn: () => T): T;
+
 type FaasReactClientInstance = {
   id: string
   faas: <PathOrData extends FaasAction>(
@@ -35,7 +40,7 @@ type FaasDataInjection<Data = any> = {
   data: Data
   error: any
   promise: Promise<Response<Data>>
-  reload(params?: Record<string, any>): Promise<Response<Data>>
+  reload(params?: Record<string, any>): void
   setData: React.Dispatch<React.SetStateAction<Data>>
   setLoading: React.Dispatch<React.SetStateAction<boolean>>
   setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>
@@ -149,6 +154,9 @@ declare function useFaas<PathOrData extends FaasAction$1>(action: string | PathO
  * ```
  */
 declare function FaasDataWrapper<PathOrData extends FaasAction$1>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
+declare namespace FaasDataWrapper {
+    var whyDidYouRender: boolean;
+}
 
 interface ErrorBoundaryProps {
     children?: ReactNode;
@@ -167,9 +175,10 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
         componentStack?: string;
     };
 }> {
+    static whyDidYouRender: boolean;
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | null, info: any): void;
-    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode>;
+    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 }
 
 type SignalOptions = {
@@ -212,4 +221,4 @@ declare function signal<T = any>(initialValue: any, options?: SignalOptions): _p
  */
 declare function useSignalState<T = any>(initialValue: T, options?: SignalOptions): readonly [T, (changes: SetStateAction<T>) => void];
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type SignalOptions, faas, getClient, signal, useFaas, type useFaasOptions, useSignalState };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type SignalOptions, faas, getClient, signal, useConstant, useFaas, type useFaasOptions, useSignalState };

package/dist/index.d.ts

@@ -8,6 +8,11 @@ import * as _preact_signals_core from '@preact/signals-core';
 export { batch, computed, effect, signal as originSignal } from '@preact/signals-react';
 export { useSignal as originUseSignal, useComputed, useSignalEffect, useSignals } from '@preact/signals-react/runtime';
 
+/**
+ * Returns a constant value that is created by the given function.
+ */
+declare function useConstant<T>(fn: () => T): T;
+
 type FaasReactClientInstance = {
   id: string
   faas: <PathOrData extends FaasAction>(
@@ -35,7 +40,7 @@ type FaasDataInjection<Data = any> = {
   data: Data
   error: any
   promise: Promise<Response<Data>>
-  reload(params?: Record<string, any>): Promise<Response<Data>>
+  reload(params?: Record<string, any>): void
   setData: React.Dispatch<React.SetStateAction<Data>>
   setLoading: React.Dispatch<React.SetStateAction<boolean>>
   setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>
@@ -149,6 +154,9 @@ declare function useFaas<PathOrData extends FaasAction$1>(action: string | PathO
  * ```
  */
 declare function FaasDataWrapper<PathOrData extends FaasAction$1>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
+declare namespace FaasDataWrapper {
+    var whyDidYouRender: boolean;
+}
 
 interface ErrorBoundaryProps {
     children?: ReactNode;
@@ -167,9 +175,10 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
         componentStack?: string;
     };
 }> {
+    static whyDidYouRender: boolean;
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | null, info: any): void;
-    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode>;
+    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 }
 
 type SignalOptions = {
@@ -212,4 +221,4 @@ declare function signal<T = any>(initialValue: any, options?: SignalOptions): _p
  */
 declare function useSignalState<T = any>(initialValue: T, options?: SignalOptions): readonly [T, (changes: SetStateAction<T>) => void];
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type SignalOptions, faas, getClient, signal, useFaas, type useFaasOptions, useSignalState };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type SignalOptions, faas, getClient, signal, useConstant, useFaas, type useFaasOptions, useSignalState };

package/dist/index.js

@@ -6,7 +6,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var signalsReact = require('@preact/signals-react');
 var runtime = require('@preact/signals-react/runtime');
 
-// src/client.tsx
+// src/constant.ts
+function useConstant(fn) {
+  const ref = react.useRef();
+  if (!ref.current) {
+    ref.current = { v: fn() };
+  }
+  return ref.current.v;
+}
 var clients = {};
 function FaasReactClient({
   domain,
@@ -96,6 +103,14 @@ function FaasReactClient({
         setLoading(false);
       };
     }, [action, JSON.stringify(options2.params || params), reloadTimes, skip]);
+    const reload = react.useCallback(
+      (params2) => {
+        if (params2)
+          setParams(params2);
+        setReloadTimes((prev) => prev + 1);
+      },
+      [params]
+    );
     return {
       action,
       params,
@@ -104,45 +119,38 @@ function FaasReactClient({
       reloadTimes,
       error,
       promise,
-      async reload(params2) {
-        if (params2)
-          setParams(params2);
-        setReloadTimes(reloadTimes + 1);
-        return promise;
-      },
+      reload,
       setData: (options2 == null ? void 0 : options2.setData) || setData,
       setLoading,
       setPromise,
       setError
     };
   }
-  const reactClient = {
-    id: client.id,
-    faas: faas2,
-    useFaas: useFaas2,
-    FaasDataWrapper({
-      action,
-      params,
-      fallback,
-      render,
-      children,
-      onDataChange,
+  useFaas2.whyDidYouRender = true;
+  function FaasDataWrapper2({
+    action,
+    params,
+    fallback,
+    render,
+    children,
+    onDataChange,
+    data,
+    setData
+  }) {
+    const request = useFaas2(action, params, {
       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 [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);
@@ -150,7 +158,15 @@ function FaasReactClient({
           return render(request);
       }
       return fallback || null;
-    }
+    }, [loaded, request.action, request.params, request.data, request.error]);
+    return child;
+  }
+  FaasDataWrapper2.whyDidYouRender = true;
+  const reactClient = {
+    id: client.id,
+    faas: faas2,
+    useFaas: useFaas2,
+    FaasDataWrapper: FaasDataWrapper2
   };
   clients[domain] = reactClient;
   return reactClient;
@@ -178,6 +194,7 @@ function FaasDataWrapper(props) {
     return props.fallback || null;
   return /* @__PURE__ */ jsxRuntime.jsx(client.FaasDataWrapper, { ...props });
 }
+FaasDataWrapper.whyDidYouRender = true;
 var ErrorBoundary = class extends react.Component {
   constructor(props) {
     super(props);
@@ -214,6 +231,7 @@ var ErrorBoundary = class extends react.Component {
     return this.props.children;
   }
 };
+ErrorBoundary.whyDidYouRender = true;
 function signal(initialValue, options = {}) {
   const state = signalsReact.signal(initialValue);
   if (options.debugName)
@@ -271,5 +289,6 @@ exports.FaasReactClient = FaasReactClient;
 exports.faas = faas;
 exports.getClient = getClient;
 exports.signal = signal;
+exports.useConstant = useConstant;
 exports.useFaas = useFaas;
 exports.useSignalState = useSignalState;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useState, useEffect, cloneElement, Component } from 'react';
+import { useRef, useState, useEffect, Component, cloneElement, useCallback, useMemo } from 'react';
 import { FaasBrowserClient } from '@faasjs/browser';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { signal as signal$1, effect } from '@preact/signals-react';
@@ -6,7 +6,14 @@ export { batch, computed, effect, signal as originSignal } from '@preact/signals
 import { useSignal, useSignalEffect } from '@preact/signals-react/runtime';
 export { useSignal as originUseSignal, useComputed, useSignalEffect, useSignals } from '@preact/signals-react/runtime';
 
-// src/client.tsx
+// src/constant.ts
+function useConstant(fn) {
+  const ref = useRef();
+  if (!ref.current) {
+    ref.current = { v: fn() };
+  }
+  return ref.current.v;
+}
 var clients = {};
 function FaasReactClient({
   domain,
@@ -96,6 +103,14 @@ function FaasReactClient({
         setLoading(false);
       };
     }, [action, JSON.stringify(options2.params || params), reloadTimes, skip]);
+    const reload = useCallback(
+      (params2) => {
+        if (params2)
+          setParams(params2);
+        setReloadTimes((prev) => prev + 1);
+      },
+      [params]
+    );
     return {
       action,
       params,
@@ -104,45 +119,38 @@ function FaasReactClient({
       reloadTimes,
       error,
       promise,
-      async reload(params2) {
-        if (params2)
-          setParams(params2);
-        setReloadTimes(reloadTimes + 1);
-        return promise;
-      },
+      reload,
       setData: (options2 == null ? void 0 : options2.setData) || setData,
       setLoading,
       setPromise,
       setError
     };
   }
-  const reactClient = {
-    id: client.id,
-    faas: faas2,
-    useFaas: useFaas2,
-    FaasDataWrapper({
-      action,
-      params,
-      fallback,
-      render,
-      children,
-      onDataChange,
+  useFaas2.whyDidYouRender = true;
+  function FaasDataWrapper2({
+    action,
+    params,
+    fallback,
+    render,
+    children,
+    onDataChange,
+    data,
+    setData
+  }) {
+    const request = useFaas2(action, params, {
       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 [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);
@@ -150,7 +158,15 @@ function FaasReactClient({
           return render(request);
       }
       return fallback || null;
-    }
+    }, [loaded, request.action, request.params, request.data, request.error]);
+    return child;
+  }
+  FaasDataWrapper2.whyDidYouRender = true;
+  const reactClient = {
+    id: client.id,
+    faas: faas2,
+    useFaas: useFaas2,
+    FaasDataWrapper: FaasDataWrapper2
   };
   clients[domain] = reactClient;
   return reactClient;
@@ -178,6 +194,7 @@ function FaasDataWrapper(props) {
     return props.fallback || null;
   return /* @__PURE__ */ jsx(client.FaasDataWrapper, { ...props });
 }
+FaasDataWrapper.whyDidYouRender = true;
 var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -214,6 +231,7 @@ var ErrorBoundary = class extends Component {
     return this.props.children;
   }
 };
+ErrorBoundary.whyDidYouRender = true;
 function signal(initialValue, options = {}) {
   const state = signal$1(initialValue);
   if (options.debugName)
@@ -233,4 +251,4 @@ function useSignalState(initialValue, options = {}) {
   ];
 }
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, faas, getClient, signal, useFaas, useSignalState };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, faas, getClient, signal, useConstant, useFaas, useSignalState };

package/package.json

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