react-chain-of-responsibility 0.3.1-main.abcc3b5 → 0.4.0-main.6548dd9

package/README.md

@@ -356,12 +356,14 @@ function createChainOfResponsibility<Request = undefined, Props = { children?: n
 
 ### Options
 
+#### `passModifiedRequest`
+
 > `passModifiedRequest` is not supported by `asMiddleware`.
 
 ```ts
 type Options = {
   /** Allows a middleware to pass another request object to its next middleware. Default is false. */
-  passModifiedRequest?: boolean;
+  passModifiedRequest?: boolean | undefined;
 };
 ```
 
@@ -431,6 +433,14 @@ type UseBuildRenderFunction<Props> = (options?: UseBuildRenderFunctionOptions<Pr
 
 When rendering the element, `getKey` is called to compute the `key` attribute. This is required for some `onRenderXXX` props. These props are usually used to render more than one elements, such as [`DetailsList.onRenderField`](https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist#implementation), which renders every field (a.k.a. cell) in the [`<DetailsList>`](https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist).
 
+### `withBuildProps` higher-order helper function
+
+`withBuildProps` is a higher-order function that extends the chain-of-responsibility with props transformation capability. It modified the `<Proxy>` and `useBuildComponentCallback` hook so that request can be hoisted and accessible in props.
+
+However, this should be used with care. Given an identical request, the returning component from the `useBuildComponentCallback()` hook will never be stable. Explicit memoization is required for stabilizing the result.
+
+For `<Proxy>`, memoization is provided automatically through React `memo()` function. No explicity memoization is required.
+
 ## Designs
 
 ### How can I choose between request and props?
@@ -450,6 +460,8 @@ For example:
   - Request: text input, number input, password input
   - Props: label, value, instruction
 
+In some cases, you may want to have request accessible via props. The `withBuildProps` higher-order helper function can be used to hoist the request object in props. However, currently, `withBuildProps` does not honor the `passModifiedRequest` option.
+
 ### Why the type of request and props can be different?
 
 This is to support advanced scenarios where props are not ready until all rendering components are built.

package/dist/{chunk-LPY4PJSC.mjs → chunk-3IVASMVM.mjs}

@@ -1,3 +1,7 @@
+import {
+  applyMiddleware
+} from "./chunk-TNTIZJJ5.mjs";
+
 // src/createChainOfResponsibility.tsx
 import React, {
   createContext,
@@ -9,6 +13,7 @@ import React, {
 } from "react";
 
 // src/isReactComponent.ts
+import { custom } from "valibot";
 function isConsumer(component) {
   return component?.$$typeof?.toString() === "Symbol(react.context)";
 }
@@ -33,19 +38,7 @@ function isComponentClass(component) {
 function isReactComponent(component) {
   return isFunctionComponent(component) || isComponentClass(component) || isFragment(component) || isConsumer(component) || isProvider(component);
 }
-
-// src/private/compose.ts
-function compose(...fns) {
-  return (fn) => fns.reduce((chain, fn2) => fn2(chain), fn);
-}
-
-// src/private/applyMiddleware.ts
-function applyMiddleware(...arrayOfMiddleware) {
-  return (...init) => {
-    const chain = arrayOfMiddleware.map((middleware) => middleware(...init));
-    return compose(...chain);
-  };
-}
+var isReactComponent_default = isReactComponent;
 
 // src/createChainOfResponsibility.tsx
 function createChainOfResponsibility(options = {}) {
@@ -53,11 +46,11 @@ function createChainOfResponsibility(options = {}) {
     get enhancer() {
       return void 0;
     },
-    useBuildComponentCallback(_, options2) {
-      if (options2?.fallbackComponent) {
-        return options2.fallbackComponent;
+    useBuildComponentCallback(_request, options2) {
+      if (!options2?.fallbackComponent) {
+        throw new Error("This component/hook cannot be used outside of its corresponding <Provider>");
       }
-      throw new Error("This component/hook cannot be used outside of its corresponding <Provider>");
+      return options2.fallbackComponent;
     }
   };
   const context = createContext(defaultUseBuildComponentCallback);
@@ -82,7 +75,7 @@ function createChainOfResponsibility(options = {}) {
           hasReturned = true;
           if (isValidElement(returnValue)) {
             throw new Error("middleware must not return React element directly");
-          } else if (returnValue !== false && returnValue !== null && typeof returnValue !== "undefined" && !isReactComponent(returnValue)) {
+          } else if (returnValue !== false && returnValue !== null && typeof returnValue !== "undefined" && !isReactComponent_default(returnValue)) {
             throw new Error(
               "middleware must return false, null, undefined, function component, or class component"
             );
@@ -114,10 +107,10 @@ function createChainOfResponsibility(options = {}) {
     return /* @__PURE__ */ React.createElement(context.Provider, { value: contextValue }, children);
   }
   const useBuildComponentCallback = () => useContext(context).useBuildComponentCallback;
-  function Proxy({ children, fallbackComponent, request, ...props }) {
+  function Proxy({ fallbackComponent, request, ...props }) {
     const enhancer = useBuildComponentCallback();
     const Component = enhancer(request, { fallbackComponent });
-    return Component ? /* @__PURE__ */ React.createElement(Component, { ...props }, children) : null;
+    return Component ? /* @__PURE__ */ React.createElement(Component, { ...props }) : null;
   }
   const asMiddleware = (MiddlewareComponent) => (init) => (next) => (request) => {
     const RawNextComponent = next(request);
@@ -137,22 +130,24 @@ function createChainOfResponsibility(options = {}) {
     MiddlewareOf.displayName = `MiddlewareOf<${MiddlewareComponent.displayName || ""}>`;
     return memo(MiddlewareOf);
   };
-  return {
+  return Object.freeze({
     asMiddleware,
     Provider: memo(ChainOfResponsibilityProvider),
     Proxy: memo(Proxy),
-    types: {
+    types: Object.freeze({
       middlewareComponentProps: void 0,
       init: void 0,
       middleware: void 0,
       props: void 0,
+      proxyProps: void 0,
       request: void 0
-    },
+    }),
     useBuildComponentCallback
-  };
+  });
 }
+var createChainOfResponsibility_default = createChainOfResponsibility;
 
 export {
-  createChainOfResponsibility
+  createChainOfResponsibility_default
 };
-//# sourceMappingURL=chunk-LPY4PJSC.mjs.map
+//# sourceMappingURL=chunk-3IVASMVM.mjs.map

package/dist/chunk-3IVASMVM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/createChainOfResponsibility.tsx","../src/isReactComponent.ts"],"sourcesContent":["import React, {\n  createContext,\n  isValidElement,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  type ComponentType,\n  type PropsWithChildren\n} from 'react';\n\nimport isReactComponent from './isReactComponent.ts';\nimport applyMiddleware, { type Enhancer } from './private/applyMiddleware.ts';\nimport { type ComponentMiddleware } from './types.ts';\n\n// TODO: Simplify to ComponentType<Props> | undefined.\ntype ResultComponent<Props> = ComponentType<Props> | false | null | undefined;\n\ntype UseBuildComponentCallbackOptions<Props> = {\n  fallbackComponent?: ResultComponent<Props> | undefined;\n};\n\ninterface UseBuildComponentCallback<Request, Props> {\n  (request: Request, options?: undefined | UseBuildComponentCallbackOptions<Props>): ComponentType<Props> | undefined;\n}\n\ntype ProviderContext<Request, Props> = {\n  get enhancer(): Enhancer<[Request], ResultComponent<Props>> | undefined;\n  useBuildComponentCallback: UseBuildComponentCallback<Request, Props>;\n};\n\ntype ProviderProps<Request, Props, Init> = PropsWithChildren<{\n  middleware: readonly ComponentMiddleware<Request, Props, Init>[];\n}> &\n  (Init extends never | void\n    ? { readonly init?: undefined }\n    : Init extends undefined | void\n      ? { readonly init?: Init }\n      : { readonly init: Init });\n\ntype ProxyProps<Request, Props extends object> = Props & {\n  readonly fallbackComponent?: ComponentType<Props> | undefined;\n  readonly request: Request;\n};\n\ntype CreateChainOfResponsibilityOptions = {\n  /**\n   * Allows a middleware to pass another request object when calling its next middleware. Default is false.\n   *\n   * However, middleware could modify the request object before calling its next middleware. It is recommended\n   * to use Object.freeze() to prevent middleware from modifying the request object.\n   */\n  readonly passModifiedRequest?: boolean | undefined;\n};\n\ntype AsMiddlewareProps<Request, Props, Init> = {\n  readonly init: Init;\n  readonly Next: ComponentType<Partial<Props>>;\n  readonly request: Request;\n};\n\ntype AsMiddlewareComponentProps<Request, Props, Init> = Props & {\n  readonly middleware: AsMiddlewareProps<Request, Props, Init>;\n};\n\ntype ChainOfResponsibility<Request, Props extends object, Init> = {\n  readonly asMiddleware: (\n    middlewareComponent: ComponentType<AsMiddlewareComponentProps<Request, Props, Init>>\n  ) => ComponentMiddleware<Request, Props, Init>;\n  readonly Provider: ComponentType<ProviderProps<Request, Props, Init>>;\n  readonly Proxy: ComponentType<ProxyProps<Request, Props>>;\n  readonly types: {\n    readonly init: Init;\n    readonly middleware: ComponentMiddleware<Request, Props, Init>;\n    readonly middlewareComponentProps: AsMiddlewareComponentProps<Request, Props, Init>;\n    readonly props: Props;\n    readonly proxyProps: ProxyProps<Request, Props>;\n    readonly request: Request;\n  };\n  readonly useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;\n};\n\nfunction createChainOfResponsibility<Request = void, Props extends object = { readonly children?: never }, Init = void>(\n  options: CreateChainOfResponsibilityOptions = {}\n): ChainOfResponsibility<Request, Props, Init> {\n  const defaultUseBuildComponentCallback: ProviderContext<Request, Props> = {\n    get enhancer() {\n      return undefined;\n    },\n    useBuildComponentCallback(_request, options): ComponentType<Props> {\n      if (!options?.fallbackComponent) {\n        throw new Error('This component/hook cannot be used outside of its corresponding <Provider>');\n      }\n\n      return options.fallbackComponent;\n    }\n  };\n\n  const context = createContext<ProviderContext<Request, Props>>(defaultUseBuildComponentCallback);\n\n  function ChainOfResponsibilityProvider({ children, init, middleware }: ProviderProps<Request, Props, Init>) {\n    // TODO: Related to https://github.com/microsoft/TypeScript/issues/17002.\n    //       typescript@5.2.2 has a bug, Array.isArray() is a type predicate but only works with mutable array, not readonly array.\n    //       After removing \"as unknown\", `middleware` on the next line become `any[]`.\n    if (!Array.isArray(middleware as unknown) || middleware.some(middleware => typeof middleware !== 'function')) {\n      throw new Error('middleware prop must be an array of functions');\n    }\n\n    const patchedMiddleware: readonly ComponentMiddleware<Request, Props, Init>[] = Object.freeze(\n      middleware\n        ? middleware.map(fn => (init: Init) => {\n            const enhancer = fn(init);\n\n            return (next: (request: Request) => ComponentType<Props> | false | null | undefined) =>\n              (originalRequest: Request) => {\n                // False positive: although we did not re-assign the variable from true, it was initialized as undefined.\n                // eslint-disable-next-line prefer-const\n                let hasReturned: boolean;\n\n                const returnValue = enhancer(nextRequest => {\n                  if (hasReturned) {\n                    throw new Error('next() cannot be called after the function had returned synchronously');\n                  }\n\n                  !options.passModifiedRequest &&\n                    nextRequest !== originalRequest &&\n                    console.warn(\n                      'react-chain-of-responsibility: \"options.passModifiedRequest\" must be set to true to pass a different request object to next().'\n                    );\n\n                  return next(options.passModifiedRequest ? nextRequest : originalRequest);\n                })(originalRequest);\n\n                hasReturned = true;\n\n                if (isValidElement(returnValue)) {\n                  throw new Error('middleware must not return React element directly');\n                } else if (\n                  returnValue !== false &&\n                  returnValue !== null &&\n                  typeof returnValue !== 'undefined' &&\n                  !isReactComponent(returnValue)\n                ) {\n                  throw new Error(\n                    'middleware must return false, null, undefined, function component, or class component'\n                  );\n                }\n\n                return returnValue;\n              };\n          })\n        : []\n    );\n\n    const { enhancer: parentEnhancer } = useContext(context);\n\n    const enhancer = useMemo(\n      () =>\n        // We are reversing because it is easier to read:\n        // - With reverse, [a, b, c] will become a(b(c(fn)))\n        // - Without reverse, [a, b, c] will become c(b(a(fn)))\n        applyMiddleware<[Request], ResultComponent<Props>, [Init]>(\n          ...[...patchedMiddleware, ...(parentEnhancer ? [() => parentEnhancer] : [])].reverse()\n        )(init as Init),\n      [init, middleware, parentEnhancer]\n    );\n\n    const useBuildComponentCallback = useCallback<UseBuildComponentCallback<Request, Props>>(\n      (request, options = {}) => enhancer(() => options.fallbackComponent)(request) || undefined,\n      [enhancer]\n    );\n\n    const contextValue = useMemo<ProviderContext<Request, Props>>(\n      () => ({ enhancer, useBuildComponentCallback }),\n      [enhancer, useBuildComponentCallback]\n    );\n\n    return <context.Provider value={contextValue}>{children}</context.Provider>;\n  }\n\n  const useBuildComponentCallback = () => useContext(context).useBuildComponentCallback;\n\n  function Proxy({ fallbackComponent, request, ...props }: ProxyProps<Request, Props>) {\n    const enhancer = useBuildComponentCallback();\n\n    const Component = enhancer(request as Request, { fallbackComponent });\n\n    return Component ? <Component {...(props as Props)} /> : null;\n  }\n\n  const asMiddleware: (\n    middlewareComponent: ComponentType<AsMiddlewareComponentProps<Request, Props, Init>>\n  ) => ComponentMiddleware<Request, Props, Init> =\n    (\n      MiddlewareComponent: ComponentType<AsMiddlewareComponentProps<Request, Props, Init>>\n    ): ComponentMiddleware<Request, Props, Init> =>\n    init =>\n    next =>\n    request => {\n      const RawNextComponent = next(request);\n\n      // TODO: Can we pre-build this component during init?\n      const MiddlewareOf = (props: Props) => {\n        const middleware = useMemo(\n          () =>\n            Object.freeze({\n              init,\n              Next: memo<Partial<Props>>(\n                RawNextComponent\n                  ? (overridingProps: Partial<Props>) => <RawNextComponent {...props} {...overridingProps} />\n                  : () => null\n              ),\n              request\n            }),\n          []\n        );\n\n        return <MiddlewareComponent {...props} middleware={middleware} />;\n      };\n\n      MiddlewareOf.displayName = `MiddlewareOf<${MiddlewareComponent.displayName || ''}>`;\n\n      return memo<Props>(MiddlewareOf);\n    };\n\n  return Object.freeze({\n    asMiddleware,\n    Provider: memo<ProviderProps<Request, Props, Init>>(ChainOfResponsibilityProvider),\n    Proxy: memo<ProxyProps<Request, Props>>(Proxy),\n    types: Object.freeze({\n      middlewareComponentProps: undefined as unknown as AsMiddlewareComponentProps<Request, Props, Init>,\n      init: undefined as unknown as Init,\n      middleware: undefined as unknown as ComponentMiddleware<Request, Props, Init>,\n      props: undefined as unknown as Props,\n      proxyProps: undefined as unknown as ProxyProps<Request, Props>,\n      request: undefined as unknown as Request\n    }),\n    useBuildComponentCallback\n  });\n}\n\nexport default createChainOfResponsibility;\nexport {\n  type ChainOfResponsibility,\n  type CreateChainOfResponsibilityOptions,\n  type ProxyProps,\n  type UseBuildComponentCallback\n};\n","import {\n  type ComponentClass,\n  type ComponentType,\n  type Consumer,\n  type Fragment,\n  type FunctionComponent,\n  type Provider\n} from 'react';\nimport { custom } from 'valibot';\n\nfunction isConsumer(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  component: any\n): component is Consumer<unknown> {\n  return component?.$$typeof?.toString() === 'Symbol(react.context)';\n}\n\nfunction isProvider(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  component: any\n): component is Provider<unknown> {\n  return component?.$$typeof?.toString() === 'Symbol(react.provider)';\n}\n\nfunction isFragment(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  component: any\n): component is typeof Fragment {\n  return component?.toString() === 'Symbol(react.fragment)';\n}\n\nfunction isFunctionComponent(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  component: any\n): component is FunctionComponent {\n  if (typeof component === 'function') {\n    return true;\n  }\n\n  return isPureFunctionComponent(component);\n}\n\nfunction isPureFunctionComponent(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  component: any\n): component is FunctionComponent {\n  return component?.$$typeof?.toString() === 'Symbol(react.memo)' && isFunctionComponent(component.type);\n}\n\nfunction isComponentClass(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  component: any\n): component is ComponentClass {\n  return typeof component === 'object' && typeof component?.['render'] === 'function';\n}\n\n// There are no definitive ways to check if an object is a React component or not.\n// We are checking if the object has a render function (classic component).\n// Note: \"forwardRef()\" returns plain object, not class instance.\nfunction isReactComponent(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  component: any\n): component is ComponentType {\n  return (\n    isFunctionComponent(component) ||\n    isComponentClass(component) ||\n    isFragment(component) ||\n    isConsumer(component) ||\n    isProvider(component)\n  );\n}\n\nconst reactComponent = () =>\n  custom<ComponentType<unknown>>(value => isReactComponent(value), 'not a valid React component');\n\nexport default isReactComponent;\nexport { reactComponent };\n"],"mappings":"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","names":["options","middleware","init","enhancer","useBuildComponentCallback"]}

package/dist/chunk-TNTIZJJ5.mjs

@@ -0,0 +1,17 @@
+// src/private/compose.ts
+function compose(...fns) {
+  return (fn) => fns.reduce((chain, fn2) => fn2(chain), fn);
+}
+
+// src/private/applyMiddleware.ts
+function applyMiddleware(...arrayOfMiddleware) {
+  return (...init) => {
+    const chain = arrayOfMiddleware.map((middleware) => middleware(...init));
+    return compose(...chain);
+  };
+}
+
+export {
+  applyMiddleware
+};
+//# sourceMappingURL=chunk-TNTIZJJ5.mjs.map

package/dist/chunk-TNTIZJJ5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/private/compose.ts","../src/private/applyMiddleware.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Fn<P extends any[], R> = (...args: P) => R;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Enhancer<P extends any[], R> = (next: Fn<P, R>) => Fn<P, R>;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport default function compose<P extends any[], R>(...fns: Enhancer<P, R>[]): Enhancer<P, R> {\n  return (fn: Fn<P, R>): Fn<P, R> => fns.reduce((chain, fn) => fn(chain), fn);\n}\n","import compose from './compose.ts';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Fn<P extends any[], R> = (...args: P) => R;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Enhancer<P extends any[], R> = (next: Fn<P, R>) => Fn<P, R>;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Middleware<P extends any[], R, S extends any[]> = (...init: S) => Enhancer<P, R>;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport default function applyMiddleware<P extends any[], R, S extends any[]>(\n  ...arrayOfMiddleware: Middleware<P, R, S>[]\n) {\n  return (...init: S) => {\n    const chain = arrayOfMiddleware.map(middleware => middleware(...init));\n\n    return compose(...chain);\n  };\n}\n"],"mappings":";AAOe,SAAR,WAAgD,KAAuC;AAC5F,SAAO,CAAC,OAA2B,IAAI,OAAO,CAAC,OAAOA,QAAOA,IAAG,KAAK,GAAG,EAAE;AAC5E;;;ACGe,SAAR,mBACF,mBACH;AACA,SAAO,IAAI,SAAY;AACrB,UAAM,QAAQ,kBAAkB,IAAI,gBAAc,WAAW,GAAG,IAAI,CAAC;AAErE,WAAO,QAAQ,GAAG,KAAK;AAAA,EACzB;AACF;","names":["fn"]}

package/dist/index-Cx9W9BxD.d.mts

@@ -0,0 +1,70 @@
+import { ComponentType, PropsWithChildren } from 'react';
+
+type Fn<P extends any[], R> = (...args: P) => R;
+type Enhancer<P extends any[], R> = (next: Fn<P, R>) => Fn<P, R>;
+type Middleware<P extends any[], R, S extends any[]> = (...init: S) => Enhancer<P, R>;
+
+type ComponentMiddleware<Request, Props = {
+    children?: never;
+}, Init = undefined> = Middleware<[
+    Request
+], ComponentType<Props> | false | null | undefined, [
+    Init
+]>;
+
+type ResultComponent<Props> = ComponentType<Props> | false | null | undefined;
+type UseBuildComponentCallbackOptions<Props> = {
+    fallbackComponent?: ResultComponent<Props> | undefined;
+};
+interface UseBuildComponentCallback<Request, Props> {
+    (request: Request, options?: undefined | UseBuildComponentCallbackOptions<Props>): ComponentType<Props> | undefined;
+}
+type ProviderProps<Request, Props, Init> = PropsWithChildren<{
+    middleware: readonly ComponentMiddleware<Request, Props, Init>[];
+}> & (Init extends never | void ? {
+    readonly init?: undefined;
+} : Init extends undefined | void ? {
+    readonly init?: Init;
+} : {
+    readonly init: Init;
+});
+type ProxyProps<Request, Props extends object> = Props & {
+    readonly fallbackComponent?: ComponentType<Props> | undefined;
+    readonly request: Request;
+};
+type CreateChainOfResponsibilityOptions = {
+    /**
+     * Allows a middleware to pass another request object when calling its next middleware. Default is false.
+     *
+     * However, middleware could modify the request object before calling its next middleware. It is recommended
+     * to use Object.freeze() to prevent middleware from modifying the request object.
+     */
+    readonly passModifiedRequest?: boolean | undefined;
+};
+type AsMiddlewareProps<Request, Props, Init> = {
+    readonly init: Init;
+    readonly Next: ComponentType<Partial<Props>>;
+    readonly request: Request;
+};
+type AsMiddlewareComponentProps<Request, Props, Init> = Props & {
+    readonly middleware: AsMiddlewareProps<Request, Props, Init>;
+};
+type ChainOfResponsibility<Request, Props extends object, Init> = {
+    readonly asMiddleware: (middlewareComponent: ComponentType<AsMiddlewareComponentProps<Request, Props, Init>>) => ComponentMiddleware<Request, Props, Init>;
+    readonly Provider: ComponentType<ProviderProps<Request, Props, Init>>;
+    readonly Proxy: ComponentType<ProxyProps<Request, Props>>;
+    readonly types: {
+        readonly init: Init;
+        readonly middleware: ComponentMiddleware<Request, Props, Init>;
+        readonly middlewareComponentProps: AsMiddlewareComponentProps<Request, Props, Init>;
+        readonly props: Props;
+        readonly proxyProps: ProxyProps<Request, Props>;
+        readonly request: Request;
+    };
+    readonly useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;
+};
+declare function createChainOfResponsibility<Request = void, Props extends object = {
+    readonly children?: never;
+}, Init = void>(options?: CreateChainOfResponsibilityOptions): ChainOfResponsibility<Request, Props, Init>;
+
+export { type CreateChainOfResponsibilityOptions as C, type ComponentMiddleware as a, createChainOfResponsibility as c };

package/dist/index-Cx9W9BxD.d.ts

@@ -0,0 +1,70 @@
+import { ComponentType, PropsWithChildren } from 'react';
+
+type Fn<P extends any[], R> = (...args: P) => R;
+type Enhancer<P extends any[], R> = (next: Fn<P, R>) => Fn<P, R>;
+type Middleware<P extends any[], R, S extends any[]> = (...init: S) => Enhancer<P, R>;
+
+type ComponentMiddleware<Request, Props = {
+    children?: never;
+}, Init = undefined> = Middleware<[
+    Request
+], ComponentType<Props> | false | null | undefined, [
+    Init
+]>;
+
+type ResultComponent<Props> = ComponentType<Props> | false | null | undefined;
+type UseBuildComponentCallbackOptions<Props> = {
+    fallbackComponent?: ResultComponent<Props> | undefined;
+};
+interface UseBuildComponentCallback<Request, Props> {
+    (request: Request, options?: undefined | UseBuildComponentCallbackOptions<Props>): ComponentType<Props> | undefined;
+}
+type ProviderProps<Request, Props, Init> = PropsWithChildren<{
+    middleware: readonly ComponentMiddleware<Request, Props, Init>[];
+}> & (Init extends never | void ? {
+    readonly init?: undefined;
+} : Init extends undefined | void ? {
+    readonly init?: Init;
+} : {
+    readonly init: Init;
+});
+type ProxyProps<Request, Props extends object> = Props & {
+    readonly fallbackComponent?: ComponentType<Props> | undefined;
+    readonly request: Request;
+};
+type CreateChainOfResponsibilityOptions = {
+    /**
+     * Allows a middleware to pass another request object when calling its next middleware. Default is false.
+     *
+     * However, middleware could modify the request object before calling its next middleware. It is recommended
+     * to use Object.freeze() to prevent middleware from modifying the request object.
+     */
+    readonly passModifiedRequest?: boolean | undefined;
+};
+type AsMiddlewareProps<Request, Props, Init> = {
+    readonly init: Init;
+    readonly Next: ComponentType<Partial<Props>>;
+    readonly request: Request;
+};
+type AsMiddlewareComponentProps<Request, Props, Init> = Props & {
+    readonly middleware: AsMiddlewareProps<Request, Props, Init>;
+};
+type ChainOfResponsibility<Request, Props extends object, Init> = {
+    readonly asMiddleware: (middlewareComponent: ComponentType<AsMiddlewareComponentProps<Request, Props, Init>>) => ComponentMiddleware<Request, Props, Init>;
+    readonly Provider: ComponentType<ProviderProps<Request, Props, Init>>;
+    readonly Proxy: ComponentType<ProxyProps<Request, Props>>;
+    readonly types: {
+        readonly init: Init;
+        readonly middleware: ComponentMiddleware<Request, Props, Init>;
+        readonly middlewareComponentProps: AsMiddlewareComponentProps<Request, Props, Init>;
+        readonly props: Props;
+        readonly proxyProps: ProxyProps<Request, Props>;
+        readonly request: Request;
+    };
+    readonly useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;
+};
+declare function createChainOfResponsibility<Request = void, Props extends object = {
+    readonly children?: never;
+}, Init = void>(options?: CreateChainOfResponsibilityOptions): ChainOfResponsibility<Request, Props, Init>;
+
+export { type CreateChainOfResponsibilityOptions as C, type ComponentMiddleware as a, createChainOfResponsibility as c };

package/dist/react-chain-of-responsibility.d.mts

@@ -1,72 +1,2 @@
-import { ComponentType, PropsWithChildren } from 'react';
-
-type Fn<P extends any[], R> = (...args: P) => R;
-type Enhancer<P extends any[], R> = (next: Fn<P, R>) => Fn<P, R>;
-type Middleware<P extends any[], R, S extends any[]> = (...init: S) => Enhancer<P, R>;
-
-type ComponentMiddleware<Request, Props = {
-    children?: never;
-}, Init = undefined> = Middleware<[
-    Request
-], ComponentType<Props> | false | null | undefined, [
-    Init
-]>;
-
-type ResultComponent<Props> = ComponentType<Props> | false | null | undefined;
-type UseBuildComponentCallbackOptions<Props> = {
-    fallbackComponent?: ResultComponent<Props>;
-};
-type UseBuildComponentCallback<Request, Props> = (request: Request, options?: UseBuildComponentCallbackOptions<Props>) => ComponentType<Props> | undefined;
-type ProviderProps<Request, Props, Init> = PropsWithChildren<{
-    middleware: readonly ComponentMiddleware<Request, Props, Init>[];
-}> & (Init extends never | void ? {
-    init?: undefined;
-} : Init extends undefined ? {
-    init?: Init;
-} : {
-    init: Init;
-});
-type ProxyProps<Request, Props extends object> = PropsWithChildren<Request extends never | void ? Props & {
-    fallbackComponent?: ComponentType<Props>;
-    request?: undefined;
-} : Request extends undefined ? Props & {
-    fallbackComponent?: ComponentType<Props>;
-    request?: Request;
-} : Props & {
-    fallbackComponent?: ComponentType<Props>;
-    request: Request;
-}>;
-type Options = {
-    /**
-     * Allows a middleware to pass another request object when calling its next middleware. Default is false.
-     *
-     * However, middleware could modify the request object before calling its next middleware. It is recommended
-     * to use Object.freeze() to prevent middleware from modifying the request object.
-     */
-    passModifiedRequest?: boolean;
-};
-type MiddlewareProps<Request, Props, Init> = Readonly<{
-    init: Init;
-    Next: ComponentType<Partial<Props>>;
-    request: Request;
-}>;
-type MiddlewareComponentProps<Request, Props, Init> = Props & Readonly<{
-    middleware: MiddlewareProps<Request, Props, Init>;
-}>;
-declare function createChainOfResponsibility<Request = undefined, Props extends object = Readonly<{
-    children?: never;
-}>, Init = undefined>(options?: Options): {
-    asMiddleware: (middlewareComponent: ComponentType<MiddlewareComponentProps<Request, Props, Init>>) => ComponentMiddleware<Request, Props, Init>;
-    Provider: ComponentType<ProviderProps<Request, Props, Init>>;
-    Proxy: ComponentType<ProxyProps<Request, Props>>;
-    types: {
-        init: Init;
-        middleware: ComponentMiddleware<Request, Props, Init>;
-        middlewareComponentProps: MiddlewareComponentProps<Request, Props, Init>;
-        props: Props;
-        request: Request;
-    };
-    useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;
-};
-
-export { type ComponentMiddleware, createChainOfResponsibility };
+export { a as ComponentMiddleware, c as createChainOfResponsibility } from './index-Cx9W9BxD.mjs';
+import 'react';

package/dist/react-chain-of-responsibility.d.ts

@@ -1,72 +1,2 @@
-import { ComponentType, PropsWithChildren } from 'react';
-
-type Fn<P extends any[], R> = (...args: P) => R;
-type Enhancer<P extends any[], R> = (next: Fn<P, R>) => Fn<P, R>;
-type Middleware<P extends any[], R, S extends any[]> = (...init: S) => Enhancer<P, R>;
-
-type ComponentMiddleware<Request, Props = {
-    children?: never;
-}, Init = undefined> = Middleware<[
-    Request
-], ComponentType<Props> | false | null | undefined, [
-    Init
-]>;
-
-type ResultComponent<Props> = ComponentType<Props> | false | null | undefined;
-type UseBuildComponentCallbackOptions<Props> = {
-    fallbackComponent?: ResultComponent<Props>;
-};
-type UseBuildComponentCallback<Request, Props> = (request: Request, options?: UseBuildComponentCallbackOptions<Props>) => ComponentType<Props> | undefined;
-type ProviderProps<Request, Props, Init> = PropsWithChildren<{
-    middleware: readonly ComponentMiddleware<Request, Props, Init>[];
-}> & (Init extends never | void ? {
-    init?: undefined;
-} : Init extends undefined ? {
-    init?: Init;
-} : {
-    init: Init;
-});
-type ProxyProps<Request, Props extends object> = PropsWithChildren<Request extends never | void ? Props & {
-    fallbackComponent?: ComponentType<Props>;
-    request?: undefined;
-} : Request extends undefined ? Props & {
-    fallbackComponent?: ComponentType<Props>;
-    request?: Request;
-} : Props & {
-    fallbackComponent?: ComponentType<Props>;
-    request: Request;
-}>;
-type Options = {
-    /**
-     * Allows a middleware to pass another request object when calling its next middleware. Default is false.
-     *
-     * However, middleware could modify the request object before calling its next middleware. It is recommended
-     * to use Object.freeze() to prevent middleware from modifying the request object.
-     */
-    passModifiedRequest?: boolean;
-};
-type MiddlewareProps<Request, Props, Init> = Readonly<{
-    init: Init;
-    Next: ComponentType<Partial<Props>>;
-    request: Request;
-}>;
-type MiddlewareComponentProps<Request, Props, Init> = Props & Readonly<{
-    middleware: MiddlewareProps<Request, Props, Init>;
-}>;
-declare function createChainOfResponsibility<Request = undefined, Props extends object = Readonly<{
-    children?: never;
-}>, Init = undefined>(options?: Options): {
-    asMiddleware: (middlewareComponent: ComponentType<MiddlewareComponentProps<Request, Props, Init>>) => ComponentMiddleware<Request, Props, Init>;
-    Provider: ComponentType<ProviderProps<Request, Props, Init>>;
-    Proxy: ComponentType<ProxyProps<Request, Props>>;
-    types: {
-        init: Init;
-        middleware: ComponentMiddleware<Request, Props, Init>;
-        middlewareComponentProps: MiddlewareComponentProps<Request, Props, Init>;
-        props: Props;
-        request: Request;
-    };
-    useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;
-};
-
-export { type ComponentMiddleware, createChainOfResponsibility };
+export { a as ComponentMiddleware, c as createChainOfResponsibility } from './index-Cx9W9BxD.js';
+import 'react';

package/dist/react-chain-of-responsibility.fluentUI.d.mts

@@ -1,12 +1,15 @@
 import { IRenderFunction } from '@fluentui/react';
 import { Key } from 'react';
-import { createChainOfResponsibility } from './react-chain-of-responsibility.mjs';
+import { C as CreateChainOfResponsibilityOptions, c as createChainOfResponsibility } from './index-Cx9W9BxD.mjs';
 
 type UseBuildRenderFunctionOptions<Props> = {
     getKey?: (props: Props | undefined) => Key;
 };
 type UseBuildRenderFunction<Props> = (options?: UseBuildRenderFunctionOptions<Props>) => IRenderFunction<Props>;
-declare function createChainOfResponsibilityForFluentUI<Props extends object, Init = undefined>(options?: Parameters<typeof createChainOfResponsibility>[0]): ReturnType<typeof createChainOfResponsibility<Props | undefined, Props, Init>> & {
+/**
+ * @deprecated Fluent UI v9 no longer use `IRenderFunction` for custom render. We no longer validate the correctness of this function.
+ */
+declare function createChainOfResponsibilityForFluentUI<Props extends object, Init = undefined>(options?: CreateChainOfResponsibilityOptions): ReturnType<typeof createChainOfResponsibility<Props | undefined, Props, Init>> & {
     useBuildRenderFunction: UseBuildRenderFunction<Props>;
 };
 

package/dist/react-chain-of-responsibility.fluentUI.d.ts

@@ -1,12 +1,15 @@
 import { IRenderFunction } from '@fluentui/react';
 import { Key } from 'react';
-import { createChainOfResponsibility } from './react-chain-of-responsibility.js';
+import { C as CreateChainOfResponsibilityOptions, c as createChainOfResponsibility } from './index-Cx9W9BxD.js';
 
 type UseBuildRenderFunctionOptions<Props> = {
     getKey?: (props: Props | undefined) => Key;
 };
 type UseBuildRenderFunction<Props> = (options?: UseBuildRenderFunctionOptions<Props>) => IRenderFunction<Props>;
-declare function createChainOfResponsibilityForFluentUI<Props extends object, Init = undefined>(options?: Parameters<typeof createChainOfResponsibility>[0]): ReturnType<typeof createChainOfResponsibility<Props | undefined, Props, Init>> & {
+/**
+ * @deprecated Fluent UI v9 no longer use `IRenderFunction` for custom render. We no longer validate the correctness of this function.
+ */
+declare function createChainOfResponsibilityForFluentUI<Props extends object, Init = undefined>(options?: CreateChainOfResponsibilityOptions): ReturnType<typeof createChainOfResponsibility<Props | undefined, Props, Init>> & {
     useBuildRenderFunction: UseBuildRenderFunction<Props>;
 };
 

package/dist/react-chain-of-responsibility.fluentUI.js

@@ -41,6 +41,7 @@ var import_react2 = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 
 // src/isReactComponent.ts
+var import_valibot = require("valibot");
 function isConsumer(component) {
   return component?.$$typeof?.toString() === "Symbol(react.context)";
 }
@@ -65,6 +66,7 @@ function isComponentClass(component) {
 function isReactComponent(component) {
   return isFunctionComponent(component) || isComponentClass(component) || isFragment(component) || isConsumer(component) || isProvider(component);
 }
+var isReactComponent_default = isReactComponent;
 
 // src/private/compose.ts
 function compose(...fns) {
@@ -85,11 +87,11 @@ function createChainOfResponsibility(options = {}) {
     get enhancer() {
       return void 0;
     },
-    useBuildComponentCallback(_, options2) {
-      if (options2?.fallbackComponent) {
-        return options2.fallbackComponent;
+    useBuildComponentCallback(_request, options2) {
+      if (!options2?.fallbackComponent) {
+        throw new Error("This component/hook cannot be used outside of its corresponding <Provider>");
       }
-      throw new Error("This component/hook cannot be used outside of its corresponding <Provider>");
+      return options2.fallbackComponent;
     }
   };
   const context = (0, import_react.createContext)(defaultUseBuildComponentCallback);
@@ -114,7 +116,7 @@ function createChainOfResponsibility(options = {}) {
           hasReturned = true;
           if ((0, import_react.isValidElement)(returnValue)) {
             throw new Error("middleware must not return React element directly");
-          } else if (returnValue !== false && returnValue !== null && typeof returnValue !== "undefined" && !isReactComponent(returnValue)) {
+          } else if (returnValue !== false && returnValue !== null && typeof returnValue !== "undefined" && !isReactComponent_default(returnValue)) {
             throw new Error(
               "middleware must return false, null, undefined, function component, or class component"
             );
@@ -146,10 +148,10 @@ function createChainOfResponsibility(options = {}) {
     return /* @__PURE__ */ import_react.default.createElement(context.Provider, { value: contextValue }, children);
   }
   const useBuildComponentCallback = () => (0, import_react.useContext)(context).useBuildComponentCallback;
-  function Proxy2({ children, fallbackComponent, request, ...props }) {
+  function Proxy2({ fallbackComponent, request, ...props }) {
     const enhancer = useBuildComponentCallback();
     const Component = enhancer(request, { fallbackComponent });
-    return Component ? /* @__PURE__ */ import_react.default.createElement(Component, { ...props }, children) : null;
+    return Component ? /* @__PURE__ */ import_react.default.createElement(Component, { ...props }) : null;
   }
   const asMiddleware = (MiddlewareComponent) => (init) => (next) => (request) => {
     const RawNextComponent = next(request);
@@ -169,29 +171,35 @@ function createChainOfResponsibility(options = {}) {
     MiddlewareOf.displayName = `MiddlewareOf<${MiddlewareComponent.displayName || ""}>`;
     return (0, import_react.memo)(MiddlewareOf);
   };
-  return {
+  return Object.freeze({
     asMiddleware,
     Provider: (0, import_react.memo)(ChainOfResponsibilityProvider),
     Proxy: (0, import_react.memo)(Proxy2),
-    types: {
+    types: Object.freeze({
       middlewareComponentProps: void 0,
       init: void 0,
       middleware: void 0,
       props: void 0,
+      proxyProps: void 0,
       request: void 0
-    },
+    }),
     useBuildComponentCallback
-  };
+  });
 }
+var createChainOfResponsibility_default = createChainOfResponsibility;
 
 // src/createChainOfResponsibilityForFluentUI.tsx
 function createChainOfResponsibilityForFluentUI(options) {
-  const returnValue = createChainOfResponsibility(options);
+  const returnValue = createChainOfResponsibility_default(options);
   const { Proxy: Proxy2 } = returnValue;
   const useBuildRenderFunction = (options2 = {}) => {
     const { getKey } = options2;
     return (0, import_react2.useCallback)(
-      (props, defaultRender) => /* @__PURE__ */ import_react2.default.createElement(Proxy2, { ...props, fallbackComponent: defaultRender, key: getKey?.(props), request: props }),
+      (props, defaultRender) => (
+        // We no longer validate the correctness of this function.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        /* @__PURE__ */ import_react2.default.createElement(Proxy2, { ...props, fallbackComponent: defaultRender, key: getKey?.(props), request: props })
+      ),
       [getKey]
     );
   };