@modular-component/with-conditional-render 0.1.7 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @modular-component/with-conditional-render
 
+## 0.2.1
+
+### Patch Changes
+
+- 09b9673: Update readmes
+- Updated dependencies [09b9673]
+  - @modular-component/core@0.2.1
+
+## 0.2.0
+
+### Minor Changes
+
+- 83d453f: Rework API for better TypeScript performance and improved DX
+
+### Patch Changes
+
+- Updated dependencies [83d453f]
+  - @modular-component/core@0.2.0
+
 ## 0.1.7
 
 ### Patch Changes

package/README.md

@@ -1,50 +1,85 @@
-# `@modular-component/with-conditional-render`
+# @modular-component/with-conditional-render
 
 Provides three stages that allow conditional rendering in `ModularComponent`s:
 
-- `withCondition` will set a `condition` argument to either `true` or `false`, based
+- `with(condition)` will set a customizable argument to either `true` or `false`, based
   on current arguments,
-- `withConditionalFallback` takes a `FunctionComponent` as parameter, and
-  renders it when the `condition` argument is set to `false`,
-- `withConditionalRender` also takes a `FunctionComponent` as parameter, and
-  renders it when the `condition` argument is _not_ set to `false`.
+- `with(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.
 
-`withCondition` and `withConditionalFallback` are multiple, so it's possible
-to chain multiple conditions with a different fallback for each. Subsequent calls
-to `withCondition` will take into account preceding conditions, so that `withConditionalRender`
-is only called when all conditions return `true`.
+## Usage
 
-## Installation and usage
+```tsx
+import { ModularComponent } from '@modular-component/core'
+import { condition, conditionalFallback, conditionalRender } from '@modular-component/with-conditional-render'
 
-```bash
-yarn add @modular-component/core @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(conditionalFallback('loading', () => <>I'm loading!</>))
+  .with(conditionalRender(({ 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
+
+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.
+
 ```tsx
-import { modularFactory } from '@modular-component/core'
-import { WithConditionalRender } from '@modular-component/with-conditional-render'
-
-const ModularComponent = modularFactory.extend(WithConditionalRender).build()
-
-const MyModularComponent = ModularComponent<{
-  isAuthenticated: boolean
-  isOwner: boolean
-}>()
-  .withCondition(({ props }) => props.isAuthenticated)
-  .withConditionalFallback(() => (
-    <div>You need to be authenticated to see this page</div>
-  ))
-  .withCondition(({ props }) => props.isOwner)
-  .withConditionalFallback(() => (
-    <div>You don't have enough permissions to see this page</div>
-  ))
-  .withConditionalRender(({ components }) => (
-    <>
-      <h1>Hello, Owner</h1>
-    </>
-  ))
-```
+import React, { FunctionComponent } from 'react'
+import { ModularStage } from '@modular-component/core'
 
-## Learn more
+export function condition<Args, Name extends string>(
+  name: Name,
+  useCondition: (args: Args) => boolean,
+): ModularStage<Name, (args: Args) => boolean> {
+  return { field: name, useStage: useCondition }
+}
 
-Read the [`ModularComponent` ReadMe](https://github.com/jvdsande/modular-component/blob/master/README.md) for more information about the `ModularComponent` system.
+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)
+    },
+  }
+}
+
+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),
+  }
+}
+```

package/dist/index.d.ts

