@modular-component/with-conditional-render 0.2.3 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @modular-component/with-conditional-render
 
+## 0.3.0
+
+### Minor Changes
+
+- 1784a2b: Add a clean way to extend the ModularComponent API with new dedicated stage functions
+
+### Patch Changes
+
+- Updated dependencies [1784a2b]
+  - @modular-component/core@0.3.0
+
 ## 0.2.3
 
 ### Patch Changes

package/README.md

@@ -1,18 +1,21 @@
 # @modular-component/with-conditional-render
 
-Provides three stages that allow conditional rendering in `ModularComponent`s:
+Provides three stages that allow conditional rendering in `ModularComponents`:
 
-- `with(condition)` will set a customizable argument to either `true` or `false`, based
+- `condition()` will set a customizable argument to either `true` or `false`, based
   on current arguments,
-- `with(conditionalFallback)` takes a `FunctionComponent` as parameter, and
+- `conditionalFallback()` takes a `FunctionComponent` as parameter, and
   renders it when a customizable argument is set to `true`, filling the `render` argument in the process,
-- `with(conditionalRender)` also takes a `FunctionComponent` as parameter, and
-  renders it if the `render` argument was not filled earlier.
+- `conditionalRender()` also takes a `FunctionComponent` as parameter, and
+  renders it only if the `render` argument was not filled earlier.
 
 ## Usage
 
+**Stage function imports**
+
 ```tsx
 import { ModularComponent } from '@modular-component/core'
+import { lifecycle } from '@modular-component/with-lifecycle'
 import {
   condition,
   conditionalFallback,
@@ -20,15 +23,15 @@ import {
 } from '@modular-component/with-conditional-render'
 
 const ConditionalComponent = ModularComponent<{ enabled?: boolean }>()
-  .with(condition('disabled', ({ props }) => props.enabled !== true))
-  .with(conditionalFallback('disabled', () => <>I'm disabled!</>))
   .with(
     lifecycle(() => {
       // Some data fetching logic...
       return { loading, data }
     }),
   )
-  .with(condition('loading', ({ lifecycle }) => lifecycle.loading === false))
+  .with(condition('disabled', ({ props }) => props.enabled !== true))
+  .with(conditionalFallback('disabled', () => <>I'm disabled!</>))
+  .with(condition('loading', ({ lifecycle }) => lifecycle.loading))
   .with(conditionalFallback('loading', () => <>I'm loading!</>))
   .with(
     conditionalRender(({ lifecycle }) => (
@@ -37,57 +40,57 @@ const ConditionalComponent = ModularComponent<{ enabled?: boolean }>()
   )
 ```
 
+**Stage registration**
+
+```tsx
+import { ModularComponent } from '@modular-component/core'
+import '@modular-component/with-lifecycle/register'
+import '@modular-component/with-conditional-render/register'
+
+const ConditionalComponent = ModularComponent<{ enabled?: boolean }>()
+  .withLifecycle(() => {
+    // Some data fetching logic...
+    return { loading, data }
+  })
+  .withCondition('disabled', ({ props }) => props.enabled !== true)
+  .withConditionalFallback('disabled', () => <>I'm disabled!</>)
+  .withCondition('loading', ({ lifecycle }) => lifecycle.loading)
+  .withConditionalFallback('loading', () => <>I'm loading!</>)
+  .withConditionalRender(({ lifecycle }) => (
+    <>I'm enabled and loaded, here is the content: {lifecycle.data}</>
+  ))
+```
+
 ## Multiple conditions and fallbacks
 
 You can use the `condition` and `conditionalFallback` multiple times in the same pipeline by providing different
 argument names as the first parameter.
 
-## Implementation
+## Stage registration
 
-The implementation for those stages is a bit more involved than other official extensions. Here, we have restrictions
-for each stage, as well as stage hooks.
+You can either automatically register the stages on `withCondition`, `withConditionalFallback` and `withConditionalRender` by importing `@modular-component/with-conditional-render/register`,
+or handle the registration manually thanks to the `condition`, `conditionalFallback`, `conditionalRender` functions and `WithCondition`, `WithConditionalFallback`, `WithConditionalRender` types exports.
 
