@faasjs/react 2.0.0 → 2.1.0

package/README.md

@@ -55,6 +55,7 @@ const client = FaasReactClient({
 
 - [FaasDataWrapper](functions/FaasDataWrapper.md)
 - [FaasReactClient](functions/FaasReactClient.md)
+- [createSplitedContext](functions/createSplitedContext.md)
 - [faas](functions/faas.md)
 - [getClient](functions/getClient.md)
 - [useConstant](functions/useConstant.md)

package/dist/index.d.mts

@@ -9,6 +9,73 @@ 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
@@ -178,4 +245,4 @@ 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, faas, getClient, useConstant, useFaas, type useFaasOptions };
+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

@@ -9,6 +9,73 @@ 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
@@ -178,4 +245,4 @@ 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, faas, getClient, useConstant, useFaas, type useFaasOptions };
+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,8 +1,8 @@
 'use strict';
 
 var react = require('react');
-var browser = require('@faasjs/browser');
 var jsxRuntime = require('react/jsx-runtime');
+var browser = require('@faasjs/browser');
 
 // src/constant.ts
 function useConstant(fn) {
@@ -12,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,
@@ -240,10 +272,12 @@ var ErrorBoundary = class extends react.Component {
   }
 };
 ErrorBoundary.whyDidYouRender = true;
+ErrorBoundary.whyDidYouRender = true;
 
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasDataWrapper = FaasDataWrapper;
 exports.FaasReactClient = FaasReactClient;
+exports.createSplitedContext = createSplitedContext;
 exports.faas = faas;
 exports.getClient = getClient;
 exports.useConstant = useConstant;

package/dist/index.mjs

@@ -1,6 +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';
 
 // src/constant.ts
 function useConstant(fn) {
@@ -10,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,
@@ -238,5 +270,6 @@ var ErrorBoundary = class extends Component {
   }
 };
 ErrorBoundary.whyDidYouRender = true;
+ErrorBoundary.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, faas, getClient, useConstant, useFaas };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, createSplitedContext, faas, getClient, useConstant, useFaas };

package/package.json

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