react-chain-of-responsibility 0.2.0 → 0.2.1-main.6ac5632

package/README.md

@@ -1,12 +1,10 @@
 # `react-chain-of-responsibility`
 
-[Chain of responsibility design pattern](https://refactoring.guru/design-patterns/chain-of-responsibility) for React component customization.
+[Chain of responsibility design pattern](https://refactoring.guru/design-patterns/chain-of-responsibility) for compositing and customizing React component.
 
 ## Background
 
-This package is designed for React component developers to enable component customization via composition using the [chain of responsibility design pattern](https://refactoring.guru/design-patterns/chain-of-responsibility).
-
-Additional entrypoint and hook are provided to use with [Fluent UI as `IRenderFunction`](https://github.com/microsoft/fluentui/blob/master/packages/utilities/src/IRenderFunction.ts).
+This package is designed for React component developers to enable component customization via composition using the [chain of responsibility design pattern](https://refactoring.guru/design-patterns/chain-of-responsibility). This pattern is also used in [Express](https://expressjs.com/) and [Redux](https://redux.js.org/).
 
 By composing customizations, they can be decoupled and published separately. App developers could import these published customizations and orchestrate them to their needs. This pattern encourages [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) and enables economy of customizability.
 
@@ -14,50 +12,243 @@ By composing customizations, they can be decoupled and published separately. App
 
 Click here for [our live demo](https://compulim.github.io/react-chain-of-responsibility/).
 
-## How to use
+## How to use?
 
-### Using `<Proxy>` component
+3 steps to adopt the chain of responsibility pattern.
 
-```jsx
+1. [Create a chain](#create-a-chain)
+1. [Register handlers in the chain](#register-handlers-in-the-chain)
+1. [Make a render request](#make-a-render-request)
+
+In this sample, we will use chain of responsibility pattern to create a file preview UI which can handle various file types.
+
+### Create a chain
+
+A chain consists of multiple handlers (a.k.a. middleware) and each would handle rendering requests.
+
+The request will be passed to the first handler and may traverse down the chain. The returning result will be a React component. If the chain decided not to render anything, it will return `undefined`.
+
+```tsx
 import { createChainOfResponsibility } from 'react-chain-of-responsibility';
 
-// Creates a <Provider> providing the chain of responsibility service.
-const { Provider, Proxy } = createChainOfResponsibility();
+type Request = { contentType: string };
+type Props = { url: string };
 
-// List of subcomponents.
-const Bold = ({ children }) => <strong>{children}</strong>;
-const Italic = ({ children }) => <i>{children}</i>;
-const Plain = ({ children }) => <>{children}</>;
+const { asMiddleware, Provider, Proxy } = createChainOfResponsibility<Request, Props>();
+```
 
-// Constructs an array of middleware to handle the request and return corresponding subcomponents.
-const middleware = [
-  () => next => request => (request === 'bold' ? Bold : next(request)),
-  () => next => request => (request === 'italic' ? Italic : next(request)),
-  () => () => () => Plain
-];
+In this sample, the `request` contains file type. And the `props` contains the URL of the file.
+
+Tips: `request` is appearance, while `props` is for content.
+
+### Register handlers in the chain
+
+Based on the rendering request, each middleware is called in turn and they will make decision:
+
+- Will render
+  - Will render a component on its own
+  - Will render a component by compositing component from the next middleware in the chain
+- Will not render
+  - Will not render anything at all
+  - Will not render, but let the next middleware in the chain to decide what to render
+
+```tsx
+// Will handle request with content type `image/*`.
+const Image = ({ middleware: { request, Next }, url }) =>
+  request.contentType.startsWith('image/') ? (
+    <img src={url} />
+  ) : (
+    <Next />
+  );
+
+// Will handle request with content type `video/*`.
+const Video = ({ middleware: { request, Next }, url }) =>
+  request.contentType.startsWith('video/') ? (
+    <video>
+      <source src={url} />
+    </video>
+  ) : (
+    <Next />
+  );
+
+// Will handle everything.
+const Binary = ({ url }) => <a href={url}>{url}</a>;
+
+const middleware = [asMiddleware(Image), asMiddleware(Video), asMiddleware(Binary)];
+```
+
+In this sample, 3 middleware are registered:
+
+- `<Image>` will render `<img>` if content type is `'image/*'`, otherwise, will pass to next middleware (`<Video>`)
+- `<Video>` will render `<video>` if content type is `'video/*'`, otherwise, will pass to next middleware (`<Binary>`)
+- `<Binary>` is a catch-all and will render as a link
+
+Notes: props passed to `<Next>` will override original props, however, `request` cannot be overridden.
 
+### Make a render request
+
+Before calling any components or hooks, the `<Provider>` component must be set up with the chain.
+
+When `<Proxy>` is being rendered, it will pass the `request` to the chain. The component returned from the chain will be rendered with `...props`. If no component is returned, it will be rendered as `undefined`.
+
+```tsx
 render(
   <Provider middleware={middleware}>
-    <Proxy request="bold">This is bold.</Proxy>
-    <Proxy request="italic">This is italic.</Proxy>
-    <Proxy>This is plain.</Proxy>
+    <Proxy request={{ contentType: 'image/png' }} url="https://.../cat.png" />
+    <Proxy request={{ contentType: 'video/mp4' }} url="https://.../cat-jump.mp4" />
+    <Proxy request={{ contentType: 'application/octet-stream' }} url="https://.../cat.zip" />
   </Provider>
 );
 ```
 
-This sample will render:
+The code above will render:
 
-> **This is bold.** _This is italic._ This is plain.
+```html
+<img src="https://.../cat.png" />
+<video>
+  <source src="https://.../cat-jump.mp4" />
+</video>
+<a href="https://.../cat.zip">https://.../cat.zip</a>
+```
 
-```jsx
-<strong>This is bold.</strong>
-<i>This is italic.</i>
-<>This is plain.</>
+For advanced scenario with precise rendering control, use the `useBuildComponentCallback` hook. This can be found in our live demo and [latter sections](#make-render-request-through-usebuildmiddlewarecallback).
+
+## How should I use?
+
+Here are some recipes on leveraging the chain of responsibility pattern for UI composition.
+
+### Bring your own component
+
+Customer of a component library can "bring your own" component by registering their component in the `<Provider>` component.
+
+For example, in a date picker UI, using the chain of responsibility pattern enables app developer to bring their own "month picker" component.
+
+```diff
+  type MonthPickerProps = Readonly<{
+    onChange: (date: Date) => void;
+    value: Date
+  }>;
+
+  function MonthPicker(props: MonthPickerProps) {
+    return (
+      <div>
+        {props.value.toLocaleDateString(undefined, { month: 'long' })}
+      </div>
+    );
+  };
+
++ const {
++   asMiddleware: asMonthPickerMiddleware,
++   Provider: MonthPickerProvider,
++   Proxy: MonthPickerProxy
++ } = createChainOfResponsibility<undefined, MonthPickerProps>();
+
+  type DatePickerProps = Readonly<{
++   monthPickerComponent?: ComponentType<MonthPickerProps> | undefined;
+    onChange: (date: Date) => void;
+    value: Date;
+  }>;
+
++ const monthPickerMiddleware = asMonthPickerMiddleware(MonthPicker);
+
+  function DatePicker(props: DatePickerProps) {
++   const monthPickerMiddleware = useMemo(
++     () =>
++       props.monthPickerComponent
++         ? [
++             asMonthPickerMiddleware(props.monthPickerComponent),
++             monthPickerMiddleware
++           ]
++         : [monthPickerMiddleware],
++     [props.monthPickerComponent]
++   );
+
+    return (
++     <MonthPickerProvider middleware={monthPickerMiddleware}>
+        <div>
+-         <MonthPicker onChange={onChange} value={value} />
++         <MonthPickerProxy onChange={onChange} value={value} />
+          <Calendar value={value} />
+        </div>
++     </MonthPickerProvider>
+    );
+  }
+```
+
+### Customizing component
+
+The "which component to render" decision in the middleware enables 4 key customization techniques:
+
+- Add a new component
+  - Register a new `<Audio>` middleware component to handle content type of "audio/\*"
+- Replace an existing component
+  - Register a new `<Image2>` middleware component to handle content type of "image/\*"
+- Remove an existing component
+  - Return `undefined` when handling content type of "video/\*"
+- Decorate an existing component
+  - Return a component which render `<div class="my-border"><Next /></div>`
+
+### Improve load time through code splitting and lazy loading
+
+After a bundle is lazy-loaded, register the component in the middleware.
+
+When the chain of the `<Provider>` is updated, the lazy-loaded component will be rendered immediately.
+
+This recipe can also used to build multiple flavors of bundle and allow bundle to be composited to suit the apps need.
+
+## Advanced usage
+
+### Registering component using functional pattern
+
+The `asMiddleware()` is a helper function to turn a React component into a component middleware for simpler registration. As it operates in render-time, there are disadvantages. For example, a VDOM node is always required.
+
+If precise rendering control is a requirement, consider registering the component natively using functional programming.
+
+The following code snippet shows the conversion from the `<Image>` middleware component in our previous sample, into a component registered via functional programming.
+
+```diff
+  // Simplify the `<Image>` component by removing `middleware` props.
+- const Image = ({ middleware: { request, Next }, url }) =>
+-   request.contentType.startsWith('image/') ? <img src={url} /> : <Next />;
++ const Image = ({ url }) => <img src={url} />;
+
+  // Registering the `<Image>` component functionally.
+  const middleware = [
+-   asMiddleware(Image);
++   () => next => request =>
++     request.contentType.startsWith('image/') ? Image : next(request)
+  ];
+```
+
+Notes: for performance reason, the return value of the `next(request)` should be a stable value. In the example above, the middleware return `Image`, which is a constant and is stable.
+
+### Make render request through `useBuildMiddlewareCallback()`
+
+Similar the `asMiddleware`, the `<Proxy>` component is a helper component for easier rendering. It shares similar disadvantages.
+
+The following code snippet shows the conversion from the `<Proxy>` component into the `useBuildMiddlewareCallback()` hook.
+
+```diff
+  function App() {
+    // Make a render request (a.k.a. build a component.)
++   const buildMiddleware = useBuildMiddlewareCallback();
++   const FilePreview = buildMiddleware({ contextType: 'image/png' });
+
+    return (
+      <Provider middleware={middleware}>
+        {/* Simplify the element by removing `request` props and handling `FilePreview` if it is `undefined`. */}
+-       <Proxy request={{ contentType: 'image/png' }} url="https://.../cat.png" />
++       {FilePreview && <FilePreview url="https://.../cat.png" />}
+      </Provider>
+    );
+  }
 ```
 
-### Using with Fluent UI as `IRenderFunction`
+### Using as `IRenderFunction` in Fluent UI v8
+
+> We are considering deprecating the `IRenderFunction` as Fluent UI no longer adopt this pattern.
 
-The chain of responsibility design pattern can be used in Fluent UI.
+The chain of responsibility design pattern can be used in Fluent UI v8.
 
 After calling `createChainOfResponsibilityForFluentUI`, it will return `useBuildRenderFunction` hook. This hook, when called, will return a function to use as [`IRenderFunction`](https://github.com/microsoft/fluentui/blob/master/packages/utilities/src/IRenderFunction.ts) in Fluent UI components.
 
@@ -106,70 +297,19 @@ There are subtle differences between the standard version and the Fluent UI vers
   - They are optional too, as defined in [`IRenderFunction`](https://github.com/microsoft/fluentui/blob/master/packages/utilities/src/IRenderFunction.ts)
 - Automatic fallback to `defaultRender`
 
-### Decorating UI components
-
-One core feature of chain of responsibility design pattern is allowing middleware to control the execution flow. In other words, middleware can decorate the result of their `next()` middleware. The code snippet below shows how the wrapping could be done.
-
-The bold middleware uses traditional approach to wrap the `next()` result, which is a component named `<Next>`. The italic middleware uses [`react-wrap-with`](https://npmjs.com/package/react-wrap-with/) to simplify the wrapping code.
-
-```jsx
-const middleware = [
-  () => next => request => {
-    const Next = next(request);
-
-    if (request?.has('bold')) {
-      return props => <Bold>{Next && <Next {...props} />}</Bold>;
-    }
-
-    return Next;
-  },
-  () => next => request => wrapWith(request?.has('italic') && Italic)(next(request)),
-  () => () => () => Plain
-];
-
-const App = () => (
-  <Provider middleware={middleware}>
-    <Proxy request={new Set(['bold'])}>This is bold.</Proxy>
-    <Proxy request={new Set(['italic'])}>This is italic.</Proxy>
-    <Proxy request={new Set(['bold', 'italic'])}>This is bold and italic.</Proxy>
-    <Proxy>This is plain.</Proxy>
-  </Provider>
-);
-```
-
-This sample will render:
-
-> **This is bold.** _This is italic._ **_This is bold and italic._** This is plain.
-
-```jsx
-<Bold>This is bold.</Bold>
-<Italic>This is italic.</Italic>
-<Bold><Italic>This is bold and italic.</Italic></Bold>
-<Plain>This is plain.</Plain>
-```
-
 ### Nesting `<Provider>`
 
 If the `<Provider>` from the same chain appears nested in the tree, the `<Proxy>` will render using the middleware from the closest `<Provider>` and fallback up the chain. The following code snippet will render "Second First".
 
 ```jsx
-const { Provider, Proxy } = createChainOfResponsibility();
-
-const firstMiddleware = () => next => request => {
-  const NextComponent = next(request);
-
-  return () => <Fragment>First {NextComponent && <NextComponent />}</Fragment>;
-};
+const { asMiddleware, Provider, Proxy } = createChainOfResponsibility();
 
-const secondMiddleware = () => next => request => {
-  const NextComponent = next(request);
-
-  return () => <Fragment>Second {NextComponent && <NextComponent />}</Fragment>;
-};
+const First = ({ middleware: { Next } }) => <>First <Next /></>;
+const Second = ({ middleware: { Next } }) => <>Second <Next /></>;
 
 render(
-  <Provider middleware={[firstMiddleware]}>
-    <Provider middleware={[secondMiddleware]}>
+  <Provider middleware={[asMiddleware(First)]}>
+    <Provider middleware={[asMiddleware(Second)]}>
       <Proxy /> <!-- Renders "Second First" -->
     </Provider>
   </Provider>
@@ -182,29 +322,41 @@ render(
 function createChainOfResponsibility<Request = undefined, Props = { 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: () => UseBuildComponent<Request, Props>;
+  useBuildComponentCallback(): (
+    request: Request,
+    options?: {
+      fallbackComponent?: ComponentType<Props> | undefined
+    }
+  ) => ComponentType<Props> | undefined;
 };
 ```
 
 ### Return value
 
-| Name                        | Type                                                                            | Description                                                                           |
-| --------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-| `Provider`                  | `React.ComponentType`                                                           | Entrypoint component, must wraps all usage of customizations                          |
-| `Proxy`                     | `React.ComponentType`                                                           | Proxy component, process the `request` from props and morph into the result component |
-| `types`                     | `{ init, middleware, props, request }`                                          | TypeScript: shorthand types, all objects are `undefined` intentionally                |
-| `useBuildComponentCallback` | `() => (request, options) => React.ComponentType \| false \| null \| undefined` | Callback hook which return a function to build the component for rendering the result |
+| Name                        | Description                                                                           |
+| --------------------------- | ------------------------------------------------------------------------------------- |
+| `asMiddleware`              | A helper function to convert a React component into a middleware.                     |
+| `Provider`                  | Entrypoint component, must wraps all usage of customizations                          |
+| `Proxy`                     | Proxy component, process the `request` from props and morph into the result component |
+| `types`                     | TypeScript: shorthand types, all objects are `undefined` intentionally                |
+| `useBuildComponentCallback` | Callback hook which return a function to build the component for rendering the result |
 
 ### Options
 
+> `passModifiedRequest` is not supported by `asMiddleware`.
+
 ```ts
 type Options = {
   /** Allows a middleware to pass another request object to its next middleware. Default is false. */
@@ -212,12 +364,31 @@ type Options = {
 };
 ```
 
-If `passModifiedRequest` is default or `false`, middleware will not be allowed to pass another reference of `request` object to their `next()` middleware. Instead, the `request` object passed to `next()` will be ignored and the next middleware always receive the original `request` object. This behavior is similar to [ExpressJS](https://expressjs.com/) middleware.
+If `passModifiedRequest` is default or `false`, middleware will not be allowed to pass another reference of `request` object to their `next()` middleware. Instead, the `request` object passed to `next()` will be ignored and the next middleware always receive the original `request` object. This behavior is similar to [Express](https://expressjs.com/) middleware.
 
 Setting to `true` will enable advanced scenarios and allow a middleware to influence their downstreamers.
 
 When the option is default or `false`, middleware could still modify the `request` object and influence their downstreamers. It is recommended to follow immutable pattern when handling the `request` object, or use deep [`Object.freeze()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) to guarantee immutability.
 
+### API of `asMiddleware`
+
+```ts
+function asMiddleware(
+  middlewareComponent: ComponentType<MiddlewareComponentProps<Request, Props, Init>>
+): ComponentMiddleware<Request, Props, Init>;
+
+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>
+  }>;
+```
+
 ### API of `useBuildComponentCallback`
 
 ```ts
@@ -259,9 +430,24 @@ When rendering the element, `getKey` is called to compute the `key` attribute. T
 
 ## Designs
 
-### Why the type of request and props can be different?
+### What is the difference between request, and props?
+
+- Request is for *appearance*, while props is for *content*
+- Request is for *deciding which component to render*, while props is for *what to render*
 
-This approach may seem overkill at first.
+For example:
+
+- Button
+  - Request: button, link button, push button
+  - Props: icon, text
+- File preview
+  - Request: image preview, video preview
+  - Props: file name, URL
+- Input
+  - Request: text input, number input, password input
+  - Props: label, value, instruction
+
+### 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.
 
@@ -302,26 +488,35 @@ This is for supporting multiple providers/proxies under a single app/tree.
 
 To reduce learning curve and likelihood of bugs, we disabled this feature until developers are more proficient with this package.
 
-If the `request` object passed to `next()` differs from the original `request` object, a reminder will be logged in the console.
+With the default settings, if the `request` object passed to `next()` differs from the original `request` object, a reminder will be logged in the console.
+
+### Why `request` cannot be modified using `asMiddleware` even `passModifiedRequest` is enabled?
+
+Request is for deciding which component to render. It is a build-time value.
+
+For component registered using `asMiddleware()`, the `request` prop is a render-time value. A render-time value cannot be used to influence build phase.
+
+To modify request, the middleware component must be converted to functional programming.
 
 ## Behaviors
 
 ### `<Proxy>` vs. `useBuildComponentCallback`
 
-Most of the time, use `<Proxy>`.
+Most of the time, use `<Proxy>` unless precise rendering is needed.
 
 Behind the scene, `<Proxy>` call `useBuildComponentCallback()` to build the component it would morph into.
 
 You can use the following decision tree to know when to use `<Proxy>` vs. `useBuildComponentCallback`
 
-- If you want to know what component will render before actual render happen, use `useBuildComponentCallback()`
-  - For example, using `useBuildComponentCallback()` allow you to know if the middleware will skip rendering the request
+- If you need to know what kind of component will be rendered before actual render happen, use `useBuildComponentCallback()`
+  - For example, using `useBuildComponentCallback()` allow you to know if the middleware would skip rendering the request
 - If your component use `request` prop which is conflict with `<Proxy>`, use `useBuildComponentCallback()`
+  - Also consider using a wrapping component to rename `request` prop
 - Otherwise, use `<Proxy>`
 
 ### Calling `next()` multiple times
 
-It is possible to call `next()` multiple times to render multiple copies of UI. Middleware should be written as a stateless function.
+It is possible to call `next()` multiple times. However, the return value should be stable, calling it multiple times without a different request should yield the same result.
 
 This is best used with options `passModifiedRequest` set to `true`. This combination allow a middleware to render the UI multiple times with some variations, such as rendering content and minimap at the same time.
 
@@ -335,11 +530,13 @@ This is because React does not allow asynchronous render. An exception will be t
 
 When writing middleware, keep them as stateless as possible and do not relies on data outside of the `request` object. The way it is writing should be similar to React function components.
 
-### Good middleware returns false to skip rendering
+When using functional programming to register the middleware, the return value should be stable.
+
+### Good middleware returns `false`/`null`/`undefined` to skip rendering
 
 If the middleware wants to skip rendering a request, return `false`/`null`/`undefined` directly. Do not return `() => false`, `<Fragment />`, or any other invisible components.
 
-This helps the component which send the request to the chain of responsibility to determine whether the request could be rendered or not.
+This helps the hosting component to determine whether the request would be rendered or not.
 
 ### Typing a component which expect no props to be passed
 
@@ -349,27 +546,25 @@ In TypeScript, `{}` literally means any objects. Components of type `ComponentTy
 
 Although `Record<any, never>` means empty object, it is not extensible. Thus, [`Record<any, never> & { className: string }` means `Record<any, never>`](https://www.typescriptlang.org/play?#code/C4TwDgpgBACgTgezAZygXigJQgYwXAEwB4BDAOxABooyIA3COAPgG4AoUSKAZQFcAjeElQYhKKADIoAbyg4ANiWTIAciQC2EAFxRkwOAEsyAcygBfdmzxk9UMIhQ6+ghyJlzFytZp0BydSRGvubsQA).
 
-We believe the best way to type a component which does not allow any props, is `ComponentType<{ children?: undefined }>`.
-
 ## Inspirations
 
 This package is heavily inspired by [Redux](https://redux.js.org/) middleware, especially [`applyMiddleware()`](https://github.com/reduxjs/redux/blob/master/docs/api/applyMiddleware.md) and [`compose()`](https://github.com/reduxjs/redux/blob/master/docs/api/compose.md). We read [this article](https://medium.com/@jacobp100/you-arent-using-redux-middleware-enough-94ffe991e6) to understand the concept, followed by some more readings on functional programming topics.
 
 Over multiple years, the chain of responsibility design pattern is proven to be very flexible and extensible in [Bot Framework Web Chat](https://github.co/microsoft/BotFramework-WebChat/). Internal parts of Web Chat is written as middleware consumed by itself. Multiple bundles with various sizes can be offered by removing some middleware and treeshaking them off.
 
-Middleware and router in [ExpressJS](https://expressjs.com/) also inspired us to learn more about this pattern. Their fallback middleware always returns 404 is an innovative approach.
+Middleware and router in [Express](https://expressjs.com/) also inspired us to learn more about this pattern. Their fallback middleware always returns 404 is an innovative approach.
 
-[Bing chat](https://bing.com/chat/) helped us understand and experiment with different naming.
+[Microsoft Copilot](https://copilot.microsoft.com/) helped us understand and experiment with different naming.
 
-### Differences from Redux and ExpressJS
+### Differences from Redux and Express
 
-The chain of responsibility design pattern implemented in [Redux](https://redux.js.org/) and [ExpressJS](https://expressjs.com/) prefers fire-and-forget execution (a.k.a. unidirectional): the result from the last middleware will not bubble up back to the first middleware. Instead, the caller may only collect the result from the last middleware. Sometimes, middleware may interrupt the execution and never return any results.
+The chain of responsibility design pattern implemented in [Redux](https://redux.js.org/) and [Express](https://expressjs.com/) prefers fire-and-forget execution (a.k.a. unidirectional): the result from the last middleware will not bubble up back to the first middleware. Instead, the caller may only collect the result from the last middleware, or via asynchronous and intermediate `dispatch()` calls. Sometimes, middleware may interrupt the execution and never return any results.
 
-However, the chain of responsibility design pattern implemented in this package prefers call-and-return execution: the result from the last middleware will propagate back to the first middleware before returning to the caller. This gives every middleware a chance to manipulate the result from downstreamers before sending it back.
+However, the chain of responsibility design pattern implemented in this package prefers synchronous call-and-return execution: the result from the last middleware will propagate back to the first middleware before returning to the caller. This gives every middleware a chance to manipulate the result from downstreamers before sending it back.
 
 ## Plain English
 
-This package implements the _chain of responsibility_ design pattern. Based on _request_, the chain of responsibility will be asked to _build a React component_. The middleware will _form a chain_ and request is _passed to the first one in the chain_. If the chain decided to render it, a component will be returned, otherwise, `false`/`null`/`undefined`.
+This package implements the _chain of responsibility_ design pattern. Based on _request_, the chain of responsibility will be asked to _build a React component_. The middleware would _form a chain_ and request is _passed to the first one in the chain_. If the chain decided to render it, a component will be returned, otherwise, `false`/`null`/`undefined`.
 
 ## Contributions
 

package/dist/{chunk-LQNXZPUH.mjs → chunk-TT7FCTZA.mjs}

@@ -1,5 +1,4 @@
 // src/createChainOfResponsibility.tsx
-import PropTypes from "prop-types";
 import React, {
   createContext,
   isValidElement,
@@ -65,7 +64,7 @@ function createChainOfResponsibility(options = {}) {
     }
   };
   const context = createContext(defaultUseBuildComponentCallback);
-  const Provider = ({ children, init, middleware }) => {
+  function ChainOfResponsibilityProvider({ children, init, middleware }) {
     if (!Array.isArray(middleware) || middleware.some((middleware2) => typeof middleware2 !== "function")) {
       throw new Error("middleware prop must be an array of functions");
     }
@@ -116,32 +115,37 @@ function createChainOfResponsibility(options = {}) {
       [enhancer, useBuildComponentCallback2]
     );
     return /* @__PURE__ */ React.createElement(context.Provider, { value: contextValue }, children);
-  };
-  Provider.displayName = "ChainOfResponsibilityProvider";
-  Provider.propTypes = {
-    children: PropTypes.any,
-    init: PropTypes.any,
-    middleware: PropTypes.any
-  };
+  }
   const useBuildComponentCallback = () => useContext(context).useBuildComponentCallback;
-  const Proxy = memo(
-    // False positive: "children" is not a prop.
-    // eslint-disable-next-line react/prop-types
-    ({ children, fallbackComponent, request, ...props }) => {
-      const enhancer = useBuildComponentCallback();
-      const Component = enhancer(request, { fallbackComponent });
-      return Component ? /* @__PURE__ */ React.createElement(Component, { ...props }, children) : null;
-    }
-  );
-  Proxy.displayName = "Proxy";
-  Proxy.propTypes = {
-    fallbackComponent: PropTypes.any,
-    request: PropTypes.any
+  function Proxy({ children, fallbackComponent, request, ...props }) {
+    const enhancer = useBuildComponentCallback();
+    const Component = enhancer(request, { fallbackComponent });
+    return Component ? /* @__PURE__ */ React.createElement(Component, { ...props }, children) : null;
+  }
+  const asMiddleware = (MiddlewareComponent) => (init) => (next) => (request) => {
+    const RawNextComponent = next(request);
+    const MiddlewareOf = (props) => {
+      const middleware = useMemo(
+        () => Object.freeze({
+          init,
+          Next: memo(
+            RawNextComponent ? (overridingProps) => /* @__PURE__ */ React.createElement(RawNextComponent, { ...props, ...overridingProps }) : () => null
+          ),
+          request
+        }),
+        []
+      );
+      return /* @__PURE__ */ React.createElement(MiddlewareComponent, { ...props, middleware });
+    };
+    MiddlewareOf.displayName = `MiddlewareOf<${MiddlewareComponent.displayName || ""}>`;
+    return memo(MiddlewareOf);
   };
   return {
-    Provider,
-    Proxy,
+    asMiddleware,
+    Provider: memo(ChainOfResponsibilityProvider),
+    Proxy: memo(Proxy),
     types: {
+      middlewareComponentProps: void 0,
       init: void 0,
       middleware: void 0,
       props: void 0,
@@ -154,4 +158,4 @@ function createChainOfResponsibility(options = {}) {
 export {
   createChainOfResponsibility
 };
-//# sourceMappingURL=chunk-LQNXZPUH.mjs.map
+//# sourceMappingURL=chunk-TT7FCTZA.mjs.map

package/dist/chunk-TT7FCTZA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/createChainOfResponsibility.tsx","../src/isReactComponent.ts","../src/private/compose.ts","../src/private/applyMiddleware.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> = { fallbackComponent?: ResultComponent<Props> };\n\ntype UseBuildComponentCallback<Request, Props> = (\n  request: Request,\n  options?: UseBuildComponentCallbackOptions<Props>\n) => ResultComponent<Props>;\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 ? { init?: undefined } : Init extends undefined ? { init?: Init } : { init: Init });\n\ntype ProxyProps<Request, Props extends object> = PropsWithChildren<\n  Request extends never | void\n    ? Props & { fallbackComponent?: ComponentType<Props>; request?: undefined }\n    : Request extends undefined\n      ? Props & { fallbackComponent?: ComponentType<Props>; request?: Request }\n      : Props & { fallbackComponent?: ComponentType<Props>; request: Request }\n>;\n\ntype Options = {\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  passModifiedRequest?: boolean;\n};\n\ntype MiddlewareProps<Request, Props, Init> = Readonly<{\n  init: Init;\n  Next: ComponentType<Partial<Props>>;\n  request: Request;\n}>;\n\ntype MiddlewareComponentProps<Request, Props, Init> = Props &\n  Readonly<{ middleware: MiddlewareProps<Request, Props, Init> }>;\n\nexport default function createChainOfResponsibility<\n  Request = undefined,\n  Props extends object = Readonly<{ children?: never }>,\n  Init = undefined\n>(\n  options: Options = {}\n): {\n  asMiddleware: (\n    middlewareComponent: ComponentType<MiddlewareComponentProps<Request, Props, Init>>\n  ) => ComponentMiddleware<Request, Props, Init>;\n  Provider: ComponentType<ProviderProps<Request, Props, Init>>;\n  Proxy: ComponentType<ProxyProps<Request, Props>>;\n  types: {\n    init: Init;\n    middleware: ComponentMiddleware<Request, Props, Init>;\n    middlewareComponentProps: MiddlewareComponentProps<Request, Props, Init>;\n    props: Props;\n    request: Request;\n  };\n  useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;\n} {\n  const defaultUseBuildComponentCallback: ProviderContext<Request, Props> = {\n    get enhancer() {\n      return undefined;\n    },\n    useBuildComponentCallback(_, options) {\n      if (options?.fallbackComponent) {\n        return options.fallbackComponent;\n      }\n\n      throw new Error('This component/hook cannot be used outside of its corresponding <Provider>');\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: UseBuildComponentCallback<Request, Props>) => (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),\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({ children, fallbackComponent, request, ...props }: ProxyProps<Request, Props>) {\n    const enhancer = useBuildComponentCallback();\n    const Component = enhancer(request as Request, { fallbackComponent });\n\n    return Component ? <Component {...(props as Props)}>{children}</Component> : null;\n  }\n\n  const asMiddleware: (\n    middlewareComponent: ComponentType<MiddlewareComponentProps<Request, Props, Init>>\n  ) => ComponentMiddleware<Request, Props, Init> =\n    (\n      MiddlewareComponent: ComponentType<MiddlewareComponentProps<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 {\n    asMiddleware,\n    Provider: memo<ProviderProps<Request, Props, Init>>(ChainOfResponsibilityProvider),\n    Proxy: memo<ProxyProps<Request, Props>>(Proxy),\n    types: {\n      middlewareComponentProps: undefined as unknown as MiddlewareComponentProps<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      request: undefined as unknown as Request\n    },\n    useBuildComponentCallback\n  };\n}\n","import {\n  type ComponentClass,\n  type ComponentType,\n  type Consumer,\n  type Fragment,\n  type FunctionComponent,\n  type Provider\n} from 'react';\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.\nexport default function 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","// 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":"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","names":["fn","options","middleware","init","enhancer","useBuildComponentCallback"]}

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

@@ -26,7 +26,7 @@ type ProviderProps<Request, Props, Init> = PropsWithChildren<{
 } : {
     init: Init;
 });
-type ProxyProps<Request, Props> = PropsWithChildren<Request extends never | void ? Props & {
+type ProxyProps<Request, Props extends object> = PropsWithChildren<Request extends never | void ? Props & {
     fallbackComponent?: ComponentType<Props>;
     request?: undefined;
 } : Request extends undefined ? Props & {
@@ -45,14 +45,24 @@ type Options = {
      */
     passModifiedRequest?: boolean;
 };
-declare function createChainOfResponsibility<Request = undefined, Props = {
+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): {
+}>, 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;
     };

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

@@ -26,7 +26,7 @@ type ProviderProps<Request, Props, Init> = PropsWithChildren<{
 } : {
     init: Init;
 });
-type ProxyProps<Request, Props> = PropsWithChildren<Request extends never | void ? Props & {
+type ProxyProps<Request, Props extends object> = PropsWithChildren<Request extends never | void ? Props & {
     fallbackComponent?: ComponentType<Props>;
     request?: undefined;
 } : Request extends undefined ? Props & {
@@ -45,14 +45,24 @@ type Options = {
      */
     passModifiedRequest?: boolean;
 };
-declare function createChainOfResponsibility<Request = undefined, Props = {
+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): {
+}>, 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;
     };

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

@@ -38,7 +38,6 @@ module.exports = __toCommonJS(index_fluentUI_exports);
 var import_react2 = __toESM(require("react"));
 
 // src/createChainOfResponsibility.tsx
-var import_prop_types = __toESM(require("prop-types"));
 var import_react = __toESM(require("react"));
 
 // src/isReactComponent.ts
@@ -97,7 +96,7 @@ function createChainOfResponsibility(options = {}) {
     }
   };
   const context = (0, import_react.createContext)(defaultUseBuildComponentCallback);
-  const Provider = ({ children, init, middleware }) => {
+  function ChainOfResponsibilityProvider({ children, init, middleware }) {
     if (!Array.isArray(middleware) || middleware.some((middleware2) => typeof middleware2 !== "function")) {
       throw new Error("middleware prop must be an array of functions");
     }
@@ -148,32 +147,37 @@ function createChainOfResponsibility(options = {}) {
       [enhancer, useBuildComponentCallback2]
     );
     return /* @__PURE__ */ import_react.default.createElement(context.Provider, { value: contextValue }, children);
-  };
-  Provider.displayName = "ChainOfResponsibilityProvider";
-  Provider.propTypes = {
-    children: import_prop_types.default.any,
-    init: import_prop_types.default.any,
-    middleware: import_prop_types.default.any
-  };
+  }
   const useBuildComponentCallback = () => (0, import_react.useContext)(context).useBuildComponentCallback;
-  const Proxy2 = (0, import_react.memo)(
-    // False positive: "children" is not a prop.
-    // eslint-disable-next-line react/prop-types
-    ({ children, fallbackComponent, request, ...props }) => {
-      const enhancer = useBuildComponentCallback();
-      const Component = enhancer(request, { fallbackComponent });
-      return Component ? /* @__PURE__ */ import_react.default.createElement(Component, { ...props }, children) : null;
-    }
-  );
-  Proxy2.displayName = "Proxy";
-  Proxy2.propTypes = {
-    fallbackComponent: import_prop_types.default.any,
-    request: import_prop_types.default.any
+  function Proxy2({ children, fallbackComponent, request, ...props }) {
+    const enhancer = useBuildComponentCallback();
+    const Component = enhancer(request, { fallbackComponent });
+    return Component ? /* @__PURE__ */ import_react.default.createElement(Component, { ...props }, children) : null;
+  }
+  const asMiddleware = (MiddlewareComponent) => (init) => (next) => (request) => {
+    const RawNextComponent = next(request);
+    const MiddlewareOf = (props) => {
+      const middleware = (0, import_react.useMemo)(
+        () => Object.freeze({
+          init,
+          Next: (0, import_react.memo)(
+            RawNextComponent ? (overridingProps) => /* @__PURE__ */ import_react.default.createElement(RawNextComponent, { ...props, ...overridingProps }) : () => null
+          ),
+          request
+        }),
+        []
+      );
+      return /* @__PURE__ */ import_react.default.createElement(MiddlewareComponent, { ...props, middleware });
+    };
+    MiddlewareOf.displayName = `MiddlewareOf<${MiddlewareComponent.displayName || ""}>`;
+    return (0, import_react.memo)(MiddlewareOf);
   };
   return {
-    Provider,
-    Proxy: Proxy2,
+    asMiddleware,
+    Provider: (0, import_react.memo)(ChainOfResponsibilityProvider),
+    Proxy: (0, import_react.memo)(Proxy2),
     types: {
+      middlewareComponentProps: void 0,
       init: void 0,
       middleware: void 0,
       props: void 0,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.fluentUI.ts","../src/createChainOfResponsibilityForFluentUI.tsx","../src/createChainOfResponsibility.tsx","../src/isReactComponent.ts","../src/private/compose.ts","../src/private/applyMiddleware.ts"],"sourcesContent":["import createChainOfResponsibilityForFluentUI from './createChainOfResponsibilityForFluentUI.tsx';\n\nexport { createChainOfResponsibilityForFluentUI };\n","import { type IRenderFunction } from '@fluentui/react';\nimport React, { useCallback, type Key } from 'react';\n\nimport createChainOfResponsibility from './createChainOfResponsibility.tsx';\n\ntype UseBuildRenderFunctionOptions<Props> = { getKey?: (props: Props | undefined) => Key };\n\ntype UseBuildRenderFunction<Props> = (options?: UseBuildRenderFunctionOptions<Props>) => IRenderFunction<Props>;\n\n// We are using the props as both \"Request\" and \"Props\".\n// This should eases migration from `onRender` to chain of responsibility.\n// Downside is, web developers could accidentally pass request as props and not honoring props modified by upstreamers.\nexport default function createChainOfResponsibilityForFluentUI<Props extends object, Init = undefined>(\n  options?: Parameters<typeof createChainOfResponsibility>[0]\n): ReturnType<typeof createChainOfResponsibility<Props | undefined, Props, Init>> & {\n  useBuildRenderFunction: UseBuildRenderFunction<Props>;\n} {\n  const returnValue = createChainOfResponsibility<Props | undefined, Props, Init>(options);\n\n  const { Proxy } = returnValue;\n\n  const useBuildRenderFunction: UseBuildRenderFunction<Props> = (options = {}) => {\n    const { getKey } = options;\n\n    return useCallback<IRenderFunction<Props>>(\n      (props, defaultRender) => (\n        <Proxy {...(props as Props)} fallbackComponent={defaultRender} key={getKey?.(props)} request={props} />\n      ),\n      [getKey]\n    );\n  };\n\n  return { ...returnValue, useBuildRenderFunction };\n}\n","import PropTypes from 'prop-types';\nimport 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\ntype ResultComponent<Props> = ComponentType<Props> | false | null | undefined;\n\ntype UseBuildComponentCallbackOptions<Props> = { fallbackComponent?: ResultComponent<Props> };\n\ntype UseBuildComponentCallback<Request, Props> = (\n  request: Request,\n  options?: UseBuildComponentCallbackOptions<Props>\n) => ResultComponent<Props>;\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 ? { init?: undefined } : Init extends undefined ? { init?: Init } : { init: Init });\n\ntype ProxyProps<Request, Props> = PropsWithChildren<\n  Request extends never | void\n    ? Props & { fallbackComponent?: ComponentType<Props>; request?: undefined }\n    : Request extends undefined\n      ? Props & { fallbackComponent?: ComponentType<Props>; request?: Request }\n      : Props & { fallbackComponent?: ComponentType<Props>; request: Request }\n>;\n\ntype Options = {\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  passModifiedRequest?: boolean;\n};\n\nexport default function createChainOfResponsibility<\n  Request = undefined,\n  Props = { children?: never },\n  Init = undefined\n>(\n  options: Options = {}\n): {\n  Provider: ComponentType<ProviderProps<Request, Props, Init>>;\n  Proxy: ComponentType<ProxyProps<Request, Props>>;\n  types: {\n    init: Init;\n    middleware: ComponentMiddleware<Request, Props, Init>;\n    props: Props;\n    request: Request;\n  };\n  useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;\n} {\n  const defaultUseBuildComponentCallback: ProviderContext<Request, Props> = {\n    get enhancer() {\n      return undefined;\n    },\n    useBuildComponentCallback(_, options) {\n      if (options?.fallbackComponent) {\n        return options.fallbackComponent;\n      }\n\n      throw new Error('This component/hook cannot be used outside of its corresponding <Provider>');\n    }\n  };\n\n  const context = createContext<ProviderContext<Request, Props>>(defaultUseBuildComponentCallback);\n\n  const Provider: ComponentType<ProviderProps<Request, Props, Init>> = ({ children, init, middleware }) => {\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: UseBuildComponentCallback<Request, Props>) => (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),\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  Provider.displayName = 'ChainOfResponsibilityProvider';\n  Provider.propTypes = {\n    children: PropTypes.any,\n    init: PropTypes.any,\n    middleware: PropTypes.any\n  };\n\n  const useBuildComponentCallback = () => useContext(context).useBuildComponentCallback;\n\n  const Proxy: ComponentType<ProxyProps<Request, Props>> = memo(\n    // False positive: \"children\" is not a prop.\n    // eslint-disable-next-line react/prop-types\n    ({ children, fallbackComponent, request, ...props }) => {\n      const enhancer = useBuildComponentCallback();\n      const Component = enhancer(request as Request, { fallbackComponent });\n\n      return Component ? <Component {...(props as Props)}>{children}</Component> : null;\n    }\n  );\n\n  Proxy.displayName = 'Proxy';\n  Proxy.propTypes = {\n    fallbackComponent: PropTypes.any,\n    request: PropTypes.any\n  };\n\n  return {\n    Provider,\n    Proxy,\n    types: {\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      request: undefined as unknown as Request\n    },\n    useBuildComponentCallback\n  };\n}\n","import {\n  type ComponentClass,\n  type ComponentType,\n  type Consumer,\n  type Fragment,\n  type FunctionComponent,\n  type Provider\n} from 'react';\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.\nexport default function 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","// 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":"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","names":["import_react","fn","options","middleware","init","enhancer","useBuildComponentCallback","React","PropTypes","Proxy","Proxy","options","React"]}
+{"version":3,"sources":["../src/index.fluentUI.ts","../src/createChainOfResponsibilityForFluentUI.tsx","../src/createChainOfResponsibility.tsx","../src/isReactComponent.ts","../src/private/compose.ts","../src/private/applyMiddleware.ts"],"sourcesContent":["import createChainOfResponsibilityForFluentUI from './createChainOfResponsibilityForFluentUI.tsx';\n\nexport { createChainOfResponsibilityForFluentUI };\n","import { type IRenderFunction } from '@fluentui/react';\nimport React, { useCallback, type Key } from 'react';\n\nimport createChainOfResponsibility from './createChainOfResponsibility.tsx';\n\ntype UseBuildRenderFunctionOptions<Props> = { getKey?: (props: Props | undefined) => Key };\n\ntype UseBuildRenderFunction<Props> = (options?: UseBuildRenderFunctionOptions<Props>) => IRenderFunction<Props>;\n\n// We are using the props as both \"Request\" and \"Props\".\n// This should eases migration from `onRender` to chain of responsibility.\n// Downside is, web developers could accidentally pass request as props and not honoring props modified by upstreamers.\nexport default function createChainOfResponsibilityForFluentUI<Props extends object, Init = undefined>(\n  options?: Parameters<typeof createChainOfResponsibility>[0]\n): ReturnType<typeof createChainOfResponsibility<Props | undefined, Props, Init>> & {\n  useBuildRenderFunction: UseBuildRenderFunction<Props>;\n} {\n  const returnValue = createChainOfResponsibility<Props | undefined, Props, Init>(options);\n\n  const { Proxy } = returnValue;\n\n  const useBuildRenderFunction: UseBuildRenderFunction<Props> = (options = {}) => {\n    const { getKey } = options;\n\n    return useCallback<IRenderFunction<Props>>(\n      (props, defaultRender) => (\n        <Proxy {...(props as Props)} fallbackComponent={defaultRender} key={getKey?.(props)} request={props} />\n      ),\n      [getKey]\n    );\n  };\n\n  return { ...returnValue, useBuildRenderFunction };\n}\n","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> = { fallbackComponent?: ResultComponent<Props> };\n\ntype UseBuildComponentCallback<Request, Props> = (\n  request: Request,\n  options?: UseBuildComponentCallbackOptions<Props>\n) => ResultComponent<Props>;\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 ? { init?: undefined } : Init extends undefined ? { init?: Init } : { init: Init });\n\ntype ProxyProps<Request, Props extends object> = PropsWithChildren<\n  Request extends never | void\n    ? Props & { fallbackComponent?: ComponentType<Props>; request?: undefined }\n    : Request extends undefined\n      ? Props & { fallbackComponent?: ComponentType<Props>; request?: Request }\n      : Props & { fallbackComponent?: ComponentType<Props>; request: Request }\n>;\n\ntype Options = {\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  passModifiedRequest?: boolean;\n};\n\ntype MiddlewareProps<Request, Props, Init> = Readonly<{\n  init: Init;\n  Next: ComponentType<Partial<Props>>;\n  request: Request;\n}>;\n\ntype MiddlewareComponentProps<Request, Props, Init> = Props &\n  Readonly<{ middleware: MiddlewareProps<Request, Props, Init> }>;\n\nexport default function createChainOfResponsibility<\n  Request = undefined,\n  Props extends object = Readonly<{ children?: never }>,\n  Init = undefined\n>(\n  options: Options = {}\n): {\n  asMiddleware: (\n    middlewareComponent: ComponentType<MiddlewareComponentProps<Request, Props, Init>>\n  ) => ComponentMiddleware<Request, Props, Init>;\n  Provider: ComponentType<ProviderProps<Request, Props, Init>>;\n  Proxy: ComponentType<ProxyProps<Request, Props>>;\n  types: {\n    init: Init;\n    middleware: ComponentMiddleware<Request, Props, Init>;\n    middlewareComponentProps: MiddlewareComponentProps<Request, Props, Init>;\n    props: Props;\n    request: Request;\n  };\n  useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;\n} {\n  const defaultUseBuildComponentCallback: ProviderContext<Request, Props> = {\n    get enhancer() {\n      return undefined;\n    },\n    useBuildComponentCallback(_, options) {\n      if (options?.fallbackComponent) {\n        return options.fallbackComponent;\n      }\n\n      throw new Error('This component/hook cannot be used outside of its corresponding <Provider>');\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: UseBuildComponentCallback<Request, Props>) => (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),\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({ children, fallbackComponent, request, ...props }: ProxyProps<Request, Props>) {\n    const enhancer = useBuildComponentCallback();\n    const Component = enhancer(request as Request, { fallbackComponent });\n\n    return Component ? <Component {...(props as Props)}>{children}</Component> : null;\n  }\n\n  const asMiddleware: (\n    middlewareComponent: ComponentType<MiddlewareComponentProps<Request, Props, Init>>\n  ) => ComponentMiddleware<Request, Props, Init> =\n    (\n      MiddlewareComponent: ComponentType<MiddlewareComponentProps<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 {\n    asMiddleware,\n    Provider: memo<ProviderProps<Request, Props, Init>>(ChainOfResponsibilityProvider),\n    Proxy: memo<ProxyProps<Request, Props>>(Proxy),\n    types: {\n      middlewareComponentProps: undefined as unknown as MiddlewareComponentProps<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      request: undefined as unknown as Request\n    },\n    useBuildComponentCallback\n  };\n}\n","import {\n  type ComponentClass,\n  type ComponentType,\n  type Consumer,\n  type Fragment,\n  type FunctionComponent,\n  type Provider\n} from 'react';\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.\nexport default function 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","// 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":"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","names":["import_react","fn","options","middleware","init","enhancer","useBuildComponentCallback","React","Proxy","Proxy","options","React"]}

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

@@ -1,6 +1,6 @@
 import {
   createChainOfResponsibility
-} from "./chunk-LQNXZPUH.mjs";
+} from "./chunk-TT7FCTZA.mjs";
 
 // src/createChainOfResponsibilityForFluentUI.tsx
 import React, { useCallback } from "react";

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

@@ -35,7 +35,6 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/createChainOfResponsibility.tsx
-var import_prop_types = __toESM(require("prop-types"));
 var import_react = __toESM(require("react"));
 
 // src/isReactComponent.ts
@@ -94,7 +93,7 @@ function createChainOfResponsibility(options = {}) {
     }
   };
   const context = (0, import_react.createContext)(defaultUseBuildComponentCallback);
-  const Provider = ({ children, init, middleware }) => {
+  function ChainOfResponsibilityProvider({ children, init, middleware }) {
     if (!Array.isArray(middleware) || middleware.some((middleware2) => typeof middleware2 !== "function")) {
       throw new Error("middleware prop must be an array of functions");
     }
@@ -145,32 +144,37 @@ function createChainOfResponsibility(options = {}) {
       [enhancer, useBuildComponentCallback2]
     );
     return /* @__PURE__ */ import_react.default.createElement(context.Provider, { value: contextValue }, children);
-  };
-  Provider.displayName = "ChainOfResponsibilityProvider";
-  Provider.propTypes = {
-    children: import_prop_types.default.any,
-    init: import_prop_types.default.any,
-    middleware: import_prop_types.default.any
-  };
+  }
   const useBuildComponentCallback = () => (0, import_react.useContext)(context).useBuildComponentCallback;
-  const Proxy2 = (0, import_react.memo)(
-    // False positive: "children" is not a prop.
-    // eslint-disable-next-line react/prop-types
-    ({ children, fallbackComponent, request, ...props }) => {
-      const enhancer = useBuildComponentCallback();
-      const Component = enhancer(request, { fallbackComponent });
-      return Component ? /* @__PURE__ */ import_react.default.createElement(Component, { ...props }, children) : null;
-    }
-  );
-  Proxy2.displayName = "Proxy";
-  Proxy2.propTypes = {
-    fallbackComponent: import_prop_types.default.any,
-    request: import_prop_types.default.any
+  function Proxy2({ children, fallbackComponent, request, ...props }) {
+    const enhancer = useBuildComponentCallback();
+    const Component = enhancer(request, { fallbackComponent });
+    return Component ? /* @__PURE__ */ import_react.default.createElement(Component, { ...props }, children) : null;
+  }
+  const asMiddleware = (MiddlewareComponent) => (init) => (next) => (request) => {
+    const RawNextComponent = next(request);
+    const MiddlewareOf = (props) => {
+      const middleware = (0, import_react.useMemo)(
+        () => Object.freeze({
+          init,
+          Next: (0, import_react.memo)(
+            RawNextComponent ? (overridingProps) => /* @__PURE__ */ import_react.default.createElement(RawNextComponent, { ...props, ...overridingProps }) : () => null
+          ),
+          request
+        }),
+        []
+      );
+      return /* @__PURE__ */ import_react.default.createElement(MiddlewareComponent, { ...props, middleware });
+    };
+    MiddlewareOf.displayName = `MiddlewareOf<${MiddlewareComponent.displayName || ""}>`;
+    return (0, import_react.memo)(MiddlewareOf);
   };
   return {
-    Provider,
-    Proxy: Proxy2,
+    asMiddleware,
+    Provider: (0, import_react.memo)(ChainOfResponsibilityProvider),
+    Proxy: (0, import_react.memo)(Proxy2),
     types: {
+      middlewareComponentProps: void 0,
       init: void 0,
       middleware: void 0,
       props: void 0,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/createChainOfResponsibility.tsx","../src/isReactComponent.ts","../src/private/compose.ts","../src/private/applyMiddleware.ts"],"sourcesContent":["import createChainOfResponsibility from './createChainOfResponsibility.tsx';\nimport { type ComponentMiddleware } from './types.ts';\n\nexport { createChainOfResponsibility };\n\nexport type { ComponentMiddleware };\n","import PropTypes from 'prop-types';\nimport 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\ntype ResultComponent<Props> = ComponentType<Props> | false | null | undefined;\n\ntype UseBuildComponentCallbackOptions<Props> = { fallbackComponent?: ResultComponent<Props> };\n\ntype UseBuildComponentCallback<Request, Props> = (\n  request: Request,\n  options?: UseBuildComponentCallbackOptions<Props>\n) => ResultComponent<Props>;\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 ? { init?: undefined } : Init extends undefined ? { init?: Init } : { init: Init });\n\ntype ProxyProps<Request, Props> = PropsWithChildren<\n  Request extends never | void\n    ? Props & { fallbackComponent?: ComponentType<Props>; request?: undefined }\n    : Request extends undefined\n      ? Props & { fallbackComponent?: ComponentType<Props>; request?: Request }\n      : Props & { fallbackComponent?: ComponentType<Props>; request: Request }\n>;\n\ntype Options = {\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  passModifiedRequest?: boolean;\n};\n\nexport default function createChainOfResponsibility<\n  Request = undefined,\n  Props = { children?: never },\n  Init = undefined\n>(\n  options: Options = {}\n): {\n  Provider: ComponentType<ProviderProps<Request, Props, Init>>;\n  Proxy: ComponentType<ProxyProps<Request, Props>>;\n  types: {\n    init: Init;\n    middleware: ComponentMiddleware<Request, Props, Init>;\n    props: Props;\n    request: Request;\n  };\n  useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;\n} {\n  const defaultUseBuildComponentCallback: ProviderContext<Request, Props> = {\n    get enhancer() {\n      return undefined;\n    },\n    useBuildComponentCallback(_, options) {\n      if (options?.fallbackComponent) {\n        return options.fallbackComponent;\n      }\n\n      throw new Error('This component/hook cannot be used outside of its corresponding <Provider>');\n    }\n  };\n\n  const context = createContext<ProviderContext<Request, Props>>(defaultUseBuildComponentCallback);\n\n  const Provider: ComponentType<ProviderProps<Request, Props, Init>> = ({ children, init, middleware }) => {\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: UseBuildComponentCallback<Request, Props>) => (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),\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  Provider.displayName = 'ChainOfResponsibilityProvider';\n  Provider.propTypes = {\n    children: PropTypes.any,\n    init: PropTypes.any,\n    middleware: PropTypes.any\n  };\n\n  const useBuildComponentCallback = () => useContext(context).useBuildComponentCallback;\n\n  const Proxy: ComponentType<ProxyProps<Request, Props>> = memo(\n    // False positive: \"children\" is not a prop.\n    // eslint-disable-next-line react/prop-types\n    ({ children, fallbackComponent, request, ...props }) => {\n      const enhancer = useBuildComponentCallback();\n      const Component = enhancer(request as Request, { fallbackComponent });\n\n      return Component ? <Component {...(props as Props)}>{children}</Component> : null;\n    }\n  );\n\n  Proxy.displayName = 'Proxy';\n  Proxy.propTypes = {\n    fallbackComponent: PropTypes.any,\n    request: PropTypes.any\n  };\n\n  return {\n    Provider,\n    Proxy,\n    types: {\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      request: undefined as unknown as Request\n    },\n    useBuildComponentCallback\n  };\n}\n","import {\n  type ComponentClass,\n  type ComponentType,\n  type Consumer,\n  type Fragment,\n  type FunctionComponent,\n  type Provider\n} from 'react';\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.\nexport default function 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","// 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":"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","names":["fn","options","middleware","init","enhancer","useBuildComponentCallback","React","PropTypes","Proxy"]}
+{"version":3,"sources":["../src/index.ts","../src/createChainOfResponsibility.tsx","../src/isReactComponent.ts","../src/private/compose.ts","../src/private/applyMiddleware.ts"],"sourcesContent":["export { default as createChainOfResponsibility } from './createChainOfResponsibility.tsx';\nexport { type ComponentMiddleware } from './types.ts';\n","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> = { fallbackComponent?: ResultComponent<Props> };\n\ntype UseBuildComponentCallback<Request, Props> = (\n  request: Request,\n  options?: UseBuildComponentCallbackOptions<Props>\n) => ResultComponent<Props>;\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 ? { init?: undefined } : Init extends undefined ? { init?: Init } : { init: Init });\n\ntype ProxyProps<Request, Props extends object> = PropsWithChildren<\n  Request extends never | void\n    ? Props & { fallbackComponent?: ComponentType<Props>; request?: undefined }\n    : Request extends undefined\n      ? Props & { fallbackComponent?: ComponentType<Props>; request?: Request }\n      : Props & { fallbackComponent?: ComponentType<Props>; request: Request }\n>;\n\ntype Options = {\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  passModifiedRequest?: boolean;\n};\n\ntype MiddlewareProps<Request, Props, Init> = Readonly<{\n  init: Init;\n  Next: ComponentType<Partial<Props>>;\n  request: Request;\n}>;\n\ntype MiddlewareComponentProps<Request, Props, Init> = Props &\n  Readonly<{ middleware: MiddlewareProps<Request, Props, Init> }>;\n\nexport default function createChainOfResponsibility<\n  Request = undefined,\n  Props extends object = Readonly<{ children?: never }>,\n  Init = undefined\n>(\n  options: Options = {}\n): {\n  asMiddleware: (\n    middlewareComponent: ComponentType<MiddlewareComponentProps<Request, Props, Init>>\n  ) => ComponentMiddleware<Request, Props, Init>;\n  Provider: ComponentType<ProviderProps<Request, Props, Init>>;\n  Proxy: ComponentType<ProxyProps<Request, Props>>;\n  types: {\n    init: Init;\n    middleware: ComponentMiddleware<Request, Props, Init>;\n    middlewareComponentProps: MiddlewareComponentProps<Request, Props, Init>;\n    props: Props;\n    request: Request;\n  };\n  useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;\n} {\n  const defaultUseBuildComponentCallback: ProviderContext<Request, Props> = {\n    get enhancer() {\n      return undefined;\n    },\n    useBuildComponentCallback(_, options) {\n      if (options?.fallbackComponent) {\n        return options.fallbackComponent;\n      }\n\n      throw new Error('This component/hook cannot be used outside of its corresponding <Provider>');\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: UseBuildComponentCallback<Request, Props>) => (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),\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({ children, fallbackComponent, request, ...props }: ProxyProps<Request, Props>) {\n    const enhancer = useBuildComponentCallback();\n    const Component = enhancer(request as Request, { fallbackComponent });\n\n    return Component ? <Component {...(props as Props)}>{children}</Component> : null;\n  }\n\n  const asMiddleware: (\n    middlewareComponent: ComponentType<MiddlewareComponentProps<Request, Props, Init>>\n  ) => ComponentMiddleware<Request, Props, Init> =\n    (\n      MiddlewareComponent: ComponentType<MiddlewareComponentProps<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 {\n    asMiddleware,\n    Provider: memo<ProviderProps<Request, Props, Init>>(ChainOfResponsibilityProvider),\n    Proxy: memo<ProxyProps<Request, Props>>(Proxy),\n    types: {\n      middlewareComponentProps: undefined as unknown as MiddlewareComponentProps<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      request: undefined as unknown as Request\n    },\n    useBuildComponentCallback\n  };\n}\n","import {\n  type ComponentClass,\n  type ComponentType,\n  type Consumer,\n  type Fragment,\n  type FunctionComponent,\n  type Provider\n} from 'react';\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.\nexport default function 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","// 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":"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","names":["fn","options","middleware","init","enhancer","useBuildComponentCallback","React","Proxy"]}

package/dist/react-chain-of-responsibility.mjs

@@ -1,6 +1,6 @@
 import {
   createChainOfResponsibility
-} from "./chunk-LQNXZPUH.mjs";
+} from "./chunk-TT7FCTZA.mjs";
 export {
   createChainOfResponsibility
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-chain-of-responsibility",
-  "version": "0.2.0",
-  "description": "Using chain of responsibility design pattern for React component customization.",
+  "version": "0.2.1-main.6ac5632",
+  "description": "Using chain of responsibility design pattern for compositing and customizing React component.",
   "files": [
     "./dist/"
   ],
@@ -87,36 +87,51 @@
       "react-test-renderer": "18.0.0"
     }
   },
+  "pinDependencies": {
+    "@types/react": [
+      "18"
+    ],
+    "react": [
+      "18"
+    ],
+    "react-dom": [
+      "18"
+    ],
+    "react-test-renderer": [
+      "18"
+    ]
+  },
   "devDependencies": {
-    "@babel/preset-env": "^7.25.8",
-    "@babel/preset-react": "^7.25.7",
-    "@babel/preset-typescript": "^7.25.7",
-    "@fluentui/react": "^8.121.4",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@fluentui/react": "^8.123.0",
+    "@testduet/given-when-then": "^0.1.0-main.5e524dc",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.1",
-    "@tsconfig/recommended": "^1.0.7",
+    "@testing-library/react": "^16.3.0",
+    "@tsconfig/recommended": "^1.0.10",
     "@tsconfig/strictest": "^2.0.5",
-    "@types/jest": "^29.5.13",
-    "@types/node": "^22.7.5",
-    "@types/react": "^18.3.11",
-    "esbuild": "^0.24.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.3",
+    "@types/react": "^18.3.23",
+    "esbuild": "^0.25.5",
     "escape-string-regexp": "^5.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.3.3",
-    "publint": "^0.2.11",
+    "jest": "^30.0.2",
+    "jest-environment-jsdom": "^30.0.2",
+    "prettier": "^3.5.3",
+    "publint": "^0.3.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "react-wrap-with": "^0.1.0",
-    "tsup": "^8.3.0",
-    "typescript": "^5.6.3"
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "dependencies": {
     "prop-types": "^15.8.1",
-    "react-chain-of-responsibility": "^0.2.0"
+    "react-chain-of-responsibility": "^0.2.1-main.6ac5632"
   }
 }

package/dist/chunk-LQNXZPUH.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/createChainOfResponsibility.tsx","../src/isReactComponent.ts","../src/private/compose.ts","../src/private/applyMiddleware.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport 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\ntype ResultComponent<Props> = ComponentType<Props> | false | null | undefined;\n\ntype UseBuildComponentCallbackOptions<Props> = { fallbackComponent?: ResultComponent<Props> };\n\ntype UseBuildComponentCallback<Request, Props> = (\n  request: Request,\n  options?: UseBuildComponentCallbackOptions<Props>\n) => ResultComponent<Props>;\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 ? { init?: undefined } : Init extends undefined ? { init?: Init } : { init: Init });\n\ntype ProxyProps<Request, Props> = PropsWithChildren<\n  Request extends never | void\n    ? Props & { fallbackComponent?: ComponentType<Props>; request?: undefined }\n    : Request extends undefined\n      ? Props & { fallbackComponent?: ComponentType<Props>; request?: Request }\n      : Props & { fallbackComponent?: ComponentType<Props>; request: Request }\n>;\n\ntype Options = {\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  passModifiedRequest?: boolean;\n};\n\nexport default function createChainOfResponsibility<\n  Request = undefined,\n  Props = { children?: never },\n  Init = undefined\n>(\n  options: Options = {}\n): {\n  Provider: ComponentType<ProviderProps<Request, Props, Init>>;\n  Proxy: ComponentType<ProxyProps<Request, Props>>;\n  types: {\n    init: Init;\n    middleware: ComponentMiddleware<Request, Props, Init>;\n    props: Props;\n    request: Request;\n  };\n  useBuildComponentCallback: () => UseBuildComponentCallback<Request, Props>;\n} {\n  const defaultUseBuildComponentCallback: ProviderContext<Request, Props> = {\n    get enhancer() {\n      return undefined;\n    },\n    useBuildComponentCallback(_, options) {\n      if (options?.fallbackComponent) {\n        return options.fallbackComponent;\n      }\n\n      throw new Error('This component/hook cannot be used outside of its corresponding <Provider>');\n    }\n  };\n\n  const context = createContext<ProviderContext<Request, Props>>(defaultUseBuildComponentCallback);\n\n  const Provider: ComponentType<ProviderProps<Request, Props, Init>> = ({ children, init, middleware }) => {\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: UseBuildComponentCallback<Request, Props>) => (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),\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  Provider.displayName = 'ChainOfResponsibilityProvider';\n  Provider.propTypes = {\n    children: PropTypes.any,\n    init: PropTypes.any,\n    middleware: PropTypes.any\n  };\n\n  const useBuildComponentCallback = () => useContext(context).useBuildComponentCallback;\n\n  const Proxy: ComponentType<ProxyProps<Request, Props>> = memo(\n    // False positive: \"children\" is not a prop.\n    // eslint-disable-next-line react/prop-types\n    ({ children, fallbackComponent, request, ...props }) => {\n      const enhancer = useBuildComponentCallback();\n      const Component = enhancer(request as Request, { fallbackComponent });\n\n      return Component ? <Component {...(props as Props)}>{children}</Component> : null;\n    }\n  );\n\n  Proxy.displayName = 'Proxy';\n  Proxy.propTypes = {\n    fallbackComponent: PropTypes.any,\n    request: PropTypes.any\n  };\n\n  return {\n    Provider,\n    Proxy,\n    types: {\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      request: undefined as unknown as Request\n    },\n    useBuildComponentCallback\n  };\n}\n","import {\n  type ComponentClass,\n  type ComponentType,\n  type Consumer,\n  type Fragment,\n  type FunctionComponent,\n  type Provider\n} from 'react';\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.\nexport default function 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","// 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":"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","names":["fn","options","middleware","init","enhancer","useBuildComponentCallback"]}