@modular-component/with-conditional-render 0.1.6 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @modular-component/with-conditional-render
 
+## 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
+
+- Updated dependencies [31f2966]
+  - @modular-component/core@0.1.7
+
 ## 0.1.6
 
 ### Patch Changes

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.6",
+  "version": "0.2.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -26,14 +26,14 @@
     "license": "cp ../../LICENSE ./LICENSE"
   },
   "dependencies": {
-    "@modular-component/core": "0.1.6"
+    "@modular-component/core": "0.2.0"
   },
   "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),
+  }
+}