@@ -1,47 +1,10 @@
-import { FunctionComponent } from 'react';
-declare const withCondition: unique symbol;
-declare const withConditionalFallback: unique symbol;
-declare const withConditionalRender: unique symbol;
-declare module '@modular-component/core' {
-    interface ModularStages<Args, Value> {
-        [withCondition]: {
-            restrict: (args: Args) => boolean;
-            transform: ReturnType<Value extends (args: Args) => boolean ? Value : never>;
-        };
-        [withConditionalFallback]: {
-            restrict: FunctionComponent<Args>;
-            transform: ReturnType<FunctionComponent<Args>> | null;
-        };
-        [withConditionalRender]: {
-            restrict: FunctionComponent<Args>;
-            transform: ReturnType<FunctionComponent<Args>> | null;
-        };
-    }
-}
-export declare const WithConditionalRender: {
-    readonly Condition: {
-        readonly symbol: typeof withCondition;
-        readonly field: "condition";
-        readonly transform: <A extends {
-            condition?: boolean | undefined;
-        }, C extends (args: A) => boolean>(args: A, useCondition: C) => boolean;
-    };
-    readonly ConditionalRender: {
-        readonly symbol: typeof withConditionalRender;
-        readonly field: "render";
-        readonly transform: <A_1 extends {
-            condition?: boolean | undefined;
-            render?: import("react").ReactElement<any, any> | null | undefined;
-        }, P extends FunctionComponent<A_1>>(args: A_1, useRender: P) => import("react").ReactElement<any, any> | null | undefined;
-    };
-    readonly ConditionalFallback: {
-        readonly symbol: typeof withConditionalFallback;
-        readonly field: "render";
-        readonly transform: <A_2 extends {
-            condition?: boolean | undefined;
-            render?: import("react").ReactElement<any, any> | null | undefined;
-        }, P_1 extends FunctionComponent<A_2>>(args: A_2, useRender: P_1) => import("react").ReactElement<any, any> | null | undefined;
-    };
-};
-export {};
+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>>;
 //# 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":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,QAAA,MAAM,aAAa,eAAW,CAAA;AAC9B,QAAA,MAAM,uBAAuB,eAAW,CAAA;AACxC,QAAA,MAAM,qBAAqB,eAAW,CAAA;AAEtC,OAAO,QAAQ,yBAAyB,CAAC;IACvC,UAAiB,aAAa,CAAC,IAAI,EAAE,KAAK;QACxC,CAAC,aAAa,CAAC,EAAE;YACf,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;YACjC,SAAS,EAAE,UAAU,CACnB,KAAK,SAAS,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GAAG,KAAK,GAAG,KAAK,CACtD,CAAA;SACF,CAAA;QACD,CAAC,uBAAuB,CAAC,EAAE;YACzB,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;YACjC,SAAS,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAA;SACtD,CAAA;QACD,CAAC,qBAAqB,CAAC,EAAE;YACvB,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;YACjC,SAAS,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAA;SACtD,CAAA;KACF;CACF;AAED,eAAO,MAAM,qBAAqB;;;;;;kCAML,OAAO;;;;;;;;;;;;;;;;;;CAwCzB,CAAA"}
+{"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"}

package/dist/index.js

@@ -1,32 +1,18 @@
-import { createMethodRecord } from '@modular-component/core';
-const withCondition = Symbol();
-const withConditionalFallback = Symbol();
-const withConditionalRender = Symbol();
-export const WithConditionalRender = createMethodRecord({
-    Condition: {
-        symbol: withCondition,
-        field: 'condition',
-        transform: (args, useCondition) => args.condition !== false && useCondition(args),
-    },
-    ConditionalRender: {
-        symbol: withConditionalRender,
-        field: 'render',
-        transform: (args, useRender) => {
-            if (args.condition === false) {
-                return args.render;
-            }
-            return useRender(args);
+export function condition(name, useCondition) {
+    return { field: name, useStage: useCondition };
+}
+export function conditionalFallback(name, useRender) {
+    return {
+        field: `render-${name}`,
+        useStage: (args) => {
+            args.render = !args[name] || args.render ? args.render : useRender(args);
         },
-    },
-    ConditionalFallback: {
-        symbol: withConditionalFallback,
+    };
+}
+export function conditionalRender(useRender) {
+    return {
         field: 'render',
-        transform: (args, useRender) => {
-            if (args.condition !== false || args.render) {
-                return args.render;
-            }
-            return useRender(args);
-        },
-    },
-});
+        useStage: (args, ref) => args.render ?? useRender(args, ref),
+    };
+}
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAI5D,MAAM,aAAa,GAAG,MAAM,EAAE,CAAA;AAC9B,MAAM,uBAAuB,GAAG,MAAM,EAAE,CAAA;AACxC,MAAM,qBAAqB,GAAG,MAAM,EAAE,CAAA;AAqBtC,MAAM,CAAC,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;IACtD,SAAS,EAAE;QACT,MAAM,EAAE,aAAa;QACrB,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE,CAIT,IAAO,EACP,YAAe,EACf,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,KAAK,IAAI,YAAY,CAAC,IAAI,CAAC;KACpD;IACD,iBAAiB,EAAE;QACjB,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,QAAQ;QACf,SAAS,EAAE,CAIT,IAAO,EACP,SAAY,EACZ,EAAE;YACF,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE;gBAC5B,OAAO,IAAI,CAAC,MAAM,CAAA;aACnB;YAED,OAAO,SAAS,CAAC,IAAI,CAAC,CAAA;QACxB,CAAC;KACF;IACD,mBAAmB,EAAE;QACnB,MAAM,EAAE,uBAAuB;QAC/B,KAAK,EAAE,QAAQ;QACf,SAAS,EAAE,CAIT,IAAO,EACP,SAAY,EACZ,EAAE;YACF,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE;gBAC3C,OAAO,IAAI,CAAC,MAAM,CAAA;aACnB;YAED,OAAO,SAAS,CAAC,IAAI,CAAC,CAAA;QACxB,CAAC;KACF;CACO,CAAC,CAAA"}
+{"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"}

package/package.json

@@ -8,7 +8,7 @@
     "Default",
     "Conditional"
   ],
