@faasjs/react 1.7.2 → 2.1.0

package/README.md

@@ -27,17 +27,6 @@ const client = FaasReactClient({
 
 2. Use [faas](#faas), [useFaas](#usefaas) or [FaasDataWrapper](#faasdatawrapper).
 
-## Usage with [@preact/signal-react](https://github.com/preactjs/signals/blob/main/packages/react/README.md)
-
-1. `npm i --save-dev @preact/signals-react-transform`
-2. Add `@preact/signals-react-transform` to babel config:
-```json
-{
-	"plugins": [["module:@preact/signals-react-transform"]]
-}
-```
-3. Add `import '@preact/signals-react/auto'` to your test files.
-
 ## Classes
 
 - [ErrorBoundary](classes/ErrorBoundary.md)
@@ -60,16 +49,14 @@ const client = FaasReactClient({
 - [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)
 - [Options](type-aliases/Options.md)
 - [ResponseHeaders](type-aliases/ResponseHeaders.md)
-- [SignalOptions](type-aliases/SignalOptions.md)
 - [useFaasOptions](type-aliases/useFaasOptions.md)
 
 ## Functions
 
 - [FaasDataWrapper](functions/FaasDataWrapper.md)
 - [FaasReactClient](functions/FaasReactClient.md)
+- [createSplitedContext](functions/createSplitedContext.md)
 - [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

@@ -3,15 +3,79 @@ 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_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, ReactElement, Component, SetStateAction } from 'react';
-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';
+import { ReactNode, ReactElement, Component } from 'react';
 
 /**
  * Returns a constant value that is created by the given function.
  */
 declare function useConstant<T>(fn: () => T): T;
+declare namespace useConstant {
+    var whyDidYouRender: boolean;
+}
+
+/**
+ * Creates a splited context with the given default value.
+ *
+ * @template T - The type of the default value.
+ * @param {T} defaultValue - The default value for the split context.
+ * @returns {Object} - An object containing the Provider and use functions.
+ *
+ * @example
+ * ```tsx
+ * const { Provider, use } = createSplitedContext({
+ *   value: 0,
+ *   setValue: (_: any) => {},
+ * })
+ *
+ * function ReaderComponent() {
+ *   const { value } = use()
+ *
+ *   return <div>{value}</div>
+ * }
+ *
+ * function WriterComponent() {
+ *   const { setValue } = use()
+ *
+ *   return (
+ *     <button type='button' onClick={() => setValue((p: number) => p + 1)}>
+ *       Change
+ *     </button>
+ *   )
+ * }
+ *
+ * const App = memo(() => {
+ *   return (
+ *     <>
+ *       <ReaderComponent />
+ *       <WriterComponent />
+ *     </>
+ *   )
+ * })
+ *
+ * function Container() {
+ *   const [value, setValue] = useState(0)
+ *
+ *   return (
+ *     <Provider value={{ value, setValue }}>
+ *       <App />
+ *     </Provider>
+ *   )
+ * }
+ * ```
+ */
+declare function createSplitedContext<T extends Record<string, any>>(defaultValue: T): {
+    Provider: {
+        (props: {
+            value: T;
+            children: React.ReactNode;
+        }): react_jsx_runtime.JSX.Element;
+        whyDidYouRender: boolean;
+    };
+    use: {
+        (): Readonly<T>;
+        whyDidYouRender: boolean;
+    };
+};
 
 type FaasReactClientInstance = {
   id: string
@@ -40,7 +104,7 @@ type FaasDataInjection<Data = any> = {
   data: Data
   error: any
   promise: Promise<Response<Data>>
-  reload(params?: Record<string, any>): void
+  reload(params?: Record<string, any>): Promise<Response<Data>>
   setData: React.Dispatch<React.SetStateAction<Data>>
   setLoading: React.Dispatch<React.SetStateAction<boolean>>
   setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>
@@ -181,44 +245,4 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
     render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 }
 
-type SignalOptions = {
-    debugName?: string;
-};
-/**
- * Create a [signal](https://preactjs.com/guide/v10/signals) with options
- *
- * @param initialValue
- * @param options
- * @param options.debugName - debug name for signal, will print signal value to console.debug
- *
- * @example
- * ```ts
- * import { signal } from '@faasjs/react'
- *
- * const count = signal(0, { debugName: 'count' })
- *
- * count.value = 1
- * ```
- */
-declare function signal<T = any>(initialValue: any, options?: SignalOptions): _preact_signals_core.Signal<T>;
-/**
- * Create a [signal](https://preactjs.com/guide/v10/signals) like useState.
- *
- * ```tsx
- * import { useSignalState, useSignalEffect } from '@faasjs/react'
- *
- * function App () {
- *   const [count, setCount] = useSignalState(0, { debugName: 'count' })
- *
- *   useSignalEffect(() => console.log('count', count))
- *
- *   return <div>
- *     <button onClick={() => setCount(count + 1)}>+</button>
- *     <span>{count}</span>
- *   </div>
- * }
- * ```
- */
-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, useConstant, useFaas, type useFaasOptions, useSignalState };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, createSplitedContext, faas, getClient, useConstant, useFaas, type useFaasOptions };

package/dist/index.d.ts

@@ -3,15 +3,79 @@ 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_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, ReactElement, Component, SetStateAction } from 'react';
-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';
+import { ReactNode, ReactElement, Component } from 'react';
 
 /**
  * Returns a constant value that is created by the given function.
  */
 declare function useConstant<T>(fn: () => T): T;
+declare namespace useConstant {
+    var whyDidYouRender: boolean;
+}
+
+/**
+ * Creates a splited context with the given default value.
+ *
+ * @template T - The type of the default value.
+ * @param {T} defaultValue - The default value for the split context.
+ * @returns {Object} - An object containing the Provider and use functions.
+ *
+ * @example
+ * ```tsx
+ * const { Provider, use } = createSplitedContext({
+ *   value: 0,
+ *   setValue: (_: any) => {},
+ * })
+ *
+ * function ReaderComponent() {
+ *   const { value } = use()
+ *
+ *   return <div>{value}</div>
+ * }
+ *
+ * function WriterComponent() {
+ *   const { setValue } = use()
+ *
+ *   return (
+ *     <button type='button' onClick={() => setValue((p: number) => p + 1)}>
+ *       Change
+ *     </button>
+ *   )
+ * }
+ *
+ * const App = memo(() => {
+ *   return (
+ *     <>
+ *       <ReaderComponent />
+ *       <WriterComponent />
+ *     </>
+ *   )
+ * })
+ *
+ * function Container() {
+ *   const [value, setValue] = useState(0)
+ *
+ *   return (
+ *     <Provider value={{ value, setValue }}>
+ *       <App />
+ *     </Provider>
+ *   )
+ * }
+ * ```
+ */
+declare function createSplitedContext<T extends Record<string, any>>(defaultValue: T): {
+    Provider: {
+        (props: {
+            value: T;
+            children: React.ReactNode;
+        }): react_jsx_runtime.JSX.Element;
+        whyDidYouRender: boolean;
+    };
+    use: {
+        (): Readonly<T>;
+        whyDidYouRender: boolean;
+    };
+};
 
 type FaasReactClientInstance = {
   id: string
@@ -40,7 +104,7 @@ type FaasDataInjection<Data = any> = {
   data: Data
   error: any
   promise: Promise<Response<Data>>
-  reload(params?: Record<string, any>): void
+  reload(params?: Record<string, any>): Promise<Response<Data>>
   setData: React.Dispatch<React.SetStateAction<Data>>
   setLoading: React.Dispatch<React.SetStateAction<boolean>>
   setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>
@@ -181,44 +245,4 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
     render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 }
 
-type SignalOptions = {
-    debugName?: string;
-};
-/**
- * Create a [signal](https://preactjs.com/guide/v10/signals) with options
- *
- * @param initialValue
- * @param options
- * @param options.debugName - debug name for signal, will print signal value to console.debug
- *
- * @example
- * ```ts
- * import { signal } from '@faasjs/react'
- *
- * const count = signal(0, { debugName: 'count' })
- *
- * count.value = 1
- * ```
- */
-declare function signal<T = any>(initialValue: any, options?: SignalOptions): _preact_signals_core.Signal<T>;
-/**
- * Create a [signal](https://preactjs.com/guide/v10/signals) like useState.
- *
- * ```tsx
- * import { useSignalState, useSignalEffect } from '@faasjs/react'
- *
- * function App () {
- *   const [count, setCount] = useSignalState(0, { debugName: 'count' })
- *
- *   useSignalEffect(() => console.log('count', count))
- *
- *   return <div>
- *     <button onClick={() => setCount(count + 1)}>+</button>
- *     <span>{count}</span>
- *   </div>
- * }
- * ```
- */
-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, useConstant, useFaas, type useFaasOptions, useSignalState };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, createSplitedContext, faas, getClient, useConstant, useFaas, type useFaasOptions };

package/dist/index.js

@@ -1,10 +1,8 @@
 'use strict';
 
 var react = require('react');
-var browser = require('@faasjs/browser');
 var jsxRuntime = require('react/jsx-runtime');
-var signalsReact = require('@preact/signals-react');
-var runtime = require('@preact/signals-react/runtime');
+var browser = require('@faasjs/browser');
 
 // src/constant.ts
 function useConstant(fn) {
@@ -14,6 +12,38 @@ function useConstant(fn) {
   }
   return ref.current.v;
 }
+useConstant.whyDidYouRender = true;
+function createSplitedContext(defaultValue) {
+  const contexts = {};
+  for (const key of Object.keys(defaultValue))
+    contexts[key] = react.createContext(defaultValue[key]);
+  function Provider(props) {
+    let children = props.children;
+    for (const key of Object.keys(props.value)) {
+      const Context2 = contexts[key];
+      Context2.Provider.whyDidYouRender = true;
+      children = /* @__PURE__ */ jsxRuntime.jsx(Context2.Provider, { value: props.value[key], children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  Provider.whyDidYouRender = true;
+  function use() {
+    return useConstant(() => {
+      const obj = /* @__PURE__ */ Object.create(null);
+      for (const key of Object.keys(contexts)) {
+        Object.defineProperty(obj, key, {
+          get: () => react.useContext(contexts[key])
+        });
+      }
+      return Object.freeze(obj);
+    });
+  }
+  use.whyDidYouRender = true;
+  return {
+    Provider,
+    use
+  };
+}
 var clients = {};
 function FaasReactClient({
   domain,
@@ -110,6 +140,7 @@ function FaasReactClient({
         if (params2)
           setParams(params2);
         setReloadTimes((prev) => prev + 1);
+        return promise;
       },
       [params]
     );
@@ -241,63 +272,13 @@ var ErrorBoundary = class extends react.Component {
   }
 };
 ErrorBoundary.whyDidYouRender = true;
-function signal(initialValue, options = {}) {
-  const state = signalsReact.signal(initialValue);
-  if (options.debugName)
-    signalsReact.effect(() => console.debug(options.debugName, state.value));
-  return state;
-}
-function useSignalState(initialValue, options = {}) {
-  const state = runtime.useSignal(initialValue);
-  if (options.debugName) {
-    runtime.useSignalEffect(() => console.log(options.debugName, state.value));
-  }
-  return [
-    state.value,
-    (changes) => {
-      state.value = typeof changes === "function" ? changes(state.value) : changes;
-    }
-  ];
-}
+ErrorBoundary.whyDidYouRender = true;
 
-Object.defineProperty(exports, "batch", {
-  enumerable: true,
-  get: function () { return signalsReact.batch; }
-});
-Object.defineProperty(exports, "computed", {
-  enumerable: true,
-  get: function () { return signalsReact.computed; }
-});
-Object.defineProperty(exports, "effect", {
-  enumerable: true,
-  get: function () { return signalsReact.effect; }
-});
-Object.defineProperty(exports, "originSignal", {
-  enumerable: true,
-  get: function () { return signalsReact.signal; }
-});
-Object.defineProperty(exports, "originUseSignal", {
-  enumerable: true,
-  get: function () { return runtime.useSignal; }
-});
-Object.defineProperty(exports, "useComputed", {
-  enumerable: true,
-  get: function () { return runtime.useComputed; }
-});
-Object.defineProperty(exports, "useSignalEffect", {
-  enumerable: true,
-  get: function () { return runtime.useSignalEffect; }
-});
-Object.defineProperty(exports, "useSignals", {
-  enumerable: true,
-  get: function () { return runtime.useSignals; }
-});
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasDataWrapper = FaasDataWrapper;
 exports.FaasReactClient = FaasReactClient;
+exports.createSplitedContext = createSplitedContext;
 exports.faas = faas;
 exports.getClient = getClient;
-exports.signal = signal;
 exports.useConstant = useConstant;
 exports.useFaas = useFaas;
-exports.useSignalState = useSignalState;

package/dist/index.mjs

@@ -1,10 +1,6 @@
-import { useRef, useState, useEffect, Component, cloneElement, useCallback, useMemo } from 'react';
+import { useRef, createContext, useState, useEffect, Component, cloneElement, useContext, useCallback, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { signal as signal$1, effect } from '@preact/signals-react';
-export { batch, computed, effect, signal as originSignal } from '@preact/signals-react';
-import { useSignal, useSignalEffect } from '@preact/signals-react/runtime';
-export { useSignal as originUseSignal, useComputed, useSignalEffect, useSignals } from '@preact/signals-react/runtime';
 
 // src/constant.ts
 function useConstant(fn) {
@@ -14,6 +10,38 @@ function useConstant(fn) {
   }
   return ref.current.v;
 }
+useConstant.whyDidYouRender = true;
+function createSplitedContext(defaultValue) {
+  const contexts = {};
+  for (const key of Object.keys(defaultValue))
+    contexts[key] = createContext(defaultValue[key]);
+  function Provider(props) {
+    let children = props.children;
+    for (const key of Object.keys(props.value)) {
+      const Context2 = contexts[key];
+      Context2.Provider.whyDidYouRender = true;
+      children = /* @__PURE__ */ jsx(Context2.Provider, { value: props.value[key], children });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  Provider.whyDidYouRender = true;
+  function use() {
+    return useConstant(() => {
+      const obj = /* @__PURE__ */ Object.create(null);
+      for (const key of Object.keys(contexts)) {
+        Object.defineProperty(obj, key, {
+          get: () => useContext(contexts[key])
+        });
+      }
+      return Object.freeze(obj);
+    });
+  }
+  use.whyDidYouRender = true;
+  return {
+    Provider,
+    use
+  };
+}
 var clients = {};
 function FaasReactClient({
   domain,
@@ -110,6 +138,7 @@ function FaasReactClient({
         if (params2)
           setParams(params2);
         setReloadTimes((prev) => prev + 1);
+        return promise;
       },
       [params]
     );
@@ -241,23 +270,6 @@ var ErrorBoundary = class extends Component {
   }
 };
 ErrorBoundary.whyDidYouRender = true;
-function signal(initialValue, options = {}) {
-  const state = signal$1(initialValue);
-  if (options.debugName)
-    effect(() => console.debug(options.debugName, state.value));
-  return state;
-}
-function useSignalState(initialValue, options = {}) {
-  const state = useSignal(initialValue);
-  if (options.debugName) {
-    useSignalEffect(() => console.log(options.debugName, state.value));
-  }
-  return [
-    state.value,
-    (changes) => {
-      state.value = typeof changes === "function" ? changes(state.value) : changes;
-    }
-  ];
-}
+ErrorBoundary.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, faas, getClient, signal, useConstant, useFaas, useSignalState };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, createSplitedContext, faas, getClient, useConstant, useFaas };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "1.7.2",
+  "version": "2.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -22,17 +22,14 @@
     "dist"
   ],
   "dependencies": {
-    "@faasjs/browser": "1.7.2"
+    "@faasjs/browser": "2.1.0"
   },
   "peerDependencies": {
-    "react": "*",
-    "@preact/signals-react": "*"
+    "react": "*"
   },
   "devDependencies": {
     "@types/react": "*",
-    "react": "*",
-    "@preact/signals-react": "*",
-    "@types/use-sync-external-store": "*"
+    "react": "*"
   },
   "engines": {
     "npm": ">=9.0.0",