-```tsx
-import React, { FunctionComponent } from 'react'
-import { ModularStage } from '@modular-component/core'
-
-export function condition<Args, Name extends string>(
-  name: Name,
-  useCondition: (args: Args) => boolean,
-): ModularStage<Name, (args: Args) => boolean> {
-  return { field: name, useStage: useCondition }
-}
+```ts
+import { ModularComponent, ModularContext } from '@modular-component/core'
+import {
+  condition,
+  conditionalFallback,
+  conditionalRender,
+  WithCondition,
+  WithConditionalFallback,
+  WithConditionalRender,
+} from '@modular-component/with-conditional-render'
 
-export function conditionalFallback<
-  Args extends { [key in Name]: boolean } & {
-    render?: ReturnType<FunctionComponent>
-  },
-  Name extends string,
->(
-  name: Name,
-  useRender: (args: Args) => ReturnType<FunctionComponent>,
-): ModularStage<`render-${Name}`, (args: Args) => void> {
-  return {
-    field: `render-${name}`,
-    useStage: (args: Args) => {
-      args.render = !args[name] || args.render ? args.render : useRender(args)
-    },
-  }
-}
+// Register the stages on the factory
+ModularComponent.register({ condition, conditionalFallback, conditionalRender })
 
-export function conditionalRender<Args, Ref>(
-  useRender: (
-    args: Args,
-    ref: React.ForwardedRef<Ref>,
-  ) => ReturnType<FunctionComponent>,
-): ModularStage<
-  'render',
-  (args: Args, ref: React.ForwardedRef<Ref>) => ReturnType<FunctionComponent>
-> {
-  return {
-    field: 'render',
-    useStage: (args: Args, ref: React.ForwardedRef<Ref>) =>
-      (args as any).render ?? useRender(args, ref),
+// Extend the type definition
+declare module '@modular-component/stages' {
+  export interface ModularComponentStages<Context extends ModularContext> {
+    withCondition: WithCondition<Context>
+    withConditionalFallback: WithConditionalFallback<Context>
+    withConditionalRender: WithConditionalRender<Context>
   }
 }
 ```

package/dist/index.d.ts

@@ -1,10 +1,22 @@
-import React, { FunctionComponent } from 'react';
-import { ModularStage } from '@modular-component/core';
-export declare function condition<Args, Name extends string>(name: Name, useCondition: (args: Args) => boolean): ModularStage<Name, (args: Args) => boolean>;
-export declare function conditionalFallback<Args extends {
-    [key in Name]: boolean;
-} & {
-    render?: ReturnType<FunctionComponent>;
-}, Name extends string>(name: Name, useRender: (args: Args) => ReturnType<FunctionComponent>): ModularStage<`render-${Name}`, (args: Args) => void>;
-export declare function conditionalRender<Args, Ref>(useRender: (args: Args, ref: React.ForwardedRef<Ref>) => ReturnType<FunctionComponent>): ModularStage<'render', (args: Args, ref: React.ForwardedRef<Ref>) => ReturnType<FunctionComponent>>;
+import { FunctionComponent } from 'react';
+import { ModularContext, GetValueGetterFor, StageParams, StageReturn } from '@modular-component/core/extend';
+type GetConditions<Context extends ModularContext> = {
+    [key in keyof Context['arguments']]: Context['arguments'][key] extends boolean ? key extends string ? key : never : never;
+}[keyof Context['arguments']];
+export declare function condition<Context extends ModularContext, Field extends string>(field: Field, useCondition: GetValueGetterFor<Context, Field, boolean>): (_?: Context | undefined) => {
+    field: Field;
+    provide: (args: import("@modular-component/core/extend").GetArgsFor<Context, Field>) => boolean;
+};
+export type WithCondition<Context extends ModularContext> = <Field extends string>(...args: StageParams<typeof condition<Context, Field>>) => StageReturn<typeof condition<Context, Field>>;
+export declare function conditionalFallback<Context extends ModularContext, Condition extends GetConditions<Context>>(condition: Condition, useRender: GetValueGetterFor<Context, `render-${Condition}`, ReturnType<FunctionComponent>>): (_?: Context | undefined) => {
+    field: `render-${Condition}`;
+    provide: (args: import("@modular-component/core/extend").GetArgsFor<Context, `render-${Condition}`>) => boolean;
+};
+export type WithConditionalFallback<Context extends ModularContext> = <Condition extends GetConditions<Context>>(...args: StageParams<typeof conditionalFallback<Context, Condition>>) => StageReturn<typeof conditionalFallback<Context, Condition>>;
+export declare function conditionalRender<Context extends ModularContext>(useRender: GetValueGetterFor<Context, 'render', ReturnType<FunctionComponent>>): (_?: Context | undefined) => {
+    field: "render";
+    provide: (args: import("@modular-component/core/extend").GetArgsFor<Context, "render">) => ReturnType<FunctionComponent>;
+};
+export type WithConditionalRender<Context extends ModularContext> = (...args: StageParams<typeof conditionalRender<Context>>) => StageReturn<typeof conditionalRender<Context>>;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEtD,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,SAAS,MAAM,EACjD,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GACpC,YAAY,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAE7C;AAED,wBAAgB,mBAAmB,CACjC,IAAI,SAAS;KAAG,GAAG,IAAI,IAAI,GAAG,OAAO;CAAE,GAAG;IACxC,MAAM,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAA;CACvC,EACD,IAAI,SAAS,MAAM,EAEnB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,UAAU,CAAC,iBAAiB,CAAC,GACvD,YAAY,CAAC,UAAU,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,CAOtD;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,GAAG,EACzC,SAAS,EAAE,CACT,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,KACzB,UAAU,CAAC,iBAAiB,CAAC,GACjC,YAAY,CACb,QAAQ,EACR,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,UAAU,CAAC,iBAAiB,CAAC,CAC5E,CAMA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAGL,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,WAAW,EACZ,MAAM,gCAAgC,CAAA;AAEvC,KAAK,aAAa,CAAC,OAAO,SAAS,cAAc,IAAI;KAClD,GAAG,IAAI,MAAM,OAAO,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,SAAS,OAAO,GAC1E,GAAG,SAAS,MAAM,GAChB,GAAG,GACH,KAAK,GACP,KAAK;CACV,CAAC,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC,CAAA;AAE7B,wBAAgB,SAAS,CAAC,OAAO,SAAS,cAAc,EAAE,KAAK,SAAS,MAAM,EAC5E,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,iBAAiB,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC;;;EAGzD;AAED,MAAM,MAAM,aAAa,CAAC,OAAO,SAAS,cAAc,IAAI,CAC1D,KAAK,SAAS,MAAM,EAEpB,GAAG,IAAI,EAAE,WAAW,CAAC,OAAO,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,KACnD,WAAW,CAAC,OAAO,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;AAElD,wBAAgB,mBAAmB,CACjC,OAAO,SAAS,cAAc,EAC9B,SAAS,SAAS,aAAa,CAAC,OAAO,CAAC,EAExC,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,iBAAiB,CAC1B,OAAO,EACP,UAAU,SAAS,EAAE,EACrB,UAAU,CAAC,iBAAiB,CAAC,CAC9B;;;EAcF;AAED,MAAM,MAAM,uBAAuB,CAAC,OAAO,SAAS,cAAc,IAAI,CACpE,SAAS,SAAS,aAAa,CAAC,OAAO,CAAC,EAExC,GAAG,IAAI,EAAE,WAAW,CAAC,OAAO,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,KACjE,WAAW,CAAC,OAAO,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;AAEhE,wBAAgB,iBAAiB,CAAC,OAAO,SAAS,cAAc,EAC9D,SAAS,EAAE,iBAAiB,CAC1B,OAAO,EACP,QAAQ,EACR,UAAU,CAAC,iBAAiB,CAAC,CAC9B;;+FAKW,UAAU,CAAC,iBAAiB,CAAC;EAI1C;AAED,MAAM,MAAM,qBAAqB,CAAC,OAAO,SAAS,cAAc,IAAI,CAClE,GAAG,IAAI,EAAE,WAAW,CAAC,OAAO,iBAAiB,CAAC,OAAO,CAAC,CAAC,KACpD,WAAW,CAAC,OAAO,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAA"}

package/dist/index.js

@@ -1,18 +1,22 @@
-export function condition(name, useCondition) {
-    return { field: name, useStage: useCondition };
+import { addTo, wrap, } from '@modular-component/core/extend';
+export function condition(field, useCondition) {
+    return addTo().on(field).provide(wrap(useCondition));
 }
-export function conditionalFallback(name, useRender) {
-    return {
-        field: `render-${name}`,
-        useStage: (args) => {
-            args.render = !args[name] || args.render ? args.render : useRender(args);
-        },
-    };
+export function conditionalFallback(condition, useRender) {
+    return addTo()
+        .on(`render-${condition}`)
+        .provide((args) => {
+        const _args = args;
+        if (_args[condition] && !_args.render) {
+            _args.render = wrap(useRender)(args);
+        }
+        return !!_args[condition];
+    });
 }
 export function conditionalRender(useRender) {
-    return {
-        field: 'render',
-        useStage: (args, ref) => args.render ?? useRender(args, ref),
-    };
+    return addTo()
+        .on('render')
+        .provide((args) => args.render ??
+        wrap(useRender)(args));
 }
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,SAAS,CACvB,IAAU,EACV,YAAqC;IAErC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAA;AAChD,CAAC;AAED,MAAM,UAAU,mBAAmB,CAMjC,IAAU,EACV,SAAwD;IAExD,OAAO;QACL,KAAK,EAAE,UAAU,IAAI,EAAE;QACvB,QAAQ,EAAE,CAAC,IAAU,EAAE,EAAE;YACvB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QAC1E,CAAC;KACF,CAAA;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB,CAC/B,SAGkC;IAKlC,OAAO;QACL,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,CAAC,IAAU,EAAE,GAA4B,EAAE,EAAE,CACpD,IAAY,CAAC,MAAM,IAAI,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC;KAC/C,CAAA;AACH,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,EACL,IAAI,GAKL,MAAM,gCAAgC,CAAA;AAUvC,MAAM,UAAU,SAAS,CACvB,KAAY,EACZ,YAAwD;IAExD,OAAO,KAAK,EAAW,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAA;AAC/D,CAAC;AAQD,MAAM,UAAU,mBAAmB,CAIjC,SAAoB,EACpB,SAIC;IAED,OAAO,KAAK,EAAW;SACpB,EAAE,CAAC,UAAU,SAAS,EAAE,CAAC;SACzB,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,KAAK,GAAG,IAGb,CAAA;QACD,IAAI,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACtC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAA;QACtC,CAAC;QACD,OAAO,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAC3B,CAAC,CAAC,CAAA;AACN,CAAC;AAQD,MAAM,UAAU,iBAAiB,CAC/B,SAIC;IAED,OAAO,KAAK,EAAW;SACpB,EAAE,CAAC,QAAQ,CAAC;SACZ,OAAO,CACN,CAAC,IAAI,EAAiC,EAAE,CACrC,IAAmD,CAAC,MAAM;QAC3D,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CACxB,CAAA;AACL,CAAC"}

package/package.json

@@ -8,7 +8,7 @@
     "Default",
     "Conditional"
   ],
-  "version": "0.2.3",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -17,23 +17,24 @@
   "files": [
     "src",
     "dist",
+    "register.js",
+    "register.d.ts",
     "CHANGELOG.md"
   ],
   "scripts": {
     "build": "yarn build:core && yarn build:self",
     "build:core": "yarn workspace @modular-component/core build",
-    "build:self": "tsc -p tsconfig.build.json",
+    "build:self": "tsc -p tsconfig.build.json && tsc --noEmit register",
     "license": "cp ../../LICENSE ./LICENSE"
   },
-  "dependencies": {
-    "@modular-component/core": "0.2.3"
-  },
   "peerDependencies": {
+    "@modular-component/core": "0.3.0",
     "react": ">=17 <19"
   },
   "devDependencies": {
+    "@modular-component/core": "*",
     "@types/react": "^18.0.17",
-    "typescript": "^5.2.2"
+    "typescript": "^5.9.3"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts"

package/register.d.ts

@@ -0,0 +1,14 @@
+import { ModularContext } from '@modular-component/core'
+import {
+  WithCondition,
+  WithConditionalFallback,
+  WithConditionalRender,
+} from '@modular-component/with-conditional-render'
+
+declare module '@modular-component/stages' {
+  export interface ModularComponentStages<Context extends ModularContext> {
+    withCondition: WithCondition<Context>
+    withConditionalFallback: WithConditionalFallback<Context>
+    withConditionalRender: WithConditionalRender<Context>
+  }
+}

package/register.js

@@ -0,0 +1,8 @@
+import { ModularComponent } from '@modular-component/core'
+import {
+  condition,
+  conditionalFallback,
+  conditionalRender,
+} from '@modular-component/with-conditional-render'
+
+ModularComponent.register({ condition, conditionalFallback, conditionalRender })

package/src/index.ts

@@ -1,42 +1,81 @@
-import React, { FunctionComponent } from 'react'
-import { ModularStage } from '@modular-component/core'
+import { FunctionComponent } from 'react'
+import {
+  addTo,
+  wrap,
+  ModularContext,
+  GetValueGetterFor,
+  StageParams,
+  StageReturn,
+} from '@modular-component/core/extend'
 
-export function condition<Args, Name extends string>(
-  name: Name,
-  useCondition: (args: Args) => boolean,
-): ModularStage<Name, (args: Args) => boolean> {
-  return { field: name, useStage: useCondition }
+type GetConditions<Context extends ModularContext> = {
+  [key in keyof Context['arguments']]: Context['arguments'][key] extends boolean
+    ? key extends string
+      ? key
+      : never
+    : never
+}[keyof Context['arguments']]
+
+export function condition<Context extends ModularContext, Field extends string>(
+  field: Field,
+  useCondition: GetValueGetterFor<Context, Field, boolean>,
+) {
+  return addTo<Context>().on(field).provide(wrap(useCondition))
 }
 
+export type WithCondition<Context extends ModularContext> = <
+  Field extends string,
+>(
+  ...args: StageParams<typeof condition<Context, Field>>
+) => StageReturn<typeof condition<Context, Field>>
+
 export function conditionalFallback<
-  Args extends { [key in Name]: boolean } & {
-    render?: ReturnType<FunctionComponent>
-  },
-  Name extends string,
+  Context extends ModularContext,
+  Condition extends GetConditions<Context>,
 >(
-  name: Name,
-  useRender: (args: Args) => ReturnType<FunctionComponent>,
-): ModularStage<`render-${Name}`, (args: Args) => void> {
-  return {
-    field: `render-${name}`,
-    useStage: (args: Args) => {
-      args.render = !args[name] || args.render ? args.render : useRender(args)
-    },
-  }
+  condition: Condition,
+  useRender: GetValueGetterFor<
+    Context,
+    `render-${Condition}`,
+    ReturnType<FunctionComponent>
+  >,
+) {
+  return addTo<Context>()
+    .on(`render-${condition}`)
+    .provide((args) => {
+      const _args = args as {
+        [condition]?: boolean
+        render?: ReturnType<FunctionComponent>
+      }
+      if (_args[condition] && !_args.render) {
+        _args.render = wrap(useRender)(args)
+      }
+      return !!_args[condition]
+    })
 }
 
-export function conditionalRender<Args, Ref>(
-  useRender: (
-    args: Args,
-    ref: React.ForwardedRef<Ref>,
-  ) => ReturnType<FunctionComponent>,
-): ModularStage<
-  'render',
-  (args: Args, ref: React.ForwardedRef<Ref>) => ReturnType<FunctionComponent>
-> {
-  return {
-    field: 'render',
-    useStage: (args: Args, ref: React.ForwardedRef<Ref>) =>
-      (args as any).render ?? useRender(args, ref),
-  }
+export type WithConditionalFallback<Context extends ModularContext> = <
+  Condition extends GetConditions<Context>,
+>(
+  ...args: StageParams<typeof conditionalFallback<Context, Condition>>
+) => StageReturn<typeof conditionalFallback<Context, Condition>>
+
+export function conditionalRender<Context extends ModularContext>(
+  useRender: GetValueGetterFor<
+    Context,
+    'render',
+    ReturnType<FunctionComponent>
+  >,
+) {
+  return addTo<Context>()
+    .on('render')
+    .provide(
+      (args): ReturnType<FunctionComponent> =>
+        (args as { render?: ReturnType<FunctionComponent> }).render ??
+        wrap(useRender)(args),
+    )
 }
+
+export type WithConditionalRender<Context extends ModularContext> = (
+  ...args: StageParams<typeof conditionalRender<Context>>
+) => StageReturn<typeof conditionalRender<Context>>