-  "version": "0.1.7",
+  "version": "0.2.1",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -26,14 +26,14 @@
     "license": "cp ../../LICENSE ./LICENSE"
   },
   "dependencies": {
-    "@modular-component/core": "0.1.7"
+    "@modular-component/core": "0.2.1"
   },
   "peerDependencies": {
     "react": ">=17 <19"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",
-    "typescript": "^4.6.4"
+    "typescript": "^5.2.2"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts"

package/src/index.ts

@@ -1,74 +1,42 @@
-import { createMethodRecord } from '@modular-component/core'
+import React, { FunctionComponent } from 'react'
+import { ModularStage } from '@modular-component/core'
 
-import { FunctionComponent } from 'react'
-
-const withCondition = Symbol()
-const withConditionalFallback = Symbol()
-const withConditionalRender = Symbol()
-
-declare module '@modular-component/core' {
-  export interface ModularStages<Args, Value> {
-    [withCondition]: {
-      restrict: (args: Args) => boolean
-      transform: ReturnType<
-        Value extends (args: Args) => boolean ? Value : never
-      >
-    }
-    [withConditionalFallback]: {
-      restrict: FunctionComponent<Args>
-      transform: ReturnType<FunctionComponent<Args>> | null
-    }
-    [withConditionalRender]: {
-      restrict: FunctionComponent<Args>
-      transform: ReturnType<FunctionComponent<Args>> | null
-    }
-  }
+export function condition<Args, Name extends string>(
+  name: Name,
+  useCondition: (args: Args) => boolean,
+): ModularStage<Name, (args: Args) => boolean> {
+  return { field: name, useStage: useCondition }
 }
 
-export const WithConditionalRender = createMethodRecord({
-  Condition: {
-    symbol: withCondition,
-    field: 'condition',
-    transform: <
-      A extends { condition?: boolean },
-      C extends (args: A) => boolean,
-    >(
-      args: A,
-      useCondition: C,
-    ) => args.condition !== false && useCondition(args),
+export function conditionalFallback<
+  Args extends { [key in Name]: boolean } & {
+    render?: ReturnType<FunctionComponent>
   },
-  ConditionalRender: {
-    symbol: withConditionalRender,
-    field: 'render',
-    transform: <
-      A extends { condition?: boolean; render?: ReturnType<FunctionComponent> },
-      P extends FunctionComponent<A>,
-    >(
-      args: A,
-      useRender: P,
-    ) => {
-      if (args.condition === false) {
-        return args.render
-      }
-
-      return useRender(args)
+  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)
     },
-  },
-  ConditionalFallback: {
-    symbol: withConditionalFallback,
-    field: 'render',
-    transform: <
-      A extends { condition?: boolean; render?: ReturnType<FunctionComponent> },
-      P extends FunctionComponent<A>,
-    >(
-      args: A,
-      useRender: P,
-    ) => {
-      if (args.condition !== false || args.render) {
-        return args.render
-      }
+  }
+}
 
-      return useRender(args)
-    },
-  },
-} as const)
+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),
+  }
+}